mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-07-07 15:55:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

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

Closes #1853
This commit is contained in:
Keavon Chambers 2024-07-24 17:21:15 -07:00
parent ab8748627d
commit e1df23c28e
17 changed files with 510 additions and 1266 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.devcontainer/devcontainer.json
View file

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

29
.github/workflows/build-pr-command.yml → .github/workflows/!build-comment-commands.yml vendored
View file

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

10
.github/workflows/ci.yml → .github/workflows/ci-and-dev-build.yml vendored
View file

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

10
.github/workflows/deploy.yml → .github/workflows/production-build.yml vendored
View file

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

6
.github/workflows/website.yml vendored
View file

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

4
frontend/README.md
View file

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

7
frontend/package-installer.js
View file

@ -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.");

905
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

69
frontend/package.json
View file

@ -6,55 +6,56 @@
"browserslist": "> 1.5%, last 2 versions, not dead, not ie 11, not op_mini all, not ios_saf < 13",
"type": "module",
"scripts": {
"prestart": "node package-installer.js",
"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",
"tauri": "echo 'Make sure you build the wasm binary for tauri using `npm run tauri:build-wasm`' && vite",
"tauri:build-wasm": "wasm-pack build ./wasm --release --target=web -- --features tauri",
"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\""
},
"dependencies": {
"@tauri-apps/api": "^1.5.3",
"@tauri-apps/api": "^1.6.0",
"class-transformer": "^0.5.1",
"idb-keyval": "^6.2.1",
"paper": "^0.12.17",
"reflect-metadata": "^0.2.1"
"paper": "^0.12.18",
"reflect-metadata": "^0.2.2"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@types/node": "^20.11.25",
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"@types/node": "^20.14.12",
"@typescript-eslint/eslint-plugin": "^7.17.0",
"@typescript-eslint/parser": "^7.17.0",
"buffer": "^6.0.3",
"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",
"eslint-plugin-svelte": "^2.35.1",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.2.2",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-svelte": "^2.43.0",
"postcss": "^8.4.39",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.6",
"process": "^0.11.10",
"rollup-plugin-license": "^3.2.0",
"sass": "^1.71.1",
"svelte": "^4.2.12",
"svelte-preprocess": "^5.1.3",
"rollup-plugin-license": "^3.5.2",
"sass": "^1.77.8",
"svelte": "^4.2.18",
"svelte-preprocess": "^6.0.2",
"ts-node": "^10.9.2",
"typescript": "^5.4.2",
"vite": "^5.1.5",
"typescript": "^5.5.4",
"vite": "^5.3.4",
"vite-multiple-assets": "1.2.10"
},
"homepage": "https://graphite.rs",

1
frontend/tsconfig.json
View file

@ -9,6 +9,7 @@
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"verbatimModuleSyntax": true,
"sourceMap": true,
"types": ["node", "svelte", "svelte/store", "svelte/motion", "svelte/transition", "svelte/animate", "svelte/easing"],
"baseUrl": ".",

2
frontend/vite.config.ts
View file

@ -6,7 +6,7 @@ import path from "path";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import rollupPluginLicense, { type Dependency } from "rollup-plugin-license";
import { sveltePreprocess } from "svelte-preprocess/dist/autoProcess";
import { sveltePreprocess } from "svelte-preprocess";
import { defineConfig } from "vite";
import { default as viteMultipleAssets } from "vite-multiple-assets";

9
website/content/volunteer/guide/getting-started/_index.md
View file

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

2
website/other/bezier-rs-demos/README.md
View file

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

41
website/other/bezier-rs-demos/package-installer.js Normal file
View file

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

630
website/other/bezier-rs-demos/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

44
website/other/bezier-rs-demos/package.json
View file

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

5
website/other/build.sh
View file

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