Bezier-rs: Replace Vue-CLI with Webpack bundler

2026-09-15 14:18:04 +08:00 · 2023-03-29 16:58:51 -07:00
parent c770cd906e
commit 92fe0bea50
15 changed files with 1171 additions and 13727 deletions
--- a/website/other/bezier-rs-demos/.eslintrc.js
+++ b/website/other/bezier-rs-demos/.eslintrc.js
@@ -1,5 +1,3 @@
-const webpackConfigPath = require.resolve("@vue/cli-service/webpack.config.js");
-
 module.exports = {
 	root: true,
 	env: {
@@ -12,14 +10,6 @@ module.exports = {
 		// parser: '@typescript-eslint/parser'
 	},
 	extends: [
-		// Vue-specific defaults
-		"plugin:vue/vue3-essential",
-		// Vue-compatible JS defaults
-		"@vue/airbnb",
-		// Vue-compatible TS defaults
-		"@vue/typescript/recommended",
-		// Vue-compatible Prettier defaults
-		"plugin:prettier-vue/recommended",
 		// General Prettier defaults
 		"prettier",
 	],
@@ -28,16 +18,6 @@ module.exports = {
 		"import/resolver": {
 			// `node` must be listed first!
 			node: {},
-			webpack: { config: webpackConfigPath },
-		},
-		// https://github.com/meteorlxy/eslint-plugin-prettier-vue
-		"prettier-vue": {
-			// Use Prettier to format the HTML, CSS, and JS blocks of .vue single-file components
-			SFCBlocks: {
-				template: true,
-				style: true,
-				script: true,
-			},
 		},
 	},
 	ignorePatterns: [
@@ -85,34 +65,9 @@ module.exports = {
 					caseInsensitive: true,
 				},
 				warnOnUnassignedImports: true,
-				"newlines-between": "always-and-inside-groups",
-				pathGroups: [
-					{
-						pattern: "**/*.vue",
-						group: "unknown",
-						position: "after",
-					},
-				],
+				"newlines-between": "always-and-inside-groups"
 			},
 		],
-
-		// Prettier plugin config (used to enforce HTML, CSS, and JS formatting styles as an ESLint plugin, where fixes are reported to ESLint to be applied when linting)
-		"prettier-vue/prettier": [
-			"error",
-			{
-				tabWidth: 4,
-				tabs: true,
-				printWidth: 200,
-			},
-		],
-
-		// Vue plugin config (used to validate Vue single-file components)
-		"vue/multi-word-component-names": "off",
-
-		// Vue Accessibility plugin config (included by airbnb defaults but undesirable for a web app project)
-		"vuejs-accessibility/form-control-has-label": "off",
-		"vuejs-accessibility/label-has-for": "off",
-		"vuejs-accessibility/click-events-have-key-events": "off",
 	},
 	overrides: [
 		{
--- a/website/other/bezier-rs-demos/.gitignore
+++ b/website/other/bezier-rs-demos/.gitignore
@@ -1,5 +1,5 @@
-.DS_Store
 /node_modules
-/public
+!/public
+/public/build
 /dist
 /wasm/pkg
--- a/website/other/bezier-rs-demos/README.md
+++ b/website/other/bezier-rs-demos/README.md
@@ -1,24 +1,29 @@
-# Bezier-rs interactive docs
+# Bezier-rs interactive documentation

-## Project setup
-```
-npm install
-```
+Open these interactive docs: <https://graphite.rs/libraries/bezier-rs/>

-### Compiles and hot-reloads for development
-```
-npm start
-```
+This page also serves isolated demos for iframes used in the Rustdoc [crate documentation](https://docs.rs/bezier-rs/latest/bezier_rs/).

-### Compiles and minifies for production
-```
-npm run build
-```
+## Building and running

-### Lints and fixes files
-```
-npm run lint
-```
+From this directory, first execute `npm install` to install the required Node dependencies. Then...

-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+- To run the development server with hot reloading:
+  ```
+  npm start
+  ```
+- To compile an unoptimized development build (like above, but it writes the files instead of serving them):
+  ```
+  npm run build
+  ```
+- To compile an optimized production build:
+  
+  ```
+  # WSL/Mac/Linux terminals:
+  npm run build-prod-unix
+
+  # Windows terminals:
+  npm run build-prod-windows
+  ```
+
+When a build is compiled, the entire `./public` folder is the output containing both the static `index.html`, etc., plus the generated `build/` folder.
--- a/website/other/bezier-rs-demos/package-lock.json
+++ b/website/other/bezier-rs-demos/package-lock.json
--- a/website/other/bezier-rs-demos/package.json
+++ b/website/other/bezier-rs-demos/package.json
@@ -3,37 +3,30 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"start": "vue-cli-service serve",
-		"serve": "vue-cli-service serve",
-		"build": "vue-cli-service build",
-		"lint": "vue-cli-service lint"
+		"start": "webpack serve || (npm run print-building-help && exit 1)",
+		"serve": "webpack serve || (npm run print-building-help && exit 1)",
+		"build": "webpack build || (npm run print-building-help && exit 1)",
+		"build-prod-unix": "NODE_ENV=production webpack build || (npm run print-building-help && exit 1)",
+		"build-prod-windows": "set NODE_ENV=production && webpack build || (npm run print-building-help && exit 1)",
+		"print-building-help": "echo 'bezier-rs interactive demos project failed to build. Did you remember to `npm install` the node dependencies?'"
 	},
 	"dependencies": {
 		"core-js": "^3.26.1"
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^5.43.0",
-		"@typescript-eslint/parser": "^5.43.0",
-		"@vue/cli-plugin-eslint": "^5.0.8",
-		"@vue/cli-plugin-typescript": "^5.0.8",
-		"@vue/cli-service": "^5.0.8",
-		"@vue/eslint-config-airbnb": "^6.0.0",
-		"@vue/eslint-config-typescript": "^11.0.2",
+		"@types/webpack-dev-server": "^4.7.2",
+		"@types/webpack": "^5.28.0",
 		"@wasm-tool/wasm-pack-plugin": "^1.6.0",
-		"eslint": "^8.27.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-prettier-vue": "^4.2.0",
-		"eslint-plugin-vue": "^9.7.0",
-		"typescript": "^4.9.3"
+		"css-loader": "^6.7.3",
+		"sass-loader": "^13.2.0",
+		"sass": "^1.57.1",
+		"ts-loader": "^9.4.2",
+		"typescript": "^4.9.4",
+		"webpack-cli": "^5.0.1",
+		"webpack-dev-server": "^4.11.1",
+		"webpack": "^5.75.0"
 	},
 	"optionalDependencies": {
 		"wasm-pack": "^0.10.3"
-	},
-	"browserslist": [
-		"> 1%",
-		"last 2 versions",
-		"not dead",
-		"not ie 11"
-	]
+	}
 }
