mirror of
https://github.com/colbymchenry/codegraph.git
synced 2026-10-02 09:45:39 +08:00
Colby McHenry
c15413f200
`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.
74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
/**
|
|
* Walking the graph — the one place a symbol navigation is performed.
|
|
*
|
|
* Every step records its DIRECTION before it navigates, because the direction
|
|
* is not recoverable afterwards. "I stepped down into a call" and "I stepped up
|
|
* to a caller" produce the same pair of symbols; only the act distinguishes
|
|
* them, and the Symbol view needs it twice over: the trail bar draws `→` or `←`
|
|
* between hops, and the arrival rail tints the row you came from ("you came
|
|
* from here") — which is the LEFT rail after stepping down, and the RIGHT rail
|
|
* after stepping up.
|
|
*
|
|
* The trail is pushed first and travels in the URL, so a reload or a shared
|
|
* link reproduces the walk rather than starting a fresh one at the same symbol.
|
|
*/
|
|
|
|
import { fileHref, navigate, symbolHref } from './navigation';
|
|
import { encodeTrail, trail, type HopDirection } from './trail.svelte';
|
|
import type { EntryTarget } from './entry-model';
|
|
|
|
export interface WalkTarget {
|
|
id: string;
|
|
name?: string | null;
|
|
kind?: string | null;
|
|
}
|
|
|
|
/**
|
|
* Move to a symbol, recording how you got there.
|
|
*
|
|
* @param dir 'down' following a call, 'up' going to a caller, 'start' for a
|
|
* jump that is neither (search, a breadcrumb, a members outline).
|
|
* @param line a line to highlight and scroll to in the destination.
|
|
*/
|
|
export function walkTo(target: WalkTarget, dir: HopDirection, line?: number): void {
|
|
trail.push({ id: target.id, name: target.name ?? null, kind: target.kind ?? null, dir });
|
|
const href = symbolHref(target.id, { trail: encodeTrail(trail.hops), ...(line ? { line } : {}) });
|
|
navigate(href);
|
|
}
|
|
|
|
/**
|
|
* Where the reader arrived from, and which rail should show it.
|
|
*
|
|
* A hop marked `up` means the reader stepped from a callee to this symbol, so
|
|
* the symbol they left is one of THIS symbol's callees — the right rail. A
|
|
* `down` hop is the mirror. A `start` hop came from nowhere on screen.
|
|
*/
|
|
export function arrivedFrom(): { id: string; rail: 'left' | 'right' } | null {
|
|
const hops = trail.hops;
|
|
if (hops.length < 2) return null;
|
|
const current = hops[hops.length - 1];
|
|
const previous = hops[hops.length - 2];
|
|
if (!current || !previous) return null;
|
|
if (current.dir === 'down') return { id: previous.id, rail: 'left' };
|
|
if (current.dir === 'up') return { id: previous.id, rail: 'right' };
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Open whatever an entry-point row points at.
|
|
*
|
|
* A file goes to the File view rather than to the file node's Symbol view —
|
|
* the outline is on both, but only the File view carries the import rails —
|
|
* and it does NOT join the trail: a trail is a path through calls, and "I
|
|
* opened a file" is not a call. A symbol is a `start` hop, like any other jump
|
|
* that nothing on screen was stepped through to reach.
|
|
*/
|
|
export function openEntryTarget(target: EntryTarget): void {
|
|
if (!target) return;
|
|
if (target.type === 'file') {
|
|
navigate(fileHref(target.path));
|
|
return;
|
|
}
|
|
walkTo({ id: target.id, name: target.name, kind: target.kind }, 'start');
|
|
}
|