Merge pull request #91 from ts-graphviz/upgrade-ts-graphviz

upgrade ts-graphviz to v0.12.0

Author: kamiazya

package.json

@@ -85,7 +85,7 @@
     "rollup": "^2.6.1",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript2": "^0.27.0",
-    "ts-graphviz": "^0.10.0",
+    "ts-graphviz": "^0.12.0",
     "ts-jest": "^25.3.1",
     "ts-loader": "^7.0.2",
     "ts-node": "^8.9.1",

src/components/__tests__/utils/renderExpectToThrow.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { Component, ReactElement } from 'react';
-import { Context } from 'ts-graphviz';
 import { render } from '../../../renderer/render';
 
 export function renderExpectToThrow(element: ReactElement, expectedError: string) {
@@ -28,9 +27,8 @@ export function renderExpectToThrow(element: ReactElement, expectedError: string
     }
   }
 
-  const context = new Context();
   try {
-    render(<ErrorBoundary>{element}</ErrorBoundary>, context);
+    render(<ErrorBoundary>{element}</ErrorBoundary>, {});
   } catch (e) {
     errors.push(e);
   }

src/components/contexts/Cluster.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ICluster } from 'ts-graphviz';
 
-export const NoCluster = {} as ICluster<string>;
-export const Cluster = React.createContext<ICluster<string>>(NoCluster);
+export const NoCluster = {} as ICluster;
+export const Cluster = React.createContext<ICluster>(NoCluster);
 Cluster.displayName = 'Cluster';

src/components/contexts/GraphvizContext.ts

@@ -1,7 +1,11 @@
 import React from 'react';
-import { Context } from 'ts-graphviz';
+import { IRootCluster } from 'ts-graphviz';
 
-export const NoContext = {} as Context;
+export type Context = {
+  root?: IRootCluster;
+};
+
+export const NoContext = {};
 
 export const GraphvizContext = React.createContext<Context>(NoContext);
 GraphvizContext.displayName = 'GraphvizContext';

src/hooks/__tests__/use-graphviz-context.spec.ts

@@ -1,15 +1,14 @@
-import { Context } from 'ts-graphviz';
 import { renderHook } from '@testing-library/react-hooks';
 import { context } from './utils/wrapper';
 import { useGraphvizContext } from '../use-graphviz-context';
 import { NoGraphvizContextErrorMessage } from '../../utils/errors';
 
 describe('useGraphvizContext', () => {
-  test('returns Context instance', () => {
+  test('returns {}', () => {
     const { result } = renderHook(() => useGraphvizContext(), {
       wrapper: context(),
     });
-    expect(result.current).toBeInstanceOf(Context);
+    expect(result.current).toStrictEqual({});
   });
 
   test('An error occurs when called outside the GraphvizContext', () => {

src/hooks/__tests__/utils/wrapper.tsx

@@ -1,30 +1,27 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { FC, ComponentProps } from 'react';
-import { Context } from 'ts-graphviz';
+
 import { Digraph } from '../../../components/Digraph';
 import { Graph } from '../../../components/Graph';
 import { GraphvizContext } from '../../../components/contexts/GraphvizContext';
 import { Subgraph } from '../../../components/Subgraph';
 
 export const context = (): FC => ({ children }) => {
-  const ctx = new Context();
-  return <GraphvizContext.Provider value={ctx}>{children}</GraphvizContext.Provider>;
+  return <GraphvizContext.Provider value={{}}>{children}</GraphvizContext.Provider>;
 };
 
 export const digraph = (props: ComponentProps<typeof Digraph> = {}): FC => ({ children }) => {
-  const ctx = new Context();
   return (
-    <GraphvizContext.Provider value={ctx}>
+    <GraphvizContext.Provider value={{}}>
       <Digraph {...props}>{children}</Digraph>
     </GraphvizContext.Provider>
   );
 };
 
 export const digraphInSubgraph = (props: ComponentProps<typeof Subgraph> = {}): FC => ({ children }) => {
-  const ctx = new Context();
   return (
-    <GraphvizContext.Provider value={ctx}>
+    <GraphvizContext.Provider value={{}}>
       <Digraph>
         <Subgraph {...props}>{children}</Subgraph>
       </Digraph>
@@ -33,18 +30,16 @@ export const digraphInSubgraph = (props: ComponentProps<typeof Subgraph> = {}):
 };
 
 export const graph = (props: ComponentProps<typeof Graph> = {}): FC => ({ children }) => {
-  const ctx = new Context();
   return (
-    <GraphvizContext.Provider value={ctx}>
+    <GraphvizContext.Provider value={{}}>
       <Graph {...props}>{children}</Graph>
     </GraphvizContext.Provider>
   );
 };
 
 export const graphInSubgraph = (props: ComponentProps<typeof Subgraph> = {}): FC => ({ children }) => {
-  const ctx = new Context();
   return (
-    <GraphvizContext.Provider value={ctx}>
+    <GraphvizContext.Provider value={{}}>
       <Graph>
         <Subgraph {...props}>{children}</Subgraph>
       </Graph>

src/hooks/use-cluster.ts

@@ -3,7 +3,7 @@ import { ICluster } from 'ts-graphviz';
 import { Cluster, NoCluster } from '../components/contexts/Cluster';
 import { NoClusterErrorMessage } from '../utils/errors';
 
-export const useCluster = <T extends string>(): ICluster<T> => {
+export const useCluster = (): ICluster => {
   const cluster = useContext(Cluster);
   if (cluster === NoCluster) {
     throw Error(NoClusterErrorMessage);

src/hooks/use-digraph.ts

@@ -13,7 +13,8 @@ export type DigraphProps = {
 export const useDigraph = ({ id, comment, edge, node, graph, ...attributes }: DigraphProps = {}): Digraph => {
   const context = useGraphvizContext();
   const digraph = useMemo(() => {
-    const g = new Digraph(context, id);
+    const g = new Digraph(id);
+    context.root = g;
     g.comment = comment;
     g.apply(attributes);
     g.attributes.node.apply(node ?? {});

src/hooks/use-edge.ts

@@ -16,7 +16,7 @@ export const useEdge = ({ targets, comment, ...attributes }: EdgeProps): IEdge =
     throw Error(EdgeTargetLengthErrorMessage);
   }
   const edge = useMemo(() => {
-    const e = cluster.createEdge(...targets);
+    const e = cluster.createEdge(targets);
     e.comment = comment;
     e.attributes.apply(attributes);
     return e;

src/hooks/use-graph.ts

@@ -16,7 +16,8 @@ export type GraphProps = {
 export const useGraph = ({ id, comment, edge, node, graph, ...attributes }: GraphProps = {}): Graph => {
   const context = useGraphvizContext();
   const memoGraph = useMemo(() => {
-    const g = new Graph(context, id);
+    const g = new Graph(id);
+    context.root = g;
     g.comment = comment;
     g.apply(attributes);
     g.attributes.node.apply(node ?? {});