Skip to content

fix: make registry blocks pass lint errors #564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
miguel-heygen merged 1 commit into from
Apr 29, 2026
Merged

fix: make registry blocks pass lint errors #564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/cli/src/commands/add.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,9 +181,9 @@ describe("runAdd (integration, mocked registry)", () => {
expect(result.type).toBe("hyperframes:block");
expect(result.written).toHaveLength(1);
expect(existsSync(join(dir, "compositions/my-block.html"))).toBe(true);
expect(readFileSync(join(dir, "compositions/my-block.html"), "utf-8")).toContain(
"my-block.html",
);
const installed = readFileSync(join(dir, "compositions/my-block.html"), "utf-8");
expect(installed).toContain("<!-- hyperframes-registry-item: my-block -->");
expect(installed).toContain("my-block.html");
expect(result.snippet).toContain("compositions/my-block.html");
} finally {
rmSync(dir, { recursive: true, force: true });
Expand Down
21 changes: 21 additions & 0 deletions packages/cli/src/registry/installer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* runtime to reject traversal even if the registry JSON schema was bypassed.
*/

import { readFileSync, writeFileSync } from "node:fs";
import { resolve, relative, isAbsolute } from "node:path";
import type { FileTarget, RegistryItem } from "@hyperframes/core";
import { fetchItemFile, DEFAULT_REGISTRY_URL } from "./remote.js";
Expand Down Expand Up @@ -45,6 +46,22 @@ export function assertSafeTarget(destDir: string, target: string): void {
}
}

function isInstalledRegistryBlockComposition(item: RegistryItem, file: FileTarget): boolean {
return (
item.type === "hyperframes:block" &&
file.type === "hyperframes:composition" &&
file.target.toLowerCase().endsWith(".html")
);
}

function addRegistryItemMarker(source: string, item: RegistryItem): string {
if (/^\s*<!--\s*hyperframes-registry-item:[^>]*-->/i.test(source.slice(0, 512))) {
return source;
}

return `<!-- hyperframes-registry-item: ${item.name} -->\n${source}`;
}

