@ts-graphviz/react 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -0,0 +1,76 @@
+# @ts-graphviz/react
+
+## 0.10.0
+
+### Minor Changes
+
+- [#992](https://github.com/ts-graphviz/ts-graphviz/pull/992) [`391e98e`](https://github.com/ts-graphviz/ts-graphviz/commit/391e98edf70bb43c1feb4a00f832fa9d96dd9d39) Thanks [@kamiazya](https://github.com/kamiazya)! - ## `@ts-graphviz/react` integrate with ts-graphviz monorepo
+
+  ### Overview
+
+  - Imported source code from `@ts-graphviz/react` repository and integrated it into the monorepo.
+  - Emphasized code quality through component tests and updated function signatures.
+    - Renamed functions and types for readability and consistency throughout the ts-graphviz project.
+
+  ### Dependencies
+
+  - Support React 18 and remove `prop-types` as a dependency.
+    - `prop-types` is removed because TypeScript can cover the same functionality.
+  - Moved `react-dom` to `peerDependencies` for streamlined dependency management.
+    - Improved file naming conventions for better codebase organization.
+
+  ### New Features
+
+  #### New HTMLLike label syntax
+
+  ```tsx
+  import { Digraph, Node, Edge, render } from "@ts-graphviz/react";
+
+  const dot = render(
+    <Digraph>
+      <Node
+        id="A"
+        label={
+          <dot:table>
+            <dot:tr>
+              <dot:td>left</dot:td>
+              <dot:td>right</dot:td>
+            </dot:tr>
+          </dot:table>
+        }
+      />
+    </Digraph>
+  );
+  ```
+
+  #### `renderHTMLLike` function
+
+  The `renderHTMLLike` function is introduced for rendering HTML-like labels.
+
+  ```tsx
+  import { renderHTMLLike } from "@ts-graphviz/react";
+
+  const htmlLike = renderHTMLLike(
+    <dot:table>
+      <dot:tr>
+        <dot:td>left</dot:td>
+        <dot:td>right</dot:td>
+      </dot:tr>
+    </dot:table>
+  );
+  ```
+
+  ### Other Changes
+
+  - Added the `provenance` flag in `package.json` for enhanced publishing traceability.
+  - Enhanced TypeScript support and type definitions, including moving types to `@ts-graphviz/common`.
+
+    - Move HTMLLike type to `@ts-graphviz/common`.
+
+  - Refactor JSX syntax for better compatibility and custom JSX-like syntax for HTMLLike.
+
+### Patch Changes
+
+- Updated dependencies [[`cb5517a`](https://github.com/ts-graphviz/ts-graphviz/commit/cb5517a0236ce33527d200df9770390f4eb40064), [`0589b4f`](https://github.com/ts-graphviz/ts-graphviz/commit/0589b4f8849290d2c4a39beceb9b633f059f2e3f), [`5ce6b59`](https://github.com/ts-graphviz/ts-graphviz/commit/5ce6b59fa395bc344de2bfb15061b158a9ea5586), [`122336b`](https://github.com/ts-graphviz/ts-graphviz/commit/122336bede1033f73a2a94c82d499fda238f6b2e), [`b5f36fa`](https://github.com/ts-graphviz/ts-graphviz/commit/b5f36faf9cf70dfc263130c4480dc21770475c5a), [`c55f2d0`](https://github.com/ts-graphviz/ts-graphviz/commit/c55f2d0dfa851d318cc16a36499c69c0a34f1588), [`81a50ff`](https://github.com/ts-graphviz/ts-graphviz/commit/81a50ff94b461f44256f2eea5b86af5eb26afd94), [`a16f047`](https://github.com/ts-graphviz/ts-graphviz/commit/a16f047dfdd5db73f3e25847cf3fb2f8075aaf11), [`391e98e`](https://github.com/ts-graphviz/ts-graphviz/commit/391e98edf70bb43c1feb4a00f832fa9d96dd9d39), [`a16f047`](https://github.com/ts-graphviz/ts-graphviz/commit/a16f047dfdd5db73f3e25847cf3fb2f8075aaf11), [`a16f047`](https://github.com/ts-graphviz/ts-graphviz/commit/a16f047dfdd5db73f3e25847cf3fb2f8075aaf11)]:
+  - ts-graphviz@2.1.0
+  - @ts-graphviz/common@2.1.0

package/LICENSE

@@ -1,7 +1,7 @@
 
 The MIT License (MIT)
 
-Copyright (c) 2020 Yuki Yamazaki
+Copyright (c) 2019-2024 Yuki Yamazaki
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,16 +1,7 @@
-[![NodeCI](https://github.com/ts-graphviz/react/workflows/NodeCI/badge.svg)](https://github.com/ts-graphviz/react/actions?workflow=NodeCI)
-[![npm version](https://badge.fury.io/js/%40ts-graphviz%2Freact.svg)](https://badge.fury.io/js/%40ts-graphviz%2Freact)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
-[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/ts-graphviz/react)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
-
 # @ts-graphviz/react
 
+> It is part of the ts-graphviz library, which is split into modular packages to improve maintainability, flexibility, and ease of use.
+
 Graphviz-dot Renderer using React.
 
 ## Installation
@@ -21,18 +12,17 @@ The module can then be installed using [npm](https://www.npmjs.com/):
 
 ```bash
 # yarn
-$ yarn add @ts-graphviz/react react
+$ yarn add @ts-graphviz/react react react-dom
 # or npm
-$ npm install -S @ts-graphviz/react react
+$ npm install -S @ts-graphviz/react react react-dom
 ```
 
-> Install [React](https://github.com/facebook/react/) as peerDependencies at the same time.
+> Install [React and React DOM](https://github.com/facebook/react/) as peerDependencies at the same time.
 
 ## Example
 
 ```jsx
-import React from 'react';
-import { Digraph, Node, Subgraph, Edge, DOT, renderToDot } from '@ts-graphviz/react';
+import { Digraph, Node, Subgraph, Edge, renderToDot } from '@ts-graphviz/react';
 
 const Example = () => (
   <Digraph
@@ -49,20 +39,20 @@ const Example = () => (
       id="nodeA"
       shape="none"
       label={
-        <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
-          <DOT.TR>
-            <DOT.TD>left</DOT.TD>
-            <DOT.TD PORT="m">middle</DOT.TD>
-            <DOT.TD PORT="r">right</DOT.TD>
-          </DOT.TR>
-        </DOT.TABLE>
+        <dot:table border="0" cellborder="1" cellspacing="0">
+          <dot:tr>
+            <dot:td>left</dot:td>
+            <dot:td port="m">middle</dot:td>
+            <dot:td port="r">right</dot:td>
+          </dot:tr>
+        </dot:table>
       }
     />
 
     <Subgraph id="cluster" label="Cluster" labeljust="l">
       <Node id="nodeB" label="This is label for nodeB." />
     </Subgraph>
-    <Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
+    <Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<dot:b>A to B</dot:b>} />
   </Digraph>
 );
 
@@ -77,66 +67,38 @@ console.log(dot);
 digraph {
   rankdir = "TB";
   edge [
-    color = "blue",
-    fontcolor = "blue",
+    color = "blue";
+    fontcolor = "blue";
   ];
   node [
-    shape = "none",
+    shape = "none";
   ];
   "nodeA" [
-    shape = "none",
-    label = <<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"><TR><TD>left</TD><TD PORT="m">middle</TD><TD PORT="r">right</TD></TR></TABLE>>,
+    shape = "none";
+    label = <<table border="0" cellborder="1" cellSpacing="0"><tr><td>left</td><td port="m">middle</td><td port="r">right</td></tr></table>>;
   ];
   subgraph "cluster" {
     labeljust = "l";
     label = "Cluster";
     "nodeB" [
-      label = "This is label for nodeB.",
+      label = "This is label for nodeB.";
     ];
   }
   // Edge from node A to B
   "nodeB" -> "nodeA":"m" [
-    label = <<B>A to B</B>>,
+    label = <<b>A to B</b>>;
   ];
 }
 ```
 
 ![dot](./example/example.svg)
 
-## See Also
-
-Graphviz-dot Test and Integration
-
-- [ts-graphviz](https://github.com/ts-graphviz/ts-graphviz)
-  - Graphviz library for TypeScript.
-- [jest-graphviz](https://github.com/ts-graphviz/jest-graphviz)
-  - Jest matchers that supports graphviz integration.
-- [setup-graphviz](https://github.com/ts-graphviz/setup-graphviz)
-  - GitHub Action to set up Graphviz cross-platform(Linux, macOS, Windows).
-
-## Contributors
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="http://blog.kamiazya.tech/"><img src="https://avatars0.githubusercontent.com/u/35218186?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yuki Yamazaki</b></sub></a><br /><a href="https://github.com/ts-graphviz/react/commits?author=kamiazya" title="Code">💻</a> <a href="https://github.com/ts-graphviz/react/commits?author=kamiazya" title="Tests">⚠️</a> <a href="#ideas-kamiazya" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ts-graphviz/react/commits?author=kamiazya" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/nagasawaryoya"><img src="https://avatars.githubusercontent.com/u/53528726?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nagasawaryoya</b></sub></a><br /><a href="https://github.com/ts-graphviz/react/commits?author=nagasawaryoya" title="Code">💻</a> <a href="https://github.com/ts-graphviz/react/commits?author=nagasawaryoya" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://github.com/tokidrill"><img src="https://avatars.githubusercontent.com/u/42460318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>YukiSasaki</b></sub></a><br /><a href="https://github.com/ts-graphviz/react/commits?author=tokidrill" title="Code">💻</a> <a href="https://github.com/ts-graphviz/react/commits?author=tokidrill" title="Tests">⚠️</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
+## Contributing
 
-<!-- ALL-CONTRIBUTORS-LIST:END -->
+Contributions to the ts-graphviz project are welcome.
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
-specification. Contributions of any kind welcome!
+Please refer to the main ts-graphviz repository for guidelines on how to contribute.
 
 ## License
 
-This software is released under the MIT License, see [LICENSE](./LICENSE).
+This software is released under the MIT License.

package/example/example.tsx

@@ -1,7 +1,6 @@
-import React, { FC } from 'react';
-import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '../src';
+import { Digraph, Edge, Node, Subgraph, renderToDot } from '@ts-graphviz/react';
 
-const Example: FC = () => (
+const Example = () => (
   <Digraph
     rankdir="TB"
     edge={{
@@ -16,24 +15,27 @@ const Example: FC = () => (
       id="nodeA"
       shape="none"
       label={
-        <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
-          <DOT.TR>
-            <DOT.TD>left</DOT.TD>
-            <DOT.TD PORT="m">middle</DOT.TD>
-            <DOT.TD PORT="r">right</DOT.TD>
-          </DOT.TR>
-        </DOT.TABLE>
+        <dot:table border={0} cellborder={1} cellSpacing={0}>
+          <dot:tr>
+            <dot:td>left</dot:td>
+            <dot:td port="m">middle</dot:td>
+            <dot:td port="r">right</dot:td>
+          </dot:tr>
+        </dot:table>
       }
     />
 
     <Subgraph id="cluster" label="Cluster" labeljust="l">
       <Node id="nodeB" label="This is label for nodeB." />
     </Subgraph>
-    <Edge targets={['nodeB', 'nodeA:m']} comment="Edge from node A to B" label={<DOT.B>A to B</DOT.B>} />
+    <Edge
+      targets={['nodeB', 'nodeA:m']}
+      comment="Edge from node A to B"
+      label={<dot:b>A to B</dot:b>}
+    />
   </Digraph>
 );
 
 const dot = renderToDot(<Example />);
 
-// eslint-disable-next-line no-console
 console.log(dot);