@ts-graphviz/react 0.11.7-next-0bbfc4b9b75a148a7befa38de56e708c6b50e534 → 0.12.0

package/CHANGELOG.md

@@ -1,14 +1,24 @@
 # @ts-graphviz/react
 
-## 0.11.7-next-0bbfc4b9b75a148a7befa38de56e708c6b50e534
+## 0.12.0
+
+### Minor Changes
+
+- [#1567](https://github.com/ts-graphviz/ts-graphviz/pull/1567) [`8edec59`](https://github.com/ts-graphviz/ts-graphviz/commit/8edec5962ac368d759a4903f69e8db2cd0496c97) Thanks [@kamiazya](https://github.com/kamiazya)! - Auto-augment JSX type definitions for dot:\* elements
+
+  TypeScript type definitions for HTML-like JSX elements (dot:table, dot:tr, dot:td, dot:br, etc.) are now automatically available when importing `@ts-graphviz/react`. No additional setup such as creating a `jsx.d.ts` file or importing `@ts-graphviz/react/jsx` is required.
+
+  This follows the auto-augmentation pattern (similar to react-three-fiber) where importing the package automatically extends React's JSX namespace with the `dot:*` intrinsic elements.
+
+  BREAKING CHANGE: The `@ts-graphviz/react/jsx` export has been removed. Users who previously imported from `@ts-graphviz/react/jsx` should remove those imports — the types are now available automatically.
 
 ### Patch Changes
 
 - [#1539](https://github.com/ts-graphviz/ts-graphviz/pull/1539) [`6d9cfc8`](https://github.com/ts-graphviz/ts-graphviz/commit/6d9cfc8b78a4fab6d8bffff79802c144084e75c8) Thanks [@dependabot](https://github.com/apps/dependabot)! - build(deps-dev): bump vite from 7.0.8 to 7.1.12
 
 - Updated dependencies [[`6d9cfc8`](https://github.com/ts-graphviz/ts-graphviz/commit/6d9cfc8b78a4fab6d8bffff79802c144084e75c8), [`0bbfc4b`](https://github.com/ts-graphviz/ts-graphviz/commit/0bbfc4b9b75a148a7befa38de56e708c6b50e534)]:
-  - @ts-graphviz/common@3.0.5-next-0bbfc4b9b75a148a7befa38de56e708c6b50e534
-  - ts-graphviz@3.0.7-next-0bbfc4b9b75a148a7befa38de56e708c6b50e534
+  - @ts-graphviz/common@3.0.5
+  - ts-graphviz@3.0.7
 
 ## 0.11.6
 

package/README.md

@@ -256,6 +256,30 @@ const MyNode: React.FC<NodeProps> = (props) => (
 />
 ```
 
+#### JSX Type Definitions for HTML-Like Elements
+
+TypeScript type definitions for all `dot:*` HTML-like elements are **automatically available** when you import `@ts-graphviz/react`. No additional configuration or setup is required.
+
+```tsx
+import { Digraph, Node, Edge } from '@ts-graphviz/react';
+
+// Full IntelliSense and type checking for dot:* elements works out of the box
+<Node
+  id="user"
+  label={
+    <dot:table border={1}>
+      <dot:tr>
+        <dot:td>Name</dot:td>
+        <dot:td>John Doe</dot:td>
+      </dot:tr>
+    </dot:table>
+  }
+  shape="box"
+/>
+```
+
+The `DotJSXElements` type is also exported for advanced use cases where you need to reference the type definitions directly.
+
 #### Enhanced Type Safety
 
 The package provides sophisticated TypeScript support with automatic type inference and runtime type filtering:

package/lib/react.d.ts

@@ -11,6 +11,7 @@ import { GraphAttributesObject } from '@ts-graphviz/common';
 import { GraphBaseModel } from '@ts-graphviz/common';
 import { GraphBaseModel as GraphBaseModel_2 } from 'ts-graphviz';
 import { HasComment } from '@ts-graphviz/common';
+import { HTMLLikeLabel } from '@ts-graphviz/common';
 import { isAttributeListModel } from 'ts-graphviz';
 import { isEdgeModel } from 'ts-graphviz';
 import { isNodeModel } from 'ts-graphviz';
@@ -86,6 +87,53 @@ export declare interface CreateRootOptions<Container extends AnyGraphContainer =
  */
 export declare const Digraph: FC<RootGraphProps>;
 
+/**
+ * JSX intrinsic elements for dot:* HTML-like elements.
+ * These type definitions are automatically available when importing @ts-graphviz/react.
+ */
+export declare interface DotJSXElements {
+    '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;
+}
+
 /**
  * `Edge` component.
  */
@@ -390,7 +438,7 @@ export { }
 
 declare module 'react' {
     namespace JSX {
-        interface IntrinsicElements extends JSXIntrinsicElements {
+        interface IntrinsicElements extends DotJSXElements {
         }
     }
 }
@@ -398,7 +446,7 @@ declare module 'react' {
 
 declare module 'react/jsx-runtime' {
     namespace JSX {
-        interface IntrinsicElements extends JSXIntrinsicElements {
+        interface IntrinsicElements extends DotJSXElements {
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ts-graphviz/react",
-  "version": "0.11.7-next-0bbfc4b9b75a148a7befa38de56e708c6b50e534",
+  "version": "0.12.0",
   "description": "Graphviz-dot Renderer for React.",
   "keywords": [
     "graphviz",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "react-reconciler": "^0.32.0",
-    "@ts-graphviz/common": "^3.0.5-next-0bbfc4b9b75a148a7befa38de56e708c6b50e534",
-    "ts-graphviz": "^3.0.7-next-0bbfc4b9b75a148a7befa38de56e708c6b50e534"
+    "@ts-graphviz/common": "^3.0.5",
+    "ts-graphviz": "^3.0.7"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",