08fb1de61f
## What PR 5/17 of the catalog system rollout. Adds the `hyperframes add` verb for installing blocks and components from the registry into an existing project, plus the `hyperframes.json` project config that tells `add` which registry to use and where to drop files. Stacks on #255. - **`packages/cli/src/commands/add.ts`** — new `hyperframes add <name>` command. Resolves an item, validates target paths, installs files in parallel, builds an include snippet, copies it to the clipboard. Exposes a testable `runAdd(opts)` function; the citty default wraps it with console output + exit handling - **`packages/cli/src/utils/projectConfig.ts`** — read/write/normalize `hyperframes.json`. Tolerant to missing and partial configs - **`packages/cli/src/utils/clipboard.ts`** — minimal cross-platform clipboard (pbcopy / clip.exe / wl-copy / xclip / xsel). Zero deps. Gracefully no-ops in headless environments - **`packages/cli/src/commands/init.ts`** — write `hyperframes.json` during scaffold if not already present - **`packages/cli/src/cli.ts`** + **`help.ts`** — register `add` under Getting Started (directly below `init`) Design doc: [Hyperframes Catalog System](https://www.notion.so/heygen/Hyperframes-Catalog-System-Design-Plan-341449792c69813f899dcd53b4c0383a). ## UX ```bash # Scaffold a project (now writes hyperframes.json too) npx hyperframes init my-video --example blank cd my-video # Add a block — files land, snippet copied to clipboard npx hyperframes add claude-code-window # ✓ Added claude-code-window (hyperframes:block) # compositions/claude-code-window.html # # Include snippet: # <iframe src="compositions/claude-code-window.html" data-start="0" data-duration="6"></iframe> # # Copied to clipboard — paste into your host composition. # Add a component effect npx hyperframes add shader-wipe # Headless / CI — no clipboard, JSON output for tooling npx hyperframes add shader-wipe --no-clipboard --json ``` Running `hyperframes add warm-grain` (an example) errors clearly pointing to `init --example`. ## Docs (bundled in this PR per the tracker principle) - `docs/packages/cli.mdx` — new `add` subsection under Commands (flags, examples, trigger rules) + new `hyperframes.json` section describing the config file shape ## Tests - **`packages/cli/src/commands/add.test.ts`** — 11 tests: - `remapTarget` / `buildSnippet` pure helpers (5 tests) - `runAdd` integration against a mocked `fetch` registry: block install lands files + returns snippet, component install respects `paths.components` remap, example-typed names throw `AddError` with code `example-type`, unknown names throw `AddError` with code `unknown-item` (4 tests plus 2 covering block default path and non-default path preservation) - **`packages/cli/src/utils/projectConfig.test.ts`** — 9 tests: - Write/read round-trip, partial-config normalization, corrupt-file handling, absent-file fallback to defaults, custom paths preserved - **CLI suite:** 92 passed (was 72 on #255, **+20**). Same 4 pre-existing failures unchanged ## Scope decisions - **`init.ts` full port to new resolver deferred.** The original plan bundled a removal of the `packages/cli/src/templates/` compat shim. That's ~300 more lines and isn't required for `add` to work. The compat shim from #254 still functions; a separate cleanup PR handles it - **No ajv runtime schema validation.** Manifests are trusted as schema-valid. Full validation lands when third-party registries arrive (PR 14/15). Path safety is still enforced by the installer's `assertSafeTarget` guard - **Default project paths stay under `compositions/`.** Blocks → `compositions/<name>.html`; components → `compositions/components/<name>/<file>`. Users override via `hyperframes.json#paths` ## Breaking / migration **None.** Pure additive — new command, new file types, no existing commands or flags change. `init.ts` now writes `hyperframes.json` but that's a new additional file, not a modification of existing output. ## Stacks on #255 — base branch. When #255 merges, this rebases onto `main`. ## Next in stack PR 6 — `feat(registry): seed block — claude-code-window`. First real registry item. Exercises the full `hyperframes add <name>` flow end-to-end against a committed item on `main`. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
204 lines
6.7 KiB
TypeScript
204 lines
6.7 KiB
TypeScript
#!/usr/bin/env tsx
|
|
/**
|
|
* Generate registry-item.json manifests for every example in registry/examples/,
|
|
* plus the top-level registry/registry.json manifest.
|
|
*
|
|
* Reads the legacy registry/examples/templates.json (label + hint) and probes
|
|
* each example's index.html for dimensions / duration data attributes.
|
|
* Placeholder `__VIDEO_DURATION__` falls back to 10 (the init-time default).
|
|
*
|
|
* Idempotent — safe to re-run, but will overwrite any hand-edits. Intended as
|
|
* one-shot scaffolding for PR 3.
|
|
*
|
|
* Usage:
|
|
* bun run scripts/generate-registry-items.ts
|
|
* bun run scripts/generate-registry-items.ts --only warm-grain
|
|
*/
|
|
|
|
import { readFileSync, writeFileSync, readdirSync, statSync } from "node:fs";
|
|
import { join, relative, resolve, dirname } from "node:path";
|
|
import { fileURLToPath } from "node:url";
|
|
import {
|
|
ITEM_TYPE_DIRS,
|
|
type FileTarget,
|
|
type FileType,
|
|
type RegistryItem,
|
|
type RegistryManifest,
|
|
} from "@hyperframes/core";
|
|
|
|
const scriptDir = dirname(fileURLToPath(import.meta.url));
|
|
const repoRoot = resolve(scriptDir, "..");
|
|
const examplesDir = resolve(repoRoot, "registry", ITEM_TYPE_DIRS["hyperframes:example"]);
|
|
const registryManifestPath = resolve(repoRoot, "registry/registry.json");
|
|
const legacyManifestPath = resolve(examplesDir, "templates.json");
|
|
|
|
const DEFAULT_DURATION_SECONDS = 10;
|
|
const PLACEHOLDER_DURATION = "__VIDEO_DURATION__";
|
|
|
|
interface LegacyTemplateEntry {
|
|
id: string;
|
|
label: string;
|
|
hint: string;
|
|
bundled: boolean;
|
|
}
|
|
|
|
interface LegacyManifest {
|
|
templates: LegacyTemplateEntry[];
|
|
}
|
|
|
|
function readLegacyManifest(): LegacyTemplateEntry[] {
|
|
try {
|
|
const raw = readFileSync(legacyManifestPath, "utf-8");
|
|
const parsed = JSON.parse(raw) as LegacyManifest;
|
|
return parsed.templates;
|
|
} catch {
|
|
// templates.json was the bootstrap source and has been deleted. Fall back
|
|
// to scanning existing registry-item.json files and reconstructing entries.
|
|
return scanExistingItems();
|
|
}
|
|
}
|
|
|
|
function scanExistingItems(): LegacyTemplateEntry[] {
|
|
const entries: LegacyTemplateEntry[] = [];
|
|
for (const dir of readdirSync(examplesDir, { withFileTypes: true })) {
|
|
if (!dir.isDirectory()) continue;
|
|
const itemPath = join(examplesDir, dir.name, "registry-item.json");
|
|
try {
|
|
const item = JSON.parse(readFileSync(itemPath, "utf-8")) as RegistryItem;
|
|
entries.push({ id: item.name, label: item.title, hint: item.description, bundled: false });
|
|
} catch {
|
|
// No manifest — skip.
|
|
}
|
|
}
|
|
return entries;
|
|
}
|
|
|
|
function extractAttr(html: string, attr: string): string | undefined {
|
|
const match = new RegExp(`data-${attr}="([^"]*)"`).exec(html);
|
|
return match?.[1];
|
|
}
|
|
|
|
interface CanvasMeta {
|
|
width: number;
|
|
height: number;
|
|
duration: number;
|
|
}
|
|
|
|
function probeCanvas(exampleDir: string): CanvasMeta {
|
|
const html = readFileSync(join(exampleDir, "index.html"), "utf-8");
|
|
const width = Number(extractAttr(html, "width") ?? 1920);
|
|
const height = Number(extractAttr(html, "height") ?? 1080);
|
|
const rawDuration = extractAttr(html, "duration");
|
|
const duration =
|
|
rawDuration === undefined || rawDuration === PLACEHOLDER_DURATION
|
|
? DEFAULT_DURATION_SECONDS
|
|
: Number(rawDuration);
|
|
return { width, height, duration };
|
|
}
|
|
|
|
function fileTypeFor(path: string): FileType {
|
|
if (path.endsWith(".html")) return "hyperframes:composition";
|
|
return "hyperframes:asset";
|
|
}
|
|
|
|
/** Walk the example dir and collect every tracked file (HTML + assets). */
|
|
function collectFiles(exampleDir: string): FileTarget[] {
|
|
const files: FileTarget[] = [];
|
|
const walk = (dir: string): void => {
|
|
for (const entry of readdirSync(dir, { withFileTypes: true })) {
|
|
const full = join(dir, entry.name);
|
|
if (entry.isDirectory()) {
|
|
walk(full);
|
|
} else if (entry.isFile()) {
|
|
// Skip the registry-item.json itself if it already exists from a
|
|
// prior run; we're regenerating it.
|
|
if (entry.name === "registry-item.json") continue;
|
|
const rel = relative(exampleDir, full);
|
|
files.push({ path: rel, target: rel, type: fileTypeFor(rel) });
|
|
}
|
|
}
|
|
};
|
|
walk(exampleDir);
|
|
files.sort((a, b) => a.path.localeCompare(b.path));
|
|
return files;
|
|
}
|
|
|
|
function buildItem(entry: LegacyTemplateEntry): RegistryItem {
|
|
// The `blank` template is bundled inside the CLI package; don't generate a
|
|
// manifest in registry/examples/ for it.
|
|
const exampleDir = join(examplesDir, entry.id);
|
|
const canvas = probeCanvas(exampleDir);
|
|
const files = collectFiles(exampleDir);
|
|
|
|
return {
|
|
$schema: "https://hyperframes.heygen.com/schema/registry-item.json",
|
|
name: entry.id,
|
|
type: "hyperframes:example",
|
|
title: entry.label,
|
|
description: entry.hint,
|
|
dimensions: { width: canvas.width, height: canvas.height },
|
|
duration: canvas.duration,
|
|
files,
|
|
};
|
|
}
|
|
|
|
function writeItem(item: RegistryItem): void {
|
|
if (item.type !== "hyperframes:example") return;
|
|
const out = join(examplesDir, item.name, "registry-item.json");
|
|
writeFileSync(out, JSON.stringify(item, null, 2) + "\n", "utf-8");
|
|
console.log(`wrote ${relative(repoRoot, out)}`);
|
|
}
|
|
|
|
function writeRegistryManifest(items: RegistryItem[]): void {
|
|
const manifest: RegistryManifest = {
|
|
$schema: "https://hyperframes.heygen.com/schema/registry.json",
|
|
name: "hyperframes",
|
|
homepage: "https://hyperframes.heygen.com",
|
|
items: items.map((item) => ({ name: item.name, type: item.type })),
|
|
};
|
|
writeFileSync(registryManifestPath, JSON.stringify(manifest, null, 2) + "\n", "utf-8");
|
|
console.log(`wrote ${relative(repoRoot, registryManifestPath)}`);
|
|
}
|
|
|
|
function main(): void {
|
|
const args = process.argv.slice(2);
|
|
const onlyIdx = args.indexOf("--only");
|
|
const only = onlyIdx >= 0 ? args[onlyIdx + 1] : undefined;
|
|
|
|
const legacy = readLegacyManifest();
|
|
// Skip bundled templates (e.g. `blank`) — they live inside the CLI package,
|
|
// not under registry/examples/.
|
|
const onDisk = legacy.filter((t) => !t.bundled);
|
|
const filtered = only ? onDisk.filter((t) => t.id === only) : onDisk;
|
|
|
|
if (filtered.length === 0) {
|
|
console.error(
|
|
only
|
|
? `No example matches --only ${only}. Available: ${onDisk.map((t) => t.id).join(", ")}`
|
|
: "No examples found in registry/examples/templates.json",
|
|
);
|
|
process.exit(1);
|
|
}
|
|
|
|
const items: RegistryItem[] = [];
|
|
for (const entry of filtered) {
|
|
const exampleDir = join(examplesDir, entry.id);
|
|
try {
|
|
statSync(exampleDir);
|
|
} catch {
|
|
console.warn(`skip ${entry.id}: directory not found at ${relative(repoRoot, exampleDir)}`);
|
|
continue;
|
|
}
|
|
const item = buildItem(entry);
|
|
writeItem(item);
|
|
items.push(item);
|
|
}
|
|
|
|
// Only rewrite the top-level manifest on a full-run (not --only).
|
|
if (!only) {
|
|
writeRegistryManifest(items);
|
|
}
|
|
}
|
|
|
|
main();
|