@ts-graphviz/react 0.9.1 → 0.10.1

package/src/components/Graph.tsx

@@ -0,0 +1,36 @@
+import { type FC, useEffect } from 'react';
+import { CurrentGraph } from '../contexts/CurrentGraph.js';
+import { GraphContainer } from '../contexts/GraphContainer.js';
+import { useGraph } from '../hooks/useGraph.js';
+import { useGraphContainer } from '../hooks/useGraphContainer.js';
+import { useGraphMap } from '../hooks/useGraphMap.js';
+import { useRenderedID } from '../hooks/useRenderedID.js';
+import type { RootGraphProps } from '../types.js';
+/**
+ * `Graph` component.
+ */
+export const Graph: FC<RootGraphProps> = ({ children, label, ...options }) => {
+  const container = useGraphContainer();
+  if (container !== null) {
+    throw Error(
+      'RootCluster is duplicated.\nUse only one of Digraph and Graph.',
+    );
+  }
+  const renderedLabel = useRenderedID(label);
+  if (renderedLabel !== undefined)
+    Object.assign(options, { label: renderedLabel });
+  const graph = useGraph(options);
+  const clusters = useGraphMap();
+  useEffect(() => {
+    if (graph.id !== undefined) {
+      clusters.set(graph.id, graph);
+    }
+  }, [clusters, graph]);
+  return (
+    <GraphContainer.Provider value={graph}>
+      <CurrentGraph.Provider value={graph}>{children}</CurrentGraph.Provider>
+    </GraphContainer.Provider>
+  );
+};
+
+Graph.displayName = 'Graph';

package/src/components/GraphPortal.tsx

@@ -0,0 +1,22 @@
+import { type FC, useContext, useMemo } from 'react';
+import { CurrentGraph } from '../contexts/CurrentGraph.js';
+import { GraphMap } from '../contexts/GraphMap.js';
+import { useGraphContainer } from '../hooks/useGraphContainer.js';
+import type { GraphPortalProps } from '../types.js';
+
+/**
+ * GraphPortal component.
+ */
+export const GraphPortal: FC<GraphPortalProps> = ({ children, id }) => {
+  const container = useGraphContainer();
+  const map = useContext(GraphMap);
+  const cluster = useMemo(
+    () => (id ? map.get(id) ?? container : container),
+    [container, map, id],
+  );
+  return (
+    <CurrentGraph.Provider value={cluster}>{children}</CurrentGraph.Provider>
+  );
+};
+
+GraphPortal.displayName = 'GraphPortal';

package/src/components/Node.spec.tsx

@@ -0,0 +1,101 @@
+import { describe, expect, test } from 'vitest';
+import { renderToDot } from '../render.js';
+import { Digraph } from './Digraph.js';
+import { Node } from './Node.js';
+
+describe('Node', () => {
+  test('pass without optional props and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node id="foo" />
+      </Digraph>,
+    );
+    expect(dot).toMatchInlineSnapshot(`
+      "digraph {
+        "foo";
+      }"
+    `);
+  });
+
+  test('pass label with string and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node id="foo" label="label test" />
+      </Digraph>,
+    );
+    expect(dot).toMatchInlineSnapshot(`
+      "digraph {
+        "foo" [
+          label = "label test";
+        ];
+      }"
+    `);
+  });
+
+  test('pass label with HTMLLike ReactElement and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node
+          id="foo"
+          label={
+            <dot:table border={0} cellborder={1} cellSpacing={0}>
+              <dot:tr>
+                <dot:td>left</dot:td>
+                <dot:td port="m">middle</dot:td>
+                <dot:td port="r">right</dot:td>
+              </dot:tr>
+            </dot:table>
+          }
+        />
+      </Digraph>,
+    );
+    expect(dot).toMatchInlineSnapshot(`
+      "digraph {
+        "foo" [
+          label = <<table border="0" cellborder="1" cellSpacing="0"><tr><td>left</td><td port="m">middle</td><td port="r">right</td></tr></table>>;
+        ];
+      }"
+    `);
+  });
+
+  test('pass xlabel with string and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node id="foo" xlabel="xlabel test" />
+      </Digraph>,
+    );
+    expect(dot).toMatchInlineSnapshot(`
+      "digraph {
+        "foo" [
+          xlabel = "xlabel test";
+        ];
+      }"
+    `);
+  });
+
+  test('pass xlabel with HTMLLike ReactElement and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node
+          id="foo"
+          xlabel={
+            <dot:table border={0} cellborder={1} cellSpacing={0}>
+              <dot:tr>
+                <dot:td>left</dot:td>
+                <dot:td port="m">middle</dot:td>
+                <dot:td port="r">right</dot:td>
+              </dot:tr>
+            </dot:table>
+          }
+        />
+      </Digraph>,
+    );
+    expect(dot).toMatchInlineSnapshot(`
+      "digraph {
+        "foo" [
+          xlabel = <<table border="0" cellborder="1" cellSpacing="0"><tr><td>left</td><td port="m">middle</td><td port="r">right</td></tr></table>>;
+        ];
+      }"
+    `);
+  });
+});

