Skip to content

vite auto-refresh #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
manzt wants to merge 8 commits into from
Closed

vite auto-refresh #66

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77a43a2
add dev plugin to inject vite client
manzt Jul 13, 2021
2265432
extend virtual html template plugin
manzt Jul 13, 2021
5472373
Add preview script
manzt Jul 13, 2021
08591f4
break up plugins
manzt Jul 13, 2021
3d1cac8
break up plugins
manzt Jul 13, 2021
78e84a2
handle HMR for index.html
manzt Jul 14, 2021
c82cb27
fix typo
manzt Jul 14, 2021
89fd051
Merge branch 'master' into auto-refresh
flekschas Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Copy Markdown
Collaborator Author

@manzt manzt Jul 13, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

vite build && vite preview lets you view a production version of the site locally.

"test": "rollup -c ./rollup.test.config.js | tape-run --render='tap-spec'",
"watch": "rollup -cw"
},
Expand Down
1 change: 1 addition & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

<html lang="en">
<head>
<%= vite %>
<meta charset="utf-8" />

<title>Regl Scatterplot</title>
Expand Down
87 changes: 58 additions & 29 deletions vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,67 @@
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` },
])
);
/** @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
* 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.
*/
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 {
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 defineConfig({
base: './',
plugins: [virtualHtmlTemplate({ pages })],
build: {
outDir: 'docs',
rollupOptions: {
input: Object.fromEntries(
chunks.map((chunk) => [chunk, `${chunk}.html`])
),
},
},
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: {
/**
Expand Down