@ts-graphviz/react 0.9.0 → 0.10.0

package/src/render.ts

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

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

@@ -0,0 +1,9 @@
+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;
+}

package/src/types.ts

@@ -0,0 +1,107 @@
+import type {
+  EdgeAttributesObject,
+  EdgeTargetLikeTuple,
+  GraphAttributesObject,
+  HTMLLikeLabel,
+  HasComment,
+  NodeAttributesObject,
+  SubgraphAttributesObject,
+} from '@ts-graphviz/common';
+import type { ReactElement, ReactNode } from 'react';
+
+/** Common attribute values of objects under cluster */
+export interface GraphBaseAttributesProps {
+  /** Attribute value for Edges */
+  edge?: EdgeAttributesObject;
+  /** Attribute value for Nodes */
+  node?: NodeAttributesObject;
+  /** Attribute value for Graphs */
+  graph?: SubgraphAttributesObject;
+}
+
+/** Options for RootGraph */
+export interface RootGraphOptions
+  extends GraphAttributesObject,
+    GraphBaseAttributesProps {
+  /** Cluster id */
+  id?: string;
+}
+
+/** Options for Subgraph */
+export interface SubgraphOptions
+  extends SubgraphAttributesObject,
+    GraphBaseAttributesProps,
+    HasComment {
+  /** Cluster id */
+  id?: string;
+}
+
+/** Options for Edge */
+export interface EdgeOptions extends EdgeAttributesObject {}
+
+/** Options for Node */
+export interface NodeOptions extends NodeAttributesObject {}
+
+/** Props for RootGraph component */
+export interface RootGraphProps extends Omit<RootGraphOptions, 'label'> {
+  label?: ReactElement | string;
+  children?: ReactNode;
+}
+
+/** Props for Edge component */
+export interface EdgeProps extends Omit<EdgeOptions, 'label'> {
+  /** Edge targets */
+  targets: EdgeTargetLikeTuple;
+  /** Edge label */
+  label?: ReactElement | string;
+}
+
+/** Props for Node component */
+export interface NodeProps extends Omit<NodeOptions, 'label' | 'xlabel'> {
+  /** Node id */
+  id: string;
+  /** Node label */
+  label?: ReactElement | string;
+  /** Node xlabel */
+  xlabel?: ReactElement | string;
+}
+
+/** Props for Subgraph component */
+export interface SubgraphProps extends Omit<SubgraphOptions, 'label'> {
+  /** Subgraph label */
+  label?: ReactElement | string;
+  children?: ReactNode;
+}
+
+/** Props for GraphPortal component */
+export 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;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'dot:port': { children: string };
+      'dot:table': HTMLLikeLabel.TableAttributes & { children?: ReactNode };
+      'dot:tr': HTMLLikeLabel.TrAttributes & { children?: ReactNode };
+      'dot:td': HTMLLikeLabel.TdAttributes & { children?: ReactNode };
+      'dot:font': HTMLLikeLabel.FontAttributes & { children?: ReactNode };
+      'dot:br': HTMLLikeLabel.BrAttributes;
+      'dot:img': HTMLLikeLabel.ImgAttributes;
+      'dot:i': HTMLLikeLabel.IAttributes & { children?: ReactNode };
+      'dot:b': HTMLLikeLabel.BAttributes & { children?: ReactNode };
+      'dot:u': HTMLLikeLabel.UAttributes & { children?: ReactNode };
+      'dot:o': HTMLLikeLabel.OAttributes & { children?: ReactNode };
+      'dot:sub': HTMLLikeLabel.SubAttributes & { children?: ReactNode };
+      'dot:sup': HTMLLikeLabel.SupAttributes & { children?: ReactNode };
+      'dot:s': HTMLLikeLabel.SAttributes & { children?: ReactNode };
+      'dot:hr': HTMLLikeLabel.HrAttributes;
+      'dot:vr': HTMLLikeLabel.VrAttributes;
+    }
+  }
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "includeVersion": true,
+  "entryPoints": ["src/react.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,31 @@
+import dts from 'vite-plugin-dts';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  build: {
+    target: 'ES2022',
+    outDir: './lib',
+    minify: false,
+    lib: {
+      entry: {
+        react: './src/react.ts',
+      },
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react/jsx-runtime',
+        'react-dom',
+        'react-dom/server',
+        'react-reconciler',
+        'ts-graphviz',
+      ],
+    },
+  },
+  plugins: [
+    dts({
+      rollupTypes: true,
+    }),
+  ],
+});

package/.all-contributorsrc

@@ -1,47 +0,0 @@
-{
-  "files": [
-    "README.md"
-  ],
-  "imageSize": 100,
-  "commit": false,
-  "contributors": [
-    {
-      "login": "kamiazya",
-      "name": "Yuki Yamazaki",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/35218186?v=4",
-      "profile": "http://blog.kamiazya.tech/",
-      "contributions": [
-        "code",
-        "test",
-        "ideas",
-        "doc"
-      ]
-    },
-    {
-      "login": "nagasawaryoya",
-      "name": "nagasawaryoya",
-      "avatar_url": "https://avatars.githubusercontent.com/u/53528726?v=4",
-      "profile": "https://github.com/nagasawaryoya",
-      "contributions": [
-        "code",
-        "test"
-      ]
-    },
-    {
-      "login": "tokidrill",
-      "name": "YukiSasaki",
-      "avatar_url": "https://avatars.githubusercontent.com/u/42460318?v=4",
-      "profile": "https://github.com/tokidrill",
-      "contributions": [
-        "code",
-        "test"
-      ]
-    }
-  ],
-  "contributorsPerLine": 7,
-  "projectName": "react",
-  "projectOwner": "ts-graphviz",
-  "repoType": "github",
-  "repoHost": "https://github.com",
-  "skipCi": true
-}

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-lib