feat(ui): the viewer's screens as @colbymchenry/codegraph-ui, behind one adapter (CG-61)
`ui/src` now builds two ways from one tree: the static app `codegraph ui` serves, and — via `svelte-package` — a Svelte library the Pro app imports. A forked component would be a second answer to the same question about the same graph, so there is no fork. Everything a screen knows arrives through a `GraphAdapter`: eleven methods answering the wire shapes verbatim, with `createHttpAdapter()` (the loopback JSON API) as the default and a host's in-process engine reads as the point. `lib/api.ts` became a one-line-per-call facade over it, which is why no call site in the views changed. The payload types moved to `lib/wire.ts` — no imports, no runtime — so a host can depend on the vocabulary alone. Two more seams and one guard: - `lib/navigation.ts` holds the href builders behind a `NavigationDriver`, so a host addresses its own URL space. The app's half — the hash parser and the live route, which attach window listeners at module scope — stays in `router.svelte.ts` and is pruned out of the package: rendering a Symbol view must not install a hash router in somebody else's application. - `lib/theme.css` carries the design tokens and maps Svelte Flow's `--xy-*` variables onto them, so a host never sees library defaults. Dark now also answers to a bare `[data-theme]`, which is how `<CodegraphUi theme>` themes a container rather than the document. - `scripts/check-ui-package.mjs` prunes the app's shell, resolves the extensionless specifiers svelte-package leaves behind, and asserts that nothing but `lib/adapter.js` reaches the network. The search box, its keyboard and its panel are one component now (`SearchPalette`), because splitting them is what breaks a palette. `__tests__/ui-package.test.ts` mounts the three screens from the package entry against a mock adapter in jsdom; it runs as a second vitest project so the `browser` resolve condition it needs cannot reach the engine's suites. Versioned with the engine. Prepared, not published: `private: true` is the guard and `pack-npm.sh` only packs a tarball under CODEGRAPH_PACK_UI=1.
This commit is contained in:
@@ -12,6 +12,7 @@ Distributed as `@colbymchenry/codegraph` on npm; same binary serves as installer
|
||||
|
||||
```bash
|
||||
npm run build # tsc + copy schema.sql and *.wasm + build the viewer into dist/; chmods dist/bin/codegraph.js
|
||||
npm run build:lib # the viewer's components as @colbymchenry/codegraph-ui (ui/dist) — NOT part of `build`
|
||||
npm run dev # tsc --watch
|
||||
npm run clean # rm -rf dist
|
||||
|
||||
@@ -36,6 +37,22 @@ browser viewer into `dist/viewer/` (never `dist/ui/` — that's the terminal ui)
|
||||
highlighting reads a file with the same grammar the engine indexed it with, so a missing wasm is an
|
||||
unhighlighted screen as well as an extraction gap.
|
||||
|
||||
`npm run build:lib` is separate and does NOT run as part of `npm run build`: it compiles the same
|
||||
`ui/src` tree a second way, with `svelte-package`, into `ui/dist` — the `@colbymchenry/codegraph-ui`
|
||||
component library the Pro app imports (task CG-61). `scripts/check-ui-package.mjs` then prunes the
|
||||
standalone app's shell out of it, resolves the extensionless import specifiers `svelte-package`
|
||||
leaves behind, and asserts the seam: nothing outside `lib/adapter.js` may reach the network. The
|
||||
package is **prepared, not published** — `ui/package.json` carries `"private": true` deliberately,
|
||||
and `scripts/pack-npm.sh` only packs a tarball when `CODEGRAPH_PACK_UI=1`.
|
||||
|
||||
Tests run as **two vitest projects** (`vitest.workspace.mts`): `engine` (node) and `ui` (jsdom, the
|
||||
Svelte plugin, `resolve.conditions: ['browser']`) for the single `__tests__/ui-package.test.ts`.
|
||||
`npm test` still runs both. The split is not cosmetic — `browser` is a package-resolution
|
||||
condition, and applied globally it hands the engine's suites the browser builds of
|
||||
`web-tree-sitter` and friends. The root config (`vitest.config.mts`, `.mts` because the plugin is
|
||||
ESM-only and the repo is CJS) is the shared base; note that a workspace project **concatenates**
|
||||
the base's `include` with its own, which is why the `ui` project does not `extends` it.
|
||||
|
||||
Node engines: `>=20.0.0 <25.0.0`. There is a hard exit on Node 25.x and below 20 (see `src/bin/node-version-check.ts`).
|
||||
|
||||
## Architecture
|
||||
|
||||
Reference in New Issue
Block a user