@ts-graphviz/react 0.10.6 → 0.11.1

package/src/hooks/useHasComment.ts

@@ -1,8 +0,0 @@
-import { useEffect } from 'react';
-import type { HasComment } from 'ts-graphviz';
-
-export function useHasComment(target: HasComment, comment?: string): void {
-  useEffect(() => {
-    target.comment = comment;
-  }, [target, comment]);
-}

package/src/hooks/useNode.spec.ts

@@ -1,16 +0,0 @@
-// @vitest-environment jsdom
-import { renderHook } from '@testing-library/react';
-import { Node } from 'ts-graphviz';
-import { describe, expect, it } from 'vitest';
-
-import { digraph } from './__tests__/wrapper.js';
-import { useNode } from './useNode.js';
-
-describe('useNode', () => {
-  it('returns Node instance', () => {
-    const { result } = renderHook(() => useNode('hoge'), {
-      wrapper: digraph(),
-    });
-    expect(result.current).toBeInstanceOf(Node);
-  });
-});

package/src/hooks/useNode.ts

@@ -1,29 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import type { NodeModel } from 'ts-graphviz';
-import type { NodeOptions } from '../types.js';
-import { useCurrentGraph } from './useCurrentGraph.js';
-import { useHasAttributes } from './useHasAttributes.js';
-import { useHasComment } from './useHasComment.js';
-
-/**
- * `useNode` is a hook that creates an instance of Node
- * according to the object given by props.
- */
-export function useNode(id: string, options: NodeOptions = {}): NodeModel {
-  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 (): void => {
-      cluster.removeNode(node);
-    };
-  }, [cluster, node]);
-  return node;
-}

package/src/hooks/useRenderedID.spec.tsx

@@ -1,28 +0,0 @@
-// @vitest-environment jsdom
-import { renderHook } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { context } from './__tests__/wrapper.js';
-import { useRenderedID } from './useRenderedID.js';
-
-describe('useRenderedID', () => {
-  it('should return the same value as the input, when input is string', () => {
-    const { result } = renderHook(() => useRenderedID('foo'), {
-      wrapper: context(),
-    });
-    expect(result.current).toBe('foo');
-  });
-
-  it('should return the same value as the input, when input is HTMLLike string', () => {
-    const { result } = renderHook(() => useRenderedID('<<b>bold</b>>'), {
-      wrapper: context(),
-    });
-    expect(result.current).toBe('<<b>bold</b>>');
-  });
-
-  it('should return the HTMLLike string, when input is JSX', () => {
-    const { result } = renderHook(() => useRenderedID(<dot:b>bold</dot:b>), {
-      wrapper: context(),
-    });
-    expect(result.current).toBe('<<b>bold</b>>');
-  });
-});

package/src/hooks/useRenderedID.ts

@@ -1,6 +0,0 @@
-import { type ReactElement, useMemo } from 'react';
-import { renderId } from '../renderId.js';
-
-export function useRenderedID(id?: ReactElement | string): string | undefined {
-  return useMemo(() => renderId(id), [id]);
-}

package/src/hooks/useSubgraph.spec.ts

@@ -1,41 +0,0 @@
-// @vitest-environment jsdom
-import { renderHook } from '@testing-library/react';
-import { Subgraph } from 'ts-graphviz';
-import { describe, expect, it } from 'vitest';
-import {
-  digraph,
-  digraphInSubgraph,
-  graph,
-  graphInSubgraph,
-} from './__tests__/wrapper.js';
-import { useSubgraph } from './useSubgraph.js';
-
-describe('useSubgraph', () => {
-  it('returns Subgraph instance in digraph warper', () => {
-    const { result } = renderHook(() => useSubgraph(), {
-      wrapper: digraph(),
-    });
-    expect(result.current).toBeInstanceOf(Subgraph);
-  });
-
-  it('returns Subgraph instance in graph warper', () => {
-    const { result } = renderHook(() => useSubgraph(), {
-      wrapper: graph(),
-    });
-    expect(result.current).toBeInstanceOf(Subgraph);
-  });
-
-  it('returns Subgraph instance in graphInSubgraph warper', () => {
-    const { result } = renderHook(() => useSubgraph(), {
-      wrapper: graphInSubgraph(),
-    });
-    expect(result.current).toBeInstanceOf(Subgraph);
-  });
-
-  it('returns Subgraph instance in digraphInSubgraph warper', () => {
-    const { result } = renderHook(() => useSubgraph(), {
-      wrapper: digraphInSubgraph(),
-    });
-    expect(result.current).toBeInstanceOf(Subgraph);
-  });
-});

