Skip to content

Commit 8dcc236

Browse files
manztflekschas
manzt
and
flekschas
authored
Replace webpack with vite (#64)
* Add snowpack, update build * remove webpack * remove babel-loader * import version via import.meta.env * Add .js extensions for .fs & .vs * define public url * Add file watcher for template.html * export rollup plugin * don't build extra entrypoint * add public url for favicon * Rename shaders * Replace snowpack with vite * import version with package.json * Alias regl-line resolution * Disable file watcher for build * Remove alias * Add comment * update linting * build all pages * build relative * fix build * Add comment * bind this * just use a plugin ... * Update * revert prettier Co-authored-by: Fritz Lekschas <code@lekschas.de>
1 parent 9f7f255 commit 8dcc236

8 files changed

Lines changed: 412 additions & 7072 deletions

File tree

‎example/size-encoding.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ const scatterplot = createScatterplot({
5656
showReticle,
5757
reticleColor,
5858
lassoInitiator: true,
59-
lassoInitiator: true,
6059
});
6160

6261
exportEl.addEventListener('click', () => saveAsPng(scatterplot));

‎package-lock.json‎

Lines changed: 352 additions & 6957 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
"scripts": {
2121
"build": "npm run build-library; npm run build-demo",
2222
"build-library": "rm -rf dist/*; rollup -c; cp src/types.d.ts dist/; tsc dist/*.esm.js --allowJs --declaration --emitDeclarationOnly",
23-
"build-demo": "webpack --config ./webpack.config.js --mode production",
24-
"deploy": "npm run build-demo; touch docs/.nojekyll; cp example/favicon.png docs/favicon.png; gh-pages -d docs -t --git git",
25-
"lint": "eslint src tests rollup.config.js webpack.config.js",
23+
"build-demo": "vite build",
24+
"deploy": "npm run build-demo; touch docs/.nojekyll; gh-pages -d docs -t --git git",
25+
"lint": "eslint src tests rollup.config.js vite.config.js",
2626
"precommit": "NODE_ENV=production lint-staged; npm run test",
2727
"prepublishOnly": "npm run test; rm -rf dist/*; npm run build;",
2828
"prerelease": "rm -rf dist/*; npm run build; zip -r dist.zip dist",
2929
"pretest": "npm run lint",
30-
"start": "webpack-dev-server --config ./webpack.config.js --mode development --open",
30+
"start": "vite",
3131
"test": "rollup -c ./rollup.test.config.js | tape-run --render='tap-spec'",
3232
"watch": "rollup -cw"
3333
},
@@ -55,8 +55,6 @@
5555
"@rollup/plugin-json": "^4.1.0",
5656
"@rollup/plugin-node-resolve": "^13.0.0",
5757
"acorn": "^8.4.1",
58-
"babel-loader": "^8.2.2",
59-
"babel-plugin-lodash": "^3.3.4",
6058
"browser-env": "^3.3.0",
6159
"d3-axis": "^3.0.0",
6260
"d3-random": "^3.0.1",
@@ -73,7 +71,6 @@
7371
"esm": "^3.2.25",
7472
"gh-pages": "^3.2.3",
7573
"gl": "^4.9.0",
76-
"html-webpack-plugin": "^4.3.0",
7774
"husky": "^4.3.8",
7875
"lint-staged": "^10.5.4",
7976
"merge": ">=1.2.1",
@@ -87,10 +84,8 @@
8784
"tap-spec": "^5.0.0",
8885
"tape-run": "^9.0.0",
8986
"typescript": "^4.3.5",
90-
"webpack": "^4.43.0",
91-
"webpack-cli": "^3.3.11",
92-
"webpack-dev-server": "^3.11.0",
93-
"webpack-tape-run": "0.0.7",
87+
"vite": "^2.4.1",
88+
"vite-plugin-virtual-html-template": "^1.0.8",
9489
"zora": "^4.1.0"
9590
},
9691
"homepage": "https://github.com/flekschas/regl-scatterplot",

