@ts-graphviz/react 0.9.0 → 0.10.0

package/lib/react.js

@@ -0,0 +1,457 @@
+import { createContext, useContext, useEffect, useMemo, isValidElement, createElement } from "react";
+import { Digraph as Digraph$1, Graph as Graph$1, Subgraph as Subgraph$1, toDot } from "ts-graphviz";
+import { jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+import ReactReconciler from "react-reconciler";
+const GraphContainer = createContext(null);
+GraphContainer.displayName = "GraphContainer";
+function useGraphContainer() {
+  return useContext(GraphContainer);
+}
+const CurrentGraph = createContext(null);
+CurrentGraph.displayName = "CurrentGraph";
+function useCurrentGraph() {
+  const cluster = useContext(CurrentGraph);
+  if (cluster === null) {
+    throw Error(
+      "useCurrentGraph must be called within a cluster such as Digraph, Graph, Subgraph."
+    );
+  }
+  return cluster;
+}
+function useGraphAttributes(cluster, attributes, { edge, node, graph }) {
+  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]);
+}
+const GraphvizContext = createContext(
+  null
+);
+GraphvizContext.displayName = "GraphvizContext";
+function useGraphvizContext() {
+  const context = useContext(
+    GraphvizContext
+  );
+  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;
+}
+function useHasComment(target, comment) {
+  useEffect(() => {
+    target.comment = comment;
+  }, [target, comment]);
+}
+function useDigraph(options = {}) {
+  const { id, comment, edge, node, graph, ...attributes } = options;
+  const context = useGraphvizContext();
+  const digraph = useMemo(() => {
+    const g = new Digraph$1(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 () => {
+      context.container = void 0;
+    };
+  }, [context]);
+  return digraph;
+}
+function useGraph(options = {}) {
+  const { id, comment, edge, node, graph, ...attributes } = options;
+  const context = useGraphvizContext();
+  const memoGraph = useMemo(() => {
+    const g = new Graph$1(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 () => {
+      context.container = void 0;
+    };
+  }, [context]);
+  return memoGraph;
+}
+function useSubgraph(props = {}) {
+  const { id, comment, edge, node, graph, ...attributes } = props;
+  const context = useGraphvizContext();
+  const cluster = useCurrentGraph();
+  const subgraph = useMemo(() => {
+    const g = new Subgraph$1(id);
+    if (cluster !== null) {
+      cluster.addSubgraph(g);
+    } else if (!context.container) {
+      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, cluster, id, comment, edge, node, graph, attributes]);
+  useHasComment(subgraph, comment);
+  useGraphAttributes(subgraph, attributes, { edge, node, graph });
+  useEffect(() => {
+    return () => {
+      cluster.removeSubgraph(subgraph);
+    };
+  }, [cluster, subgraph]);
+  return subgraph;
+}
+function useHasAttributes(target, attributes) {
+  useEffect(() => {
+    target.attributes.clear();
+    target.attributes.apply(attributes);
+  }, [target, attributes]);
+}
+function useEdge(targets, props = {}) {
+  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 () => {
+      cluster.removeEdge(edge);
+    };
+  }, [cluster, edge]);
+  return edge;
+}
+function useNode(id, options = {}) {
+  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 () => {
+      cluster.removeNode(node);
+    };
+  }, [cluster, node]);
+  return node;
+}
+const GraphMap = createContext(/* @__PURE__ */ new Map());
+GraphMap.displayName = "GraphMap";
+function useGraphMap() {
+  return useContext(GraphMap);
+}
+function renderHTMLLike(label) {
+  const htmlLike = renderToStaticMarkup(label).replace(/<dot:port>(.+?)<\/dot:port>/gi, "<$1>").replace(/<(\/?)dot:([a-z-]+)/gi, (_, $1, $2) => `<${$1}${$2}`);
+  return `<${htmlLike}>`;
+}
+function renderId(id) {
+  if (isValidElement(id)) {
+    return renderHTMLLike(id);
+  }
+  return id;
+}
+function useRenderedID(id) {
+  return useMemo(() => renderId(id), [id]);
+}
+const Graph = ({ 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 !== void 0)
+    Object.assign(options, { label: renderedLabel });
+  const graph = useGraph(options);
+  const clusters = useGraphMap();
+  useEffect(() => {
+    if (graph.id !== void 0) {
+      clusters.set(graph.id, graph);
+    }
+  }, [clusters, graph]);
+  return /* @__PURE__ */ jsx(GraphContainer.Provider, { value: graph, children: /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: graph, children }) });
+};
+Graph.displayName = "Graph";
+const Digraph = ({
+  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 !== void 0)
+    Object.assign(options, { label: renderedLabel });
+  const digraph = useDigraph(options);
+  const clusters = useGraphMap();
+  useEffect(() => {
+    if (digraph.id !== void 0) {
+      clusters.set(digraph.id, digraph);
+    }
+  }, [clusters, digraph]);
+  return /* @__PURE__ */ jsx(GraphContainer.Provider, { value: digraph, children: /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: digraph, children }) });
+};
+Digraph.displayName = "Digraph";
+const Subgraph = ({
+  children,
+  label,
+  ...options
+}) => {
+  const renderedLabel = useRenderedID(label);
+  if (renderedLabel !== void 0)
+    Object.assign(options, { label: renderedLabel });
+  const subgraph = useSubgraph(options);
+  const clusters = useGraphMap();
+  useEffect(() => {
+    if (subgraph.id !== void 0) {
+      clusters.set(subgraph.id, subgraph);
+    }
+  }, [subgraph, clusters]);
+  return /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: subgraph, children });
+};
+Subgraph.displayName = "Subgraph";
+const Node = ({ id, label, xlabel, ...options }) => {
+  const renderedLabel = useRenderedID(label);
+  const renderedXlabel = useRenderedID(xlabel);
+  if (renderedLabel !== void 0)
+    Object.assign(options, { label: renderedLabel });
+  if (renderedXlabel !== void 0)
+    Object.assign(options, { xlabel: renderedXlabel });
+  useNode(id, options);
+  return null;
+};
+Node.displayName = "Node";
+const Edge = ({ targets, label, ...options }) => {
+  const renderedLabel = useRenderedID(label);
+  if (renderedLabel !== void 0)
+    Object.assign(options, { label: renderedLabel });
+  useEdge(targets, options);
+  return null;
+};
+Edge.displayName = "Edge";
+const GraphPortal = ({ children, id }) => {
+  const container = useGraphContainer();
+  const map = useContext(GraphMap);
+  const cluster = useMemo(
+    () => id ? map.get(id) ?? container : container,
+    [container, map, id]
+  );
+  return /* @__PURE__ */ jsx(CurrentGraph.Provider, { value: cluster, children });
+};
+GraphPortal.displayName = "GraphPortal";
+class HostConfig {
+  preparePortalMount(containerInfo) {
+  }
+  scheduleTimeout(fn, delay) {
+  }
+  cancelTimeout(id) {
+  }
+  queueMicrotask(fn) {
+  }
+  cloneInstance;
+  cloneFundamentalInstance;
+  createContainerChildSet;
+  appendChildToContainerChildSet;
+  finalizeContainerChildren;
+  replaceContainerChildren;
+  cloneHiddenInstance;
+  cloneHiddenTextInstance;
+  now = Date.now;
+  setTimeout = setTimeout;
+  clearTimeout = clearTimeout;
+  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.
+  isPrimaryRenderer = false;
+  supportsMutation = false;
+  supportsPersistence = false;
+  supportsHydration = false;
+  getPublicInstance(instance) {
+    return instance;
+  }
+  getRootHostContext(rootContainerInstance) {
+    return {};
+  }
+  getChildHostContext(parentHostContext, type, rootContainerInstance) {
+    return parentHostContext;
+  }
+  prepareForCommit(containerInfo) {
+    return null;
+  }
+  resetAfterCommit(containerInfo) {
+  }
+  /**
+   * Create component instance
+   */
+  createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
+    return type(props);
+  }
+  appendInitialChild(parentInstance, child) {
+    parentInstance.appendChild(child);
+  }
+  finalizeInitialChildren(parentInstance, type, props, rootContainerInstance, hostContext) {
+    return false;
+  }
+  prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, hostContext) {
+    return {};
+  }
+  shouldSetTextContent(type, props) {
+    return false;
+  }
+  shouldDeprioritizeSubtree(type, props) {
+    return false;
+  }
+  createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
+    return text;
+  }
+  scheduleDeferredCallback(callback, options) {
+  }
+  cancelDeferredCallback(callbackID) {
+  }
+  // -------------------
+  //      Mutation
+  //     (optional)
+  // -------------------
+  appendChild(parentInstance, child) {
+    if (parentInstance.appendChild) {
+      parentInstance.appendChild(child);
+    }
+  }
+  appendChildToContainer(container, child) {
+  }
+  commitTextUpdate(textInstance, oldText, newText) {
+  }
+  commitMount(instance, type, newProps, internalInstanceHandle) {
+  }
+  commitUpdate(instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {
+  }
+  insertBefore(parentInstance, child, beforeChild) {
+  }
+  insertInContainerBefore(container, child, beforeChild) {
+  }
+  removeChild(parentInstance, child) {
+  }
+  removeChildFromContainer(container, child) {
+  }
+  resetTextContent(instance) {
+  }
+}
+const reconciler = ReactReconciler(new HostConfig());
+const noop = () => void 0;
+function clusterMap(graph, map = /* @__PURE__ */ new Map()) {
+  if (graph) {
+    if (graph.id) {
+      map.set(graph.id, graph);
+    }
+    for (const s of graph.subgraphs) {
+      clusterMap(s, map);
+    }
+  }
+  return map;
+}
+function render(element, container) {
+  const context = { container };
+  reconciler.updateContainer(
+    createElement(
+      GraphvizContext.Provider,
+      { value: context },
+      createElement(
+        GraphMap.Provider,
+        { value: clusterMap(container) },
+        createElement(
+          GraphContainer.Provider,
+          { value: container ?? null },
+          container ? createElement(
+            CurrentGraph.Provider,
+            { value: container },
+            element
+          ) : element
+        )
+      )
+    ),
+    reconciler.createContainer(
+      {},
+      0,
+      null,
+      true,
+      null,
+      "@ts-graphviz/react",
+      noop,
+      null
+    ),
+    null,
+    noop
+  );
+  if (!context.container) {
+    throw Error(
+      "There are no clusters of container(Subgraph, Digraph, Graph)."
+    );
+  }
+  return context.container;
+}
+function renderToDot(element, container) {
+  return toDot(render(element, container));
+}
+export {
+  Digraph,
+  Edge,
+  Graph,
+  GraphPortal,
+  Node,
+  Subgraph,
+  render,
+  renderHTMLLike,
+  renderToDot,
+  useCurrentGraph,
+  useDigraph,
+  useEdge,
+  useGraph,
+  useGraphContainer,
+  useNode,
+  useSubgraph
+};