package/src/hooks/useSubgraph.ts

@@ -1,39 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import { type GraphBaseModel, Subgraph, type SubgraphModel } from 'ts-graphviz';
-import type { SubgraphOptions } from '../types.js';
-import { useCurrentGraph } from './useCurrentGraph.js';
-import { useGraphAttributes } from './useGraphAttributes.js';
-import { useGraphvizContext } from './useGraphvizContext.js';
-import { useHasComment } from './useHasComment.js';
-
-/**
- * `useSubgraph` is a hook that creates an instance of Subgraph
- * according to the object given by props.
- */
-export function useSubgraph(props: SubgraphOptions = {}): SubgraphModel {
-  const { id, comment, edge, node, graph, ...attributes } = props;
-  const context = useGraphvizContext();
-  const cluster = useCurrentGraph();
-  const subgraph = useMemo(() => {
-    const g = new Subgraph(id);
-    if (cluster !== null) {
-      cluster.addSubgraph(g);
-    } else if (!context.container) {
-      context.container = g as GraphBaseModel;
-    }
-    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 (): void => {
-      cluster.removeSubgraph(subgraph);
-    };
-  }, [cluster, subgraph]);
-  return subgraph;
-}

package/src/react.ts

@@ -1,16 +0,0 @@
-export * from './types.js';
-export * from './hooks/useGraphContainer.js';
-export * from './hooks/useCurrentGraph.js';
-export * from './hooks/useDigraph.js';
-export * from './hooks/useGraph.js';
-export * from './hooks/useSubgraph.js';
-export * from './hooks/useEdge.js';
-export * from './hooks/useNode.js';
-export * from './components/Graph.js';
-export * from './components/Digraph.js';
-export * from './components/Subgraph.js';
-export * from './components/Node.js';
-export * from './components/Edge.js';
-export * from './components/GraphPortal.js';
-export * from './renderHTMLLike.js';
-export * from './render.js';

package/src/reconciler.ts

@@ -1,272 +0,0 @@
-import type { FC } from 'react';
-import ReactReconciler from 'react-reconciler';
-
-type Type = FC;
-type Props = any;
-type Container = Record<string, never>;
-
-type Instance = any;
-type TextInstance = any;
-type SuspenseInstance = any;
-type HydratableInstance = any;
-type PublicInstance = any;
-type HostContext = any;
-type UpdatePayload = any;
-type ChildSet = any;
-type TimeoutHandle = any;
-type NoTimeout = any;
-
-type OpaqueHandle = ReactReconciler.Fiber;
-
-export class HostConfig
-  implements
-    ReactReconciler.HostConfig<
-      Type,
-      Props,
-      Container,
-      Instance,
-      TextInstance,
-      SuspenseInstance,
-      HydratableInstance,
-      PublicInstance,
-      HostContext,
-      UpdatePayload,
-      ChildSet, // TODO Placeholder for undocumented API
-      TimeoutHandle,
-      NoTimeout
-    >
-{
-  preparePortalMount(containerInfo: Container): void {
-    // NoOp
-  }
-
-  scheduleTimeout(fn: (...args: unknown[]) => unknown, delay?: number) {
-    // NoOp
-  }
-
-  cancelTimeout(id: any): void {
-    // NoOp
-  }
-
-  queueMicrotask(fn: () => void): void {
-    // NoOp
-  }
-
-  cloneInstance?: any;
-
-  cloneFundamentalInstance?: any;
-
-  createContainerChildSet?: any;
-
-  appendChildToContainerChildSet?: any;
-
-  finalizeContainerChildren?: any;
-
-  replaceContainerChildren?: any;
-
-  cloneHiddenInstance?: any;
-
-  cloneHiddenTextInstance?: any;
-
-  public now = Date.now;
-
-  public setTimeout = setTimeout;
-
-  public clearTimeout = clearTimeout;
-
-  public noTimeout: 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.
-  public isPrimaryRenderer = false;
-
-  public supportsMutation = false;
-
-  public supportsPersistence = false;
-
-  public supportsHydration = false;
-
-  public getPublicInstance(instance: Instance | TextInstance): PublicInstance {
-    return instance;
-  }
-
-  public getRootHostContext(rootContainerInstance: Container): HostContext {
-    return {};
-  }
-
-  public getChildHostContext(
-    parentHostContext: HostContext,
-    type: Type,
-    rootContainerInstance: Container,
-  ): HostContext {
-    return parentHostContext;
-  }
-
-  public prepareForCommit(
-    containerInfo: Container,
-  ): Record<string, any> | null {
-    return null;
-  }
-
-  public resetAfterCommit(containerInfo: Container): void {
-    // containerInfo.setRoot
-  }
-
-  /**
-   * Create component instance
-   */
-  public createInstance(
-    type: Type,
-    props: Props,
-    rootContainerInstance: Container,
-    hostContext: HostContext,
-    internalInstanceHandle: OpaqueHandle,
-  ): Instance {
-    // NoOp
-    return type(props);
-  }
-
-  public appendInitialChild(
-    parentInstance: Instance,
-    child: Instance | TextInstance,
-  ): void {
-    parentInstance.appendChild(child);
-  }
-
-  public finalizeInitialChildren(
-    parentInstance: Instance,
-    type: Type,
-    props: Props,
-    rootContainerInstance: Container,
-    hostContext: HostContext,
-  ): boolean {
-    return false;
-  }
-
-  public prepareUpdate(
-    instance: Instance,
-    type: Type,
-    oldProps: Props,
-    newProps: Props,
-    rootContainerInstance: Container,
-    hostContext: HostContext,
-  ): null | UpdatePayload {
-    return {};
-  }
-
-  public shouldSetTextContent(type: Type, props: Props): boolean {
-    return false;
-  }
-
-  public shouldDeprioritizeSubtree(type: Type, props: Props): boolean {
-    return false;
-  }
-
-  public createTextInstance(
-    text: string,
-    rootContainerInstance: Container,
-    hostContext: HostContext,
-    internalInstanceHandle: OpaqueHandle,
-  ): TextInstance {
-    return text;
-  }
-
-  public scheduleDeferredCallback(
-    callback: () => any,
-    options?: { timeout: number },
-  ): any {
-    // NoOp
-  }
-
-  public cancelDeferredCallback(callbackID: any): void {
-    // NoOp
-  }
-
-  // -------------------
-  //      Mutation
-  //     (optional)
-  // -------------------
-  public appendChild(
-    parentInstance: Instance,
-    child: Instance | TextInstance,
-  ): void {
-    // NoOp
-    if (parentInstance.appendChild) {
-      parentInstance.appendChild(child);
-    }
-  }
-
-  public appendChildToContainer(
-    container: Container,
-    child: Instance | TextInstance,
-  ): void {
-    // if (container.appendChild) {
-    //   container.appendChild(child);
-    // }
-  }
-
-  public commitTextUpdate(
-    textInstance: TextInstance,
-    oldText: string,
-    newText: string,
-  ): void {
-    // NoOp
-  }
-
-  public commitMount(
-    instance: Instance,
-    type: Type,
-    newProps: Props,
-    internalInstanceHandle: OpaqueHandle,
-  ): void {
-    // NoOp
-  }
-
-  public commitUpdate(
-    instance: Instance,
-    updatePayload: UpdatePayload,
-    type: Type,
-    oldProps: Props,
-    newProps: Props,
-    internalInstanceHandle: OpaqueHandle,
-  ): void {
-    // NoOp
-  }
-
-  public insertBefore(
-    parentInstance: Instance,
-    child: Instance | TextInstance,
-    beforeChild: Instance | TextInstance,
-  ): void {
-    // NoOp
-  }
-
-  public insertInContainerBefore(
-    container: Container,
-    child: Instance | TextInstance,
-    beforeChild: Instance | TextInstance,
-  ): void {
-    // NoOp
-  }
-
-  public removeChild(
-    parentInstance: Instance,
-    child: Instance | TextInstance,
-  ): void {
-    // NoOp
-  }
-
-  public removeChildFromContainer(
-    container: Container,
-    child: Instance | TextInstance,
-  ): void {
-    // NoOp
-  }
-
-  public resetTextContent(instance: Instance): void {
-    // NoOp
-  }
-}
-
-export const reconciler = ReactReconciler(new HostConfig());

package/src/render.test.tsx

@@ -1,71 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { Digraph } from './components/Digraph.js';
-import { Edge } from './components/Edge.js';
-import { Graph } from './components/Graph.js';
-import { Node } from './components/Node.js';
-import { Subgraph } from './components/Subgraph.js';
-import { renderToDot } from './render.js';
-
-describe('renderToDot', () => {
-  it('should render a digraph', () => {
-    expect(
-      renderToDot(
-        <Digraph>
-          <Node id="a" label="Node A" />
-          <Node id="b" label={<dot:b>bold</dot:b>} />
-          <Subgraph id="cluster_x" label="Cluster X">
-            <Node id="c" label="Node C" />
-          </Subgraph>
-          <Edge targets={['a', 'b']} />
-        </Digraph>,
-      ),
-    ).toMatchInlineSnapshot(`
-      "digraph {
-        "a" [
-          label = "Node A";
-        ];
-        "b" [
-          label = <<b>bold</b>>;
-        ];
-        subgraph "cluster_x" {
-          label = "Cluster X";
-          "c" [
-            label = "Node C";
-          ];
-        }
-        "a" -> "b";
-      }"
-    `);
-  });
-
-  it('should render a graph', () => {
-    expect(
-      renderToDot(
-        <Graph>
-          <Node id="a" label="Node A" />
-          <Node id="b" label="Node B" />
-          <Subgraph id="cluster_x" label="Cluster X">
-            <Node id="c" label="Node C" />
-          </Subgraph>
-          <Edge targets={['a', 'b']} />
-        </Graph>,
-      ),
-    ).toMatchInlineSnapshot(`
-      "graph {
-        "a" [
-          label = "Node A";
-        ];
-        "b" [
-          label = "Node B";
-        ];
-        subgraph "cluster_x" {
-          label = "Cluster X";
-          "c" [
-            label = "Node C";
-          ];
-        }
-        "a" -- "b";
-      }"
-    `);
-  });
-});

package/src/render.ts

@@ -1,142 +0,0 @@
-import { type ReactElement, createElement } from 'react';
-import { type GraphBaseModel, type RootGraphModel, toDot } from 'ts-graphviz';
-
-import { CurrentGraph } from './contexts/CurrentGraph.js';
-import { GraphContainer } from './contexts/GraphContainer.js';
-import { GraphMap } from './contexts/GraphMap.js';
-import { type Context, GraphvizContext } from './contexts/GraphvizContext.js';
-import { reconciler } from './reconciler.js';
-
-const noop = (): void => undefined;
-
-function clusterMap(
-  graph?: GraphBaseModel,
-  map: Map<string, GraphBaseModel> = new Map(),
-): Map<string, GraphBaseModel> {
-  if (graph) {
-    if (graph.id) {
-      map.set(graph.id, graph);
-    }
-    for (const s of graph.subgraphs) {
-      clusterMap(s, map);
-    }
-  }
-  return map;
-}
-
-/**
- * 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 function render<T extends GraphBaseModel>(
-  element: ReactElement,
-  container?: T,
-): T {
-  const context: Context<T> = { 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;
-}
-
-/**
- * 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 function renderToDot(
-  element: ReactElement,
-  container?: RootGraphModel,
-): string {
-  return toDot(render(element, container));
-}

package/src/renderHTMLLike.ts

@@ -1,9 +0,0 @@
-import type { ReactElement } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-
-export function renderHTMLLike(label?: ReactElement): string {
-  const htmlLike = renderToStaticMarkup(label)
-    .replace(/<dot:port>(.+?)<\/dot:port>/gi, '<$1>')
-    .replace(/<(\/?)dot:([a-z-]+)/gi, (_, $1, $2) => `<${$1}${$2}`);
-  return `<${htmlLike}>`;
-}

package/src/renderId.ts

@@ -1,9 +0,0 @@
-import { type ReactElement, isValidElement } from 'react';
-import { renderHTMLLike } from './renderHTMLLike.js';
-
-export function renderId<T>(id?: ReactElement<T> | string): string | undefined {
-  if (isValidElement(id)) {
-    return renderHTMLLike(id);
-  }
-  return id;
-}