BRAKING CHANGE: refactor render function

src/__tests__/__snapshots__/render.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renderToDot render to container subgraph test 1`] = `
+digraph {
+  subgraph "test" {
+    "a";
+    "b";
+    "a" -> "b";
+  }
+}
+`;

src/__tests__/render-to-dot.spec.tsx

@@ -45,9 +45,4 @@ describe('renderToDot', () => {
     );
     expect(dot).toBeValidDotAndMatchSnapshot();
   });
-
-  it('render to be blank string', () => {
-    const dot = renderToDot(<></>);
-    expect(dot).toBe('');
-  });
 });

src/__tests__/render.test.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable jest/expect-expect */
+import React from 'react';
+import 'jest-graphviz';
+import { digraph, toDot } from 'ts-graphviz';
+import { Edge } from '../components/Edge';
+import { Node } from '../components/Node';
+import { renderExpectToThrow } from '../components/__tests__/utils/renderExpectToThrow';
+import { NoContainerErrorMessage } from '../errors';
+import { render } from '../render';
+
+describe('renderToDot', () => {
+  describe('no container error', () => {
+    test('Fragment', () => {
+      renderExpectToThrow(<></>, NoContainerErrorMessage);
+    });
+
+    test('Node', () => {
+      renderExpectToThrow(<Node id="test" />, NoContainerErrorMessage);
+    });
+
+    test('Edge', () => {
+      renderExpectToThrow(<Edge targets={['a', 'b']} />, NoContainerErrorMessage);
+    });
+  });
+
+  it('render to container subgraph test', () => {
+    const nodes = ['a', 'b'];
+    const G = digraph();
+    const subgraph = render(
+      <>
+        {nodes.map((id) => (
+          <Node id={id} key={id} />
+        ))}
+        <Edge targets={nodes} />
+      </>,
+      G.subgraph('test'),
+    );
+    expect(G.subgraph('test')).toEqual(subgraph);
+    expect(toDot(G)).toBeValidDotAndMatchSnapshot();
+  });
+});

src/components/ClusterPortal.tsx

@@ -1,22 +1,25 @@
 import React, { FC, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Cluster } from '../contexts/Cluster';
+import { CurrentCluster } from '../contexts/CurrentCluster';
 import { ClusterMap } from '../contexts/ClusterMap';
-import { useRootCluster } from '../hooks/use-root-cluster';
-import { ClusterPortalComponentProps } from '../types';
+import { useContainerCluster } from '../hooks/use-container-cluster';
+import { ClusterPortalProps } from '../types';
 
-export const ClusterPortal: FC<ClusterPortalComponentProps> = ({ children, name }) => {
-  const root = useRootCluster();
+/**
+ * ClusterPortal component.
+ */
+export const ClusterPortal: FC<ClusterPortalProps> = ({ children, id }) => {
+  const container = useContainerCluster();
   const map = useContext(ClusterMap);
-  const cluster = useMemo(() => (name ? map.get(name) ?? root : root), [root, map, name]);
-  return <Cluster.Provider value={cluster}>{children}</Cluster.Provider>;
+  const cluster = useMemo(() => (id ? map.get(id) ?? container : container), [container, map, id]);
+  return <CurrentCluster.Provider value={cluster}>{children}</CurrentCluster.Provider>;
 };
 
 ClusterPortal.displayName = 'ClusterPortal';
 ClusterPortal.defaultProps = {
-  name: undefined,
+  id: undefined,
 };
 
 ClusterPortal.propTypes = {
-  name: PropTypes.string,
+  id: PropTypes.string,
 };

src/components/Digraph.tsx

@@ -1,32 +1,35 @@
 import React, { FC, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { RootCluster } from '../contexts/RootCluster';
-import { Cluster } from '../contexts/Cluster';
+import { ContainerCluster } from '../contexts/ContainerCluster';
+import { CurrentCluster } from '../contexts/CurrentCluster';
 import { useDigraph } from '../hooks/use-digraph';
 import { useRenderedID } from '../hooks/use-rendered-id';
-import { useRootCluster } from '../hooks/use-root-cluster';
+import { useContainerCluster } from '../hooks/use-container-cluster';
 import { DuplicatedRootClusterErrorMessage } from '../errors';
 import { useClusterMap } from '../hooks/use-cluster-map';
-import { RootClusterComponentProps } from '../types';
+import { RootClusterProps } from '../types';
 
-export const Digraph: FC<RootClusterComponentProps> = ({ children, label, ...props }) => {
-  const root = useRootCluster();
-  if (root !== null) {
+/**
+ * `Digraph` component.
+ */
+export const Digraph: FC<RootClusterProps> = ({ children, label, ...options }) => {
+  const container = useContainerCluster();
+  if (container !== null) {
     throw Error(DuplicatedRootClusterErrorMessage);
   }
   const renderedLabel = useRenderedID(label);
-  if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
-  const digraph = useDigraph(props);
+  if (renderedLabel !== undefined) Object.assign(options, { label: renderedLabel });
+  const digraph = useDigraph(options);
   const clusters = useClusterMap();
   useEffect(() => {
     if (digraph.id !== undefined) {
       clusters.set(digraph.id, digraph);
     }
   }, [clusters, digraph]);
   return (
-    <RootCluster.Provider value={digraph}>
-      <Cluster.Provider value={digraph}>{children}</Cluster.Provider>
-    </RootCluster.Provider>
+    <ContainerCluster.Provider value={digraph}>
+      <CurrentCluster.Provider value={digraph}>{children}</CurrentCluster.Provider>
+    </ContainerCluster.Provider>
   );
 };
 

src/components/Edge.tsx

@@ -1,14 +1,17 @@
-import React, { FC } from 'react';
+import { VFC } from 'react';
 import PropTypes from 'prop-types';
 import { useEdge } from '../hooks/use-edge';
 import { useRenderedID } from '../hooks/use-rendered-id';
-import { EdgeComponentProps } from '../types';
+import { EdgeProps } from '../types';
 
-export const Edge: FC<EdgeComponentProps> = ({ children, label, ...props }) => {
+/**
+ * `Edge` component.
+ */
+export const Edge: VFC<EdgeProps> = ({ targets, label, ...options }) => {
   const renderedLabel = useRenderedID(label);
-  if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
-  useEdge(props);
-  return <>{children}</>;
+  if (renderedLabel !== undefined) Object.assign(options, { label: renderedLabel });
+  useEdge(targets, options);
+  return null;
 };
 
 Edge.displayName = 'Edge';

src/components/Graph.tsx

@@ -1,32 +1,34 @@
 import React, { FC, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { RootCluster } from '../contexts/RootCluster';
-import { Cluster } from '../contexts/Cluster';
+import { ContainerCluster } from '../contexts/ContainerCluster';
+import { CurrentCluster } from '../contexts/CurrentCluster';
 import { useGraph } from '../hooks/use-graph';
 import { useRenderedID } from '../hooks/use-rendered-id';
-import { useRootCluster } from '../hooks/use-root-cluster';
+import { useContainerCluster } from '../hooks/use-container-cluster';
 import { DuplicatedRootClusterErrorMessage } from '../errors';
 import { useClusterMap } from '../hooks/use-cluster-map';
-import { RootClusterComponentProps } from '../types';
-
-export const Graph: FC<RootClusterComponentProps> = ({ children, label, ...props }) => {
-  const root = useRootCluster();
-  if (root !== null) {
+import { RootClusterProps } from '../types';
+/**
+ * `Graph` component.
+ */
+export const Graph: FC<RootClusterProps> = ({ children, label, ...options }) => {
+  const container = useContainerCluster();
+  if (container !== null) {
     throw Error(DuplicatedRootClusterErrorMessage);
   }
   const renderedLabel = useRenderedID(label);
-  if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
-  const graph = useGraph(props);
+  if (renderedLabel !== undefined) Object.assign(options, { label: renderedLabel });
+  const graph = useGraph(options);
   const clusters = useClusterMap();
   useEffect(() => {
     if (graph.id !== undefined) {
       clusters.set(graph.id, graph);
     }
   }, [clusters, graph]);
   return (
-    <RootCluster.Provider value={graph}>
-      <Cluster.Provider value={graph}>{children}</Cluster.Provider>
-    </RootCluster.Provider>
+    <ContainerCluster.Provider value={graph}>
+      <CurrentCluster.Provider value={graph}>{children}</CurrentCluster.Provider>
+    </ContainerCluster.Provider>
   );
 };
 

src/components/Node.tsx

@@ -1,17 +1,20 @@
-import React, { FC } from 'react';
+import { VFC } from 'react';
 import PropTypes from 'prop-types';
 import { useNode } from '../hooks/use-node';
 import { useRenderedID } from '../hooks/use-rendered-id';
-import { NodeComponentProps } from '../types';
+import { NodeProps } from '../types';
 
-export const Node: FC<NodeComponentProps> = ({ children, label, xlabel, ...props }) => {
+/**
+ * `Node` component.
+ */
+export const Node: VFC<NodeProps> = ({ id, label, xlabel, ...options }) => {
   const renderedLabel = useRenderedID(label);
   const renderedXlabel = useRenderedID(xlabel);
 
-  if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
-  if (renderedXlabel !== undefined) Object.assign(props, { xlabel: renderedXlabel });
-  useNode(props);
-  return <>{children}</>;
+  if (renderedLabel !== undefined) Object.assign(options, { label: renderedLabel });
+  if (renderedXlabel !== undefined) Object.assign(options, { xlabel: renderedXlabel });
+  useNode(id, options);
+  return null;
 };
 
 Node.displayName = 'Node';

src/components/Subgraph.tsx

@@ -1,22 +1,24 @@
 import React, { FC, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Cluster } from '../contexts/Cluster';
+import { CurrentCluster } from '../contexts/CurrentCluster';
 import { useSubgraph } from '../hooks/use-subgraph';
 import { useRenderedID } from '../hooks/use-rendered-id';
 import { useClusterMap } from '../hooks/use-cluster-map';
-import { SubgraphComponentProps } from '../types';
-
-export const Subgraph: FC<SubgraphComponentProps> = ({ children, label, ...props }) => {
+import { SubgraphProps } from '../types';
+/**
+ * `Subgraph` component.
+ */
+export const Subgraph: FC<SubgraphProps> = ({ children, label, ...options }) => {
   const renderedLabel = useRenderedID(label);
-  if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
-  const subgraph = useSubgraph(props);
+  if (renderedLabel !== undefined) Object.assign(options, { label: renderedLabel });
+  const subgraph = useSubgraph(options);
   const clusters = useClusterMap();
   useEffect(() => {
     if (subgraph.id !== undefined) {
       clusters.set(subgraph.id, subgraph);
     }
   }, [subgraph, clusters]);
-  return <Cluster.Provider value={subgraph}>{children}</Cluster.Provider>;
+  return <CurrentCluster.Provider value={subgraph}>{children}</CurrentCluster.Provider>;
 };
 
 Subgraph.displayName = 'Subgraph';

src/components/__tests__/utils/renderExpectToThrow.tsx

@@ -3,7 +3,7 @@
 import React, { Component, ReactElement } from 'react';
 import { render } from '../../../render';
 
-export function renderExpectToThrow(element: ReactElement, expectedError: string): void {
+export function renderExpectToThrow(element: ReactElement, ...expectedError: string[]): void {
   const errors: Error[] = [];
   class ErrorBoundary extends Component<Record<string, unknown>, { hasError: boolean }> {
     constructor(props: Record<string, unknown>) {
@@ -28,11 +28,11 @@ export function renderExpectToThrow(element: ReactElement, expectedError: string
   }
 
   try {
-    render(<ErrorBoundary>{element}</ErrorBoundary>, {});
+    render(<ErrorBoundary>{element}</ErrorBoundary>);
   } catch (e) {
     errors.push(e);
   }
+  expect(errors.length).toBeGreaterThanOrEqual(expectedError.length);
 
-  expect(errors.length).toBe(1);
-  expect(errors[0].message).toContain(expectedError);
+  expect(errors.map((e) => e.message)).toEqual(expect.arrayContaining(expectedError));
 }

src/contexts/ContainerCluster.ts

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

src/contexts/CurrentCluster.ts

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

src/contexts/GraphvizContext.ts

@@ -1,5 +1,9 @@
 import React from 'react';
-import { IContext } from '../types';
+import { ICluster } from 'ts-graphviz';
+
+export interface IContext {
+  container?: ICluster;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 export const GraphvizContext = React.createContext<IContext>(null!);

src/errors.ts

@@ -3,3 +3,5 @@ export const NoGraphvizContextErrorMessage =
   'Cannot call useGraphvizContext outside GraphvizContext.\nBasically, you need to use the render function provided by @ts-graphviz/react.';
 export const NoClusterErrorMessage = 'useCluster must be called within a cluster such as Digraph, Graph, Subgraph.';
 export const DuplicatedRootClusterErrorMessage = 'RootCluster is duplicated.\nUse only one of Digraph and Graph.';
+
+export const NoContainerErrorMessage = 'There are no clusters of container(Subgraph, Digraph, Graph).';

src/hooks/__tests__/use-root-cluster.spec.ts → src/hooks/__tests__/use-container-cluster.spec.ts

@@ -1,33 +1,33 @@
 import { Digraph, Graph } from 'ts-graphviz';
 import { renderHook } from '@testing-library/react-hooks';
 import { digraph, graph, graphInSubgraph, digraphInSubgraph } from './utils/wrapper';
-import { useRootCluster } from '../use-root-cluster';
+import { useContainerCluster } from '../use-container-cluster';
 
-describe('useRootCluster', () => {
+describe('useContainerCluster', () => {
   describe('get root cluster', () => {
     test('returns Diagram instance in digraph wrapper', () => {
-      const { result } = renderHook(() => useRootCluster(), {
+      const { result } = renderHook(() => useContainerCluster(), {
         wrapper: digraph(),
       });
       expect(result.current).toBeInstanceOf(Digraph);
     });
 
     test('returns Graph instance in graph wrapper', () => {
-      const { result } = renderHook(() => useRootCluster(), {
+      const { result } = renderHook(() => useContainerCluster(), {
         wrapper: graph(),
       });
       expect(result.current).toBeInstanceOf(Graph);
     });
 
     test('returns Graph instance in graphInSubgraph wrapper', () => {
-      const { result } = renderHook(() => useRootCluster(), {
+      const { result } = renderHook(() => useContainerCluster(), {
         wrapper: graphInSubgraph(),
       });
       expect(result.current).toBeInstanceOf(Graph);
     });
 
     test('returns Digraph instance in digraphInSubgraph wrapper', () => {
-      const { result } = renderHook(() => useRootCluster(), {
+      const { result } = renderHook(() => useContainerCluster(), {
         wrapper: digraphInSubgraph(),
       });
       expect(result.current).toBeInstanceOf(Digraph);