/**
* Install a resolved `RegistryItem` into `destDir` by fetching each file in
* parallel and writing it to its validated target path.
Expand All @@ -65,6 +82,10 @@ export async function installItem(
item.files.map(async (file: FileTarget) => {
const destPath = resolve(destDir, file.target);
await fetchItemFile(item, file, destPath, baseUrl);
if (isInstalledRegistryBlockComposition(item, file)) {
const source = readFileSync(destPath, "utf-8");
writeFileSync(destPath, addRegistryItemMarker(source, item), "utf-8");
}
return destPath;
}),
);
Expand Down
30 changes: 28 additions & 2 deletions packages/core/src/lint/rules/composition.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,45 @@ describe("composition rules", () => {
expect(finding).toBeUndefined();
});

it("warns on large HTML files regardless of path", () => {
it("does not warn for large registry source block files", () => {
const html = Array.from({ length: 301 }, (_, i) =>
i === 0 ? "<html><body>" : `<!-- filler ${i} -->`,
).join("\n");

const result = lintHyperframeHtml(html, {
filePath: "/project/registry/blocks/data-chart.html",
filePath: "/project/registry/blocks/data-chart/data-chart.html",
});
const finding = result.findings.find((f) => f.code === "composition_file_too_large");
expect(finding).toBeUndefined();
});

it("warns for large installed block composition files", () => {
const html = Array.from({ length: 301 }, (_, i) =>
i === 0 ? "<html><body>" : `<!-- filler ${i} -->`,
).join("\n");

const result = lintHyperframeHtml(html, {
filePath: "/project/compositions/data-chart.html",
});
const finding = result.findings.find((f) => f.code === "composition_file_too_large");
expect(finding).toBeDefined();
expect(finding?.severity).toBe("warning");
});

it("does not warn for large registry-installed block composition files", () => {
const html =
"<!-- hyperframes-registry-item: data-chart -->\n" +
Array.from({ length: 300 }, (_, i) =>
i === 0 ? "<html><body>" : `<!-- filler ${i} -->`,
).join("\n");

const result = lintHyperframeHtml(html, {
filePath: "/project/compositions/data-chart.html",
});
const finding = result.findings.find((f) => f.code === "composition_file_too_large");
expect(finding).toBeUndefined();
});

it("uses nested split copy for large sub-composition files", () => {
const html = Array.from({ length: 301 }, (_, i) =>
i === 0 ? "<html><body>" : `<!-- filler ${i} -->`,
Expand Down
13 changes: 13 additions & 0 deletions packages/core/src/lint/rules/composition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,17 @@ function countPhysicalLines(source: string): number {
return withoutFinalNewline.split("\n").length;
}

function isRegistrySourceFile(filePath?: string): boolean {
if (!filePath) return false;

const normalized = filePath.replace(/\\/g, "/");
return /(?:^|\/)registry\/blocks\/([^/]+)\/\1\.html$/i.test(normalized);
}

function isRegistryInstalledFile(rawSource: string): boolean {
return /^\s*<!--\s*hyperframes-registry-item:[^>]*-->/i.test(rawSource.slice(0, 512));
}

function isCompositionRootOrMount(rawTag: string): boolean {
return Boolean(
readAttr(rawTag, "data-composition-id") || readAttr(rawTag, "data-composition-src"),
Expand All @@ -24,6 +35,8 @@ function isCompositionRootOrMount(rawTag: string): boolean {
export const compositionRules: Array<(ctx: LintContext) => HyperframeLintFinding[]> = [
// composition_file_too_large
({ rawSource, options }) => {
if (isRegistrySourceFile(options.filePath) || isRegistryInstalledFile(rawSource)) return [];

const lineCount = countPhysicalLines(rawSource);
if (lineCount <= MAX_COMPOSITION_LINES) return [];

Expand Down
1 change: 1 addition & 0 deletions registry/blocks/app-showcase/app-showcase.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
data-composition-id="app-showcase"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="5.5"
>
<!-- Background -->
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/chromatic-radial-split/chromatic-radial-split.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/cinematic-zoom/cinematic-zoom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/cross-warp-morph/cross-warp-morph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/data-chart/data-chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
data-composition-id="data-chart"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="15"
>
<div class="chart-container">
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/domain-warp-dissolve/domain-warp-dissolve.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/flash-through-white/flash-through-white.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
54 changes: 31 additions & 23 deletions registry/blocks/flowchart/flowchart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
data-composition-id="flowchart"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="12"
>
<div class="canvas">
Expand Down Expand Up @@ -309,32 +310,32 @@
(function () {
const tl = gsap.timeline({ paused: true });
const S = '[data-composition-id="flowchart"]';
const nodePython = document.querySelector(`${S} #node-python`);
const pythonText = document.querySelector(`${S} #python-text`);
const nodePython = document.querySelector(S + " #node-python");
const pythonText = document.querySelector(S + " #python-text");

// 1. Root node scales in
tl.to(`${S} #node-root`, { scale: 1, duration: 0.4, ease: "power2.out" });
tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });

// 2. Hold
tl.addLabel("hold1", "+=0.6");

// 3. Connectors draw
tl.to(
`${S} .connector#path-1-L, ${S} .connector#path-1-R`,
S + " .connector#path-1-L, " + S + " .connector#path-1-R",
{ strokeDashoffset: 0, duration: 0.5, ease: "none" },
"hold1",
);

tl.to(
`${S} #label-yes, ${S} #label-not-sure`,
S + " #label-yes, " + S + " #label-not-sure",
{ opacity: 1, duration: 0.2 },
"hold1+=0.25",
);

// 4. Level 2 nodes
tl.to(`${S} #node-yes`, { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
tl.to(
`${S} #node-not-sure`,
S + " #node-not-sure",
{ scale: 1, duration: 0.4, ease: "back.out(1.7)" },
"hold1+=0.6",
);
Expand All @@ -344,17 +345,24 @@

// 6. Level 2→3 connectors
tl.to(
`${S} .connector#path-2-LL, ${S} .connector#path-2-LR, ${S} .connector#path-2-RL, ${S} .connector#path-2-RR`,
S +
" .connector#path-2-LL, " +
S +
" .connector#path-2-LR, " +
S +
" .connector#path-2-RL, " +
S +
" .connector#path-2-RR",
{ strokeDashoffset: 0, duration: 0.4, ease: "none" },
"hold2",
);

// 7. Leaf nodes
const leafNodes = [
`${S} #node-python`,
`${S} #node-nocode`,
`${S} #node-website`,
`${S} #node-course`,
S + " #node-python",
S + " #node-nocode",
S + " #node-website",
S + " #node-course",
];
leafNodes.forEach((id, i) => {
tl.to(
Expand All @@ -364,14 +372,14 @@
);
});

tl.to(`${S} .squiggle-container`, { opacity: 1, duration: 0.1 }, "hold2+=0.3");
tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");

// 8. Hold
tl.addLabel("hold3", "+=0.8");

// 9. Cursor drifts in
tl.to(
`${S} #cursor`,
S + " #cursor",
{ left: 450, top: 540, duration: 1, ease: "power1.inOut" },
"hold3",
);
Expand All @@ -384,11 +392,11 @@
border.className = "selection-border";
nodePython.appendChild(border);
}
gsap.set(`${S} .selection-border`, { opacity: 1 });
gsap.set(S + " .selection-border", { opacity: 1 });
}, "hold3+=1");

tl.to(
`${S} #cursor`,
S + " #cursor",
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
"hold3+=1",
);
Expand All @@ -398,7 +406,7 @@

// 12. Double-click to highlight "Pythom"
tl.to(
`${S} #cursor`,
S + " #cursor",
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
"hold4",
);
Expand Down Expand Up @@ -426,24 +434,24 @@
const typingEnd = typingStart + words.length * 0.05;
tl.add(() => {
if (pythonText) pythonText.innerHTML = "Start with Python";
gsap.set(`${S} .squiggle-container`, { opacity: 0 });
gsap.set(S + " .squiggle-container", { opacity: 0 });
}, typingEnd);

// 15. Hold
tl.addLabel("hold6", typingEnd + 0.5);

// 16. Cursor clicks away to deselect
tl.to(`${S} #cursor`, { left: 500, top: 580, duration: 0.3, overwrite: "auto" }, "hold6");
tl.to(S + " #cursor", { left: 500, top: 580, duration: 0.3, overwrite: "auto" }, "hold6");
tl.to(
`${S} #cursor`,
S + " #cursor",
{ scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
"hold6+=0.3",
);
tl.to(`${S} .selection-border`, { opacity: 0, duration: 0.1 }, "hold6+=0.3");
tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");

// 17. Emoji pop
tl.to(
`${S} #emoji-thumb`,
S + " #emoji-thumb",
{ scale: 1, duration: 0.15, ease: "back.out(2)" },
"hold6+=0.4",
);
Expand All @@ -452,7 +460,7 @@
tl.addLabel("hold7", "+=2");

// 19. Fade out
tl.to(`${S} #fade-overlay`, { opacity: 1, duration: 0.5 }, "hold7");
tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");

window.__timelines = window.__timelines || {};
window.__timelines["flowchart"] = tl;
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/glitch/glitch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/gravitational-lens/gravitational-lens.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/light-leak/light-leak.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/logo-outro/logo-outro.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
data-composition-id="logo-outro"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="6"
>
<div class="canvas">
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/ridged-burn/ridged-burn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/ripple-waves/ripple-waves.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
1 change: 1 addition & 0 deletions registry/blocks/sdf-iris/sdf-iris.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@

<div
id="driver"
class="clip"
data-start="0"
data-duration="4"
data-track-index="0"
Expand Down
Loading
Loading