extend virtual html template plugin

manzt · manzt · commit 51f4e28b1be1 · 2021-07-13T16:28:25.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 
 <html lang="en">
   <head>
+    <%= vite %>
     <meta charset="utf-8" />
 
     <title>Regl Scatterplot</title>
diff --git a/vite.config.js b/vite.config.js
@@ -15,47 +15,51 @@ const chunks = [
   'two-instances',
 ];
 
-const pages = Object.fromEntries(
-  chunks.map((chunk) => [
-    chunk,
-    { template: 'public/index.html', entry: `example/${chunk}.js` },
-  ])
-);
+const htmlPlugin = (isDev) => {
+  /**
+   * `vite-plugin-virtual-html-template` intercepts & handles requests for html
+   * from the client. Vite normally handles these requests and injects a script
+   * tag during dev (with a client runtime for HMR).
+   *
+   * The plugin uses `lodash.template` to runder the HTML, so a `<%= vite %>`
+   * tag is replaced with the missing vite client during dev. In prod, nothing is
+   * added.
+   */
+  const vite = isDev
+    ? '<script type="module" src="/@vite/client"></script>'
+    : '';
+  const pages = Object.fromEntries(
+    chunks.map((c) => [c, { entry: `example/${c}.js` }])
+  );
+  return {
+    ...virtualHtmlTemplate({ pages, data: { vite } }),
+    handleHotUpdate({ server }) {
+      // force auto-reload for changes
+      server.ws.send({ type: 'full-reload' });
+    },
+  };
+};
 
-export default defineConfig({
-  base: './',
-  plugins: [
-    virtualHtmlTemplate({ pages }),
-    {
-      name: 'inject-vite-client',
-      apply: 'serve', // only for dev server
-      transform(code, id) {
-        if (id.includes('example')) {
-          return `import "/@vite/client";\n${code}`;
-        }
-        return null;
-      },
-      handleHotUpdate({ server }) {
-        server.ws.send({ type: 'full-reload' });
+export default ({ command }) =>
+  defineConfig({
+    base: './',
+    plugins: [htmlPlugin(command === 'serve')],
+    build: {
+      outDir: 'docs',
+      rollupOptions: {
+        input: Object.fromEntries(
+          chunks.map((chunk) => [chunk, `${chunk}.html`])
+        ),
       },
     },
-  ],
-  build: {
-    outDir: 'docs',
-    rollupOptions: {
-      input: Object.fromEntries(
-        chunks.map((chunk) => [chunk, `${chunk}.html`])
-      ),
-    },
-  },
-  resolve: {
-    alias: {
-      /**
-       * vite pre-bundling (esbuild) can't be configured to
-       * resolve .fs/.vs in regl-line. This alias forces
-       * resolution with rollup, which avoids this error.
-       */
-      'regl-line': '/node_modules/regl-line/src/index.js',
+    resolve: {
+      alias: {
+        /**
+         * vite pre-bundling (esbuild) can't be configured to
+         * resolve .fs/.vs in regl-line. This alias forces
+         * resolution with rollup, which avoids this error.
+         */
+        'regl-line': '/node_modules/regl-line/src/index.js',
+      },
     },
-  },
-});
+  });
