The Graphite frontend is a web app that provides the presentation for the editor. It displays the GUI based on state from the backend and provides users with interactive widgets that send updates to the backend, which is the source of truth for state information. The frontend is built out of reactive components using the Svelte framework. The backend is written in Rust and compiled to WebAssembly (Wasm) to be run in the browser alongside the JS code.
Images that are used in components and embedded into the application bundle by the build system.
Source code for the web app in the form of Svelte components and TypeScript files.
Wraps the editor backend codebase (/editor) and provides a JS-centric API for the web app to use as an entry point, unburdened by Rust's complex data types that are incompatible with JS data types. Bindings (JS functions that call into the Wasm module) are provided by wasm-bindgen in concert with wasm-pack.
When you use npm run check, ESLint checks the code in the frontend project for code quality. (The command also reports TS and Svelte errors.) The tool enforces style rules on the JS, TS, and Svelte (including its HTML and SCSS) files in our frontend codebase. As it is set up in this config file, ESLint will complain about bad practices and often help reformat code automatically when the file is saved in VS Code, or manually when npm run fix is executed. (If you don't use VS Code, remember to run this command before committing!) This config file for ESLint sets our style preferences and configures our usage of extensions/plugins for Svelte support and Prettier's role as a code formatter.
Configures the Svelte compiler, including the preprocessor setup for SCSS and TypeScript support, and compiler warning filters.
Basic configuration options for the TypeScript build tool to do its job in our repository.
We use the Vite bundler/build system. This file is where we configure Vite to set up plugins (like the third-party license checker/generator). Part of the license checker plugin setup includes some functions to format web package licenses, as well as Rust package licenses provided by cargo-about, into a text file that's distributed with the application to provide license notices for third-party code.
While we don't use Node.js as a JS-based server, we do rely on its ecosystem of packages for our build system toolchain. 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, Sass, etc.) that run in your terminal during the build process.
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.