Bezier-rs: Replace Vue-CLI with Webpack bundler
This commit is contained in:
Keavon Chambers
parent
c770cd906e
commit
92fe0bea50
|
|
@ -3,9 +3,9 @@ import fs from "fs";
|
|||
import { spawnSync } from "child_process";
|
||||
import WasmPackPlugin from "@wasm-tool/wasm-pack-plugin";
|
||||
import SvelteCheckPlugin from "svelte-check-plugin";
|
||||
import SveltePreprocess from 'svelte-preprocess';
|
||||
import SveltePreprocess from "svelte-preprocess";
|
||||
import * as webpack from "webpack";
|
||||
import 'webpack-dev-server';
|
||||
import "webpack-dev-server";
|
||||
const LicenseCheckerWebpackPlugin = require("license-checker-webpack-plugin");
|
||||
|
||||
const mode = process.env.NODE_ENV === "production" ? "production" : "development";
|
||||
|
|
@ -18,16 +18,16 @@ const config: webpack.Configuration = {
|
|||
resolve: {
|
||||
alias: {
|
||||
// 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'],
|
||||
mainFields: ['svelte', 'browser', 'module', 'main']
|
||||
extensions: [".ts", ".js", ".svelte"],
|
||||
mainFields: ["svelte", "browser", "module", "main"]
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'public/build'),
|
||||
publicPath: '/build/',
|
||||
filename: '[name].js',
|
||||
chunkFilename: '[name].[id].js'
|
||||
path: path.resolve(__dirname, "public/build"),
|
||||
publicPath: "/build/",
|
||||
filename: "[name].js",
|
||||
chunkFilename: "[name].[id].js"
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
|
|
@ -35,7 +35,7 @@ const config: webpack.Configuration = {
|
|||
{
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: 'svelte-loader',
|
||||
loader: "svelte-loader",
|
||||
options: {
|
||||
compilerOptions: {
|
||||
// Dev mode must be enabled for HMR to work!
|
||||
|
|
@ -81,8 +81,8 @@ const config: webpack.Configuration = {
|
|||
{
|
||||
test: /\.(scss|sass)$/,
|
||||
use: [
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
"css-loader",
|
||||
"sass-loader"
|
||||
]
|
||||
},
|
||||
|
||||
|
|
@ -90,14 +90,14 @@ const config: webpack.Configuration = {
|
|||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'css-loader',
|
||||
"css-loader",
|
||||
]
|
||||
},
|
||||
|
||||
// Rule: TypeScript
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: 'ts-loader',
|
||||
use: "ts-loader",
|
||||
exclude: /node_modules/
|
||||
},
|
||||
|
||||
|
|
@ -137,17 +137,17 @@ const config: webpack.Configuration = {
|
|||
|
||||
// new SvelteCheckPlugin(),
|
||||
],
|
||||
devtool: mode === 'development' ? 'source-map' : false,
|
||||
devtool: mode === "development" ? "source-map" : false,
|
||||
experiments: {
|
||||
asyncWebAssembly: true,
|
||||
},
|
||||
};
|
||||
|
||||
// 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) : {};
|
||||
|
||||
if ('compilerOptions' in tsconfig && 'paths' in tsconfig.compilerOptions) {
|
||||
if ("compilerOptions" in tsconfig && "paths" in tsconfig.compilerOptions) {
|
||||
const aliases = tsconfig.compilerOptions.paths;
|
||||
|
||||
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
|
||||
// We'll need to transform the glob format into a format acceptable to webpack
|
||||
|
||||
const wpAlias = alias.replace(/(\\|\/)\*$/, '');
|
||||
const wpPaths = paths.map((p: string) => p.replace(/(\\|\/)\*$/, ''));
|
||||
const wpAlias = alias.replace(/(\\|\/)\*$/, "");
|
||||
const wpPaths = paths.map((p: string) => p.replace(/(\\|\/)\*$/, ""));
|
||||
|
||||
if (config.resolve && config.resolve.alias) {
|
||||
if (!(wpAlias in config.resolve.alias) && wpPaths.length) {
|
||||
|
|
@ -332,7 +332,7 @@ function htmlDecode(input: string): string {
|
|||
gt: ">",
|
||||
amp: "&",
|
||||
apos: "'",
|
||||
quot: '"',
|
||||
quot: `"`,
|
||||
};
|
||||
|
||||
return input.replace(/&([^;]+);/g, (entity, entityCode: string) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"name": "Graphite",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"name": "Graphite",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
|
|
@ -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,35 +65,10 @@ 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: [
|
||||
{
|
||||
files: ["*.js"],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.DS_Store
|
||||
/node_modules
|
||||
/public
|
||||
!/public
|
||||
/public/build
|
||||
/dist
|
||||
/wasm/pkg
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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,
|
||||
}
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue