Fix, document, and update npm dependencies and tooling; fix Bezier-rs demos not building (#1857)

Fix, document, and update npm dependencies; fix Bezier-rs demos not building

Closes #1853

website/content/volunteer/guide/getting-started/_index.md

@@ -29,10 +29,9 @@ You'll likely get faster build times if you manually install this specific versi
 cargo install -f wasm-bindgen-cli@0.2.92
 ```
 
-<!-- THESE INSTRUCTIONS ARE HIDDEN UNTIL WE NEED THEM AGAIN FOR TAURI DEVELOPMENT ONCE THAT HAS BEEN MERGED INTO MASTER -->
-<!--
-On Linux, you may need to install this set of additional packages if you run into issues:
+On Linux, you may need to install this set of additional packages, for the Tauri parts of our tech stack to work, if you run into issues:
 
+<br />
 <details>
 <summary>Click to view</summary>
 
@@ -43,12 +42,14 @@ sudo apt install libgtk-3-dev libsoup2.4-dev libjavascriptcoregtk-4.0-dev libweb
 # On Fedora-based (RHEL, CentOS, etc.) distributions:
 sudo dnf install gtk3-devel libsoup-devel javascriptcoregtk4.0-devel webkit2gtk4.0-devel
 
+# On OpenSUSE-based distributions:
+sudo zypper install gtk3-devel libsoup-devel webkit2gtk3-soup2-devel
+
 # On NixOS or when using the Nix package manager:
 nix-shell
 ```
 
 </details>
--->
 
 ## Repository
 

website/other/bezier-rs-demos/README.md

@@ -6,7 +6,7 @@ This page also serves isolated demos for iframes used in the Rustdoc [crate docu
 
 ## Building and running
 
-From this directory, first execute `npm install` to install the required Node dependencies. Then...
+Make sure [Node.js](https://nodejs.org/) (the latest LTS version) and [Rust](https://www.rust-lang.org/) (the latest stable release) are installed on your system, and [wasm-pack](https://rustwasm.github.io/wasm-pack/) has been installed by running `cargo install wasm-pack`.
 
 - To run the development server with hot reloading:
   ```

website/other/bezier-rs-demos/package-installer.js

@@ -0,0 +1,41 @@
+// This script automatically installs the npm packages listed in package-lock.json and runs before `npm start`.
+// It skips the installation if this has already run and neither package.json nor package-lock.json has been modified since.
+
+import { execSync } from "child_process";
+import { existsSync, statSync, writeFileSync } from "fs";
+
+const INSTALL_TIMESTAMP_FILE = "node_modules/.install-timestamp";
+
+// Checks if the install is needed by comparing modification times
+const isInstallNeeded = () => {
+	if (!existsSync(INSTALL_TIMESTAMP_FILE)) return true;
+
+	const timestamp = statSync(INSTALL_TIMESTAMP_FILE).mtime;
+	return ["package.json", "package-lock.json"].some((file) => {
+		return existsSync(file) && statSync(file).mtime > timestamp;
+	});
+};
+
+// Run `npm ci` if needed and update the install timestamp
+if (isInstallNeeded()) {
+	try {
+		// eslint-disable-next-line no-console
+		console.log("Installing npm packages...");
+
+		// Check if packages are up to date, doing so quickly by using `npm ci`, preferring local cached packages, and skipping the package audit and other checks
+		execSync("npm ci --prefer-offline --no-audit --no-fund", { stdio: "inherit" });
+
+		// Touch the install timestamp file
+		writeFileSync(INSTALL_TIMESTAMP_FILE, "");
+
+		// eslint-disable-next-line no-console
+		console.log("Finished installing npm packages.");
+	} catch (error) {
+		// eslint-disable-next-line no-console
+		console.error("Failed to install npm packages. Please run `npm install` from the `/frontend` directory.");
+		process.exit(1);
+	}
+} else {
+	// eslint-disable-next-line no-console
+	console.log("All npm packages are up-to-date.");
+}

website/other/bezier-rs-demos/package.json

@@ -4,34 +4,38 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"start": "npm run build-wasm && concurrently -k -n \"VITE,RUST\" \"vite\" \"npm run watch:wasm\" || (npm run print-building-help && exit 1)",
-		"profiling": "npm run build-wasm-profiling && concurrently -k -n \"VITE,RUST\" \"vite\" \"npm run watch:wasm-profiling\" || (npm run print-building-help && exit 1)",
-		"production": "npm run build-wasm-prod && concurrently -k -n \"VITE,RUST\" \"vite\" \"npm run watch:wasm\" || (npm run print-building-help && exit 1)",
-		"build": "npm run build-wasm-prod && vite build || (npm run print-building-help && exit 1)",
-		"build-profiling": "npm run build-wasm-profiling && vite build || (npm run print-building-help && exit 1)",
+		"---------- DEV SERVER ----------": "",
+		"start": "npm run setup && npm run wasm:build-dev && concurrently -k -n \"VITE,RUST\" \"vite\" \"npm run wasm:watch-dev\"",
+		"profiling": "npm run setup && npm run wasm:build-profiling && concurrently -k -n \"VITE,RUST\" \"vite\" \"npm run wasm:watch-profiling\"",
+		"production": "npm run setup && npm run wasm:build-production && concurrently -k -n \"VITE,RUST\" \"vite\" \"npm run wasm:watch-production\"",
+		"---------- BUILDS ----------": "",
+		"build-dev": "npm run wasm:build-dev && vite build",
+		"build-profiling": "npm run wasm:build-profiling && vite build",
+		"build": "npm run wasm:build-production && vite build",
+		"---------- UTILITIES ----------": "",
 		"lint": "eslint .",
 		"lint-fix": "eslint . --fix",
-		"--------------------": "",
-		"build-wasm": "wasm-pack build ./wasm --dev --target=web",
-		"build-wasm-profiling": "wasm-pack build ./wasm --profiling --target=web",
-		"build-wasm-prod": "wasm-pack build ./wasm --release --target=web",
-		"watch:wasm": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --dev --target=web -- --color=always\"",
-		"watch:wasm-profiling": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --profiling --target=web -- --color=always\"",
-		"print-building-help": "echo 'Graphite project failed to build. Did you remember to `npm install` the dependencies in `/frontend`?'",
-		"print-linting-help": "echo 'Graphite project had lint errors, or may have otherwise failed. In the latter case, did you remember to `npm install` the dependencies in `/frontend`?'"
+		"---------- INTERNAL ----------": "",
+		"setup": "node package-installer.js",
+		"wasm:build-dev": "wasm-pack build ./wasm --dev --target=web",
+		"wasm:build-profiling": "wasm-pack build ./wasm --profiling --target=web",
+		"wasm:build-production": "wasm-pack build ./wasm --release --target=web",
+		"wasm:watch-dev": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --dev --target=web -- --color=always\"",
+		"wasm:watch-profiling": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --profiling --target=web -- --color=always\"",
+		"wasm:watch-production": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --release --target=web -- --color=always\""
 	},
 	"devDependencies": {
-		"@types/node": "^20.11.25",
-		"@typescript-eslint/eslint-plugin": "^7.1.1",
-		"@typescript-eslint/parser": "^7.1.1",
+		"@types/node": "^20.14.12",
+		"@typescript-eslint/eslint-plugin": "^7.17.0",
+		"@typescript-eslint/parser": "^7.17.0",
 		"concurrently": "^8.2.2",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-import-resolver-typescript": "^3.6.1",
 		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-prettier": "^5.1.3",
-		"prettier": "^3.2.5",
+		"eslint-plugin-prettier": "^5.2.1",
+		"prettier": "^3.3.3",
 		"ts-node": "^10.9.2",
-		"typescript": "^5.4.2",
-		"vite": "^5.1.5"
+		"typescript": "^5.5.4",
+		"vite": "^5.3.4"
 	}
 }

website/other/build.sh

@@ -11,6 +11,11 @@ rustup update stable
 echo rustc version:
 rustc --version
 
+echo 📦 Install wasm-pack
+cargo install wasm-pack
+echo wasm-pack version:
+wasm-pack --version
+
 echo 🚧 Print installed node and npm versions
 echo node version:
 node --version