@ts-graphviz/react 0.9.1 → 0.10.0

package/src/hooks/useGraphvizContext.spec.ts

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import { renderHook } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { context } from './__tests__/wrapper.js';
+import { useGraphvizContext } from './useGraphvizContext.js';
+
+describe('useGraphvizContext', () => {
+  test('returns {}', () => {
+    const { result } = renderHook(() => useGraphvizContext(), {
+      wrapper: context(),
+    });
+    expect(result.current).toStrictEqual({});
+  });
+
+  test('An error occurs when called outside the GraphvizContext', () => {
+    expect(() => {
+      renderHook(() => useGraphvizContext(), {
+        // Don't use context() here
+        // wrapper: context(),
+      });
+    }).toThrowErrorMatchingInlineSnapshot(`
+      [Error: Cannot call useGraphvizContext outside GraphvizContext.
+      Basically, you need to use the render function provided by @ts-graphviz/react.]
+    `);
+  });
+});

package/src/hooks/useGraphvizContext.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { useContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+import { type Context, GraphvizContext } from '../contexts/GraphvizContext.js';
+
+export function useGraphvizContext<T extends GraphBaseModel>(): Context<T> {
+  const context = useContext(
+    GraphvizContext as unknown as React.Context<Context<T>>,
+  );
+  if (context === null) {
+    throw Error(
+      'Cannot call useGraphvizContext outside GraphvizContext.\nBasically, you need to use the render function provided by @ts-graphviz/react.',
+    );
+  }
+  return context;
+}

package/src/hooks/useHasAttributes.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import type {
+  AttributeKey,
+  AttributesObject,
+  HasAttributes,
+} from 'ts-graphviz';
+
+export function useHasAttributes<T extends AttributeKey>(
+  target: HasAttributes<T>,
+  attributes: AttributesObject<T>,
+): void {
+  useEffect(() => {
+    target.attributes.clear();
+    target.attributes.apply(attributes);
+  }, [target, attributes]);
+}

package/src/hooks/useHasComment.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react';
+import type { HasComment } from 'ts-graphviz';
+
+export function useHasComment(target: HasComment, comment?: string): void {
+  useEffect(() => {
+    target.comment = comment;
+  }, [target, comment]);
+}

package/src/hooks/useNode.spec.ts

@@ -0,0 +1,16 @@
+// @vitest-environment jsdom
+import { renderHook } from '@testing-library/react';
+import { Node } from 'ts-graphviz';
+import { describe, expect, it } from 'vitest';
+
+import { digraph } from './__tests__/wrapper.js';
+import { useNode } from './useNode.js';
+
+describe('useNode', () => {
+  it('returns Node instance', () => {
+    const { result } = renderHook(() => useNode('hoge'), {
+      wrapper: digraph(),
+    });
+    expect(result.current).toBeInstanceOf(Node);
+  });
+});

package/src/hooks/useNode.ts

@@ -0,0 +1,29 @@
+import { useEffect, useMemo } from 'react';
+import type { NodeModel } from 'ts-graphviz';
+import type { NodeOptions } from '../types.js';
+import { useCurrentGraph } from './useCurrentGraph.js';
+import { useHasAttributes } from './useHasAttributes.js';
+import { useHasComment } from './useHasComment.js';
+
+/**
+ * `useNode` is a hook that creates an instance of Node
+ * according to the object given by props.
+ */
+export function useNode(id: string, options: NodeOptions = {}): NodeModel {
+  const { comment, ...attributes } = options;
+  const cluster = useCurrentGraph();
+  const node = useMemo(() => {
+    const n = cluster.createNode(id);
+    n.attributes.apply(attributes);
+    n.comment = comment;
+    return n;
+  }, [cluster, id, attributes, comment]);
+  useHasComment(node, comment);
+  useHasAttributes(node, attributes);
+  useEffect(() => {
+    return (): void => {
+      cluster.removeNode(node);
+    };
+  }, [cluster, node]);
+  return node;
+}

package/src/hooks/useRenderedID.spec.tsx

@@ -0,0 +1,28 @@
+// @vitest-environment jsdom
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { context } from './__tests__/wrapper.js';
+import { useRenderedID } from './useRenderedID.js';
+
+describe('useRenderedID', () => {
+  it('should return the same value as the input, when input is string', () => {
+    const { result } = renderHook(() => useRenderedID('foo'), {
+      wrapper: context(),
+    });
+    expect(result.current).toBe('foo');
+  });
+
+  it('should return the same value as the input, when input is HTMLLike string', () => {
+    const { result } = renderHook(() => useRenderedID('<<b>bold</b>>'), {
+      wrapper: context(),
+    });
+    expect(result.current).toBe('<<b>bold</b>>');
+  });
+
+  it('should return the HTMLLike string, when input is JSX', () => {
+    const { result } = renderHook(() => useRenderedID(<dot:b>bold</dot:b>), {
+      wrapper: context(),
+    });
+    expect(result.current).toBe('<<b>bold</b>>');
+  });
+});

package/src/hooks/useRenderedID.ts

@@ -0,0 +1,6 @@
+import { type ReactElement, useMemo } from 'react';
+import { renderId } from '../renderId.js';
+
+export function useRenderedID(id?: ReactElement | string): string | undefined {
+  return useMemo(() => renderId(id), [id]);
+}

package/src/hooks/useSubgraph.spec.ts

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import { renderHook } from '@testing-library/react';
+import { Subgraph } from 'ts-graphviz';
+import { describe, expect, it } from 'vitest';
+import {
+  digraph,
+  digraphInSubgraph,
+  graph,
+  graphInSubgraph,
+} from './__tests__/wrapper.js';
+import { useSubgraph } from './useSubgraph.js';
+
+describe('useSubgraph', () => {
+  it('returns Subgraph instance in digraph warper', () => {
+    const { result } = renderHook(() => useSubgraph(), {
+      wrapper: digraph(),
+    });
+    expect(result.current).toBeInstanceOf(Subgraph);
+  });
+
+  it('returns Subgraph instance in graph warper', () => {
+    const { result } = renderHook(() => useSubgraph(), {
+      wrapper: graph(),
+    });
+    expect(result.current).toBeInstanceOf(Subgraph);
+  });
+
+  it('returns Subgraph instance in graphInSubgraph warper', () => {
+    const { result } = renderHook(() => useSubgraph(), {
+      wrapper: graphInSubgraph(),
+    });
+    expect(result.current).toBeInstanceOf(Subgraph);
+  });
+
+  it('returns Subgraph instance in digraphInSubgraph warper', () => {
+    const { result } = renderHook(() => useSubgraph(), {
+      wrapper: digraphInSubgraph(),
+    });
+    expect(result.current).toBeInstanceOf(Subgraph);
+  });
+});

package/src/hooks/useSubgraph.ts

@@ -0,0 +1,39 @@
+import { useEffect, useMemo } from 'react';
+import { type GraphBaseModel, Subgraph, type SubgraphModel } from 'ts-graphviz';
+import type { SubgraphOptions } from '../types.js';
+import { useCurrentGraph } from './useCurrentGraph.js';
+import { useGraphAttributes } from './useGraphAttributes.js';
+import { useGraphvizContext } from './useGraphvizContext.js';
+import { useHasComment } from './useHasComment.js';
+
+/**
+ * `useSubgraph` is a hook that creates an instance of Subgraph
+ * according to the object given by props.
+ */
+export function useSubgraph(props: SubgraphOptions = {}): SubgraphModel {
+  const { id, comment, edge, node, graph, ...attributes } = props;
+  const context = useGraphvizContext();
+  const cluster = useCurrentGraph();
+  const subgraph = useMemo(() => {
+    const g = new Subgraph(id);
+    if (cluster !== null) {
+      cluster.addSubgraph(g);
+    } else if (!context.container) {
+      context.container = g as GraphBaseModel;
+    }
+    g.comment = comment;
+    g.apply(attributes);
+    g.attributes.node.apply(node ?? {});
+    g.attributes.edge.apply(edge ?? {});
+    g.attributes.graph.apply(graph ?? {});
+    return g;
+  }, [context, cluster, id, comment, edge, node, graph, attributes]);
+  useHasComment(subgraph, comment);
+  useGraphAttributes(subgraph, attributes, { edge, node, graph });
+  useEffect(() => {
+    return (): void => {
+      cluster.removeSubgraph(subgraph);
+    };
+  }, [cluster, subgraph]);
+  return subgraph;
+}

package/src/react.ts

@@ -0,0 +1,16 @@
+export * from './types.js';
+export * from './hooks/useGraphContainer.js';
+export * from './hooks/useCurrentGraph.js';
+export * from './hooks/useDigraph.js';
+export * from './hooks/useGraph.js';
+export * from './hooks/useSubgraph.js';
+export * from './hooks/useEdge.js';
+export * from './hooks/useNode.js';
+export * from './components/Graph.js';
+export * from './components/Digraph.js';
+export * from './components/Subgraph.js';
+export * from './components/Node.js';
+export * from './components/Edge.js';
+export * from './components/GraphPortal.js';
+export * from './renderHTMLLike.js';
+export * from './render.js';

package/src/reconciler.ts

@@ -0,0 +1,272 @@
+import type { FC } from 'react';
+import ReactReconciler from 'react-reconciler';
+
+type Type = FC;
+type Props = any;
+type Container = Record<string, never>;
+
+type Instance = any;
+type TextInstance = any;
+type SuspenseInstance = any;
+type HydratableInstance = any;
+type PublicInstance = any;
+type HostContext = any;
+type UpdatePayload = any;
+type ChildSet = any;
+type TimeoutHandle = any;
+type NoTimeout = any;
+
+type OpaqueHandle = ReactReconciler.Fiber;
+
+export class HostConfig
+  implements
+    ReactReconciler.HostConfig<
+      Type,
+      Props,
+      Container,
+      Instance,
+      TextInstance,
+      SuspenseInstance,
+      HydratableInstance,
+      PublicInstance,
+      HostContext,
+      UpdatePayload,
+      ChildSet, // TODO Placeholder for undocumented API
+      TimeoutHandle,
+      NoTimeout
+    >
+{
+  preparePortalMount(containerInfo: Container): void {
+    // NoOp
+  }
+
+  scheduleTimeout(fn: (...args: unknown[]) => unknown, delay?: number) {
+    // NoOp
+  }
+
+  cancelTimeout(id: any): void {
+    // NoOp
+  }
+
+  queueMicrotask(fn: () => void): void {
+    // NoOp
+  }
+
+  cloneInstance?: any;
+
+  cloneFundamentalInstance?: any;
+
+  createContainerChildSet?: any;
+
+  appendChildToContainerChildSet?: any;
+
+  finalizeContainerChildren?: any;
+
+  replaceContainerChildren?: any;
+
+  cloneHiddenInstance?: any;
+
+  cloneHiddenTextInstance?: any;
+
+  public now = Date.now;
+
+  public setTimeout = setTimeout;
+
+  public clearTimeout = clearTimeout;
+
+  public noTimeout: NoTimeout = -1; // TODO
+
+  // Temporary workaround for scenario where multiple renderers concurrently
+  // render using the same context objects. E.g. React DOM and React ART on the
+  // same page. DOM is the primary renderer; ART is the secondary renderer.
+  public isPrimaryRenderer = false;
+
+  public supportsMutation = false;
+
+  public supportsPersistence = false;
+
+  public supportsHydration = false;
+
+  public getPublicInstance(instance: Instance | TextInstance): PublicInstance {
+    return instance;
+  }
+
+  public getRootHostContext(rootContainerInstance: Container): HostContext {
+    return {};
+  }
+
+  public getChildHostContext(
+    parentHostContext: HostContext,
+    type: Type,
+    rootContainerInstance: Container,
+  ): HostContext {
+    return parentHostContext;
+  }
+
+  public prepareForCommit(
+    containerInfo: Container,
+  ): Record<string, any> | null {
+    return null;
+  }
+
+  public resetAfterCommit(containerInfo: Container): void {
+    // containerInfo.setRoot
+  }
+
+  /**
+   * Create component instance
+   */
+  public createInstance(
+    type: Type,
+    props: Props,
+    rootContainerInstance: Container,
+    hostContext: HostContext,
+    internalInstanceHandle: OpaqueHandle,
+  ): Instance {
+    // NoOp
+    return type(props);
+  }
+
+  public appendInitialChild(
+    parentInstance: Instance,
+    child: Instance | TextInstance,
+  ): void {
+    parentInstance.appendChild(child);
+  }
+
+  public finalizeInitialChildren(
+    parentInstance: Instance,
+    type: Type,
+    props: Props,
+    rootContainerInstance: Container,
+    hostContext: HostContext,
+  ): boolean {
+    return false;
+  }
+
+  public prepareUpdate(
+    instance: Instance,
+    type: Type,
+    oldProps: Props,
+    newProps: Props,
+    rootContainerInstance: Container,
+    hostContext: HostContext,
+  ): null | UpdatePayload {
+    return {};
+  }
+
+  public shouldSetTextContent(type: Type, props: Props): boolean {
+    return false;
+  }
+
+  public shouldDeprioritizeSubtree(type: Type, props: Props): boolean {
+    return false;
+  }
+
+  public createTextInstance(
+    text: string,
+    rootContainerInstance: Container,
+    hostContext: HostContext,
+    internalInstanceHandle: OpaqueHandle,
+  ): TextInstance {
+    return text;
+  }
+
+  public scheduleDeferredCallback(
+    callback: () => any,
+    options?: { timeout: number },
+  ): any {
+    // NoOp
+  }
+
+  public cancelDeferredCallback(callbackID: any): void {
+    // NoOp
+  }
+
+  // -------------------
+  //      Mutation
+  //     (optional)
+  // -------------------
+  public appendChild(
+    parentInstance: Instance,
+    child: Instance | TextInstance,
+  ): void {
+    // NoOp
+    if (parentInstance.appendChild) {
+      parentInstance.appendChild(child);
+    }
+  }
+
+  public appendChildToContainer(
+    container: Container,
+    child: Instance | TextInstance,
+  ): void {
+    // if (container.appendChild) {
+    //   container.appendChild(child);
+    // }
+  }
+
+  public commitTextUpdate(
+    textInstance: TextInstance,
+    oldText: string,
+    newText: string,
+  ): void {
+    // NoOp
+  }
+
+  public commitMount(
+    instance: Instance,
+    type: Type,
+    newProps: Props,
+    internalInstanceHandle: OpaqueHandle,
+  ): void {
+    // NoOp
+  }
+
+  public commitUpdate(
+    instance: Instance,
+    updatePayload: UpdatePayload,
+    type: Type,
+    oldProps: Props,
+    newProps: Props,
+    internalInstanceHandle: OpaqueHandle,
+  ): void {
+    // NoOp
+  }
+
+  public insertBefore(
+    parentInstance: Instance,
+    child: Instance | TextInstance,
+    beforeChild: Instance | TextInstance,
+  ): void {
+    // NoOp
+  }
+
+  public insertInContainerBefore(
+    container: Container,
+    child: Instance | TextInstance,
+    beforeChild: Instance | TextInstance,
+  ): void {
+    // NoOp
+  }
+
+  public removeChild(
+    parentInstance: Instance,
+    child: Instance | TextInstance,
+  ): void {
+    // NoOp
+  }
+
+  public removeChildFromContainer(
+    container: Container,
+    child: Instance | TextInstance,
+  ): void {
+    // NoOp
+  }
+
+  public resetTextContent(instance: Instance): void {
+    // NoOp
+  }
+}
+
+export const reconciler = ReactReconciler(new HostConfig());

package/src/render.test.tsx

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+import { Digraph } from './components/Digraph.js';
+import { Edge } from './components/Edge.js';
+import { Graph } from './components/Graph.js';
+import { Node } from './components/Node.js';
+import { Subgraph } from './components/Subgraph.js';
+import { renderToDot } from './render.js';
+
+describe('renderToDot', () => {
+  it('should render a digraph', () => {
+    expect(
+      renderToDot(
+        <Digraph>
+          <Node id="a" label="Node A" />
+          <Node id="b" label={<dot:b>bold</dot:b>} />
+          <Subgraph id="cluster_x" label="Cluster X">
+            <Node id="c" label="Node C" />
+          </Subgraph>
+          <Edge targets={['a', 'b']} />
+        </Digraph>,
+      ),
+    ).toMatchInlineSnapshot(`
+      "digraph {
+        "a" [
+          label = "Node A";
+        ];
+        "b" [
+          label = <<b>bold</b>>;
+        ];
+        subgraph "cluster_x" {
+          label = "Cluster X";
+          "c" [
+            label = "Node C";
+          ];
+        }
+        "a" -> "b";
+      }"
+    `);
+  });
+
+  it('should render a graph', () => {
+    expect(
+      renderToDot(
+        <Graph>
+          <Node id="a" label="Node A" />
+          <Node id="b" label="Node B" />
+          <Subgraph id="cluster_x" label="Cluster X">
+            <Node id="c" label="Node C" />
+          </Subgraph>
+          <Edge targets={['a', 'b']} />
+        </Graph>,
+      ),
+    ).toMatchInlineSnapshot(`
+      "graph {
+        "a" [
+          label = "Node A";
+        ];
+        "b" [
+          label = "Node B";
+        ];
+        subgraph "cluster_x" {
+          label = "Cluster X";
+          "c" [
+            label = "Node C";
+          ];
+        }
+        "a" -- "b";
+      }"
+    `);
+  });
+});