diff --git a/.nix/pkgs/graphite.nix b/.nix/pkgs/graphite.nix index bd757add80..9ab995ab2f 100644 --- a/.nix/pkgs/graphite.nix +++ b/.nix/pkgs/graphite.nix @@ -32,7 +32,7 @@ let ]; buildInputs = [ pkgs.openssl ]; env.CARGO_PROFILE = if dev then "dev" else "release"; - cargoExtraArgs = "--target wasm32-unknown-unknown -p graphite-wasm --no-default-features --features native"; + cargoExtraArgs = "--target wasm32-unknown-unknown -p graphite-wasm-wrapper --no-default-features --features native"; doCheck = false; }; resources = deps.crane.lib.buildPackage ( diff --git a/Cargo.lock b/Cargo.lock index 0fb7990ead..16e4f29193 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -2439,7 +2439,7 @@ dependencies = [ ] [[package]] -name = "graphite-wasm" +name = "graphite-wasm-wrapper" version = "0.0.0" dependencies = [ "graph-craft", diff --git a/Cargo.toml b/Cargo.toml index fb43af9107..468b88ea79 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,7 +8,7 @@ members = [ "desktop/platform/mac", "desktop/platform/win", "editor", - "frontend/wasm", + "frontend/wrapper", "libraries/dyn-any", "libraries/math-parser", "node-graph/libraries/*", @@ -30,7 +30,7 @@ members = [ ] default-members = [ "editor", - "frontend/wasm", + "frontend/wrapper", "libraries/dyn-any", "libraries/math-parser", "node-graph/graph-craft", diff --git a/editor/src/messages/portfolio/document/overlays/mod.rs b/editor/src/messages/portfolio/document/overlays/mod.rs index 4445dbfe84..514ccd7b63 100644 --- a/editor/src/messages/portfolio/document/overlays/mod.rs +++ b/editor/src/messages/portfolio/document/overlays/mod.rs @@ -2,7 +2,7 @@ pub mod grid_overlays; mod overlays_message; mod overlays_message_handler; pub mod utility_functions; -// Native (non‑wasm) +// Native (non‑Wasm) #[cfg(not(target_family = "wasm"))] pub mod utility_types_native; #[cfg(not(target_family = "wasm"))] diff --git a/frontend/README.md b/frontend/README.md index c285691ff4..390b63f471 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -10,7 +10,7 @@ Images that are used in components and embedded into the application bundle by t Source code for the web app in the form of Svelte components and [TypeScript](https://www.typescriptlang.org/) files. -## WebAssembly wrapper: `wasm/` +## Editor wrapper: `wrapper/` 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](https://rustwasm.github.io/docs/wasm-bindgen/) in concert with [wasm-pack](https://github.com/rustwasm/wasm-pack). diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js index 66206b3f7a..c82b29321a 100644 --- a/frontend/eslint.config.js +++ b/frontend/eslint.config.js @@ -68,7 +68,7 @@ export default defineConfig([ { patterns: [ { group: ["./**", "../**"], message: "\nImports must be absolute (e.g. '/src/') not relative (e.g. './')." }, - { group: ["src/**", "assets/**", "wasm/**"], message: "\nLocal imports must start with '/' (e.g. '/src/' not 'src/')." }, + { group: ["src/**", "assets/**", "wrapper/**"], message: "\nLocal imports must start with '/' (e.g. '/src/' not 'src/')." }, ], }, ], diff --git a/frontend/package.json b/frontend/package.json index 8d3da8df7d..ee54fb30cc 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,12 +19,12 @@ "fix": "eslint --fix", "---------- INTERNAL ----------": "", "setup": "node package-installer.js && node branding-installer.js", - "native:build-dev": "wasm-pack build ./wasm --dev --target=web --no-default-features --features native && vite build --mode native", - "native:build-production": "wasm-pack build ./wasm --release --target=web --no-default-features --features native && vite build --mode native", - "wasm:build-dev": "wasm-pack build ./wasm --dev --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-production": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --release --target=web -- --color=always\"" + "native:build-dev": "wasm-pack build ./wrapper --dev --target=web --no-default-features --features native && vite build --mode native", + "native:build-production": "wasm-pack build ./wrapper --release --target=web --no-default-features --features native && vite build --mode native", + "wasm:build-dev": "wasm-pack build ./wrapper --dev --target=web", + "wasm:build-production": "wasm-pack build ./wrapper --release --target=web", + "wasm:watch-dev": "cargo watch --postpone --watch-when-idle --workdir=wrapper --shell \"wasm-pack build . --dev --target=web -- --color=always\"", + "wasm:watch-production": "cargo watch --postpone --watch-when-idle --workdir=wrapper --shell \"wasm-pack build . --release --target=web -- --color=always\"" }, "//": "NOTE: `source-sans-pro` is never to be upgraded to 3.x because that renders a pixel above its intended position.", "dependencies": { diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 191404b90f..96cd92b9fd 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -5,16 +5,16 @@ import type { MessageName, SubscriptionsRouter } from "/src/subscriptions-router"; import { loadDemoArtwork } from "/src/utility-functions/network"; import { operatingSystem } from "/src/utility-functions/platform"; - import init, { EditorWrapper, receiveNativeMessage } from "/wasm/pkg/graphite_wasm"; - import type { FrontendMessage } from "/wasm/pkg/graphite_wasm"; + import init, { EditorWrapper, receiveNativeMessage } from "/wrapper/pkg/graphite_wasm_wrapper"; + import type { FrontendMessage } from "/wrapper/pkg/graphite_wasm_wrapper"; let subscriptions: SubscriptionsRouter | undefined = undefined; let editor: EditorWrapper | undefined = undefined; onMount(async () => { - // Initialize the Wasm module - const wasm = await init(); - for (const [name, f] of Object.entries(wasm)) { + // Initialize the editor wrapper + const wrapper = await init(); + for (const [name, f] of Object.entries(wrapper)) { if (name.startsWith("__node_registry")) f(); } window.imageCanvases = {}; diff --git a/frontend/src/README.md b/frontend/src/README.md index bbff9ee95f..5f03955c5f 100644 --- a/frontend/src/README.md +++ b/frontend/src/README.md @@ -6,7 +6,7 @@ Svelte components that build the Graphite editor GUI from layouts, panels, widge ## Managers: `managers/` -TypeScript files, constructed by the editor frontend, which manage the input/output of browser APIs and link this functionality with the editor backend. These files subscribe to frontend messages to execute JS APIs, and in response to these APIs or user interactions, they may call functions in the backend (defined in `/frontend/wasm/editor_wrapper.rs`). +TypeScript files, constructed by the editor frontend, which manage the input/output of browser APIs and link this functionality with the editor backend. These files subscribe to frontend messages to execute JS APIs, and in response to these APIs or user interactions, they may call functions in the backend (defined in `/frontend/wrapper/editor_wrapper.rs`). Each manager module stores its dependencies (like `subscriptionsRouter` and `editorWrapper`) in module-level variables and exports a `create*()` and `destroy*()` function pair. `Editor.svelte` calls each `create*()` constructor in its `onMount` and calls each `destroy*()` in its `onDestroy`. Managers replace themselves during HMR updates if they are modified live during development. @@ -30,7 +30,7 @@ Associates messages from the backend with subscribers in the frontend, and route ## Svelte app entry point: `App.svelte` -The entry point for the Svelte application. Initializes the Wasm module, creates the `EditorWrapper` backend instance and the subscriptions router, and renders `Editor.svelte` once both are ready. The `EditorWrapper` is the wasm-bindgen interface to the Rust editor backend (defined in `/frontend/wasm/editor_wrapper.rs`), providing access to callable backend functions. Both the editor and subscriptions router are passed as props to `Editor.svelte` and set as Svelte contexts for use throughout the component tree. +The entry point for the Svelte application. Initializes and creates the `EditorWrapper` backend instance and the subscriptions router and renders `Editor.svelte` once both are ready. The `EditorWrapper` is the wasm-bindgen interface to the Rust editor backend (defined in `/frontend/wrapper/editor_wrapper.rs`), providing access to callable backend functions. Both the editor and subscriptions router are passed as props to `Editor.svelte` and set as Svelte contexts for use throughout the component tree. ## Editor base instance: `Editor.svelte` diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte index 8ee8a63ba5..9592e34bf5 100644 --- a/frontend/src/components/Editor.svelte +++ b/frontend/src/components/Editor.svelte @@ -16,7 +16,7 @@ import { createPortfolioStore, destroyPortfolioStore } from "/src/stores/portfolio"; import { createTooltipStore, destroyTooltipStore } from "/src/stores/tooltip"; import type { SubscriptionsRouter } from "/src/subscriptions-router"; - import type { EditorWrapper } from "/wasm/pkg/graphite_wasm"; + import type { EditorWrapper } from "/wrapper/pkg/graphite_wasm_wrapper"; // Graphite Wasm editor and subscriptions router export let subscriptions: SubscriptionsRouter; diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte index eb596bc29f..d8f6296791 100644 --- a/frontend/src/components/floating-menus/ColorPicker.svelte +++ b/frontend/src/components/floating-menus/ColorPicker.svelte @@ -28,8 +28,8 @@ colorEquals, gradientFirstColor, } from "/src/utility-functions/colors"; - import { isPlatformNative } from "/wasm/pkg/graphite_wasm"; - import type { FillChoice, MenuDirection, Color } from "/wasm/pkg/graphite_wasm"; + import { isPlatformNative } from "/wrapper/pkg/graphite_wasm_wrapper"; + import type { FillChoice, MenuDirection, Color } from "/wrapper/pkg/graphite_wasm_wrapper"; type PresetColors = "None" | "Black" | "White" | "Red" | "Yellow" | "Green" | "Cyan" | "Blue" | "Magenta"; diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte index 5e487e035d..d10800d5db 100644 --- a/frontend/src/components/floating-menus/MenuList.svelte +++ b/frontend/src/components/floating-menus/MenuList.svelte @@ -11,7 +11,7 @@ import Separator from "/src/components/widgets/labels/Separator.svelte"; import ShortcutLabel from "/src/components/widgets/labels/ShortcutLabel.svelte"; import TextLabel from "/src/components/widgets/labels/TextLabel.svelte"; - import type { MenuListEntry, MenuDirection } from "/wasm/pkg/graphite_wasm"; + import type { MenuListEntry, MenuDirection } from "/wrapper/pkg/graphite_wasm_wrapper"; let self: FloatingMenu | undefined; let scroller: LayoutCol | undefined; diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte index 8186450e47..bb23f1a06a 100644 --- a/frontend/src/components/floating-menus/NodeCatalog.svelte +++ b/frontend/src/components/floating-menus/NodeCatalog.svelte @@ -6,7 +6,7 @@ import TextInput from "/src/components/widgets/inputs/TextInput.svelte"; import TextLabel from "/src/components/widgets/labels/TextLabel.svelte"; import type { NodeGraphStore } from "/src/stores/node-graph"; - import type { FrontendNodeType } from "/wasm/pkg/graphite_wasm"; + import type { FrontendNodeType } from "/wrapper/pkg/graphite_wasm_wrapper"; const dispatch = createEventDispatcher<{ selectNodeType: string }>(); const nodeGraph = getContext("nodeGraph"); diff --git a/frontend/src/components/floating-menus/Tooltip.svelte b/frontend/src/components/floating-menus/Tooltip.svelte index ea95f65fee..b9f308e5c5 100644 --- a/frontend/src/components/floating-menus/Tooltip.svelte +++ b/frontend/src/components/floating-menus/Tooltip.svelte @@ -5,7 +5,7 @@ import ShortcutLabel from "/src/components/widgets/labels/ShortcutLabel.svelte"; import TextLabel from "/src/components/widgets/labels/TextLabel.svelte"; import type { TooltipStore } from "/src/stores/tooltip"; - import type { EditorWrapper, LabeledShortcut } from "/wasm/pkg/graphite_wasm"; + import type { EditorWrapper, LabeledShortcut } from "/wrapper/pkg/graphite_wasm_wrapper"; const tooltip = getContext("tooltip"); const editor = getContext("editor"); diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte index 7282fb5470..d9c2fc04df 100644 --- a/frontend/src/components/layout/FloatingMenu.svelte +++ b/frontend/src/components/layout/FloatingMenu.svelte @@ -20,7 +20,7 @@ import { onMount, onDestroy, afterUpdate, createEventDispatcher, tick } from "svelte"; import LayoutCol from "/src/components/layout/LayoutCol.svelte"; import { browserVersion } from "/src/utility-functions/platform"; - import type { MenuDirection } from "/wasm/pkg/graphite_wasm"; + import type { MenuDirection } from "/wrapper/pkg/graphite_wasm_wrapper"; const BUTTON_LEFT = 0; const POINTER_STRAY_DISTANCE = 100; diff --git a/frontend/src/components/layout/LayoutCol.svelte b/frontend/src/components/layout/LayoutCol.svelte index 8946fcda65..18b66d4a97 100644 --- a/frontend/src/components/layout/LayoutCol.svelte +++ b/frontend/src/components/layout/LayoutCol.svelte @@ -1,5 +1,5 @@