From 77a43a2b3e1c55f3d225b4558cd322953c286419 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Tue, 13 Jul 2021 12:57:38 -0400 Subject: [PATCH 1/7] add dev plugin to inject vite client --- vite.config.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 6ef1306..2d3bd36 100644 --- a/vite.config.js +++ b/vite.config.js @@ -24,7 +24,22 @@ const pages = Object.fromEntries( export default defineConfig({ base: './', - plugins: [virtualHtmlTemplate({ pages })], + 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' }); + }, + }, + ], build: { outDir: 'docs', rollupOptions: { From 2265432282f2f2e83cc95b926ab19bb746b4d771 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Tue, 13 Jul 2021 16:28:25 -0400 Subject: [PATCH 2/7] extend virtual html template plugin --- public/index.html | 1 + vite.config.js | 118 +++++++++++++++++++++++++--------------------- 2 files changed, 64 insertions(+), 55 deletions(-) diff --git a/public/index.html b/public/index.html index 35e9b00..5fc1f38 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 2d3bd36..632ee96 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,61 +1,69 @@ import { defineConfig } from 'vite'; import virtualHtmlTemplate from 'vite-plugin-virtual-html-template'; -const chunks = [ - 'index', - 'axes', - 'connected-points-by-segments', - 'connected-points', - 'dynamic-opacity', - 'embedded', - 'performance-mode', - 'size-encoding', - 'texture-background', - 'transition', - 'two-instances', -]; - -const pages = Object.fromEntries( - chunks.map((chunk) => [ - chunk, - { template: 'public/index.html', entry: `example/${chunk}.js` }, - ]) -); - -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' }); - }, +const htmlPlugin = ({ chunks, 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 + ? '' + : ''; + 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' }); }, - ], - build: { - outDir: 'docs', - rollupOptions: { - input: Object.fromEntries( - chunks.map((chunk) => [chunk, `${chunk}.html`]) - ), + config(config) { + if (!isDev) { + config.build.rollupOptions = { + ...config.build.rollupOptions, + input: Object.fromEntries(chunks.map((c) => [c, `${c}.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', + }; +}; + +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', + }, }, - }, -}); + }); From 5472373be1b5a4474555c9cef326c88b213ec459 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Tue, 13 Jul 2021 16:47:48 -0400 Subject: [PATCH 3/7] Add preview script --- package.json | 1 + vite.config.js | 98 ++++++++++++++++++++++++++------------------------ 2 files changed, 53 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 1e5c8e0..33a9d09 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/vite.config.js b/vite.config.js index 632ee96..8269b0e 100644 --- a/vite.config.js +++ b/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 - ? '' - : ''; - const pages = Object.fromEntries( - chunks.map((c) => [c, { entry: `example/${c}.js` }]) - ); + let plugin; + const init = (isDev) => { + const vite = isDev + ? '' + : ''; + 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', }, - }); + }, +}); From 08591f4666054079872759cb852b071b67cca221 Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Tue, 13 Jul 2021 17:23:19 -0400 Subject: [PATCH 4/7] break up plugins --- vite.config.js | 83 ++++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 46 deletions(-) diff --git a/vite.config.js b/vite.config.js index 8269b0e..e053f98 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,8 +1,23 @@ import { defineConfig } from 'vite'; import virtualHtmlTemplate from 'vite-plugin-virtual-html-template'; + +const chunks = [ + 'index', + 'axes', + 'connected-points-by-segments', + 'connected-points', + 'dynamic-opacity', + 'embedded', + 'performance-mode', + 'size-encoding', + 'texture-background', + 'transition', + 'two-instances', +]; + /** @returns {import('vite').Plugin} */ -const htmlPlugin = ({ chunks }) => { +const htmlPlugin = ({ chunks, isDev }) => { /** * `vite-plugin-virtual-html-template` intercepts & handles requests for html * from the client. Vite normally handles these requests and injects a script @@ -12,56 +27,32 @@ const htmlPlugin = ({ chunks }) => { * tag is replaced with the missing vite client during dev. In prod, nothing is * added. */ - let plugin; - const init = (isDev) => { - const vite = isDev - ? '' - : ''; - const pages = Object.fromEntries( - chunks.map((c) => [c, { entry: `example/${c}.js` }]) - ); - return virtualHtmlTemplate({ pages, data: { vite } }); - }; - return { - 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), - }; + const vite = isDev + ? '' + : ''; + const pages = Object.fromEntries( + chunks.map((c) => [c, { entry: `example/${c}.js` }]) + ); + return virtualHtmlTemplate({ pages, data: { vite } }); }; -export default defineConfig({ +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', - ], - }), + htmlPlugin({ chunks, isDev: command === 'serve' }), + { + name: 'simple-reload', + handleHotUpdate({ server }) { + server.ws.send({ type: 'full-reload' }); + } + } ], - build: { outDir: 'docs' }, + build: { + outDir: 'docs', + rollupOptions: { + input: Object.fromEntries(chunks.map((c) => [c, `${c}.html`])), + } + }, resolve: { alias: { /** From 3d1cac83b83855a82a0c9f089abdc7ca850468ea Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Tue, 13 Jul 2021 17:24:17 -0400 Subject: [PATCH 5/7] break up plugins --- vite.config.js | 58 +++++++++++++++++++++++++------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/vite.config.js b/vite.config.js index e053f98..76fde8f 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,6 @@ import { defineConfig } from 'vite'; import virtualHtmlTemplate from 'vite-plugin-virtual-html-template'; - const chunks = [ 'index', 'axes', @@ -17,7 +16,7 @@ const chunks = [ ]; /** @returns {import('vite').Plugin} */ -const htmlPlugin = ({ chunks, isDev }) => { +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 @@ -36,31 +35,32 @@ const htmlPlugin = ({ chunks, isDev }) => { return virtualHtmlTemplate({ pages, data: { vite } }); }; -export default ({ command }) => defineConfig({ - base: './', - plugins: [ - htmlPlugin({ chunks, isDev: command === 'serve' }), - { - name: 'simple-reload', - handleHotUpdate({ server }) { - server.ws.send({ type: 'full-reload' }); - } - } - ], - build: { - outDir: 'docs', - rollupOptions: { - input: Object.fromEntries(chunks.map((c) => [c, `${c}.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', +export default ({ command }) => + defineConfig({ + base: './', + plugins: [ + htmlPlugin({ isDev: command === 'serve' }), + { + name: 'simple-reload', + handleHotUpdate({ server }) { + server.ws.send({ type: 'full-reload' }); + }, + }, + ], + build: { + outDir: 'docs', + rollupOptions: { + input: Object.fromEntries(chunks.map((c) => [c, `${c}.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', + }, }, - }, -}); + }); From 78e84a29020d59efc052dcc309d1b2f40593d60a Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Wed, 14 Jul 2021 12:35:57 -0400 Subject: [PATCH 6/7] handle HMR for index.html --- vite.config.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/vite.config.js b/vite.config.js index 76fde8f..609c3ae 100644 --- a/vite.config.js +++ b/vite.config.js @@ -15,6 +15,8 @@ const chunks = [ 'two-instances', ]; +const mapObject = (arr, fn) => Object.fromEntries(arr.map(d => [d, fn(d)])) + /** @returns {import('vite').Plugin} */ const htmlPlugin = ({ isDev }) => { /** @@ -29,9 +31,7 @@ const htmlPlugin = ({ isDev }) => { const vite = isDev ? '' : ''; - const pages = Object.fromEntries( - chunks.map((c) => [c, { entry: `example/${c}.js` }]) - ); + const pages = mapObject(chunks, (c) => ({ entry: `example/${c}.js`})); return virtualHtmlTemplate({ pages, data: { vite } }); }; @@ -41,16 +41,18 @@ export default ({ command }) => plugins: [ htmlPlugin({ isDev: command === 'serve' }), { - name: 'simple-reload', - handleHotUpdate({ server }) { - server.ws.send({ type: 'full-reload' }); - }, - }, + name: 'simple-reload-template', + handleHotUpdate({ file, server }) { + if (file.includes('index.html')) { + server.ws.send({ type: 'full-reload' }); + } + } + } ], build: { outDir: 'docs', rollupOptions: { - input: Object.fromEntries(chunks.map((c) => [c, `${c}.html`])), + input: mapObject(chunks, (c) => `${c}.html`), }, }, resolve: { From c82cb27a2a64a5db3716e9dfba7eb494111840ec Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Wed, 14 Jul 2021 13:23:47 -0400 Subject: [PATCH 7/7] fix typo --- vite.config.js | 40 ++++++++++++++++++---------------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/vite.config.js b/vite.config.js index 609c3ae..52b37fe 100644 --- a/vite.config.js +++ b/vite.config.js @@ -15,44 +15,40 @@ const chunks = [ 'two-instances', ]; -const mapObject = (arr, fn) => Object.fromEntries(arr.map(d => [d, fn(d)])) +const chunkMapping = (fn) => Object.fromEntries(chunks.map((c) => [c, fn(c)])); -/** @returns {import('vite').Plugin} */ -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 - ? '' - : ''; - const pages = mapObject(chunks, (c) => ({ entry: `example/${c}.js`})); - return virtualHtmlTemplate({ pages, data: { vite } }); -}; +/** + * `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 ({ command }) => defineConfig({ base: './', plugins: [ - htmlPlugin({ isDev: command === 'serve' }), + 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: { - input: mapObject(chunks, (c) => `${c}.html`), + input: chunkMapping((c) => `${c}.html`), }, }, resolve: {