diff --git a/package.json b/package.json index d1a57d7..97a2bb9 100644 --- a/package.json +++ b/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" }, diff --git a/public/index.html b/public/index.html index 15d28a7..0e742bf 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ + <%= vite %> Regl Scatterplot diff --git a/vite.config.js b/vite.config.js index 7e17d70..d0ea105 100644 --- a/vite.config.js +++ b/vite.config.js @@ -16,29 +16,35 @@ const chunks = [ 'multiple-instances', ]; -const pages = Object.fromEntries( - chunks.map((chunk) => [ - chunk, - { template: 'public/index.html', entry: `example/${chunk}.js` }, - ]) -); +const chunkMapping = (fn) => Object.fromEntries(chunks.map((c) => [c, fn(c)])); -const manualChunks = (id) => { - if (id.includes('node_modules')) { - if (id.includes('apache-arrow')) { - return 'apache-arrow'; - } - if (id.includes('d3')) { - return 'd3'; - } - return 'vendor'; - } - return undefined; -}; +/** + * `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 render the HTML, so a `<%= vite %>` + * tag is replaced with the missing vite client during dev. In prod, nothing is + * added. + */ +const viteModule = ''; -export default defineConfig({ +export default ({ command }) => defineConfig({ base: './', - plugins: [virtualHtmlTemplate({ pages })], + plugins: [ + virtualHtmlTemplate({ + pages: chunkMapping((c) => ({ entry: `example/${c}.js` })), + data: { vite: command === 'build' ? '' : viteModule }, + }), + { + name: 'simple-reload-template', + handleHotUpdate({ file, server }) { + if (file.includes('index.html')) { + server.ws.send({ type: 'full-reload' }); + } + }, + }, + ], build: { outDir: 'docs', rollupOptions: { @@ -47,15 +53,14 @@ export default defineConfig({ ), output: { manualChunks }, }, - }, - 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', + }, }, - }, -}); + });