bzuccaro/ditto.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(compiler): Lottie in multi-page output + materialize inline animationData

Browse Source 
Two follow-ups to the single-page Lottie support:

1. Multi-page (clone-site). generateSiteApp emitted only DittoWire; it now wires
   DittoLottie per route exactly like wires — builds the route's lottie spec,
   emits the import + JSX, writes DittoLottie.tsx once, and injects lottie-web
   into the site package.json when any route replays an animation (the write
   moved after the route loop so the dep reflects actual usage). cloneSite now
   captures motion on full route captures (motion: full) so lotties are observed;
   light sibling probes skip it. Per-route gating verified: a route with no
   animation gets no DittoLottie.

2. Inline animationData. When a lottie is only in memory (data-driven init, no
   fetchable URL), capture now writes the JSON to the assets store as a real,
   content-hashed .json so it materializes to /assets/cloned/lottie like any
   source — instead of embedding the blob in the page spec. buildLottieSpec then
   resolves it to a local path; the spec carries path, not animationData.

Verified end-to-end: a 2-page fixture emits DittoLottie only on the animated
route with lottie-web added; a data-driven inline fixture materializes
fd7c…json and the spec references it by path.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
devteamaegis
2026-06-30 00:52:09 -04:00
co-authored by claude-flow
parent 048fd8cdad
commit 9a89fed365
3 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiler/src/site/cloneSite.ts
+1 -1
View File
@@ -128,7 +128,7 @@ export async function runCloneSite(opts: CloneSiteOptions): Promise<CloneSiteRes
// Only capture interactions on full (all-viewport) route captures, never the
// light single-viewport sibling probes used for collection confirmation.
const full = viewports.length === REQUIRED_VIEWPORTS.length;
const capture = await captureSite({ url, outDir: sourceDir, viewports, interactions: opts.interactions && full, screenshots, log: () => {} });
const capture = await captureSite({ url, outDir: sourceDir, viewports, interactions: opts.interactions && full, motion: full, screenshots, log: () => {} });
const ir = buildIR(sourceDir, viewports);
const assetGraph = buildAssetGraph(capture);
const fontGraph = buildFontGraph(capture.fontFaces, assetGraph, url);