package/package.json

@@ -1,81 +1,71 @@
 {
   "name": "@ts-graphviz/react",
-  "version": "0.9.0",
-  "license": "MIT",
-  "author": "kamiazya <yuki@kamiazya.tech>",
+  "version": "0.10.0",
   "description": "Graphviz-dot Renderer for React.",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ts-graphviz/react.git"
-  },
-  "bugs": {
-    "url": "https://github.com/ts-graphviz/react/issues"
-  },
-  "funding": {
-    "type": "github",
-    "url": "https://github.com/sponsors/kamiazya"
-  },
   "keywords": [
     "graphviz",
     "dot",
     "react"
   ],
-  "publishConfig": {
-    "access": "public"
+  "homepage": "https://github.com/ts-graphviz/ts-graphviz#readme",
+  "bugs": {
+    "url": "https://github.com/ts-graphviz/ts-graphviz/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ts-graphviz/ts-graphviz.git",
+    "directory": "packages/react"
   },
-  "main": "./lib/index.js",
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/ts-graphviz"
+    },
+    {
+      "type": "opencollective",
+      "url": "https://opencollective.com/ts-graphviz"
+    }
+  ],
+  "license": "MIT",
+  "author": "kamiazya <yuki@kamiazya.tech>",
+  "type": "module",
   "exports": {
-    "import": "./lib/index.mjs",
-    "default": "./lib/index.js"
+    ".": {
+      "types": "./lib/react.d.ts",
+      "require": "./lib/react.cjs",
+      "default": "./lib/react.js"
+    },
+    "./package.json": "./package.json"
   },
