Generated-code hygiene: listener cleanup, shared cn(), whitespace collapse, probe stripping, sub-pixel snapping, clone-origin metadata, dependency pinning
- DittoWire/Accordion/DropdownMenu runtime templates: AbortController-based listener cleanup, idempotent effects, orphan panel removal on unmount - Emit a single src/lib/utils.ts cn() instead of a copy per component file - Collapse captured whitespace runs under white-space:normal (pre* preserved) - Tag source-injected font-metric probe nodes at capture; drop them from IR - Snap sub-pixel arbitrary lengths (integer within 0.1px, else 1 decimal) - Emit SITE_ORIGIN (src/lib/site.ts, env-overridable): sitemap/robots/ canonical/og:url/JSON-LD resolve against the clone's own origin instead of the source domain - Pin lottie-web in generated package.json whenever DittoLottie is emitted 144 tests pass (21 new), typecheck clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Samraaj Bath
co-authored by
Claude Fable 5
Claude Fable 5
parent
dfcd4a6563
commit
77be868ee3
@@ -0,0 +1,167 @@
|
||||
import { describe, it } from "node:test";
|
||||
import assert from "node:assert/strict";
|
||||
import type { IR, IRNode, IRChild, StyleMap, BBox } from "../src/normalize/ir.js";
|
||||
import {
|
||||
CN_UTILS_MODULE,
|
||||
cnImportLine,
|
||||
componentFiles,
|
||||
generatePageTsx,
|
||||
injectLottieDep,
|
||||
PACKAGE_JSON,
|
||||
PACKAGE_JSON_TW,
|
||||
PACKAGE_JSON_VITE,
|
||||
PACKAGE_JSON_VITE_TW,
|
||||
type ComponentRegistry,
|
||||
} from "../src/generate/app.js";
|
||||
import { DITTO_WIRE_TSX, ACCORDION_TSX } from "../src/generate/interactive.js";
|
||||
import { DROPDOWN_MENU_TSX } from "../src/generate/menu.js";
|
||||
import { declToUtil, snapLen } from "../src/generate/tailwind.js";
|
||||
|
||||
const VPS = [1280];
|
||||
const CANONICAL = 1280;
|
||||
|
||||
function computed(over: StyleMap = {}): StyleMap {
|
||||
return { display: "block", position: "static", visibility: "visible", whiteSpace: "normal", ...over };
|
||||
}
|
||||
|
||||
function node(id: string, tag: string, cs: StyleMap, children: IRChild[] = []): IRNode {
|
||||
const computedByVp: Record<number, StyleMap> = {};
|
||||
const bboxByVp: Record<number, BBox> = {};
|
||||
const visibleByVp: Record<number, boolean> = {};
|
||||
for (const vp of VPS) {
|
||||
computedByVp[vp] = { ...cs };
|
||||
bboxByVp[vp] = { x: 0, y: 0, width: vp, height: 100 };
|
||||
visibleByVp[vp] = true;
|
||||
}
|
||||
return { id, tag, attrs: {}, visibleByVp, bboxByVp, computedByVp, children };
|
||||
}
|
||||
|
||||
function irWith(root: IRNode): IR {
|
||||
return {
|
||||
doc: {
|
||||
sourceUrl: "https://example.test/",
|
||||
title: "Fixture",
|
||||
lang: "en",
|
||||
charset: "UTF-8",
|
||||
metaViewport: "width=device-width, initial-scale=1",
|
||||
viewports: VPS,
|
||||
sampleViewports: VPS,
|
||||
canonicalViewport: CANONICAL,
|
||||
perViewport: Object.fromEntries(VPS.map((vp) => [vp, { scrollHeight: 800, scrollWidth: vp, htmlBg: "rgb(255, 255, 255)", bodyBg: "rgb(255, 255, 255)", bodyColor: "rgb(0, 0, 0)", bodyFont: "Arial" }])),
|
||||
nodeCount: 4,
|
||||
keyframes: [],
|
||||
},
|
||||
root,
|
||||
};
|
||||
}
|
||||
|
||||
// ---- Fix 1: emitted runtime components clean up their listeners ----
|
||||
describe("runtime components abort their listeners on unmount (fix 1)", () => {
|
||||
const templates: Array<[string, string]> = [
|
||||
["DittoWire", DITTO_WIRE_TSX],
|
||||
["Accordion", ACCORDION_TSX],
|
||||
["DropdownMenu", DROPDOWN_MENU_TSX],
|
||||
];
|
||||
for (const [name, tsx] of templates) {
|
||||
it(`${name}: one AbortController, every addEventListener signalled, cleanup returns abort`, () => {
|
||||
assert.ok(tsx.includes("new AbortController()"), "creates an AbortController");
|
||||
assert.ok(tsx.includes("ac.abort()"), "effect cleanup aborts");
|
||||
// Every addEventListener must carry a listener-options object with the signal (either
|
||||
// `, { signal })` or `, { passive: true, signal })`). Count-match guarantees none is missed.
|
||||
const adds = (tsx.match(/addEventListener\(/g) ?? []).length;
|
||||
const signalled = (tsx.match(/, \{ signal \}\)/g) ?? []).length
|
||||
+ (tsx.match(/, \{ passive: true, signal \}\)/g) ?? []).length;
|
||||
assert.ok(adds > 0, "has listeners");
|
||||
assert.equal(signalled, adds, "every addEventListener passes the abort signal");
|
||||
// The stale re-wire guard is gone; effects are idempotent + cleaned up instead.
|
||||
assert.ok(!tsx.includes("wired.current"), "no wired.current guard");
|
||||
});
|
||||
}
|
||||
|
||||
it("DropdownMenu removes any still-open panels on unmount", () => {
|
||||
assert.ok(DROPDOWN_MENU_TSX.includes("openPanels"), "tracks open panels");
|
||||
assert.ok(DROPDOWN_MENU_TSX.includes("openPanels.splice(0)) p.remove()"), "removes panels on cleanup");
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Fix 2: cn() is a single shared module, imported (not copied per file) ----
|
||||
describe("cn() is deduplicated into src/lib/utils (fix 2)", () => {
|
||||
it("exports a single cn from the shared utils module", () => {
|
||||
assert.ok(CN_UTILS_MODULE.includes("export function cn("), "utils module exports cn");
|
||||
});
|
||||
|
||||
it("cnImportLine resolves to the shared module at the right depth", () => {
|
||||
assert.equal(cnImportLine(1), 'import { cn } from "../lib/utils";');
|
||||
assert.equal(cnImportLine(2), 'import { cn } from "../../lib/utils";');
|
||||
});
|
||||
|
||||
it("a component module that uses cn() imports it rather than redefining it", () => {
|
||||
// componentFiles reads only funcDefs / byName / fieldTypes / dataDecls / styleDecls.
|
||||
const reg = {
|
||||
byName: new Map([["Card", { runs: 1, instances: 2, cids: ["n1"] }]]),
|
||||
funcDefs: new Map([["Card", 'function Card({ styles }: { styles: string }) {\n return <div className={cn("p-4", styles)} />;\n}']]),
|
||||
fieldTypes: new Map(),
|
||||
dataDecls: [],
|
||||
cidDecls: [],
|
||||
styleDecls: [],
|
||||
} as unknown as ComponentRegistry;
|
||||
const files = componentFiles(reg);
|
||||
const card = files.find((f) => f.name === "Card")!.module;
|
||||
assert.ok(card.includes('import { cn } from "../../lib/utils";'), "imports shared cn");
|
||||
assert.ok(!card.includes("function cn("), "no inline cn definition");
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Fix 3: JSX whitespace is collapsed under white-space: normal ----
|
||||
describe("JSX whitespace collapses under white-space:normal (fix 3)", () => {
|
||||
it("collapses captured \\n\\t indentation and multi-space runs to single spaces", () => {
|
||||
const p = node("n1", "p", computed(), [{ text: "\n\t\tSkip to content\n\t\t" }]);
|
||||
const root = node("n0", "body", computed(), [p]);
|
||||
const tsx = generatePageTsx(irWith(root), new Map(), "https://example.test/");
|
||||
assert.ok(!/\{"[^"]*\\n[^"]*"\}/.test(tsx), "no literal \\n frozen in text");
|
||||
assert.ok(!/\{"\s{2,}"\}/.test(tsx), "no multi-space whitespace literal");
|
||||
assert.ok(tsx.includes("Skip to content"), "content preserved");
|
||||
});
|
||||
|
||||
it("preserves whitespace verbatim inside a <pre> (white-space: pre)", () => {
|
||||
const pre = node("n1", "pre", computed({ whiteSpace: "pre" }), [{ text: "line1\n\tline2" }]);
|
||||
const root = node("n0", "body", computed(), [pre]);
|
||||
const tsx = generatePageTsx(irWith(root), new Map(), "https://example.test/");
|
||||
assert.ok(tsx.includes("line1\\n\\tline2"), "pre keeps raw newlines/tabs");
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Fix 5: sub-pixel arbitrary values snap ----
|
||||
describe("sub-pixel lengths snap (fix 5)", () => {
|
||||
it("snapLen keeps genuine fractions at 1 decimal, snaps near-integer jitter to an integer", () => {
|
||||
assert.equal(snapLen("204.797px"), "204.8px");
|
||||
assert.equal(snapLen("627.188px"), "627.2px");
|
||||
assert.equal(snapLen("100.3px"), "100.3px");
|
||||
assert.equal(snapLen("204.98px"), "205px"); // within 0.1px of an integer → snap
|
||||
assert.equal(snapLen("2.996px"), "3px"); // rem/px jitter snaps
|
||||
assert.equal(snapLen("627px"), "627px"); // already clean
|
||||
});
|
||||
|
||||
it("snapLen leaves non-simple values (calc/percent/multi-token) untouched", () => {
|
||||
assert.equal(snapLen("calc(100% - 3.333px)"), "calc(100% - 3.333px)");
|
||||
assert.equal(snapLen("50.5%"), "50.5%");
|
||||
assert.equal(snapLen("0px 2.5px"), "0px 2.5px");
|
||||
});
|
||||
|
||||
it("declToUtil snaps a width arbitrary value but keeps border-width exact", () => {
|
||||
assert.equal(declToUtil("width", "204.797px"), "w-[204.8px]");
|
||||
// Border width sub-pixel precision is load-bearing — left untouched.
|
||||
assert.equal(declToUtil("border-width", "0.667px"), "border-[0.667px]");
|
||||
});
|
||||
});
|
||||
|
||||
// ---- Fix 7: every emitted runtime import is a declared dependency ----
|
||||
describe("lottie-web is declared when its import is emitted (fix 7)", () => {
|
||||
it("injectLottieDep pins lottie-web into every package.json template", () => {
|
||||
for (const pkg of [PACKAGE_JSON, PACKAGE_JSON_TW, PACKAGE_JSON_VITE, PACKAGE_JSON_VITE_TW]) {
|
||||
const injected = injectLottieDep(pkg);
|
||||
const deps = JSON.parse(injected).dependencies as Record<string, string>;
|
||||
assert.equal(deps["lottie-web"], "5.12.2", "lottie-web pinned to the harness version");
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user