ehoandClaude Opus 4.8
19f2e9b734
Anti-drift snippets: `?raw` isn't supported by Angular's esbuild build, so real code is exposed via // #region showcase:<name> markers in source (registration/remote-data/ postcode/change-request.machine/intake.machine) → scripts/gen-snippets.mjs → committed snippets.generated.ts, with a CI drift gate so the shown code is the shipped code. The /concepts page renders the 5 real snippets (union/fold/parse/machine/steps) with a source caption + a tiny dependency-free highlightTs (+spec); deliberately-wrong illustrations stay authored. Teaching motion: active state node pops on transition + parse result animates in (existing reduced-motion-safe toolkit). Generated file prettier-ignored (like api-client). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2.7 KiB
WP-39 — Showcase: linked code snippets + teaching animations
Status: done Phase: 8 — platform/DX/showcase Priority: P1
Outcome
?raw imports are NOT supported by Angular's esbuild build (verified), so anti-drift is done via
a generator (mirrors gen:api): // #region showcase:<name> markers in real source
(registration.ts, remote-data.ts, postcode.ts, change-request.machine.ts, intake.machine.ts) →
scripts/gen-snippets.mjs (npm run gen:snippets) → committed src/app/showcase/snippets.generated.ts.
A CI drift gate (gen:snippets && git diff --exit-code) forces a regen after any edit, so the shown
code IS the shipped code. The showcase renders the 5 real snippets (union/fold/parse/machine/steps)
each with a ↳ <source file> caption, highlighted by a tiny dependency-free highlightTs (+spec);
the deliberately-wrong illustrations stay authored (no real source to link). Teaching animation: the
active state node pops (scale) as the wizard transitions, and the parse result animates in
(animate.enter), reusing the existing reduced-motion-safe toolkit. Generated file is
prettier-ignored (like api-client.ts) so the drift gate and format:check don't conflict.
Why
The /concepts showcase shows live components, but its code snippets are hand-authored
innerHTML strings with manual highlighting — they drift from the real code. And the animation
toolkit (withViewTransitions, native animate.enter/leave, reduced-motion-safe keyframes in
styles.scss) is proven in dashboard/upload but unused for teaching motion.
Decisions
- Anti-drift snippets: load real source excerpts via Vite
?rawimports with// #region namemarkers + a tiny pure extractor; render with lightweight highlighting. No moreinnerHTMLliterals. - On the Storybook/MDX side, use
<Source>/Canvas "show code" consistently (extend beyond the current 4 of 14 pages). - Reuse the existing motion toolkit (no new animation lib):
animate.enter/leaveon the fold/union demos + a "step throughreduce" animation for the TEA loop; keep reduced-motion-safe.
Files
src/app/showcase/concepts.page.ts— replaceinnerHTMLsnippets with?raw+region excerpts; apply animations.- New tiny extractor util (pure) + spec (region slicing).
src/docs/machines.mdx,fp-in-ui.mdx,remote-data.mdx— reference the live linked snippets.
Acceptance criteria
- The good-side snippets are sourced from real files via region markers (edit source → regen → snippet updates); a CI drift gate enforces it. Bad-pattern illustrations stay authored.
- The state machine + parse demos animate (reduced-motion respected globally); no new dependency.
npm run cigreen.