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 6b711117b3a5d5d8a3ee20f36a43bc74930b7c82.

* Update dev docs with simpler, more accurate instructions

node-graph/nodes/gcore/Cargo.toml

@@ -8,6 +8,13 @@ license = "MIT OR Apache-2.0"
 
 [features]
 default = ["serde"]
+wasm = [
+	"core-types/wasm",
+	"raster-types/wasm",
+	"graphic-types/wasm",
+	"tsify",
+	"wasm-bindgen",
+]
 
 [dependencies]
 # Local dependencies
@@ -21,7 +28,8 @@ dyn-any = { workspace = true }
 glam = { workspace = true }
 log = { workspace = true }
 serde_json = { workspace = true }
-specta = { workspace = true }
 
 # Optional workspace dependencies
 serde = { workspace = true, optional = true }
+tsify = { workspace = true, optional = true }
+wasm-bindgen = { workspace = true, optional = true }

node-graph/nodes/gcore/src/extract_xy.rs

@@ -14,7 +14,8 @@ fn extract_xy<T: Into<DVec2>>(_: impl Ctx, #[implementations(DVec2, IVec2, UVec2
 }
 
 /// The X or Y component of a vec2.
-#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, DynAny, node_macro::ChoiceType, specta::Type, serde::Serialize, serde::Deserialize)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, DynAny, node_macro::ChoiceType, serde::Serialize, serde::Deserialize)]
 #[widget(Radio)]
 pub enum XY {
 	#[default]

node-graph/nodes/gstd/Cargo.toml

@@ -16,6 +16,14 @@ wasm = [
 	"web-sys",
 	"graphene-application-io/wasm",
 	"image/png",
+	"core-types/wasm",
+	"vector-types/wasm",
+	"graphic-types/wasm",
+	"text-nodes/wasm",
+	"raster-nodes/wasm",
+	"vector-nodes/wasm",
+	"graphene-core/wasm",
+	"graph-craft/wasm",
 ]
 image-compare = []
 vello = ["gpu"]

node-graph/nodes/path-bool/Cargo.toml

@@ -6,6 +6,9 @@ description = "Path boolean operation nodes for Graphene"
 authors = ["Graphite Authors <contact@graphite.art>"]
 license = "MIT OR Apache-2.0"
 
+[features]
+wasm = ["core-types/wasm", "tsify", "wasm-bindgen"]
+
 [dependencies]
 # Local dependencies
 dyn-any = { workspace = true }
@@ -13,8 +16,11 @@ core-types = { workspace = true }
 graphic-types = { workspace = true }
 node-macro = { workspace = true }
 glam = { workspace = true }
-specta = { workspace = true }
 log = { workspace = true }
 path-bool = { workspace = true }
 serde = { workspace = true }
 vector-types = { workspace = true }
+
+# Optional workspace dependencies
+tsify = { workspace = true, optional = true }
+wasm-bindgen = { workspace = true, optional = true }

node-graph/nodes/path-bool/src/lib.rs

@@ -11,14 +11,12 @@ pub use path_bool as path_bool_lib;
 use path_bool::{FillRule, PathBooleanOperation};
 use std::ops::Mul;
 
-// Import specta so derive macros can find it
-use core_types::specta;
-
 // TODO: Fix boolean ops to work by removing .transform() and .one_instance_*() calls,
 // TODO: since before we used a Vec of single-row tables and now we use a single table
 // TODO: with multiple rows while still assuming a single row for the boolean operations.
 
-#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, serde::Serialize, serde::Deserialize, Hash, DynAny, specta::Type, node_macro::ChoiceType)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, serde::Serialize, serde::Deserialize, Hash, DynAny, node_macro::ChoiceType)]
 #[widget(Radio)]
 pub enum BooleanOperation {
 	#[default]

node-graph/nodes/raster/Cargo.toml

@@ -11,11 +11,7 @@ workspace = true
 
 [features]
 default = ["std"]
-shader-nodes = [
-	"std",
-	"dep:raster-nodes-shaders",
-	"dep:wgpu-executor",
-]
+shader-nodes = ["std", "dep:raster-nodes-shaders", "dep:wgpu-executor"]
 std = [
 	"dep:core-types",
 	"dep:dyn-any",
@@ -27,9 +23,15 @@ std = [
 	"dep:rand_chacha",
 	"dep:fastnoise-lite",
 	"dep:serde",
-	"dep:specta",
 	"dep:kurbo",
 ]
+wasm = [
+	"core-types/wasm",
+	"raster-types/wasm",
+	"vector-types/wasm",
+	"tsify",
+	"wasm-bindgen",
+]
 
 [dependencies]
 # Local dependencies
@@ -52,7 +54,6 @@ num-traits = { workspace = true }
 num_enum = { workspace = true }
 
 # Workspace std dependencies
-specta = { workspace = true, optional = true }
 image = { workspace = true, optional = true }
 ndarray = { workspace = true, optional = true }
 rand = { workspace = true, optional = true }
@@ -61,6 +62,10 @@ fastnoise-lite = { workspace = true, optional = true }
 serde = { workspace = true, optional = true }
 kurbo = { workspace = true, optional = true }
 
+# Workspace wasm dependencies
+tsify = { workspace = true, optional = true }
+wasm-bindgen = { workspace = true, optional = true }
+
 [dev-dependencies]
 tokio = { workspace = true }
 futures = { workspace = true }

node-graph/nodes/raster/src/adjustments.rs

@@ -33,8 +33,9 @@ use vector_types::GradientStops;
 // https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/#:~:text=%27clrL%27%20%3D%20Color%20Lookup
 // https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/#:~:text=Color%20Lookup%20(Photoshop%20CS6
 
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash, node_macro::ChoiceType, bytemuck::NoUninit, BufferStruct, FromPrimitive, IntoPrimitive)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 #[widget(Dropdown)]
 #[repr(u32)]
 pub enum LuminanceCalculation {
@@ -563,8 +564,9 @@ fn vibrance<T: Adjust<Color>>(
 }
 
 #[repr(u32)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType, BufferStruct, FromPrimitive, IntoPrimitive)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 #[widget(Radio)]
 pub enum RedGreenBlue {
 	#[default]
@@ -573,8 +575,9 @@ pub enum RedGreenBlue {
 	Blue,
 }
 
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType, bytemuck::NoUninit, BufferStruct, FromPrimitive, IntoPrimitive)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 #[widget(Radio)]
 #[repr(u32)]
 pub enum RedGreenBlueAlpha {
@@ -586,8 +589,9 @@ pub enum RedGreenBlueAlpha {
 }
 
 /// Style of noise pattern.
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 #[widget(Dropdown)]
 pub enum NoiseType {
 	#[default]
@@ -603,8 +607,9 @@ pub enum NoiseType {
 }
 
 /// Style of layered levels of the noise pattern.
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 pub enum FractalType {
 	#[default]
 	None,
@@ -619,8 +624,9 @@ pub enum FractalType {
 }
 
 /// Distance function used by the cellular noise.
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 pub enum CellularDistanceFunction {
 	#[default]
 	Euclidean,
@@ -630,8 +636,9 @@ pub enum CellularDistanceFunction {
 	Hybrid,
 }
 
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 pub enum CellularReturnType {
 	CellValue,
 	#[default]
@@ -649,8 +656,9 @@ pub enum CellularReturnType {
 	Division,
 }
 
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 #[widget(Dropdown)]
 pub enum DomainWarpType {
 	#[default]
@@ -762,8 +770,9 @@ fn channel_mixer<T: Adjust<Color>>(
 }
 
 #[repr(u32)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType, BufferStruct, FromPrimitive, IntoPrimitive)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 #[widget(Radio)]
 pub enum RelativeAbsolute {
 	#[default]
@@ -772,8 +781,9 @@ pub enum RelativeAbsolute {
 }
 
 #[repr(u32)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[cfg_attr(feature = "std", derive(dyn_any::DynAny, serde::Serialize, serde::Deserialize))]
 #[derive(Debug, Clone, Copy, Default, PartialEq, Eq, Hash, node_macro::ChoiceType, BufferStruct, FromPrimitive, IntoPrimitive)]
-#[cfg_attr(feature = "std", derive(dyn_any::DynAny, specta::Type, serde::Serialize, serde::Deserialize))]
 pub enum SelectiveColorChoice {
 	#[default]
 	Reds,

node-graph/nodes/raster/src/curve.rs

@@ -4,7 +4,8 @@ use dyn_any::{DynAny, StaticType, StaticTypeSized};
 use std::hash::{Hash, Hasher};
 use std::ops::{Add, Mul, Sub};
 
-#[derive(Debug, Clone, PartialEq, DynAny, specta::Type, serde::Serialize, serde::Deserialize)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Debug, Clone, PartialEq, DynAny, serde::Serialize, serde::Deserialize)]
 pub struct Curve {
 	#[serde(rename = "manipulatorGroups")]
 	pub manipulator_groups: Vec<CurveManipulatorGroup>,
@@ -31,7 +32,8 @@ impl Hash for Curve {
 	}
 }
 
-#[derive(Debug, Clone, Copy, PartialEq, DynAny, specta::Type, serde::Serialize, serde::Deserialize)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Debug, Clone, Copy, PartialEq, DynAny, serde::Serialize, serde::Deserialize)]
 pub struct CurveManipulatorGroup {
 	pub anchor: [f32; 2],
 	pub handles: [[f32; 2]; 2],

node-graph/nodes/text/Cargo.toml

@@ -8,6 +8,7 @@ license = "MIT OR Apache-2.0"
 
 [features]
 default = ["serde"]
+wasm = ["core-types/wasm", "tsify", "wasm-bindgen"]
 
 [dependencies]
 # Local dependencies
@@ -24,3 +25,5 @@ log = { workspace = true }
 
 # Optional workspace dependencies
 serde = { workspace = true, optional = true }
+tsify = { workspace = true, optional = true }
+wasm-bindgen = { workspace = true, optional = true }

node-graph/nodes/text/src/font_cache.rs

@@ -3,11 +3,9 @@ use parley::fontique::Blob;
 use std::collections::HashMap;
 use std::sync::Arc;
 
-// Import specta so derive macros can find it
-use core_types::specta;
-
 /// A font type (storing font family and font style and an optional preview URL)
-#[derive(Debug, Clone, serde::Serialize, serde::Deserialize, Eq, DynAny, core_types::specta::Type)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize, Eq, DynAny)]
 pub struct Font {
 	#[serde(rename = "fontFamily")]
 	pub font_family: String,

node-graph/nodes/text/src/lib.rs

@@ -12,12 +12,10 @@ pub use to_path::*;
 pub use core_types as gcore;
 pub use vector_types;
 
-// Import specta so derive macros can find it
-use core_types::specta;
-
 /// Alignment of lines of type within a text block.
 #[repr(C)]
-#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, Hash, DynAny, core_types::specta::Type, node_macro::ChoiceType)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq, serde::Serialize, serde::Deserialize, Hash, DynAny, node_macro::ChoiceType)]
 #[widget(Radio)]
 pub enum TextAlign {
 	#[default]

node-graph/nodes/vector/Cargo.toml

@@ -8,6 +8,7 @@ license = "MIT OR Apache-2.0"
 
 [features]
 default = ["serde"]
+wasm = ["core-types/wasm", "tsify", "wasm-bindgen"]
 
 [dependencies]
 # Local dependencies
@@ -28,6 +29,8 @@ qrcodegen = { workspace = true }
 
 # Optional workspace dependencies
 serde = { workspace = true, optional = true }
+tsify = { workspace = true, optional = true }
+wasm-bindgen = { workspace = true, optional = true }
 
 [dev-dependencies]
 graphene-core = { workspace = true }

node-graph/nodes/vector/src/generator_nodes.rs

@@ -1,6 +1,6 @@
+use core_types::Ctx;
 use core_types::registry::types::{Angle, PixelSize};
 use core_types::table::Table;
-use core_types::{Ctx, specta};
 use dyn_any::DynAny;
 use glam::DVec2;
 use graphic_types::Vector;
@@ -187,7 +187,8 @@ fn star<T: AsU64>(
 	Table::new_from_element(Vector::from_subpath(subpath::Subpath::new_star_polygon(DVec2::splat(-diameter), points, diameter, inner_diameter)))
 }
 
-#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, serde::Serialize, serde::Deserialize, Hash, DynAny, specta::Type, node_macro::ChoiceType)]
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, serde::Serialize, serde::Deserialize, Hash, DynAny, node_macro::ChoiceType)]
 #[widget(Radio)]
 pub enum QRCodeErrorCorrectionLevel {
 	/// Allows recovery from up to 7% data loss.