@ts-graphviz/react 0.12.1 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @ts-graphviz/react
 
+## 0.12.2
+
+### Patch Changes
+
+- [#1763](https://github.com/ts-graphviz/ts-graphviz/pull/1763) [`24cc46e`](https://github.com/ts-graphviz/ts-graphviz/commit/24cc46ebf0078440fa498f89b21e7224725c16b6) Thanks [@kamiazya](https://github.com/kamiazya)! - `renderHTMLLike` writes strings as text, as React DOM does: text children and attribute values are written with character references where needed, so a string that already contains a character reference such as ` ` is written as that literal text (use `' '` instead). Names that are not valid tag or attribute names, and React's `key` / `ref`, are not written. `renderHTMLLike`, `renderToDot` and `createRoot` read their options and props from own properties only.
+
+- Updated dependencies [[`24cc46e`](https://github.com/ts-graphviz/ts-graphviz/commit/24cc46ebf0078440fa498f89b21e7224725c16b6)]:
+  - ts-graphviz@3.0.9
+
 ## 0.12.1
 
 ### Patch Changes

package/README.md

@@ -21,7 +21,7 @@ React Components and Renderer for ts-graphviz
 
 [![GitHub](https://img.shields.io/badge/-GitHub-181717?logo=GitHub&style=flat)](https://github.com/ts-graphviz/ts-graphviz)
 [![npm](https://img.shields.io/badge/-npm-CB3837?logo=npm&style=flat)](https://www.npmjs.com/package/ts-graphviz)
-[![Reference](https://img.shields.io/badge/-API_Reference-3178C6?logo=TypeScript&style=flat&logoColor=fff)](https://ts-graphviz.github.io/ts-graphviz/)
+[![Reference](https://img.shields.io/badge/-API_Reference-3178C6?logo=TypeScript&style=flat&logoColor=fff)](https://ts-graphviz.github.io/api/)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/ts-graphviz/ts-graphviz)
 
 [![Sponsor](https://img.shields.io/badge/-GitHub%20Sponsor-fff?logo=GitHub%20Sponsors&style=flat)](https://github.com/sponsors/ts-graphviz)
@@ -725,6 +725,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="http://www.walterra.dev"><img src="https://avatars.githubusercontent.com/u/230104?v=4?s=100" width="100px;" alt="Walter Rafelsberger"/><br /><sub><b>Walter Rafelsberger</b></sub></a><br /><a href="#question-walterra" title="Answering Questions">💬</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/grsjst"><img src="https://avatars.githubusercontent.com/u/4739018?v=4?s=100" width="100px;" alt="grsjst"/><br /><sub><b>grsjst</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/issues?q=author%3Agrsjst" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/stephenirven"><img src="https://avatars.githubusercontent.com/u/4293560?v=4?s=100" width="100px;" alt="Steve"/><br /><sub><b>Steve</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/issues?q=author%3Astephenirven" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/btomaj"><img src="https://avatars.githubusercontent.com/u/2638986?v=4?s=100" width="100px;" alt="poetry by"/><br /><sub><b>poetry by</b></sub></a><br /><a href="https://github.com/ts-graphviz/ts-graphviz/issues?q=author%3Abtomaj" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

package/lib/react.js

@@ -81,6 +81,17 @@ ModelCollectorContext.displayName = "ModelCollectorContext";
 function useModelCollector() {
   return useContext(ModelCollectorContext);
 }
+function ownOptions(options) {
+  const own = /* @__PURE__ */ Object.create(null);
+  if (options != null) {
+    const descriptors = Object.getOwnPropertyDescriptors(options);
+    for (const key of Object.getOwnPropertyNames(descriptors)) {
+      const descriptor = descriptors[key];
+      own[key] = "value" in descriptor ? descriptor.value : descriptor.get?.call(options);
+    }
+  }
+  return own;
+}
 const DEFAULT_MAX_RECURSION_DEPTH = 1e3;
 const DOT_ELEMENT_MAP = {
   "dot:table": "table",
@@ -99,6 +110,9 @@ const DOT_ELEMENT_MAP = {
   "dot:hr": "hr",
   "dot:vr": "vr"
 };
+function ownChildren(props) {
+  return props != null && Object.hasOwn(props, "children") ? props.children : void 0;
+}
 function manuallyRenderElement(element, depth, inStack, maxDepth) {
   if (depth >= maxDepth) {
     throw new Error(
@@ -133,7 +147,7 @@ function manuallyRenderElement(element, depth, inStack, maxDepth) {
       if (tagName === "dot:port") {
         const propsWithChildren2 = props;
         const childrenString2 = renderChildrenToString(
-          propsWithChildren2?.children,
+          ownChildren(propsWithChildren2),
           depth + 1,
           inStack,
           maxDepth
@@ -146,12 +160,20 @@ function manuallyRenderElement(element, depth, inStack, maxDepth) {
           tagName = htmlElement;
         }
       }
+      if (!NAME.test(tagName)) {
+        return renderChildrenToString(
+          ownChildren(props),
+          depth + 1,
+          inStack,
+          maxDepth
+        );
+      }
       const attributes = [];
       const propsWithChildren = props;
       Object.entries(propsWithChildren || {}).forEach(([key, value]) => {
-        if (key !== "children" && value != null) {
+        if (key !== "children" && key !== "key" && key !== "ref" && value != null && NAME.test(key)) {
           if (typeof value === "string" || typeof value === "number") {
-            attributes.push(`${key}="${String(value)}"`);
+            attributes.push(`${key}="${escapeAttribute(String(value))}"`);
           } else if (typeof value === "boolean" && value) {
             attributes.push(key);
           }
@@ -159,7 +181,7 @@ function manuallyRenderElement(element, depth, inStack, maxDepth) {
       });
       const attrsString = attributes.length > 0 ? ` ${attributes.join(" ")}` : "";
       const childrenString = renderChildrenToString(
-        propsWithChildren?.children,
+        ownChildren(propsWithChildren),
         depth + 1,
         inStack,
         maxDepth
@@ -174,17 +196,24 @@ function manuallyRenderElement(element, depth, inStack, maxDepth) {
     inStack.delete(element);
   }
 }
+function escapeText(text) {
+  return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function escapeAttribute(value) {
+  return escapeText(value).replaceAll('"', "&quot;");
+}
+const NAME = /^[A-Za-z][A-Za-z0-9_:-]*$/;
 function renderChildrenToString(children, depth, inStack, maxDepth) {
   if (children == null || typeof children === "boolean") {
     return "";
   }
   if (typeof children === "string" || typeof children === "number") {
-    return String(children);
+    return escapeText(String(children));
   }
   if (Array.isArray(children)) {
     return children.map((child) => renderChildrenToString(child, depth, inStack, maxDepth)).join("");
   }
-  if (typeof children === "object" && children !== null && "type" in children) {
+  if (typeof children === "object" && children !== null && Object.hasOwn(children, "type")) {
     return manuallyRenderElement(
       children,
       depth,
@@ -198,9 +227,10 @@ function renderHTMLLike(label, options) {
   if (!label) {
     return "<>";
   }
+  const { maxDepth: givenMaxDepth } = ownOptions(options);
   let maxDepth = DEFAULT_MAX_RECURSION_DEPTH;
-  if (options?.maxDepth != null && Number.isFinite(options.maxDepth) && options.maxDepth > 0) {
-    maxDepth = Math.floor(options.maxDepth);
+  if (givenMaxDepth != null && Number.isFinite(givenMaxDepth) && givenMaxDepth > 0) {
+    maxDepth = Math.floor(givenMaxDepth);
   }
   try {
     const markup = manuallyRenderElement(label, 0, /* @__PURE__ */ new WeakSet(), maxDepth);
@@ -729,7 +759,8 @@ async function renderInternal(containerInfo, fiberRoot, wrappedElement, original
   });
 }
 function createRoot(options = {}) {
-  const { container, ...otherOptions } = options;
+  const { container, ...rest } = ownOptions(options);
+  const otherOptions = ownOptions(rest);
   const containerInfo = {
     renderedModels: []
   };
@@ -788,7 +819,8 @@ function createRoot(options = {}) {
   };
 }
 async function renderToDot(element, options = {}) {
-  const { container, ...rootOptions } = options;
+  const { container, ...rest } = ownOptions(options);
+  const rootOptions = ownOptions(rest);
   if (container) {
     const root = createRoot({ container, ...rootOptions });
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ts-graphviz/react",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "Graphviz-dot Renderer for React.",
   "keywords": [
     "graphviz",
@@ -39,7 +39,7 @@
   "dependencies": {
     "react-reconciler": "^0.32.0",
     "@ts-graphviz/common": "^3.0.5",
-    "ts-graphviz": "^3.0.8"
+    "ts-graphviz": "^3.0.9"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",