feat(sdk): split the visual renderer into compile and solve, reuse it in WASM, derive parity coverage (3b/6) by GarthDB · Pull Request #1579 · adobe/spectrum-design-data

GarthDB · 2026-10-31T23:25:19Z

Squash merge is fine; the next slice is rebased onto the result.

Description

Slice 3b of 6 from #1569, into next/visual-recipes, now rebased onto the merged 3a (#1578). It splits the visual renderer into a compile step and a solve step, reuses compiled recipes in the WASM Dataset, and adds visual parity tests that derive their coverage from the data.

Renderer (sdk/core/src/visual.rs)

Compile resolves a recipe against the token graph for one component, size and mode: every token and relationship binding becomes its ranked candidates (CompiledVariant). It is the only step that needs the graph.
Solve (solve) takes a CompiledVariant and a request, evaluates when conditions and places the parts. It is a pure function of its arguments and needs no graph.
SceneCache holds compiled variants per size and mode for one graph, so a matrix of requests compiles each recipe once. build_scene_cached is the cached entry point; build_scene keeps its signature and results.
The WASM Dataset keeps one SceneCache, so repeated renderScene and renderSvg calls reuse compiled recipes.
Unchanged: all recipe snapshots (recipe_snapshots), the new golden SVGs and the scene and SVG output. None changed in this slice.
Speed: the changeset records repeated renders 30 to 55 times faster (button 6.5 to 0.21 ms, badge 5.0 to 0.11 ms, switch 7.8 to 0.14 ms). I did not re-measure these on this branch; they come from the changeset text in be069b50.

Parity tests (sdk/wasm/test/visual-runtime-parity.test.js)

Subjects are every file in packages/design-data/visuals/. Option axes come from packages/design-data/components/<name>.json: booleans are false/true, enums are every declared value plus unset; states come from the component's states. Free-form options use extraCases.
Default run: a seeded sample of option sets (each single value plus 8 random sets) across schemes and scales. The same scenes are rendered by the WASM Dataset and by the JS runtime (visual-runtime.js) and compared.
Golden SVGs in sdk/wasm/test/fixtures/visual-golden/ (3 scenes per component, 5 components) are checked against both engines.
Env vars: VISUAL_PARITY_FULL=1 runs the full option matrix instead of the sample (timeout raised to 60m); VISUAL_PARITY_SITE_DIR=<dir> reuses a prebuilt data.json instead of building the site in the test (moon sets it from the new cached sdk-wasm:site-data task); VISUAL_PARITY_UPDATE=1 rewrites the golden SVGs so a drift shows up as a reviewable diff.

Related Issue

Part of #1569 (sliced under bead p6ga.9).

Motivation and Context

Recompiling a recipe on every render made scenes and SVGs slow to produce in a loop, and parity coverage was hand-listed, so a new recipe or option could be missed. Deriving coverage from the recipes and component data keeps both engines checked as the data grows.

How Has This Been Tested?