package/src/components/Node.tsx

@@ -0,0 +1,21 @@
+import type { FC } from 'react';
+import { useNode } from '../hooks/useNode.js';
+import { useRenderedID } from '../hooks/useRenderedID.js';
+import type { NodeProps } from '../types.js';
+
+/**
+ * `Node` component.
+ */
+export const Node: FC<NodeProps> = ({ id, label, xlabel, ...options }) => {
+  const renderedLabel = useRenderedID(label);
+  const renderedXlabel = useRenderedID(xlabel);
+
+  if (renderedLabel !== undefined)
+    Object.assign(options, { label: renderedLabel });
+  if (renderedXlabel !== undefined)
+    Object.assign(options, { xlabel: renderedXlabel });
+  useNode(id, options);
+  return null;
+};
+
+Node.displayName = 'Node';

package/src/components/Subgraph.tsx

@@ -0,0 +1,30 @@
+import { type FC, useEffect } from 'react';
+import { CurrentGraph } from '../contexts/CurrentGraph.js';
+import { useGraphMap } from '../hooks/useGraphMap.js';
+import { useRenderedID } from '../hooks/useRenderedID.js';
+import { useSubgraph } from '../hooks/useSubgraph.js';
+import type { SubgraphProps } from '../types.js';
+/**
+ * `Subgraph` component.
+ */
+export const Subgraph: FC<SubgraphProps> = ({
+  children,
+  label,
+  ...options
+}) => {
+  const renderedLabel = useRenderedID(label);
+  if (renderedLabel !== undefined)
+    Object.assign(options, { label: renderedLabel });
+  const subgraph = useSubgraph(options);
+  const clusters = useGraphMap();
+  useEffect(() => {
+    if (subgraph.id !== undefined) {
+      clusters.set(subgraph.id, subgraph);
+    }
+  }, [subgraph, clusters]);
+  return (
+    <CurrentGraph.Provider value={subgraph}>{children}</CurrentGraph.Provider>
+  );
+};
+
+Subgraph.displayName = 'Subgraph';

package/src/contexts/CurrentGraph.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+
+export const CurrentGraph = createContext<GraphBaseModel | null>(null);
+CurrentGraph.displayName = 'CurrentGraph';

package/src/contexts/GraphContainer.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+
+export const GraphContainer = createContext<GraphBaseModel | null>(null);
+GraphContainer.displayName = 'GraphContainer';

package/src/contexts/GraphMap.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+
+export const GraphMap = createContext<Map<string, GraphBaseModel>>(new Map());
+GraphMap.displayName = 'GraphMap';

package/src/contexts/GraphvizContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+
+export interface Context<T extends GraphBaseModel = GraphBaseModel> {
+  container?: T;
+}
+
+export const GraphvizContext = createContext<Context>(
+  null as unknown as Context,
+);
+GraphvizContext.displayName = 'GraphvizContext';

package/src/hooks/__tests__/wrapper.tsx

