Add preview script

Author: manzt

package.json

@@ -28,6 +28,7 @@
     "prerelease": "rm -rf dist/*; npm run build; zip -r dist.zip dist",
     "pretest": "npm run lint",
     "start": "vite",
+    "preview": "vite preview",
     "test": "rollup -c ./rollup.test.config.js | tape-run --render='tap-spec'",
     "watch": "rollup -cw"
   },

vite.config.js

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite';
 import virtualHtmlTemplate from 'vite-plugin-virtual-html-template';
 
-const htmlPlugin = ({ chunks, isDev }) => {
+/** @returns {import('vite').Plugin} */
+const htmlPlugin = ({ chunks }) => {
   /**
    * `vite-plugin-virtual-html-template` intercepts & handles requests for html
    * from the client. Vite normally handles these requests and injects a script
@@ -11,59 +12,64 @@ const htmlPlugin = ({ chunks, isDev }) => {
    * 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` }])
-  );
+  let plugin;
+  const init = (isDev) => {
+    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 } });
+  };
   return {
-    ...virtualHtmlTemplate({ pages, data: { vite } }),
-    handleHotUpdate({ server }) {
-      // force auto-reload for changes
-      server.ws.send({ type: 'full-reload' });
-    },
-    config(config) {
-      if (!isDev) {
+    config(config, { command }) {
+      if (command === 'build') {
         config.build.rollupOptions = {
           ...config.build.rollupOptions,
           input: Object.fromEntries(chunks.map((c) => [c, `${c}.html`])),
         };
       }
+      plugin = init(command === 'serve');
+    },
+    handleHotUpdate({ server }) {
+      // force auto refresh
+      server.ws.send({ type: 'full-reload' });
     },
+    configureServer: (server) => plugin.configureServer(server),
+    resolveId: (id) => plugin.resolveId(id),
+    load: (id) => plugin.load(id),
   };
 };
 
-export default ({ command }) =>
-  defineConfig({
-    base: './',
-    plugins: [
-      htmlPlugin({
-        chunks: [
-          'index',
-          'axes',
-          'connected-points-by-segments',
-          'connected-points',
-          'dynamic-opacity',
-          'embedded',
-          'performance-mode',
-          'size-encoding',
-          'texture-background',
-          'transition',
-          'two-instances',
-        ],
-        isDev: command === 'serve',
-      }),
-    ],
-    build: { outDir: 'docs' },
-    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',
-      },
+export default defineConfig({
+  base: './',
+  plugins: [
+    htmlPlugin({
+      chunks: [
+        'index',
+        'axes',
+        'connected-points-by-segments',
+        'connected-points',
+        'dynamic-opacity',
+        'embedded',
+        'performance-mode',
+        'size-encoding',
+        'texture-background',
+        'transition',
+        'two-instances',
+      ],
+    }),
+  ],
+  build: { outDir: 'docs' },
+  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',
     },
-  });
+  },
+});