Rebased onto the merged 3a (#1578) in a clean worktree:

cargo fmt --check and cargo clippy --workspace --all-targets -- -D warnings
moon run sdk:test sdk-wasm:test design-data:validate design-data:validate-dataset tokens:verifyLegacyOutput --force: sdk 1672 passed (2 skipped), sdk-wasm 118 passed; no snapshot, golden or legacy output changed
changeset linter with --fail-on-warnings (8 files valid), node .github/scripts/check-ci-coverage.mjs, pnpm ai:check
git diff pnpm-lock.yaml is empty

Review guide

sdk/core/src/visual.rs: compile_recipe, compile_variant, CompiledVariant, SceneCache and solve. Check that build_scene still goes through the same two steps.
sdk/wasm/src/dataset.rs: the scenes field and build_scene_cached call.
sdk/wasm/test/visual-runtime-parity.test.js, then sdk/wasm/moon.yml (site-data task) and ava.config.js.
The golden SVGs (generated; review a few).
.changeset/wasm-visual-compile-solve.md.

Screenshots (if appropriate):

Not applicable.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Refactor and performance change with tests; no behavior change.

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

changeset-bot · 2026-10-31T23:25:26Z

🦋 Changeset detected

Latest commit: 8b2cffa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages

Name	Type
@adobe/design-data-wasm	Patch
s2-tokens-viewer	Patch
@adobe/design-data-agent-mcp	Patch
@adobe/design-data-mcp	Patch
@adobe/design-data	Patch
@adobe/spectrum-design-data-mcp	Patch
@adobe/token-naming-audit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-10-31T23:26:24Z

🎨 Token Changes Report

Tokens Changed (0)

Original Branch: next/visual-recipes

This comment was automatically generated by the token diff tool. 🤖

github-actions · 2026-10-31T23:26:51Z

🧩 Component Schema Changes Report

No component schema changes detected.

This comment was automatically generated by the component schema diff tool. 🤖

github-actions · 2026-10-31T23:34:24Z

Run report for 8b2cffac

Total time: 7m 53s | Comparison time: 15m 56s | Estimated savings: 8m 2s (50.5% faster)

	Action	Time	Status	Info
⬛️	`SetupProto(0.57.4)`	0.1ms	Skipped
🟩	`SyncWorkspace`	9.8ms	Passed
🟩	`SyncProject(sdk)`	0.5ms	Passed
🟩	`SyncProject(sdk-wasm)`	1.2ms	Passed
⬛️	`SetupToolchain(node:20.17.0)`	401.4ms	Skipped
⬛️	`SetupToolchain(rust:1.88.0)`	555.3ms	Skipped
⬛️	`SetupToolchain(pnpm:10.17.1)`	253.2ms	Skipped
⬛️	`SetupToolchain(javascript)`	0ms	Skipped
🟩	`SetupEnvironment(javascript)`	0.7ms	Passed
⬛️	`InstallDependencies(javascript)`	0.1ms	Skipped
⬛️	`SetupEnvironment(javascript, sdk)`	0.9ms	Skipped
🟩	`SetupEnvironment(rust, sdk)`	111.3ms	Passed
⬛️	`InstallDependencies(rust, sdk)`	2.3ms	Skipped
🟩	`RunTask(sdk:fmt-check)`	1.4s	Passed
🟩	`InstallDependencies(javascript, sdk)`	4.8s	Passed
🟩	`RunTask(sdk:codegen-check)`	97.3ms	Passed
🟩	`RunTask(sdk:lint)`	58s	Passed
🟩	`RunTask(sdk-wasm:site-data)`	2m 11s	Passed	SLOW
🟩	`RunTask(sdk:test-doc)`	3m 2s	Passed	SLOW
🟩	`RunTask(sdk-wasm:cache-build)`	3m 33s	Passed	SLOW
	And 4 more...

Expanded report

	Action	Time	Status	Info
🟩	`RunTask(sdk:test)`	5m 29s	Passed	SLOW
🟩	`RunTask(sdk-wasm:build)`	3m 10s	Passed	SLOW
🟩	`RunTask(sdk-wasm:test)`	11.6s	Passed
🟩	`RunTask(sdk-wasm:ci)`	13.2ms	Passed

Changed files

.changeset/wasm-visual-compile-solve.md
sdk/core/src/visual.rs
sdk/wasm/ava.config.js
sdk/wasm/moon.yml
sdk/wasm/src/dataset.rs
sdk/wasm/test/fixtures/visual-golden/action-button/all-on-dark-mobile.svg
sdk/wasm/test/fixtures/visual-golden/action-button/default.svg
sdk/wasm/test/fixtures/visual-golden/action-button/first-values-wireframe.svg
sdk/wasm/test/fixtures/visual-golden/badge/all-on-dark-mobile.svg
sdk/wasm/test/fixtures/visual-golden/badge/default.svg
sdk/wasm/test/fixtures/visual-golden/badge/first-values-wireframe.svg
sdk/wasm/test/fixtures/visual-golden/button/all-on-dark-mobile.svg
sdk/wasm/test/fixtures/visual-golden/button/default.svg
sdk/wasm/test/fixtures/visual-golden/button/first-values-wireframe.svg
sdk/wasm/test/fixtures/visual-golden/checkbox/all-on-dark-mobile.svg
sdk/wasm/test/fixtures/visual-golden/checkbox/default.svg
sdk/wasm/test/fixtures/visual-golden/checkbox/first-values-wireframe.svg
sdk/wasm/test/fixtures/visual-golden/switch/all-on-dark-mobile.svg
sdk/wasm/test/fixtures/visual-golden/switch/default.svg
sdk/wasm/test/fixtures/visual-golden/switch/first-values-wireframe.svg
sdk/wasm/test/visual-runtime-parity.test.js

test added 6 commits October 31, 2026 17:22

test(wasm): derive visual parity coverage from recipe and component data

0d44820

test(wasm): cache site build and add golden SVGs for visual parity

8f8d357

refactor(sdk): split visual renderer into compile and solve

9a70217

perf(wasm): reuse compiled visual recipes across Dataset renders

daeafca

chore: add changeset for faster WASM visual renders

97d881e

chore: wrap changeset lines

8b2cffa

GarthDB merged commit bf40d54 into next/visual-recipes Oct 31, 2026
9 checks passed

GarthDB deleted the s3b-renderer branch October 31, 2026 23:43

Navigation Menu

Repository navigation

feat(sdk): split the visual renderer into compile and solve, reuse it in WASM, derive parity coverage (3b/6) - #1579

feat(sdk): split the visual renderer into compile and solve, reuse it in WASM, derive parity coverage (3b/6)#1579
GarthDB merged 6 commits into
next/visual-recipesfrom
s3b-renderer

GarthDB commented Oct 31, 2026

Uh oh!

changeset-bot Bot commented Oct 31, 2026

Uh oh!

github-actions Bot commented Oct 31, 2026

Uh oh!

github-actions Bot commented Oct 31, 2026

Uh oh!

github-actions Bot commented Oct 31, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

GarthDB commented Oct 31, 2026

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Review guide

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

changeset-bot Bot commented Oct 31, 2026

🦋 Changeset detected

Uh oh!

github-actions Bot commented Oct 31, 2026

🎨 Token Changes Report

Tokens Changed (0)

Uh oh!

github-actions Bot commented Oct 31, 2026

🧩 Component Schema Changes Report

No component schema changes detected.

Uh oh!

github-actions Bot commented Oct 31, 2026

Run report for 8b2cffac

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant