@ts-graphviz/react 0.10.6 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ts-graphviz/react",
-  "version": "0.10.6",
+  "version": "0.11.0",
   "description": "Graphviz-dot Renderer for React.",
   "keywords": [
     "graphviz",
@@ -32,33 +32,27 @@
   "exports": {
     ".": {
       "types": "./lib/react.d.ts",
-      "require": "./lib/react.cjs",
       "default": "./lib/react.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./lib/react.js",
-  "types": "./lib/react.d.ts",
   "dependencies": {
-    "react-reconciler": "^0.29.0",
-    "@ts-graphviz/common": "^2.1.5",
-    "ts-graphviz": "^2.1.6"
+    "react-reconciler": "^0.32.0",
+    "@ts-graphviz/common": "^3.0.0",
+    "ts-graphviz": "^3.0.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.3.1",
-    "typescript": "^5.4.5",
-    "vite": "^5.4.8",
-    "vite-plugin-dts": "^4.2.1"
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-reconciler": "^0.32.0",
+    "react": "^19.0.0",
+    "react-test-renderer": "^19.0.0",
+    "typescript": "^5.8.2",
+    "vite": "^7.0.2",
+    "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=19"
   },
   "publishConfig": {
     "access": "public",
@@ -67,5 +61,6 @@
   "scripts": {
     "build": "vite build",
     "example": "ts-node example/example"
-  }
+  },
+  "types": "./lib/react.d.ts"
 }

package/tsconfig.test.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "Node16",
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": []
+}

package/lib/react.cjs

@@ -1,457 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const tsGraphviz = require("ts-graphviz");
-const jsxRuntime = require("react/jsx-runtime");
-const server = require("react-dom/server");
-const ReactReconciler = require("react-reconciler");
-const GraphContainer = react.createContext(null);
-GraphContainer.displayName = "GraphContainer";
-function useGraphContainer() {
-  return react.useContext(GraphContainer);
-}
-const CurrentGraph = react.createContext(null);
-CurrentGraph.displayName = "CurrentGraph";
-function useCurrentGraph() {
-  const cluster = react.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 }) {
-  react.useEffect(() => {
-    cluster.clear();
-    cluster.apply(attributes);
-  }, [cluster, attributes]);
-  react.useEffect(() => {
-    cluster.attributes.node.clear();
-    cluster.attributes.node.apply(node ?? {});
-  }, [cluster, node]);
-  react.useEffect(() => {
-    cluster.attributes.edge.clear();
-    cluster.attributes.edge.apply(edge ?? {});
-  }, [cluster, edge]);
-  react.useEffect(() => {
-    cluster.attributes.graph.clear();
-    cluster.attributes.graph.apply(graph ?? {});
-  }, [cluster, graph]);
-}
-const GraphvizContext = react.createContext(
-  null
-);
-GraphvizContext.displayName = "GraphvizContext";
-function useGraphvizContext() {
-  const context = react.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) {
-  react.useEffect(() => {
-    target.comment = comment;
-  }, [target, comment]);
-}
-function useDigraph(options = {}) {
-  const { id, comment, edge, node, graph, ...attributes } = options;
-  const context = useGraphvizContext();
-  const digraph = react.useMemo(() => {
-    const g = new tsGraphviz.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 });
-  react.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 = react.useMemo(() => {
-    const g = new tsGraphviz.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 });
-  react.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 = react.useMemo(() => {
-    const g = new tsGraphviz.Subgraph(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 });
-  react.useEffect(() => {
-    return () => {
-      cluster.removeSubgraph(subgraph);
-    };
-  }, [cluster, subgraph]);
-  return subgraph;
-}
-function useHasAttributes(target, attributes) {
-  react.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 = react.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);
-  react.useEffect(() => {
-    return () => {
-      cluster.removeEdge(edge);
-    };
-  }, [cluster, edge]);
-  return edge;
-}
-function useNode(id, options = {}) {
-  const { comment, ...attributes } = options;
-  const cluster = useCurrentGraph();
-  const node = react.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);
-  react.useEffect(() => {
-    return () => {
-      cluster.removeNode(node);
-    };
-  }, [cluster, node]);
-  return node;
-}
-const GraphMap = react.createContext(/* @__PURE__ */ new Map());
-GraphMap.displayName = "GraphMap";
-function useGraphMap() {
-  return react.useContext(GraphMap);
-}
-function renderHTMLLike(label) {
-  const htmlLike = server.renderToStaticMarkup(label).replace(/<dot:port>(.+?)<\/dot:port>/gi, "<$1>").replace(/<(\/?)dot:([a-z-]+)/gi, (_, $1, $2) => `<${$1}${$2}`);
-  return `<${htmlLike}>`;
-}
-function renderId(id) {
-  if (react.isValidElement(id)) {
-    return renderHTMLLike(id);
-  }
-  return id;
-}
-function useRenderedID(id) {
-  return react.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();
-  react.useEffect(() => {
-    if (graph.id !== void 0) {
-      clusters.set(graph.id, graph);
-    }
-  }, [clusters, graph]);
-  return /* @__PURE__ */ jsxRuntime.jsx(GraphContainer.Provider, { value: graph, children: /* @__PURE__ */ jsxRuntime.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();
-  react.useEffect(() => {
-    if (digraph.id !== void 0) {
-      clusters.set(digraph.id, digraph);
-    }
-  }, [clusters, digraph]);
-  return /* @__PURE__ */ jsxRuntime.jsx(GraphContainer.Provider, { value: digraph, children: /* @__PURE__ */ jsxRuntime.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();
-  react.useEffect(() => {
-    if (subgraph.id !== void 0) {
-      clusters.set(subgraph.id, subgraph);
-    }
-  }, [subgraph, clusters]);
-  return /* @__PURE__ */ jsxRuntime.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 = react.useContext(GraphMap);
-  const cluster = react.useMemo(
-    () => id ? map.get(id) ?? container : container,
-    [container, map, id]
-  );
-  return /* @__PURE__ */ jsxRuntime.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(
-    react.createElement(
-      GraphvizContext.Provider,
-      { value: context },
-      react.createElement(
-        GraphMap.Provider,
-        { value: clusterMap(container) },
-        react.createElement(
-          GraphContainer.Provider,
-          { value: container ?? null },
-          container ? react.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 tsGraphviz.toDot(render(element, container));
-}
-exports.Digraph = Digraph;
-exports.Edge = Edge;
-exports.Graph = Graph;
-exports.GraphPortal = GraphPortal;
-exports.Node = Node;
-exports.Subgraph = Subgraph;
-exports.render = render;
-exports.renderHTMLLike = renderHTMLLike;
-exports.renderToDot = renderToDot;
-exports.useCurrentGraph = useCurrentGraph;
-exports.useDigraph = useDigraph;
-exports.useEdge = useEdge;
-exports.useGraph = useGraph;
-exports.useGraphContainer = useGraphContainer;
-exports.useNode = useNode;
-exports.useSubgraph = useSubgraph;

package/src/components/Digraph.spec.tsx

@@ -1,18 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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.]
-    `);
-  });
-});

package/src/components/Graph.tsx

@@ -1,36 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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';