example/favicon.png renamed to public/favicon.png

File renamed without changes.

example/index.html renamed to public/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
/>
1212
<meta name="author" content="Fritz Lekschas" />
1313

14-
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
14+
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
1515

1616
<style type="text/css">
1717
html,
@@ -89,7 +89,7 @@
8989
outline-offset: -1px;
9090
}
9191

92-
input[type=range]:focus::-moz-range-track {
92+
input[type='range']:focus::-moz-range-track {
9393
background: #444;
9494
}
9595

@@ -341,7 +341,7 @@
341341
}
342342

343343
#examples li a.active {
344-
color: #34BBFF;
344+
color: #34bbff;
345345
font-weight: bold;
346346
text-decoration: none;
347347
}
@@ -482,7 +482,7 @@ <h1 id="title">Regl Scatterplot</h1>
482482
<li>
483483
<a
484484
id="example-connected-points-by-segment"
485-
href="connected-points-by-segment.html"
485+
href="connected-points-by-segments.html"
486486
>Point Connections<br /><span class="smaller"
487487
>(encoded by line segment)</span
488488
></a

‎rollup.config.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import babel from 'rollup-plugin-babel';
2-
import commonjs from '@rollup/plugin-commonjs';
32
import filesize from 'rollup-plugin-filesize';
4-
import json from '@rollup/plugin-json';
53
import resolve from '@rollup/plugin-node-resolve';
64
import { terser } from 'rollup-plugin-terser';
75
import visualizer from 'rollup-plugin-visualizer';
6+
import json from '@rollup/plugin-json';
87

9-
const basePlugins = [
8+
const basePlugins = () => [
9+
json(),
1010
resolve({
1111
dedupe: ['gl-matrix'],
1212
mainFields: ['module', 'main'],
1313
}),
14-
commonjs({ sourceMap: false }),
15-
json(),
1614
];
1715

1816
const configurator = (file, format, plugins = []) => ({
@@ -26,7 +24,7 @@ const configurator = (file, format, plugins = []) => ({
2624
regl: 'createREGL',
2725
},
2826
},
29-
plugins: [...basePlugins, ...plugins],
27+
plugins: [...basePlugins(), ...plugins],
3028
external: ['pub-sub-es', 'regl'],
3129
});
3230

‎vite.config.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { defineConfig } from 'vite';
2+
import virtualHtmlTemplate from 'vite-plugin-virtual-html-template';
3+
4+
const chunks = [
5+
'index',
6+
'axes',
7+
'connected-points-by-segments',
8+
'connected-points',
9+
'dynamic-opacity',
10+
'embedded',
11+
'performance-mode',
12+
'size-encoding',
13+
'texture-background',
14+
'transition',
15+
'two-instances',
16+
];
17+
18+
const pages = Object.fromEntries(
19+
chunks.map((chunk) => [
20+
chunk,
21+
{ template: 'public/index.html', entry: `example/${chunk}.js` },
22+
])
23+
);
24+
25+
export default defineConfig({
26+
base: './',
27+
plugins: [virtualHtmlTemplate({ pages })],
28+
build: {
29+
outDir: 'docs',
30+
rollupOptions: {
31+
input: Object.fromEntries(
32+
chunks.map((chunk) => [chunk, `${chunk}.html`])
33+
),
34+
},
35+
},
36+
resolve: {
37+
alias: {
38+
/**
39+
* vite pre-bundling (esbuild) can't be configured to
40+
* resolve .fs/.vs in regl-line. This alias forces
41+
* resolution with rollup, which avoids this error.
42+
*/
43+
'regl-line': '/node_modules/regl-line/src/index.js',
44+
},
45+
},
46+
});

‎webpack.config.js‎

Lines changed: 0 additions & 93 deletions
This file was deleted.

0 commit comments

Comments
 (0)