@@ -0,0 +1,58 @@
+import type { ComponentProps, FC, ReactNode } from 'react';
+
+import { Digraph } from '../../components/Digraph.js';
+import { Graph } from '../../components/Graph.js';
+import { Subgraph } from '../../components/Subgraph.js';
+import { GraphvizContext } from '../../contexts/GraphvizContext.js';
+
+export const context =
+  (): FC<{ children: ReactNode }> =>
+  ({ children }) => {
+    return (
+      <GraphvizContext.Provider value={{}}>{children}</GraphvizContext.Provider>
+    );
+  };
+
+export const digraph =
+  (props: ComponentProps<typeof Digraph> = {}): FC<{ children: ReactNode }> =>
+  ({ children }) => {
+    return (
+      <GraphvizContext.Provider value={{}}>
+        <Digraph {...props}>{children}</Digraph>
+      </GraphvizContext.Provider>
+    );
+  };
+
+export const digraphInSubgraph =
+  (props: ComponentProps<typeof Subgraph> = {}): FC<{ children: ReactNode }> =>
+  ({ children }) => {
+    return (
+      <GraphvizContext.Provider value={{}}>
+        <Digraph>
+          <Subgraph {...props}>{children}</Subgraph>
+        </Digraph>
+      </GraphvizContext.Provider>
+    );
+  };
+
+export const graph =
+  (props: ComponentProps<typeof Graph> = {}): FC<{ children: ReactNode }> =>
+  ({ children }) => {
+    return (
+      <GraphvizContext.Provider value={{}}>
+        <Graph {...props}>{children}</Graph>
+      </GraphvizContext.Provider>
+    );
+  };
+
+export const graphInSubgraph =
+  (props: ComponentProps<typeof Subgraph> = {}): FC<{ children: ReactNode }> =>
+  ({ children }) => {
+    return (
+      <GraphvizContext.Provider value={{}}>
+        <Graph>
+          <Subgraph {...props}>{children}</Subgraph>
+        </Graph>
+      </GraphvizContext.Provider>
+    );
+  };

