@ankhorage/zora 20.1.5 → 20.2.0

package/src/features/web-component-artifact/application/use-cases/materializeWebComponentArtifactAsync.test.ts

@@ -3,39 +3,55 @@ import { expect, test } from 'bun:test';
 import type { WebComponentArtifactFileSystemPort } from '../ports/outbound/WebComponentArtifactFileSystemPort';
 import { materializeWebComponentArtifactAsync } from './materializeWebComponentArtifactAsync';
 
-test('materializes the packaged tree-view web artifact without source ownership transfer', async () => {
-  const packageRoot = '/package';
-  const outputDirectory = '/consumer/src/generated/zora/tree-view';
-  const writes = new Map<string, string>();
-  const sources = new Map<string, string>([
-    ['/package/web-dist/tree-view/TreeView.js', 'export const TreeView = 1;\n'],
-    ['/package/web-dist/tree-view/TreeView.d.ts', 'export declare const TreeView: unknown;\n'],
-  ]);
-  const fileSystem = createFakeFileSystem(sources, writes);
+for (const artifact of [
+  { component: 'tree-view', outputName: 'TreeView' },
+  { component: 'graph-view', outputName: 'GraphView' },
+] as const) {
+  test(`materializes packaged ${artifact.component} without source ownership transfer`, async () => {
+    const packageRoot = '/package';
+    const outputDirectory = `/consumer/src/generated/zora/${artifact.component}`;
+    const writes = new Map<string, string>();
+    const sourceDirectory = `${packageRoot}/web-dist/${artifact.component}`;
+    const sources = new Map<string, string>([
+      [
+        `${sourceDirectory}/artifact.json`,
+        JSON.stringify({
+          component: artifact.component,
+          files: [`${artifact.outputName}.js`, `${artifact.outputName}.d.ts`],
+        }),
+      ],
+      [`${sourceDirectory}/${artifact.outputName}.js`, 'export const component = 1;\n'],
+      [
+        `${sourceDirectory}/${artifact.outputName}.d.ts`,
+        'export declare const component: unknown;\n',
+      ],
+    ]);
+    const fileSystem = createFakeFileSystem(sources, writes);
 
-  const result = await materializeWebComponentArtifactAsync(
-    {
-      component: 'tree-view',
-      outputDirectory,
-      packageRoot,
-      packageVersion: '1.2.3',
-    },
-    fileSystem,
-  );
+    const result = await materializeWebComponentArtifactAsync(
+      {
+        component: artifact.component,
+        outputDirectory,
+        packageRoot,
+        packageVersion: '1.2.3',
+      },
+      fileSystem,
+    );
 
-  expect(result.platform).toBe('web');
-  expect(result.createdFiles).toEqual([
-    `${outputDirectory}/TreeView.js`,
-    `${outputDirectory}/TreeView.d.ts`,
-    `${outputDirectory}/zora-artifact.json`,
-  ]);
-  expect(writes.get(`${outputDirectory}/TreeView.js`)).toStartWith(
-    '// Generated by @ankhorage/zora v1.2.3. Do not edit manually.',
-  );
-  expect(writes.get(`${outputDirectory}/zora-artifact.json`)).toContain(
-    '"owner": "@ankhorage/zora"',
-  );
-});
+    expect(result.platform).toBe('web');
+    expect(result.createdFiles).toEqual([
+      `${outputDirectory}/${artifact.outputName}.js`,
+      `${outputDirectory}/${artifact.outputName}.d.ts`,
+      `${outputDirectory}/zora-artifact.json`,
+    ]);
+    expect(writes.get(`${outputDirectory}/${artifact.outputName}.js`)).toStartWith(
+      '// Generated by @ankhorage/zora v1.2.3. Do not edit manually.',
+    );
+    expect(writes.get(`${outputDirectory}/zora-artifact.json`)).toContain(
+      '"owner": "@ankhorage/zora"',
+    );
+  });
+}
 
 test('rejects unsupported web components explicitly', async () => {
   const fileSystem = createFakeFileSystem(new Map(), new Map());

package/src/features/web-component-artifact/application/use-cases/materializeWebComponentArtifactAsync.ts

@@ -19,8 +19,12 @@ export async function materializeWebComponentArtifactAsync(
   input: MaterializeWebComponentArtifactInput,
   fileSystem: WebComponentArtifactFileSystemPort,
 ): Promise<MaterializeWebComponentArtifactResult> {
-  const artifact = resolveWebArtifact(input.component);
-  const sourceDirectory = fileSystem.joinPath(input.packageRoot, 'web-dist', artifact.directory);
+  const sourceDirectory = fileSystem.joinPath(input.packageRoot, 'web-dist', input.component);
+  const artifact = await readWebArtifactDefinitionAsync(
+    sourceDirectory,
+    input.component,
+    fileSystem,
+  );
   await fileSystem.ensureDirectoryAsync(input.outputDirectory);
 
   const createdFiles = await Promise.all(
@@ -61,20 +65,52 @@ export async function materializeWebComponentArtifactAsync(
 }
 
 interface WebArtifactDefinition {
-  readonly directory: string;
+  readonly component: string;
   readonly files: readonly string[];
 }
 
-/*** Resolve the canonical packaged web artifact for a requested component. */
-function resolveWebArtifact(component: string): WebArtifactDefinition {
-  if (component === 'tree-view') {
-    return {
-      directory: 'tree-view',
-      files: ['TreeView.js', 'TreeView.d.ts'],
-    };
+/*** Read one packaged artifact manifest so new web components require no CLI branching. */
+async function readWebArtifactDefinitionAsync(
+  sourceDirectory: string,
+  component: string,
+  fileSystem: WebComponentArtifactFileSystemPort,
+): Promise<WebArtifactDefinition> {
+  const manifestPath = fileSystem.joinPath(sourceDirectory, 'artifact.json');
+  const manifestSource = await readWebArtifactManifestSourceAsync(
+    manifestPath,
+    component,
+    fileSystem,
+  );
+  const parsed = JSON.parse(manifestSource) as {
+    readonly component?: unknown;
+    readonly files?: unknown;
+  };
+  if (
+    parsed.component !== component ||
+    !Array.isArray(parsed.files) ||
+    parsed.files.length === 0 ||
+    !parsed.files.every((fileName) => typeof fileName === 'string' && fileName.length > 0)
+  ) {
+    throw new Error(`Invalid ZORA web artifact manifest: ${component}`);
   }
 
-  throw new Error(`Unsupported ZORA web component: ${component}`);
+  return {
+    component,
+    files: parsed.files,
+  };
+}
+
+/*** Read an artifact manifest and translate missing packages into the CLI-facing error. */
+async function readWebArtifactManifestSourceAsync(
+  manifestPath: string,
+  component: string,
+  fileSystem: WebComponentArtifactFileSystemPort,
+): Promise<string> {
+  try {
+    return await fileSystem.readTextFileAsync(manifestPath);
+  } catch {
+    throw new Error(`Unsupported ZORA web component: ${component}`);
+  }
 }
 
 /*** Add a generated-file marker without changing the compiled artifact semantics. */

package/src/types/cytoscape-elk.d.ts

@@ -0,0 +1,4 @@
+declare module 'cytoscape-elk' {
+  const extension: unknown;
+  export default extension;
+}

package/web-dist/graph-view/GraphView.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+export type GraphViewLayoutName = 'breadthfirst' | 'circle' | 'concentric' | 'elk' | 'grid';
+export type GraphViewElementEventType = 'press' | 'double-press' | 'select' | 'unselect' | 'pointer-enter' | 'pointer-leave';
+export interface GraphViewNode {
+    readonly id: string;
+    readonly label?: string;
+    readonly parentId?: string;
+    readonly classes?: string;
+    readonly data?: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewEdge {
+    readonly id?: string;
+    readonly source: string;
+    readonly target: string;
+    readonly classes?: string;
+    readonly data?: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewStyleRule {
+    readonly selector: string;
+    readonly style: Readonly<Record<string, unknown>>;
+}
+export interface GraphViewPoint {
+    readonly x: number;
+    readonly y: number;
+}
+export interface GraphViewSize {
+    readonly width: number;
+    readonly height: number;
+}
+export interface GraphViewNodeRenderContext {
+    readonly hovered: boolean;
+    readonly node: GraphViewNode;
+    readonly selected: boolean;
+    readonly zoom: number;
+}
+export interface GraphViewRenderedNode {
+    readonly hovered: boolean;
+    readonly id: string;
+    readonly position: GraphViewPoint;
+    readonly selected: boolean;
+    readonly zoom: number;
+}
+export interface GraphViewViewport {
+    readonly zoom: number;
+    readonly pan: GraphViewPoint;
+}
+export interface GraphViewFitOptions {
+    readonly nodeIds?: readonly string[];
+    readonly padding?: number;
+}
+export interface GraphViewElementEvent {
+    readonly id: string;
+    readonly type: GraphViewElementEventType;
+}
+export interface GraphViewController {
+    fit(options?: GraphViewFitOptions): void;
+    getViewport(): GraphViewViewport;
+    setPan(pan: GraphViewPoint): void;
+    setZoom(zoom: number): void;
+    zoomBy(factor: number): void;
+}
+export interface GraphViewProps {
+    readonly nodes: readonly GraphViewNode[];
+    readonly edges: readonly GraphViewEdge[];
+    readonly layout?: GraphViewLayoutName;
+    readonly layoutOptions?: Readonly<Record<string, unknown>>;
+    readonly spacingFactor?: number;
+    readonly styleRules?: readonly GraphViewStyleRule[];
+    readonly selectedNodeIds?: readonly string[];
+    readonly renderNode?: (context: GraphViewNodeRenderContext) => React.ReactNode;
+    readonly getNodeSize?: (node: GraphViewNode) => GraphViewSize | undefined;
+    readonly fitPadding?: number;
+    readonly minZoom?: number;
+    readonly maxZoom?: number;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly ariaLabel?: string;
+    readonly onReady?: (controller: GraphViewController) => void;
+    readonly onLayoutComplete?: (controller: GraphViewController) => void;
+    readonly onNodeEvent?: (event: GraphViewElementEvent) => void;
+    readonly onEdgeEvent?: (event: GraphViewElementEvent) => void;
+    readonly onViewportChange?: (viewport: GraphViewViewport) => void;
+}
+export type GraphViewCallbacks = Pick<GraphViewProps, 'onEdgeEvent' | 'onLayoutComplete' | 'onNodeEvent' | 'onReady' | 'onViewportChange'>;
+/*** Render a browser graph while one runtime owns Cytoscape layout, viewport, and disposal. */
+export declare function GraphView(props: GraphViewProps): React.JSX.Element;
+//# sourceMappingURL=GraphView.d.ts.map