--- a/website/other/bezier-rs-demos/public/index.html
+++ b/website/other/bezier-rs-demos/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Bezier-rs Interactive Documentation</title>
+	<link rel="stylesheet" href="./style.css">
+	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
+</head>
+<body>
+	<noscript>JavaScript is required</noscript>
+	<script>import("./build/bundle.js");</script>
+</body>
+</html>
--- a/website/other/bezier-rs-demos/public/style.css
+++ b/website/other/bezier-rs-demos/public/style.css
--- a/website/other/bezier-rs-demos/src/main.ts
+++ b/website/other/bezier-rs-demos/src/main.ts
@@ -6,8 +6,6 @@ import SubpathDemoPane from "@/components/SubpathDemoPane";
 import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
 import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";

-import "@/style.css";
-
 declare global {
 	interface HTMLElementTagNameMap {
 		"bezier-demo": BezierDemo;
@@ -17,14 +15,6 @@ declare global {
 	}
 }

-window.document.title = "Bezier-rs Interactive Documentation";
-window.document.head.innerHTML += `
-<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
-`.trim();
-
 window.customElements.define("bezier-demo", BezierDemo);
 window.customElements.define("bezier-demo-pane", BezierDemoPane);
 window.customElements.define("subpath-demo", SubpathDemo);
--- a/website/other/bezier-rs-demos/tsconfig.json
+++ b/website/other/bezier-rs-demos/tsconfig.json
@@ -12,28 +12,19 @@
 		"allowSyntheticDefaultImports": true,
 		"sourceMap": true,
 		"baseUrl": ".",
-		"types": [
-			"node"
-		],
+		"types": ["node"],
 		"paths": {
-			"@/*": [
-				"src/*"
-			]
+			"@/*": ["src/*"]
 		},
-		"lib": [
-			"esnext",
-			"dom",
-			"dom.iterable",
-			"scripthost"
-		]
+		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
 	},
