jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bezier-rs: Replace Vue-CLI with Webpack bundler

This commit is contained in:
Keavon Chambers 2023-03-29 16:58:51 -07:00
parent c770cd906e
commit 92fe0bea50
15 changed files with 1171 additions and 13727 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/webpack.config.ts
View File

@ -3,9 +3,9 @@ import fs from "fs";
import { spawnSync } from "child_process"; import { spawnSync } from "child_process";
import WasmPackPlugin from "@wasm-tool/wasm-pack-plugin"; import WasmPackPlugin from "@wasm-tool/wasm-pack-plugin";
import SvelteCheckPlugin from "svelte-check-plugin"; import SvelteCheckPlugin from "svelte-check-plugin";
import SveltePreprocess from 'svelte-preprocess'; import SveltePreprocess from "svelte-preprocess";
import * as webpack from "webpack"; import * as webpack from "webpack";
import 'webpack-dev-server'; import "webpack-dev-server";
const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin"); const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin");
const mode = process.env.NODE_ENV === "production" ? "production" : "development"; const mode = process.env.NODE_ENV === "production" ? "production" : "development";
@ -18,16 +18,16 @@ const config: webpack.Configuration = {
resolve: { resolve: {
alias: { alias: {
// Note: Later in this config file, we'll automatically add paths from `tsconfig.compilerOptions.paths` // Note: Later in this config file, we'll automatically add paths from `tsconfig.compilerOptions.paths`
svelte: path.resolve('node_modules', 'svelte') svelte: path.resolve("node_modules", "svelte")
}, },
extensions: ['.ts', '.js', '.svelte'], extensions: [".ts", ".js", ".svelte"],
mainFields: ['svelte', 'browser', 'module', 'main'] mainFields: ["svelte", "browser", "module", "main"]
}, },
output: { output: {
path: path.resolve(__dirname, 'public/build'), path: path.resolve(__dirname, "public/build"),
publicPath: '/build/', publicPath: "/build/",
filename: '[name].js', filename: "[name].js",
chunkFilename: '[name].[id].js' chunkFilename: "[name].[id].js"
}, },
module: { module: {
rules: [ rules: [
@ -35,7 +35,7 @@ const config: webpack.Configuration = {
{ {
test: /\.svelte$/, test: /\.svelte$/,
use: { use: {
loader: 'svelte-loader', loader: "svelte-loader",
options: { options: {
compilerOptions: { compilerOptions: {
// Dev mode must be enabled for HMR to work! // Dev mode must be enabled for HMR to work!
@ -81,8 +81,8 @@ const config: webpack.Configuration = {
{ {
test: /\.(scss|sass)$/, test: /\.(scss|sass)$/,
use: [ use: [
'css-loader', "css-loader",
'sass-loader' "sass-loader"
] ]
}, },
@ -90,14 +90,14 @@ const config: webpack.Configuration = {
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
'css-loader', "css-loader",
] ]
}, },
// Rule: TypeScript // Rule: TypeScript
{ {
test: /\.ts$/, test: /\.ts$/,
use: 'ts-loader', use: "ts-loader",
exclude: /node_modules/ exclude: /node_modules/
}, },
@ -137,17 +137,17 @@ const config: webpack.Configuration = {
// new SvelteCheckPlugin(), // new SvelteCheckPlugin(),
], ],
devtool: mode === 'development' ? 'source-map' : false, devtool: mode === "development" ? "source-map" : false,
experiments: { experiments: {
asyncWebAssembly: true, asyncWebAssembly: true,
}, },
}; };
// Load path aliases from the tsconfig.json file // Load path aliases from the tsconfig.json file
const tsconfigPath = path.resolve(__dirname, 'tsconfig.json'); const tsconfigPath = path.resolve(__dirname, "tsconfig.json");
const tsconfig = fs.existsSync(tsconfigPath) ? require(tsconfigPath) : {}; const tsconfig = fs.existsSync(tsconfigPath) ? require(tsconfigPath) : {};
if ('compilerOptions' in tsconfig && 'paths' in tsconfig.compilerOptions) { if ("compilerOptions" in tsconfig && "paths" in tsconfig.compilerOptions) {
const aliases = tsconfig.compilerOptions.paths; const aliases = tsconfig.compilerOptions.paths;
for (const alias in aliases) { for (const alias in aliases) {
@ -156,8 +156,8 @@ if ('compilerOptions' in tsconfig && 'paths' in tsconfig.compilerOptions) {
// Our tsconfig uses glob path formats, whereas webpack just wants directories // Our tsconfig uses glob path formats, whereas webpack just wants directories
// We'll need to transform the glob format into a format acceptable to webpack // We'll need to transform the glob format into a format acceptable to webpack
const wpAlias = alias.replace(/(\\|\/)\*$/, ''); const wpAlias = alias.replace(/(\\|\/)\*$/, "");
const wpPaths = paths.map((p: string) => p.replace(/(\\|\/)\*$/, '')); const wpPaths = paths.map((p: string) => p.replace(/(\\|\/)\*$/, ""));
if (config.resolve && config.resolve.alias) { if (config.resolve && config.resolve.alias) {
if (!(wpAlias in config.resolve.alias) && wpPaths.length) { if (!(wpAlias in config.resolve.alias) && wpPaths.length) {
@ -332,7 +332,7 @@ function htmlDecode(input: string): string {
gt: ">", gt: ">",
amp: "&", amp: "&",
apos: "'", apos: "'",
quot: '"', quot: `"`,
}; };
return input.replace(/&([^;]+);/g, (entity, entityCode: string) => { return input.replace(/&([^;]+);/g, (entity, entityCode: string) => {

6
node_modules/.package-lock.json generated vendored Normal file
View File

@ -0,0 +1,6 @@
{
"name": "Graphite",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}

6
package-lock.json generated Normal file
View File

@ -0,0 +1,6 @@
{
"name": "Graphite",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}

47
website/other/bezier-rs-demos/.eslintrc.js
View File

@ -1,5 +1,3 @@
const webpackConfigPath = require.resolve("@vue/cli-service/webpack.config.js");
module.exports = { module.exports = {
root: true, root: true,
env: { env: {
@ -12,14 +10,6 @@ module.exports = {
// parser: '@typescript-eslint/parser' // parser: '@typescript-eslint/parser'
}, },
extends: [ 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 // General Prettier defaults
"prettier", "prettier",
], ],
@ -28,16 +18,6 @@ module.exports = {
"import/resolver": { "import/resolver": {
// `node` must be listed first! // `node` must be listed first!
node: {}, 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: [ ignorePatterns: [
@ -85,35 +65,10 @@ module.exports = {
caseInsensitive: true, caseInsensitive: true,
}, },
warnOnUnassignedImports: true, warnOnUnassignedImports: true,
"newlines-between": "always-and-inside-groups", "newlines-between": "always-and-inside-groups"
pathGroups: [
{
pattern: "**/*.vue",
group: "unknown",
position: "after",
}, },
], ],
}, },
],
// 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: [ overrides: [
{ {
files: ["*.js"], files: ["*.js"],

4
website/other/bezier-rs-demos/.gitignore vendored
View File

@ -1,5 +1,5 @@
.DS_Store
/node_modules /node_modules
/public !/public
/public/build
/dist /dist
/wasm/pkg /wasm/pkg

43
website/other/bezier-rs-demos/README.md
View File

@ -1,24 +1,29 @@
# Bezier-rs interactive docs # Bezier-rs interactive documentation
## Project setup Open these interactive docs: <https://graphite.rs/libraries/bezier-rs/>
```
npm install
```
### Compiles and hot-reloads for development This page also serves isolated demos for iframes used in the Rustdoc [crate documentation](https://docs.rs/bezier-rs/latest/bezier_rs/).
```
npm start
```
### Compiles and minifies for production ## Building and running
```
npm run build
```
### Lints and fixes files From this directory, first execute `npm install` to install the required Node dependencies. Then...
```
npm run lint
```
### Customize configuration - To run the development server with hot reloading:
See [Configuration Reference](https://cli.vuejs.org/config/). ```
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.

14534
website/other/bezier-rs-demos/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

41
website/other/bezier-rs-demos/package.json
View File

@ -3,37 +3,30 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"start": "vue-cli-service serve", "start": "webpack serve || (npm run print-building-help && exit 1)",
"serve": "vue-cli-service serve", "serve": "webpack serve || (npm run print-building-help && exit 1)",
"build": "vue-cli-service build", "build": "webpack build || (npm run print-building-help && exit 1)",
"lint": "vue-cli-service lint" "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": { "dependencies": {
"core-js": "^3.26.1" "core-js": "^3.26.1"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.43.0", "@types/webpack-dev-server": "^4.7.2",
"@typescript-eslint/parser": "^5.43.0", "@types/webpack": "^5.28.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",
"@wasm-tool/wasm-pack-plugin": "^1.6.0", "@wasm-tool/wasm-pack-plugin": "^1.6.0",
"eslint": "^8.27.0", "css-loader": "^6.7.3",
"eslint-config-prettier": "^8.5.0", "sass-loader": "^13.2.0",
"eslint-plugin-import": "^2.26.0", "sass": "^1.57.1",
"eslint-plugin-prettier-vue": "^4.2.0", "ts-loader": "^9.4.2",
"eslint-plugin-vue": "^9.7.0", "typescript": "^4.9.4",
"typescript": "^4.9.3" "webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack": "^5.75.0"
}, },
"optionalDependencies": { "optionalDependencies": {
"wasm-pack": "^0.10.3" "wasm-pack": "^0.10.3"
}, }
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
} }

16
website/other/bezier-rs-demos/public/index.html Normal file
View File

@ -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>

0
website/other/bezier-rs-demos/src/style.css → website/other/bezier-rs-demos/public/style.css
View File

10
website/other/bezier-rs-demos/src/main.ts
View File

@ -6,8 +6,6 @@ import SubpathDemoPane from "@/components/SubpathDemoPane";
import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features"; import bezierFeatures, { BezierFeatureKey } from "@/features/bezier-features";
import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features"; import subpathFeatures, { SubpathFeatureKey } from "@/features/subpath-features";
import "@/style.css";
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
"bezier-demo": BezierDemo; "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", BezierDemo);
window.customElements.define("bezier-demo-pane", BezierDemoPane); window.customElements.define("bezier-demo-pane", BezierDemoPane);
window.customElements.define("subpath-demo", SubpathDemo); window.customElements.define("subpath-demo", SubpathDemo);

33
website/other/bezier-rs-demos/tsconfig.json
View File

@ -12,28 +12,19 @@
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"sourceMap": true, "sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
"types": [ "types": ["node"],
"node"
],
"paths": { "paths": {
"@/*": [ "@/*": ["src/*"]
"src/*"
]
}, },
"lib": [ "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}, },
"include": [ "include": ["src/**/*.ts", "src/**/*.d.ts"],
"src/**/*.ts", "exclude": ["node_modules"],
"src/**/*.d.ts", "ts-node": {
"src/**/*.vue", "compilerOptions": {
"tests/**/*.ts", "module": "commonjs",
], "useDefineForClassFields": false,
"exclude": [ "noImplicitOverride": true
"node_modules" }
] }
} }

36
website/other/bezier-rs-demos/vue.config.js
View File

@ -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,
},
},
});

64
website/other/bezier-rs-demos/webpack.config.js Normal file
View File

@ -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,
}
};

4
website/other/build.sh
View File

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