-  "types": "./lib/index.d.ts",
-  "scripts": {
-    "example": "ts-node example/example",
-    "build": "rollup -c && prettier --write './lib/index.d.ts'",
-    "test": "jest",
-    "lint": "eslint -c .eslintrc.json --ext ts,tsx src",
-    "format": "eslint -c .eslintrc.json --ext ts,tsx src --fix && prettier --write './src/**/*.(ts|tsx)'"
+  "main": "./lib/react.js",
+  "types": "./lib/react.d.ts",
+  "dependencies": {
+    "react-reconciler": "^0.29.0",
+    "@ts-graphviz/common": "^2.1.0",
+    "ts-graphviz": "^2.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-reconciler": "^0.26.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.3",
+    "vite-plugin-dts": "^3.7.3"
   },
   "peerDependencies": {
-    "react": ">=16.8.0 || >=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
-  "dependencies": {
-    "prop-types": "^15.7.2",
-    "react-dom": "^17.0.2",
-    "react-reconciler": "^0.26.2",
-    "ts-graphviz": "^0.16.0"
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^5.1.2",
-    "@types/prop-types": "^15.7.3",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.5",
-    "@types/react-reconciler": "^0.26.1",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
-    "@typescript-eslint/parser": "^4.23.0",
-    "eslint": "^7.26.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.1",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^26.6.3",
-    "jest-graphviz": "^0.4.0",
-    "prettier": "^2.3.0",
-    "react": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
-    "rollup": "^2.48.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^3.0.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "ts-jest": "^26.5.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.2.4"
+  "scripts": {
+    "build": "vite build",
+    "example": "ts-node example/example"
   }
-}
+}

package/src/components/Digraph.spec.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '../render.js';
+import { Digraph } from './Digraph.js';
+
+describe('Digraph', () => {
+  test('An error occurs when duplicate <Digraph />', () => {
+    expect(() => {
+      render(
+        <Digraph>
+          <Digraph />
+        </Digraph>,
+      );
+    }).toThrowErrorMatchingInlineSnapshot(`
+      [Error: RootCluster is duplicated.
+      Use only one of Digraph and Graph.]
+    `);
+  });
+});

package/src/components/Digraph.tsx

@@ -0,0 +1,41 @@
+import { type FC, useEffect } from 'react';
+import { CurrentGraph } from '../contexts/CurrentGraph.js';
+import { GraphContainer } from '../contexts/GraphContainer.js';
+import { useDigraph } from '../hooks/useDigraph.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';
+
+/**
+ * `Digraph` component.
+ */
+export const Digraph: 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 digraph = useDigraph(options);
+  const clusters = useGraphMap();
+  useEffect(() => {
+    if (digraph.id !== undefined) {
+      clusters.set(digraph.id, digraph);
+    }
+  }, [clusters, digraph]);
+  return (
+    <GraphContainer.Provider value={digraph}>
+      <CurrentGraph.Provider value={digraph}>{children}</CurrentGraph.Provider>
+    </GraphContainer.Provider>
+  );
+};
+
+Digraph.displayName = 'Digraph';

package/src/components/Edge.tsx

@@ -0,0 +1,17 @@
+import type { FC } from 'react';
+import { useEdge } from '../hooks/useEdge.js';
+import { useRenderedID } from '../hooks/useRenderedID.js';
+import type { EdgeProps } from '../types.js';
+
+/**
+ * `Edge` component.
+ */
+export const Edge: FC<EdgeProps> = ({ targets, label, ...options }) => {
+  const renderedLabel = useRenderedID(label);
+  if (renderedLabel !== undefined)
+    Object.assign(options, { label: renderedLabel });
+  useEdge(targets, options);
+  return null;
+};
+
+Edge.displayName = 'Edge';

package/src/components/Graph.spec.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '../render.js';
+import { Graph } from './Graph.js';
+
+describe('Graph', () => {
+  test('An error occurs when duplicate <Graph />', () => {
+    expect(() => {
+      render(
+        <Graph>
+          <Graph />
+        </Graph>,
+      );
+    }).toThrowErrorMatchingInlineSnapshot(`
+      [Error: RootCluster is duplicated.
+      Use only one of Digraph and Graph.]
+    `);
+  });
+});