Files
hyperframes/packages/cli/src/registry/resolver.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

90 lines
3.2 KiB
TypeScript

/**
* Registry resolver — loads the top-level manifest and per-item manifests.
* No transitive dependency resolution yet (examples don't have any); added
* when blocks/components need it for the `add` command.
*/
import type { ItemType, RegistryItem, RegistryManifestEntry } from "@hyperframes/core";
import { fetchItemManifest, fetchRegistryManifest, DEFAULT_REGISTRY_URL } from "./remote.js";
export interface ResolveOptions {
baseUrl?: string;
/**
* Called once per item that fails to load inside `loadAllItems`. Defaults
* to writing a diagnostic line to stderr. Pass a quieter implementation
* when rendering structured output (clack prompts, JSON, etc.).
*/
onWarn?: (message: string) => void;
}
function defaultWarn(message: string): void {
process.stderr.write(`hyperframes:registry ${message}\n`);
}
/**
* List all items in the registry, optionally filtered by type. Returns empty
* if the registry is unreachable — callers should fall back to bundled items.
*/
export async function listRegistryItems(
filter?: { type?: ItemType },
options: ResolveOptions = {},
): Promise<RegistryManifestEntry[]> {
const baseUrl = options.baseUrl ?? DEFAULT_REGISTRY_URL;
const manifest = await fetchRegistryManifest(baseUrl);
if (!manifest) return [];
if (!filter?.type) return manifest.items;
return manifest.items.filter((item) => item.type === filter.type);
}
/**
* Load every item's full manifest in parallel. Used by the interactive init
* picker to populate titles/descriptions for all examples at once. Items that
* fail to load are skipped with a warning so one missing manifest doesn't
* break the picker.
*/
export async function loadAllItems(
entries: RegistryManifestEntry[],
options: ResolveOptions = {},
): Promise<RegistryItem[]> {
const baseUrl = options.baseUrl ?? DEFAULT_REGISTRY_URL;
const warn = options.onWarn ?? defaultWarn;
const results = await Promise.allSettled(
entries.map((e) => fetchItemManifest(e.name, e.type, baseUrl)),
);
const items: RegistryItem[] = [];
results.forEach((r, i) => {
if (r.status === "fulfilled") {
items.push(r.value);
} else {
const name = entries[i]?.name ?? "<unknown>";
warn(`skipped item "${name}": ${String(r.reason)}`);
}
});
return items;
}
/**
* Resolve a single item by name. Throws if unknown or unreachable.
*
* TODO: walk registryDependencies transitively and return a topo-sorted
* list of items. Today examples have no deps so this returns a single item.
* Blocks and components will need transitive resolution once they ship with
* deps (seed items in Phase B).
*/
export async function resolveItem(
name: string,
options: ResolveOptions = {},
): Promise<RegistryItem> {
const entries = await listRegistryItems(undefined, options);
const entry = entries.find((e) => e.name === name);
if (!entry) {
const available = entries.map((e) => e.name).join(", ");
throw new Error(
available.length > 0
? `Item "${name}" not found in registry. Available: ${available}`
: `Item "${name}" not found — registry unreachable or empty.`,
);
}
return fetchItemManifest(entry.name, entry.type, options.baseUrl);
}