Merge pull request #325 from ts-graphviz/upgrade-ts-graphviz-0-16

Upgrade to ts-graphviz@^0.16.0

Author: kamiazya

package.json

@@ -43,7 +43,7 @@
     "prop-types": "^15.7.2",
     "react-dom": "^17.0.2",
     "react-reconciler": "^0.26.2",
-    "ts-graphviz": "^0.15.1"
+    "ts-graphviz": "^0.16.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.12.0",

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

@@ -2,17 +2,13 @@
 
 exports[`renderToDot render edge 1`] = `
 digraph {
-  "a";
-  "b";
   "a" -> "b";
 }
 `;
 
 exports[`renderToDot render subgraph 1`] = `
 digraph {
   subgraph {
-    "a";
-    "b";
     "a" -> "b";
   }
 }

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

@@ -3,8 +3,6 @@
 exports[`renderToDot render to container subgraph test 1`] = `
 digraph {
   subgraph "test" {
-    "a";
-    "b";
     "a" -> "b";
   }
 }

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

@@ -1,6 +1,7 @@
 // tslint:disable: jsx-no-multiline-js
 import React from 'react';
 import 'jest-graphviz';
+import { EdgeTargetLikeTuple } from 'ts-graphviz';
 import { Edge } from '../components/Edge';
 import { Subgraph } from '../components/Subgraph';
 import { Digraph } from '../components/Digraph';
@@ -19,26 +20,20 @@ describe('renderToDot', () => {
   });
 
   it('render edge', () => {
-    const nodes = ['a', 'b'];
+    const nodes: EdgeTargetLikeTuple = ['a', 'b'];
     const dot = renderToDot(
       <Digraph>
-        {nodes.map((id) => (
-          <Node id={id} key={id} />
-        ))}
         <Edge targets={nodes} />
       </Digraph>,
     );
     expect(dot).toBeValidDotAndMatchSnapshot();
   });
 
   it('render subgraph', () => {
-    const nodes = ['a', 'b'];
+    const nodes: EdgeTargetLikeTuple = ['a', 'b'];
     const dot = renderToDot(
       <Digraph>
         <Subgraph>
-          {nodes.map((id) => (
-            <Node id={id} key={id} />
-          ))}
           <Edge targets={nodes} />
         </Subgraph>
       </Digraph>,

src/__tests__/render.test.tsx

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

src/components/Edge.tsx

@@ -17,6 +17,8 @@ export const Edge: VFC<EdgeProps> = ({ targets, label, ...options }) => {
 Edge.displayName = 'Edge';
 
 Edge.propTypes = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   targets: PropTypes.array.isRequired,
   comment: PropTypes.string,
   label: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),

src/hooks/__tests__/use-edge.spec.ts

@@ -1,4 +1,4 @@
-import { Edge } from 'ts-graphviz';
+import { Edge, EdgeTargetLikeTuple } from 'ts-graphviz';
 import { renderHook } from '@testing-library/react-hooks';
 import { useEdge } from '../use-edge';
 import { digraph, graph } from './utils/wrapper';
@@ -34,7 +34,7 @@ describe('useEdge', () => {
   });
 
   test('throw error if the target is less than 2', () => {
-    const { result } = renderHook(() => useEdge(['a']), {
+    const { result } = renderHook(() => useEdge(['a'] as any as EdgeTargetLikeTuple), {
       wrapper: graph(),
     });
     expect(result.error).toStrictEqual(Error(EdgeTargetLengthErrorMessage));

src/hooks/use-edge.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from 'react';
-import { EdgeTargetLike, EdgeTargetsLike, IEdge } from 'ts-graphviz';
+import { EdgeTargetLikeTuple, IEdge } from 'ts-graphviz';
 import { useCurrentCluster } from './use-current-cluster';
 import { EdgeTargetLengthErrorMessage } from '../errors';
 import { useHasComment } from './use-comment';
@@ -10,7 +10,7 @@ import { EdgeOptions } from '../types';
  * `useEdge` is a hook that creates an instance of Edge
  * according to the object given by props.
  */
-export function useEdge(targets: (EdgeTargetLike | EdgeTargetsLike)[], props: EdgeOptions = {}): IEdge {
+export function useEdge(targets: EdgeTargetLikeTuple, props: EdgeOptions = {}): IEdge {
   const { comment, ...attributes } = props;
   const cluster = useCurrentCluster();
   if (targets.length < 2) {

src/types.ts

@@ -4,10 +4,9 @@ import {
   NodeAttributes,
   ClusterSubgraphAttributes,
   RootClusterAttributes,
-  EdgeTargetLike,
-  EdgeTargetsLike,
   IHasComment,
   attribute,
+  EdgeTargetLikeTuple,
 } from 'ts-graphviz';
 
 /** Common attribute values of objects under cluster */
@@ -52,7 +51,7 @@ export interface RootClusterProps extends Omit<RootClusterOptions, typeof attrib
 /** Props for Edge component */
 export interface EdgeProps extends Omit<EdgeOptions, typeof attribute.label> {
   /** Edge targets */
-  targets: (EdgeTargetLike | EdgeTargetsLike)[];
+  targets: EdgeTargetLikeTuple;
   /** Edge label */
   label?: ReactElement | string;
 }

yarn.lock

@@ -5064,12 +5064,10 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
-ts-graphviz@^0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/ts-graphviz/-/ts-graphviz-0.15.1.tgz#4136c1f6674913f30c08d58a3220b0949a2402e1"
-  integrity sha512-H1JfAL3eRTM7QHIjWU7nCwWYyOyLEVtkD9AZyV2K70icA4hXiu7tJuz5GW+bDR/y8/SyztEYKv385anh4fZ2yw==
-  dependencies:
-    tslib "^2.2.0"
+ts-graphviz@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/ts-graphviz/-/ts-graphviz-0.16.0.tgz#7a6e6b5434854bc90ab861e70d5af0d6d20729a7"
+  integrity sha512-3fTPO+G6bSQNvMh/XQQzyiahVLMMj9kqYO99ivUraNJ3Wp05HZOOVtRhi6w9hq7+laP1MKHjLBtGWqTeb1fcpg==
 
 ts-jest@^26.5.6:
   version "26.5.6"
@@ -5119,11 +5117,6 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
-  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
-
 tsutils@^3.17.1:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"