GraphiteEditor · Keavon · Jul 25, 2024 · Jul 24, 2024
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -6,7 +6,7 @@
 		},
 		"ghcr.io/devcontainers/features/node:1": {}
 	},
-	"onCreateCommand": "cargo install cargo-watch cargo-about",
+	"onCreateCommand": "cargo install wasm-pack cargo-watch cargo-about",
 	"customizations": {
 		"vscode": {
 			// NOTE: Keep this in sync with `.vscode/extensions.json`

diff --git a/.github/workflows/build-pr-command.yml → ...hub/workflows/!build-comment-commands.yml b/.github/workflows/build-pr-command.yml → ...hub/workflows/!build-comment-commands.yml
@@ -1,3 +1,9 @@
+# USAGE:
+# After reviewing the code, core team members may comment on a PR with the exact text:
+# - `!build-dev` to build with debug symbols and optimizations disabled
+# - `!build-profiling` to build with debug symbols and optimizations enabled
+# - `!build` to build without debug symbols and optimizations enabled
+# The comment may not contain any other text, not even whitespace or newlines.
 name: "!build PR Command"
 
 on:
@@ -12,7 +18,10 @@ jobs:
     # Command should be limited to core team members (those in the organization) for security.
     # From the GitHub Actions docs:
     # author_association = 'MEMBER': Author is a member of the organization that owns the repository.
-    if: github.event.issue.pull_request && (github.event.comment.body == '!build' || github.event.comment.body == '!build-profiling') && github.event.comment.author_association == 'MEMBER'
+    if: >
+      github.event.issue.pull_request &&
+      github.event.comment.author_association == 'MEMBER' &&
+      (github.event.comment.body == '!build-dev' || github.event.comment.body == '!build-profiling' || github.event.comment.body == '!build')
     runs-on: self-hosted
     permissions:
       contents: read
@@ -45,20 +54,22 @@ jobs:
         continue-on-error: true
         run: rm -r ~/.cache/.wasm-pack
 
-      - name: 🟢 Set up Node
-        uses: actions/setup-node@v3
+      - name: 🟢 Install the latest Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: "latest"
 
       - name: 🚧 Install Node dependencies
         run: |
           cd frontend
           npm ci
 
-      - name: 🦀 Update Rust to latest stable
+      - name: 🦀 Install the latest Rust
         run: |
+          echo "Initial system version:"
           rustc --version
           rustup update stable
+          echo "Latest updated version:"
           rustc --version
 
       - name: ✂ Replace template in <head> of index.html
@@ -70,12 +81,14 @@ jobs:
       - name: ⌨ Set build command based on comment
         id: build_command
         run: |
-          if [[ "${{ github.event.comment.body }}" == "!build" ]]; then
-            echo "command=build" >> $GITHUB_OUTPUT
+          if [[ "${{ github.event.comment.body }}" == "!build-dev" ]]; then
+            echo "command=build-dev" >> $GITHUB_OUTPUT
           elif [[ "${{ github.event.comment.body }}" == "!build-profiling" ]]; then
             echo "command=build-profiling" >> $GITHUB_OUTPUT
+          elif [[ "${{ github.event.comment.body }}" == "!build" ]]; then
+            echo "command=build" >> $GITHUB_OUTPUT
           else
-            echo "command=print-building-help" >> $GITHUB_OUTPUT
+            echo "Failed to detect if the build command written in the comment should have been '!build-dev', '!build-profiling', or '!build'" >> $GITHUB_OUTPUT
           fi
 
       - name: 🌐 Build Graphite web code

diff --git a/.github/workflows/ci.yml → .github/workflows/ci-and-dev-build.yml b/.github/workflows/ci.yml → .github/workflows/ci-and-dev-build.yml
@@ -30,20 +30,22 @@ jobs:
       - name: 🗑 Clear wasm-bindgen cache
         run: rm -r ~/.cache/.wasm-pack || true
 
-      - name: 🟢 Set up Node
-        uses: actions/setup-node@v3
+      - name: 🟢 Install the latest Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: "latest"
 
       - name: 🚧 Install Node dependencies
         run: |
           cd frontend
           npm ci
 
-      - name: 🦀 Update Rust to latest stable
+      - name: 🦀 Install the latest Rust
         run: |
+          echo "Initial system version:"
           rustc --version
           rustup update stable
+          echo "Latest updated version:"
           rustc --version
 
       - name: ✂ Replace template in <head> of index.html

diff --git a/.github/workflows/deploy.yml → .github/workflows/production-build.yml b/.github/workflows/deploy.yml → .github/workflows/production-build.yml
@@ -27,20 +27,22 @@ jobs:
       - name: 🗑 Clear wasm-bindgen cache
         run: rm -r ~/.cache/.wasm-pack
 
-      - name: 🟢 Set up Node
-        uses: actions/setup-node@v3
+      - name: 🟢 Install the latest Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: "latest"
 
       - name: 🚧 Install Node dependencies
         run: |
           cd frontend
           npm ci
 
-      - name: 🦀 Update Rust to latest stable
+      - name: 🦀 Install the latest Rust
         run: |
+          echo "Initial system version:"
           rustc --version
           rustup update stable
+          echo "Latest updated version:"
           rustc --version
 
       - name: ✂ Replace template in <head> of index.html

diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
@@ -44,7 +44,7 @@ jobs:
           zola build
 
       - name: 🔍 Check if `website/other` directory changed
-        uses: dorny/paths-filter@v2
+        uses: dorny/paths-filter@v3
         id: changes
         with:
           filters: |
@@ -61,9 +61,9 @@ jobs:
 
       - name: 🟢 Set up Node only if we are going to build in the next step
         if: steps.cache-website-other-dist.outputs.cache-hit != 'true'
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: "latest"
 
       - name: 📁 Build `website/other` directory only if changed or not cached
         if: steps.cache-website-other-dist.outputs.cache-hit != 'true'

diff --git a/frontend/README.md b/frontend/README.md
@@ -26,11 +26,11 @@ Wraps the editor backend codebase (`/editor`) and provides a JS-centric API for
 
 ## npm ecosystem packages: `package.json`
 
-While we don't use Node.js as a JS-based server, we do have to rely on its wide ecosystem of packages for our build system toolchain. If you're just getting started, make sure to install the latest LTS copy of Node.js and then run `cd frontend && npm install` to install these packages on your system. Our project's philosophy on third-party packages is to keep our dependency tree as light as possible, so adding anything new to our `package.json` should have overwhelming justification. Most of the packages are just development tooling (TypeScript, Vite, ESLint, Prettier, wasm-pack, and [Sass](https://sass-lang.com/)) that run in your console during the build process.
+While we don't use Node.js as a JS-based server, we do have to rely on its wide ecosystem of packages for our build system toolchain. If you're just getting started, make sure to install the latest LTS copy of Node.js. Our project's philosophy on third-party packages is to keep our dependency tree as light as possible, so adding anything new to our `package.json` should have overwhelming justification. Most of the packages are just development tooling (TypeScript, Vite, ESLint, Prettier, wasm-pack, and [Sass](https://sass-lang.com/)) that run in your console during the build process.
 
 ## npm package installed versions: `package-lock.json`
 
-Specifies the exact versions of packages installed in the npm dependency tree. While `package.json` specifies which packages to install and their minimum/maximum acceptable version numbers, `package-lock.json` represents the exact versions of each dependency and sub-dependency. Running `npm install` will grab these exact versions to ensure you are using the same packages as everyone else working on Graphite. `npm update` will modify `package-lock.json` to specify newer versions of any updated (sub-)dependencies and download those, as long as they don't exceed the maximum version allowed in `package.json`. To check for newer versions that exceed the max version, run `npm outdated` to see a list. Unless you know why you are doing it, try to avoid committing updates to `package-lock.json` by mistake if your code changes don't pertain to package updates. And never manually modify the file.
+Specifies the exact versions of packages installed in the npm dependency tree. While `package.json` specifies which packages to install and their minimum/maximum acceptable version numbers, `package-lock.json` represents the exact versions of each dependency and sub-dependency. Running `npm ci` will grab these exact versions to ensure you are using the same packages as everyone else working on Graphite. `npm update` will modify `package-lock.json` to specify newer versions of any updated (sub-)dependencies and download those, as long as they don't exceed the maximum version allowed in `package.json`. To check for newer versions that exceed the max version, run `npm outdated` to see a list. Unless you know why you are doing it, try to avoid committing updates to `package-lock.json` by mistake if your code changes don't pertain to package updates. And never manually modify the file.
 
 ## TypeScript configurations: `tsconfig.json`
 

diff --git a/frontend/package-installer.js b/frontend/package-installer.js
@@ -19,10 +19,17 @@ const isInstallNeeded = () => {
 // 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.");