Update frontend build process and deps

build/buildHtmlTemplate.js

@@ -0,0 +1,44 @@
+import fs from 'fs'
+import path from 'path'
+
+const makeHtmlAttributes = (attributes) => {
+  if (!attributes) {
+    return ''
+  }
+
+  const keys = Object.keys(attributes)
+  // eslint-disable-next-line no-param-reassign
+  return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), '')
+}
+
+export const template = async ({
+  attributes,
+  files,
+  meta,
+  publicPath,
+  title
+}) => {
+  const scripts = (files.js || [])
+    .map(({ fileName }) => {
+      const attrs = makeHtmlAttributes(attributes.script)
+      return `<script src="${publicPath}${fileName}"${attrs}></script>`
+    })
+    .join('\n')
+
+  const links = (files.css || [])
+    .map(({ fileName }) => {
+      const attrs = makeHtmlAttributes(attributes.link)
+      return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`
+    })
+    .join('\n')
+
+  const metas = meta
+    .map((input) => {
+      const attrs = makeHtmlAttributes(input)
+      return `<meta${attrs}>`
+    })
+    .join('\n')
+
+  const htmlFile = fs.readFileSync(path.resolve(__dirname, '../web/public/index.html'), 'utf8')
+  return htmlFile.replace('${title}', title).replace('${metas}', metas).replace('${links}', links).replace('${scripts}', scripts)
+}

build/rollup.config.js

@@ -1,67 +1,73 @@
 import svelte from 'rollup-plugin-svelte'
-import resolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
 import livereload from 'rollup-plugin-livereload'
 import { terser } from 'rollup-plugin-terser'
 import copy from 'rollup-plugin-copy'
 import del from 'rollup-plugin-delete'
+import sveltePreprocess from 'svelte-preprocess'
+import html from '@rollup/plugin-html'
+import { template } from './buildHtmlTemplate.js'
 import postcss from 'rollup-plugin-postcss'
-import autoPreprocess from 'svelte-preprocess'
-import html from 'rollup-plugin-bundle-html'
+import postcssNesting from 'postcss-nesting'
 
 const production = !process.env.ROLLUP_WATCH
 
 export default {
     input: 'web/src/main.js',
     output: {
         sourcemap: false,
-        format: 'iife',
-        name: 'app',
-        file: `dist/static/bundle.[hash].js`,
+        name: 'gddu',
+        format: 'esm',
+        dir: `dist/static/`,
+        entryFileNames: '[name]-[hash].js',
+        chunkFileNames: '[name].[hash].js',
+        assetFileNames: '[name].[hash].[extension]'
     },
     plugins: [
         del({ targets: 'dist/*' }),
         svelte({
-            preprocess: autoPreprocess({
+            preprocess: sveltePreprocess({
+                sourceMap: !production,
                 postcss: {
-                    configFilePath: 'build/postcss.config.js'
-                }
+                    plugins: [
+                        require('postcss-import'),
+                        require('tailwindcss/nesting'),
+                        require('tailwindcss'),
+                        require('autoprefixer')
+                    ],
+                },
             }),
-            // enable run-time checks when not in production
-            dev: !production,
-            // we'll extract any component CSS out into
-            // a separate file — better for performance
-            css: css => {
-                css.write(`dist/static/bundle.[hash].css`, false)
-            },
         }),
         postcss({
-            extract: `dist/static/tailwind.[hash].css`,
-            config: {
-                path: 'build/postcss.config.js'
-            }
+            plugins: [postcssNesting(), (production && require('cssnano'))],
+            extract: true
         }),
         // If you have external dependencies installed from
         // npm, you'll most likely need these plugins. In
         // some cases you'll need additional configuration —
         // consult the documentation for details:
         // https://github.com/rollup/rollup-plugin-commonjs
-        resolve(),
+        resolve({ browser: true, dedupe: ['svelte'] }),
         commonjs(),
 
         html({
-            template: 'web/public/index.html',
-            dest: 'dist',
-            filename: 'index.html',
-            absolute: true,
-            onlinePath: "{{.AppConfig.PathPrefix}}/static"
+            title: 'Google Domains DDNS Updater',
+            publicPath: '/static/',
+            template
         }),
 
         copy({
-            targets: {
-                'web/public/img': 'dist/img',
-                'web/public/lang': 'dist/lang',
-            },
+            targets: [
+                {
+                    src: 'web/public/img',
+                    dest: 'dist'
+                },
+                {
+                    src: 'web/public/lang',
+                    dest: 'dist',
+                }
+            ]
         }),
 
         // Watch the `dist` directory and refresh the

handlers.go

@@ -15,7 +15,7 @@ import (
 // get the index template from embedded filesystem
 func (s *server) getIndexTemplate(FSS fs.FS) *template.Template {
 	// get the html template from dist, have it ready for requests
-	tmplContent, ioErr := fs.ReadFile(FSS, "index.html")
+	tmplContent, ioErr := fs.ReadFile(FSS, "static/index.html")
 	if ioErr != nil {
 		log.Println("Error opening index template")
 		if !embedUseOS {