Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions .github/workflows/website.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Expand All @@ -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'
Expand Down
4 changes: 2 additions & 2 deletions frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
7 changes: 7 additions & 0 deletions frontend/package-installer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.");
Expand Down
Loading
Loading