@ts-graphviz/react 0.9.1 → 0.10.0

package/lib/react.cjs

@@ -0,0 +1,457 @@
+"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/lib/react.d.ts

@@ -0,0 +1,230 @@
+import type { EdgeAttributesObject } from '@ts-graphviz/common';
+import type { EdgeModel } from 'ts-graphviz';
+import type { EdgeTargetLikeTuple } from '@ts-graphviz/common';
+import type { EdgeTargetLikeTuple as EdgeTargetLikeTuple_2 } from 'ts-graphviz';
+import { FC } from 'react';
+import type { GraphAttributesObject } from '@ts-graphviz/common';
+import { GraphBaseModel } from 'ts-graphviz';
+import type { HasComment } from '@ts-graphviz/common';
+import type { NodeAttributesObject } from '@ts-graphviz/common';
+import type { NodeModel } from 'ts-graphviz';
+import { ReactElement } from 'react';
+import type { ReactNode } from 'react';
+import { RootGraphModel } from 'ts-graphviz';
+import type { SubgraphAttributesObject } from '@ts-graphviz/common';
+import { SubgraphModel } from 'ts-graphviz';
+
+/**
+ * `Digraph` component.
+ */
+export declare const Digraph: FC<RootGraphProps>;
+
+/**
+ * `Edge` component.
+ */
+export declare const Edge: FC<EdgeProps>;
+
+/** Options for Edge */
+export declare interface EdgeOptions extends EdgeAttributesObject {
+}
+
+/** Props for Edge component */
+export declare interface EdgeProps extends Omit<EdgeOptions, 'label'> {
+    /** Edge targets */
+    targets: EdgeTargetLikeTuple;
+    /** Edge label */
+    label?: ReactElement | string;
+}
+
+/**
+ * `Graph` component.
+ */
+export declare const Graph: FC<RootGraphProps>;
+
+/** Common attribute values of objects under cluster */
+export declare interface GraphBaseAttributesProps {
+    /** Attribute value for Edges */
+    edge?: EdgeAttributesObject;
+    /** Attribute value for Nodes */
+    node?: NodeAttributesObject;
+    /** Attribute value for Graphs */
+    graph?: SubgraphAttributesObject;
+}
+
+/**
+ * GraphPortal component.
+ */
+export declare const GraphPortal: FC<GraphPortalProps>;
+
+/** Props for GraphPortal component */
+export declare interface GraphPortalProps {
+    /**
+     * id of the cluster you want to target for the portal.
+     * If not specified, target the cluster that is the container to the portal.
+     */
+    id?: string;
+    children?: ReactNode;
+}
+
+/**
+ * `Node` component.
+ */
+export declare const Node: FC<NodeProps>;
+
+/** Options for Node */
+export declare interface NodeOptions extends NodeAttributesObject {
+}
+
+/** Props for Node component */
+export declare interface NodeProps extends Omit<NodeOptions, 'label' | 'xlabel'> {
+    /** Node id */
+    id: string;
+    /** Node label */
+    label?: ReactElement | string;
+    /** Node xlabel */
+    xlabel?: ReactElement | string;
+}
+
+/**
+ * Convert the given element to Graphviz model.
+ *
+ * @example Example of giving a cluster as a container with the second argument.
+ *
+ * ```tsx
+ * import React, { FC } from 'react';
+ * import { digraph, toDot } from 'ts-graphviz';
+ * import { Node, Subgraph, render, Edge } from '@ts-graphviz/react';
+ *
+ * const Example: FC = () => (
+ *   <>
+ *     <Node id="a" />
+ *
+ *     <Subgraph id="my_cluster">
+ *       <Node id="b" />
+ *     </Subgraph>
+ *     <Edge targets={['b', 'a']} />
+ *   </>
+ * );
+ *
+ * const G = digraph((g) => render(<Example />, g));
+ * console.log(toDot(G));
+ * // digraph {
+ * //   "a";
+ * //   subgraph "my_cluster" {
+ * //     "b";
+ * //   }
+ * //   "b" -> "a";
+ * // }
+ * ```
+ */
+export declare function render<T extends GraphBaseModel>(element: ReactElement, container?: T): T;
+
+export declare function renderHTMLLike(label?: ReactElement): string;
+
+/**
+ * Converts the given element to DOT language and returns it.
+ *
+ * @example
+ *
+ * ```tsx
+ * import React, { FC } from 'react';
+ * import { Digraph, Node, Subgraph, renderToDot, Edge } from '@ts-graphviz/react';
+ *
+ * const Example: FC = () => (
+ *   <Digraph>
+ *     <Node id="a" />
+ *     <Subgraph id="my_cluster">
+ *       <Node id="b" />
+ *     </Subgraph>
+ *     <Edge targets={['b', 'a']} />
+ *   </Digraph>
+ * );
+ *
+ * const dot = renderToDot(<Example />);
+ * console.log(dot);
+ * // digraph {
+ * //   "a";
+ * //   subgraph "my_cluster" {
+ * //     "b";
+ * //   }
+ * //   "b" -> "a";
+ * // }
+ * ```
+ *
+ * @returns Rendered dot string
+ */
+export declare function renderToDot(element: ReactElement, container?: RootGraphModel): string;
+
+/** Options for RootGraph */
+export declare interface RootGraphOptions extends GraphAttributesObject, GraphBaseAttributesProps {
+    /** Cluster id */
+    id?: string;
+}
+
+/** Props for RootGraph component */
+export declare interface RootGraphProps extends Omit<RootGraphOptions, 'label'> {
+    label?: ReactElement | string;
+    children?: ReactNode;
+}
+
+/**
+ * `Subgraph` component.
+ */
+export declare const Subgraph: FC<SubgraphProps>;
+
+/** Options for Subgraph */
+export declare interface SubgraphOptions extends SubgraphAttributesObject, GraphBaseAttributesProps, HasComment {
+    /** Cluster id */
+    id?: string;
+}
+
+/** Props for Subgraph component */
+export declare interface SubgraphProps extends Omit<SubgraphOptions, 'label'> {
+    /** Subgraph label */
+    label?: ReactElement | string;
+    children?: ReactNode;
+}
+
+/**
+ * Hook to get the current cluster(Digraph, Graph or Subgraph).
+ *
+ * @throws If it is out of the context of Cluster, it throws an exception.
+ */
+export declare function useCurrentGraph(): GraphBaseModel;
+
+/**
+ * `useDigraph` is a hook that creates an instance of Digraph
+ * according to the object given by props.
+ */
+export declare function useDigraph(options?: RootGraphOptions): RootGraphModel;
+
+/**
+ * `useEdge` is a hook that creates an instance of Edge
+ * according to the object given by props.
+ */
+export declare function useEdge(targets: EdgeTargetLikeTuple_2, props?: EdgeOptions): EdgeModel;
+
+/**
+ * `useGraph` is a hook that creates an instance of Graph
+ * according to the object given by props.
+ */
+export declare function useGraph(options?: RootGraphOptions): RootGraphModel;
+
+/**
+ * Return the cluster of container.
+ */
+export declare function useGraphContainer(): GraphBaseModel | null;
+
+/**
+ * `useNode` is a hook that creates an instance of Node
+ * according to the object given by props.
+ */
+export declare function useNode(id: string, options?: NodeOptions): NodeModel;
+
+/**
+ * `useSubgraph` is a hook that creates an instance of Subgraph
+ * according to the object given by props.
+ */
+export declare function useSubgraph(props?: SubgraphOptions): SubgraphModel;
+
+export { }