Files
hyperframes/packages/cli/src/registry/remote.ts
T
James Russo 08fb1de61f feat(cli): add command + hyperframes.json (#256)
## 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)
2026-04-13 21:04:59 -07:00

139 lines
4.8 KiB
TypeScript

/**
* Remote Registry Fetching
*
* Fetches registry manifests and item files from a Hyperframes registry hosted
* on GitHub (or any HTTPS endpoint serving the same file layout).
*
* Base URL layout:
* <base>/registry.json → top-level manifest
* <base>/<type-dir>/<name>/registry-item.json
* <base>/<type-dir>/<name>/<file.path> → individual files referenced by the item
*
* `<type-dir>` comes from ITEM_TYPE_DIRS in @hyperframes/core.
*/
import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
import { join, dirname } from "node:path";
import { homedir } from "node:os";
import {
ITEM_TYPE_DIRS,
type FileTarget,
type ItemType,
type RegistryItem,
type RegistryManifest,
} from "@hyperframes/core";
export const DEFAULT_REGISTRY_URL =
"https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry";
const FETCH_TIMEOUT_MS = 10_000;
// ── Caching ─────────────────────────────────────────────────────────────────
// 24h TTL on manifest fetches so the interactive picker stays snappy offline.
// Item files aren't cached — they're written straight to destDir on install.
const CACHE_DIR = join(homedir(), ".hyperframes", "cache");
const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
interface CacheEntry<T> {
fetchedAt: number;
data: T;
}
function cachePath(baseUrl: string, key: string): string {
const slug = baseUrl.replace(/[^a-zA-Z0-9]/g, "_");
return join(CACHE_DIR, `${slug}__${key}.json`);
}
function readCache<T>(path: string): T | undefined {
try {
const entry = JSON.parse(readFileSync(path, "utf-8")) as CacheEntry<T>;
if (typeof entry.fetchedAt !== "number") return undefined;
if (Date.now() - entry.fetchedAt > CACHE_TTL_MS) return undefined;
return entry.data;
} catch {
// Missing file or corrupt JSON → cache miss.
return undefined;
}
}
function writeCache<T>(path: string, data: T): void {
mkdirSync(dirname(path), { recursive: true });
const entry: CacheEntry<T> = { fetchedAt: Date.now(), data };
writeFileSync(path, JSON.stringify(entry), "utf-8");
}
// ── Fetchers ────────────────────────────────────────────────────────────────
async function fetchJson<T>(url: string): Promise<T> {
const res = await fetch(url, { signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) });
if (!res.ok) {
throw new Error(`Registry fetch failed: ${url} — HTTP ${res.status}`);
}
return (await res.json()) as T;
}
/**
* Fetch the top-level registry.json manifest. Cached for 24h.
* Returns undefined if the registry is unreachable (offline / 404).
*/
export async function fetchRegistryManifest(
baseUrl: string = DEFAULT_REGISTRY_URL,
): Promise<RegistryManifest | undefined> {
const cacheFile = cachePath(baseUrl, "registry");
const cached = readCache<RegistryManifest>(cacheFile);
if (cached) return cached;
try {
const manifest = await fetchJson<RegistryManifest>(`${baseUrl}/registry.json`);
writeCache(cacheFile, manifest);
return manifest;
} catch {
return undefined;
}
}
/**
* Fetch a single item's `registry-item.json` manifest. Cached for 24h.
* Throws on network failure (callers decide whether to degrade gracefully).
*/
export async function fetchItemManifest(
name: string,
type: ItemType,
baseUrl: string = DEFAULT_REGISTRY_URL,
): Promise<RegistryItem> {
const dir = ITEM_TYPE_DIRS[type];
const cacheFile = cachePath(baseUrl, `${dir}__${name}`);
const cached = readCache<RegistryItem>(cacheFile);
if (cached) return cached;
const url = `${baseUrl}/${dir}/${name}/registry-item.json`;
const item = await fetchJson<RegistryItem>(url);
writeCache(cacheFile, item);
return item;
}
/**
* Download a single file referenced by an item to a local destination.
* Caller is responsible for target-path validation (see installer.ts).
*/
export async function fetchItemFile(
item: RegistryItem,
file: FileTarget,
destPath: string,
baseUrl: string = DEFAULT_REGISTRY_URL,
): Promise<void> {
// Reject path-traversal in file.path (mirrors assertSafeTarget for file.target).
if (/(^|[/\\])\.\.([/\\]|$)/.test(file.path)) {
throw new Error(`Unsafe file.path "${file.path}": path segments may not contain "..".`);
}
const url = `${baseUrl}/${ITEM_TYPE_DIRS[item.type]}/${item.name}/${file.path}`;
const res = await fetch(url, { signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) });
if (!res.ok) {
throw new Error(`File fetch failed: ${url} — HTTP ${res.status}`);
}
const buf = new Uint8Array(await res.arrayBuffer());
mkdirSync(dirname(destPath), { recursive: true });
writeFileSync(destPath, buf);
}