-	"include": [
-		"src/**/*.ts",
-		"src/**/*.d.ts",
-		"src/**/*.vue",
-		"tests/**/*.ts",
-	],
-	"exclude": [
-		"node_modules"
-	]
+	"include": ["src/**/*.ts", "src/**/*.d.ts"],
+	"exclude": ["node_modules"],
+	"ts-node": {
+		"compilerOptions": {
+			"module": "commonjs",
+			"useDefineForClassFields": false,
+			"noImplicitOverride": true
+		}
+	}
 }
--- a/website/other/bezier-rs-demos/vue.config.js
+++ b/website/other/bezier-rs-demos/vue.config.js
@@ -1,36 +0,0 @@
-const path = require("path");
-
-const { defineConfig } = require("@vue/cli-service");
-
-const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
-
-module.exports = defineConfig({
-	publicPath: ".",
-	transpileDependencies: true,
-	// https://cli.vuejs.org/guide/webpack.html
-	chainWebpack: (config) => {
-		// WASM Pack Plugin integrates compiled Rust code (.wasm) and generated wasm-bindgen code (.js) with the webpack bundle
-		// Use this JS to import the bundled Rust entry points: const wasm = import("@/../wasm/pkg").then(panicProxy);
-		// Then call WASM functions with: (await wasm).function_name()
-		// https://github.com/wasm-tool/wasm-pack-plugin
-		config
-			// https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin
-			.plugin("wasm-pack")
-			.use(WasmPackPlugin)
-			.init(
-				(Plugin) =>
-					new Plugin({
-						crateDirectory: path.resolve(__dirname, "wasm"),
-						// Remove when this issue is resolved: https://github.com/wasm-tool/wasm-pack-plugin/issues/93
-						outDir: path.resolve(__dirname, "wasm/pkg"),
-						watchDirectories: ["../../../libraries/bezier-rs"].map((folder) => path.resolve(__dirname, folder)),
-					})
-			)
-			.end();
-	},
-	configureWebpack: {
-		experiments: {
-			asyncWebAssembly: true,
-		},
-	},
-});
--- a/website/other/bezier-rs-demos/webpack.config.js
+++ b/website/other/bezier-rs-demos/webpack.config.js
@@ -0,0 +1,64 @@
+const path = require("path");
+
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
+
+const mode = process.env.NODE_ENV === "production" ? "production" : "development";
+
+module.exports = {
+	mode,
+	entry: {
+		bundle: ["./src/main.ts"],
+	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "src/"),
+		},
+		extensions: [".ts", ".js"],
+		mainFields: ["browser", "module", "main"],
+	},
+	output: {
+		path: path.resolve(__dirname, "public/build"),
+		publicPath: "build/",
+		filename: "[name].js"
+	},
+	module: {
+		rules: [
+			// Rule: SASS
+			{
+				test: /\.(scss|sass)$/,
+				use: ["css-loader", "sass-loader"],
+			},
+
+			// Rule: CSS
+			{
+				test: /\.css$/,
+				use: ["css-loader"],
+			},
+
+			// Rule: TypeScript
+			{
+				test: /\.ts$/,
+				use: "ts-loader",
+				exclude: /node_modules/,
+			},
+		],
+	},
+	devServer: {
+		hot: true,
+	},
+	plugins: [
+		new WasmPackPlugin({
+			crateDirectory: path.resolve(__dirname, "wasm"),
+			// Remove when this issue is resolved: https://github.com/wasm-tool/wasm-pack-plugin/issues/93
+			outDir: path.resolve(__dirname, "wasm/pkg"),
+			watchDirectories: ["../../../libraries/bezier-rs"].map((folder) => path.resolve(__dirname, folder)),
+		}),
+	],
+	devtool: mode === "development" ? "source-map" : false,
+	experiments: {
+		asyncWebAssembly: true,
+	},
+	stats: {
+		errorDetails: true,
+	}
+};
--- a/website/other/build.sh
+++ b/website/other/build.sh
@@ -16,6 +16,6 @@ npm ci

 echo 👷 Build Bezier-rs Demos
 export NODE_ENV=production
-npm run build
+npm run build-prod-unix
 mkdir ../../public/libraries
-mv dist ../../public/libraries/bezier-rs
+mv public ../../public/libraries/bezier-rs