Refactor the TypeScript data flow for full type safety and auto-generation of Rust types (#3865)

* Migrate Specta to Tsify to auto-generate messages.ts, working except colors and widgets

* Adopt the generated FillColor/Color/GradientStops

* Fix widget typing

* Separate WidgetGroup enum variants into wrapper structs

* Small rename

* Simplify widgets further

* Clean up message type references

* Switch type imports to the auto-generated file

* Remove lowercase serde rename

* Fix FillChoice deserialization

* Fix small regression from #3837

* Improve type safety

* Make WidgetSpan type-safe

* More cleanup and type safety

* More type safety

* More type safety

* Get the rest to type-check without errors; improve widget builder macro to have optional icons; improve Svelte 5 configs

* Cargo fmt

* Fix imports

* Update outdated readme info

* Fix lint command rename references

* Fix typos

* One more typos fix

* Remove unnecessary dep: prefix from the edited Cargo.toml files

* Remove excess parts from Cargo.toml

* Fix compiling on desktop

* Revert "Remove excess parts from Cargo.toml"

This reverts commit 6b71111.

* Update dev docs with simpler, more accurate instructions

Author: Keavon

.github/workflows/ci.yml

@@ -117,7 +117,7 @@ jobs:
           NODE_ENV: production
         run: |
           cd frontend
-          npm run lint
+          npm run check
 
   # Run the Rust tests on the self-hosted native runner
   test:

.github/workflows/website.yml

@@ -94,7 +94,7 @@ jobs:
         run: |
           cd website
           npm ci
-          npm run lint
+          npm run check
           zola --config config.toml build --minify
 
       - name: 📤 Publish to Cloudflare Pages

.vscode/settings.json

@@ -39,25 +39,12 @@
 	"rust-analyzer.check.command": "clippy",
 	"rust-analyzer.cargo.allTargets": false,
 	"rust-analyzer.procMacro.ignored": {
-		"serde_derive": ["Serialize", "Deserialize"],
-		"specta_macros": ["Type"] // Disabled because of: https://github.com/specta-rs/specta/issues/387
+		"serde_derive": ["Serialize", "Deserialize"]
 	},
 	// ESLint config
 	"eslint.format.enable": true,
 	"eslint.workingDirectories": ["./frontend", "./website"],
 	"eslint.validate": ["javascript", "typescript", "svelte"],
-	// Svelte config
-	"svelte.plugin.svelte.compilerWarnings": {
-		"css-unused-selector": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"vite-plugin-svelte-css-no-scopable-elements": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y-no-static-element-interactions": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y-no-noninteractive-element-interactions": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y-click-events-have-key-events": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y_consider_explicit_label": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y_click_events_have_key_events": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y_no_noninteractive_element_interactions": "ignore", // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-		"a11y_no_static_element_interactions": "ignore" // NOTICE: Keep this list in sync with the list in `frontend/vite.config.ts`
-	},
 	// Git Graph config
 	"git-graph.repository.fetchAndPrune": true,
 	"git-graph.repository.showRemoteHeads": false,

Cargo.lock

@@ -98,6 +98,7 @@ rustc-hash = "2.0"
 bytemuck = { version = "1.13", features = ["derive", "min_const_generics"] }
 serde = { version = "1.0", features = ["derive", "rc"] }
 serde_json = "1.0"
+serde_bytes = "0.11"
 serde-wasm-bindgen = "0.6"
 reqwest = { version = "0.13", features = ["blocking", "json"] }
 futures = "0.3"
@@ -176,11 +177,7 @@ fern = { version = "0.7", features = ["colored"] }
 num_enum = { version = "0.7", default-features = false }
 num-derive = "0.4"
 num-traits = { version = "0.2", default-features = false, features = ["libm"] }
-specta = { version = "2.0.0-rc.22", features = [
-	"glam",
-	"derive",
-	# "typescript",
-] }
+tsify = { version = "0.5", default-features = false, features = ["js"] }
 syn = { version = "2.0", default-features = false, features = [
 	"full",
 	"derive",
@@ -230,7 +227,6 @@ graphite-proc-macros = { opt-level = 1 }
 image = { opt-level = 2 }
 rustc-hash = { opt-level = 3 }
 serde_derive = { opt-level = 1 }
-specta-macros = { opt-level = 1 }
 syn = { opt-level = 1 }
 node-macro = { opt-level = 2 }
 

Cargo.toml

@@ -183,7 +183,7 @@ allow-git = []
 
 [sources.allow-org]
 # 1 or more github.com organizations to allow git sources for
-github = ["linebender", "Rust-GPU", "specta-rs"]
+github = ["linebender", "Rust-GPU"]
 # 1 or more gitlab.com organizations to allow git sources for
 #gitlab = [""]
 # 1 or more bitbucket.org organizations to allow git sources for

deny.toml

@@ -26,6 +26,7 @@ pub(super) fn intercept_frontend_message(dispatcher: &mut DesktopWrapperMessageD
 			});
 		}
 		FrontendMessage::TriggerSaveDocument { document_id, name, path, content } => {
+			let content = content.into_vec();
 			if let Some(path) = path {
 				dispatcher.respond(DesktopFrontendMessage::WriteFile { path, content });
 			} else {
@@ -42,6 +43,7 @@ pub(super) fn intercept_frontend_message(dispatcher: &mut DesktopWrapperMessageD
 			}
 		}
 		FrontendMessage::TriggerSaveFile { name, content } => {
+			let content = content.into_vec();
 			dispatcher.respond(DesktopFrontendMessage::SaveFileDialog {
 				title: "Save File".to_string(),
 				default_filename: name,

desktop/wrapper/src/intercept_frontend_message.rs

@@ -6,7 +6,7 @@ pub(crate) mod menu {
 	use graphite_editor::messages::input_mapper::utility_types::input_keyboard::{Key, LabeledKeyOrMouseMotion, LabeledShortcut};
 	use graphite_editor::messages::input_mapper::utility_types::misc::ActionShortcut;
 	use graphite_editor::messages::layout::LayoutMessage;
-	use graphite_editor::messages::tool::tool_messages::tool_prelude::{Layout, LayoutGroup, LayoutTarget, MenuListEntry, Widget, WidgetId};
+	use graphite_editor::messages::tool::tool_messages::tool_prelude::{Layout, LayoutGroup, LayoutTarget, MenuListEntry, Widget, WidgetId, WidgetRow};
 
 	use crate::messages::{EditorMessage, KeyCode, MenuItem, Modifiers, Shortcut};
 
@@ -15,7 +15,7 @@ pub(crate) mod menu {
 			[layout_group] => layout_group,
 			_ => panic!("Menu bar layout is supposed to have exactly one layout group"),
 		};
-		let LayoutGroup::Row { widgets } = layout_group else {
+		let LayoutGroup::Row(WidgetRow { widgets }) = layout_group else {
 			panic!("Menu bar layout group is supposed to be a row");
 		};
 		widgets
@@ -88,8 +88,8 @@ pub(crate) mod menu {
 			_ => None,
 		};
 
-		match icon.as_str() {
-			"CheckboxChecked" => {
+		match icon.as_deref() {
+			Some("CheckboxChecked") => {
 				return MenuItem::Checkbox {
 					id,
 					text,
@@ -98,7 +98,7 @@ pub(crate) mod menu {
 					checked: true,
 				};
 			}
-			"CheckboxUnchecked" => {
+			Some("CheckboxUnchecked") => {
 				return MenuItem::Checkbox {
 					id,
 					text,

desktop/wrapper/src/utils.rs

@@ -29,12 +29,13 @@ log = { workspace = true }
 bitflags = { workspace = true }
 thiserror = { workspace = true }
 serde = { workspace = true }
+serde_bytes = { workspace = true }
 serde_json = { workspace = true }
 kurbo = { workspace = true }
 futures = { workspace = true }
 glam = { workspace = true }
 derivative = { workspace = true }
-specta = { workspace = true }
+tsify = { workspace = true }
 dyn-any = { workspace = true }
 num_enum = { workspace = true }
 usvg = { workspace = true }