package/src/hooks/useCurrentGraph.spec.ts

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+// Note: In order to suppress warnings during test execution, pure.js is imported.
+import { renderHook } from '@testing-library/react/pure.js';
+import { Digraph, Graph, Subgraph } from 'ts-graphviz';
+import { describe, expect, test } from 'vitest';
+import {
+  digraph,
+  digraphInSubgraph,
+  graph,
+  graphInSubgraph,
+} from './__tests__/wrapper.js';
+import { useCurrentGraph } from './useCurrentGraph.js';
+
+describe('useCurrentGraph', () => {
+  describe('get parent cluster', () => {
+    test('returns Diagram instance in digraph wrapper', () => {
+      const { result } = renderHook(() => useCurrentGraph(), {
+        wrapper: digraph(),
+      });
+      expect(result.current).toBeInstanceOf(Digraph);
+    });
+
+    test('returns Graph instance in graph wrapper', () => {
+      const { result } = renderHook(() => useCurrentGraph(), {
+        wrapper: graph(),
+      });
+      expect(result.current).toBeInstanceOf(Graph);
+    });
+
+    test('returns Subgraph instance in graphInSubgraph wrapper', () => {
+      const { result } = renderHook(() => useCurrentGraph(), {
+        wrapper: graphInSubgraph(),
+      });
+      expect(result.current).toBeInstanceOf(Subgraph);
+    });
+
+    test('returns Subgraph instance in digraphInSubgraph wrapper', () => {
+      const { result } = renderHook(() => useCurrentGraph(), {
+        wrapper: digraphInSubgraph(),
+      });
+      expect(result.current).toBeInstanceOf(Subgraph);
+    });
+  });
+
+  test('An error occurs when called outside the cluster', () => {
+    try {
+      expect(() => {
+        renderHook(() => useCurrentGraph());
+      }).toThrowErrorMatchingInlineSnapshot(
+        `[Error: useCurrentGraph must be called within a cluster such as Digraph, Graph, Subgraph.]`,
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  });
+});

package/src/hooks/useCurrentGraph.ts

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+import { CurrentGraph } from '../contexts/CurrentGraph.js';
+
+/**
+ * Hook to get the current cluster(Digraph, Graph or Subgraph).
+ *
+ * @throws If it is out of the context of Cluster, it throws an exception.
+ */
+export function useCurrentGraph(): GraphBaseModel {
+  const cluster = useContext(CurrentGraph);
+  if (cluster === null) {
+    throw Error(
+      'useCurrentGraph must be called within a cluster such as Digraph, Graph, Subgraph.',
+    );
+  }
+  return cluster;
+}

package/src/hooks/useDigraph.spec.ts

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

package/src/hooks/useDigraph.ts

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { Digraph, type RootGraphModel } from 'ts-graphviz';
+import type { RootGraphOptions } from '../types.js';
+import { useGraphAttributes } from './useGraphAttributes.js';
+import { useGraphvizContext } from './useGraphvizContext.js';
+import { useHasComment } from './useHasComment.js';
+
+/**
+ * `useDigraph` is a hook that creates an instance of Digraph
+ * according to the object given by props.
+ */
+export function useDigraph(options: RootGraphOptions = {}): RootGraphModel {
+  const { id, comment, edge, node, graph, ...attributes } = options;
+  const context = useGraphvizContext<RootGraphModel>();
+  const digraph = useMemo(() => {
+    const g = new Digraph(id);
+    context.container = g;
+    g.comment = comment;
+    g.apply(attributes);
+    g.attributes.node.apply(node ?? {});
+    g.attributes.edge.apply(edge ?? {});
+    g.attributes.graph.apply(graph ?? {});
+    return g;
+  }, [context, id, comment, edge, node, graph, attributes]);
+  useHasComment(digraph, comment);
+  useGraphAttributes(digraph, attributes, { edge, node, graph });
+  useEffect(() => {
+    return (): void => {
+      context.container = undefined;
+    };
+  }, [context]);
+  return digraph;
+}

package/src/hooks/useEdge.spec.ts

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+import { renderHook } from '@testing-library/react';
+import { Edge, type EdgeTargetLikeTuple } from 'ts-graphviz';
+import { describe, expect, it, test } from 'vitest';
+import { digraph, graph } from './__tests__/wrapper.js';
+import { useEdge } from './useEdge.js';
+
+describe('useEdge', () => {
+  it('returns Edge instance in digraph wrapper', () => {
+    const { result } = renderHook(() => useEdge(['a', 'b']), {
+      wrapper: digraph(),
+    });
+    expect(result.current).toBeInstanceOf(Edge);
+  });
+
+  it('returns an Edge instance in a digraph wrapper for grouped edge targets', () => {
+    const { result } = renderHook(() => useEdge(['a', ['b1', 'b2'], 'c']), {
+      wrapper: digraph(),
+    });
+    expect(result.current).toBeInstanceOf(Edge);
+  });
+
+  it('returns Edge instance in graph wrapper', () => {
+    const { result } = renderHook(() => useEdge(['a', 'b']), {
+      wrapper: graph(),
+    });
+    expect(result.current).toBeInstanceOf(Edge);
+  });
+
+  it('returns an Edge instance in a graph wrapper for grouped edge targets', () => {
+    const { result } = renderHook(() => useEdge(['a', ['b1', 'b2'], 'c']), {
+      wrapper: graph(),
+    });
+    expect(result.current).toBeInstanceOf(Edge);
+  });
+
+  test('throw error if the target is less than 2', () => {
+    expect(() => {
+      renderHook(() => useEdge(['a'] as any as EdgeTargetLikeTuple), {
+        wrapper: graph(),
+      });
+    }).toThrowErrorMatchingInlineSnapshot(
+      `[Error: Edges must have at least 2 targets.]`,
+    );
+  });
+});

package/src/hooks/useEdge.ts

@@ -0,0 +1,35 @@
+import { useEffect, useMemo } from 'react';
+import type { EdgeModel, EdgeTargetLikeTuple } from 'ts-graphviz';
+import type { EdgeOptions } from '../types.js';
+import { useCurrentGraph } from './useCurrentGraph.js';
+import { useHasAttributes } from './useHasAttributes.js';
+import { useHasComment } from './useHasComment.js';
+
+/**
+ * `useEdge` is a hook that creates an instance of Edge
+ * according to the object given by props.
+ */
+export function useEdge(
+  targets: EdgeTargetLikeTuple,
+  props: EdgeOptions = {},
+): EdgeModel {
+  const { comment, ...attributes } = props;
+  const cluster = useCurrentGraph();
+  if (targets.length < 2) {
+    throw Error('Edges must have at least 2 targets.');
+  }
+  const edge = useMemo(() => {
+    const e = cluster.createEdge(targets);
+    e.comment = comment;
+    e.attributes.apply(attributes);
+    return e;
+  }, [cluster, targets, comment, attributes]);
+  useHasComment(edge, comment);
+  useHasAttributes(edge, attributes);
+  useEffect(() => {
+    return (): void => {
+      cluster.removeEdge(edge);
+    };
+  }, [cluster, edge]);
+  return edge;
+}

package/src/hooks/useGraph.spec.ts

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

package/src/hooks/useGraph.ts

@@ -0,0 +1,33 @@
+import { useEffect, useMemo } from 'react';
+import { Graph, type RootGraphModel } from 'ts-graphviz';
+import type { RootGraphOptions } from '../types.js';
+import { useGraphAttributes } from './useGraphAttributes.js';
+import { useGraphvizContext } from './useGraphvizContext.js';
+import { useHasComment } from './useHasComment.js';
+
+/**
+ * `useGraph` is a hook that creates an instance of Graph
+ * according to the object given by props.
+ */
+export function useGraph(options: RootGraphOptions = {}): RootGraphModel {
+  const { id, comment, edge, node, graph, ...attributes } = options;
+  const context = useGraphvizContext<RootGraphModel>();
+  const memoGraph = useMemo(() => {
+    const g = new Graph(id);
+    context.container = g;
+    g.comment = comment;
+    g.apply(attributes);
+    g.attributes.node.apply(node ?? {});
+    g.attributes.edge.apply(edge ?? {});
+    g.attributes.graph.apply(graph ?? {});
+    return g;
+  }, [context, id, comment, edge, node, graph, attributes]);
+  useHasComment(memoGraph, comment);
+  useGraphAttributes(memoGraph, attributes, { edge, node, graph });
+  useEffect(() => {
+    return (): void => {
+      context.container = undefined;
+    };
+  }, [context]);
+  return memoGraph;
+}

package/src/hooks/useGraphAttributes.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import type {
+  AttributeKey,
+  AttributesObject,
+  GraphBaseModel,
+} from 'ts-graphviz';
+import type { GraphBaseAttributesProps } from '../types.js';
+
+export function useGraphAttributes<T extends AttributeKey>(
+  cluster: GraphBaseModel<T>,
+  attributes: AttributesObject<T>,
+  { edge, node, graph }: GraphBaseAttributesProps,
+): void {
+  useEffect(() => {
+    cluster.clear();
+    cluster.apply(attributes);
+  }, [cluster, attributes]);
+  useEffect(() => {
+    cluster.attributes.node.clear();
+    cluster.attributes.node.apply(node ?? {});
+  }, [cluster, node]);
+
+  useEffect(() => {
+    cluster.attributes.edge.clear();
+    cluster.attributes.edge.apply(edge ?? {});
+  }, [cluster, edge]);
+
+  useEffect(() => {
+    cluster.attributes.graph.clear();
+    cluster.attributes.graph.apply(graph ?? {});
+  }, [cluster, graph]);
+}

package/src/hooks/useGraphContainer.spec.ts

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+
+// Note: In order to suppress warnings during test execution, pure.js is imported.
+import { renderHook } from '@testing-library/react/pure.js';
+import { Digraph, Graph } from 'ts-graphviz';
+import { describe, expect, test } from 'vitest';
+import {
+  digraph,
+  digraphInSubgraph,
+  graph,
+  graphInSubgraph,
+} from './__tests__/wrapper.js';
+import { useGraphContainer } from './useGraphContainer.js';
+
+describe('useGraphContainer', () => {
+  describe('get root cluster', () => {
+    test('returns Diagram instance in digraph wrapper', () => {
+      const { result } = renderHook(() => useGraphContainer(), {
+        wrapper: digraph(),
+      });
+      expect(result.current).toBeInstanceOf(Digraph);
+    });
+
+    test('returns Graph instance in graph wrapper', () => {
+      const { result } = renderHook(() => useGraphContainer(), {
+        wrapper: graph(),
+      });
+      expect(result.current).toBeInstanceOf(Graph);
+    });
+
+    test('returns Graph instance in graphInSubgraph wrapper', () => {
+      const { result } = renderHook(() => useGraphContainer(), {
+        wrapper: graphInSubgraph(),
+      });
+      expect(result.current).toBeInstanceOf(Graph);
+    });
+
+    test('returns Digraph instance in digraphInSubgraph wrapper', () => {
+      const { result } = renderHook(() => useGraphContainer(), {
+        wrapper: digraphInSubgraph(),
+      });
+      expect(result.current).toBeInstanceOf(Digraph);
+    });
+  });
+});

package/src/hooks/useGraphContainer.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+import { GraphContainer } from '../contexts/GraphContainer.js';
+
+/**
+ * Return the cluster of container.
+ */
+export function useGraphContainer(): GraphBaseModel | null {
+  return useContext(GraphContainer);
+}

package/src/hooks/useGraphMap.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import type { GraphBaseModel } from 'ts-graphviz';
+import { GraphMap } from '../contexts/GraphMap.js';
+
+export function useGraphMap(): Map<string, GraphBaseModel> {
+  return useContext(GraphMap);
+}