@valbuild/react 0.18.0 → 0.20.0

package/dist/valbuild-react.esm.js

@@ -1,10 +1,9 @@
-import React, { useContext, useMemo, lazy, createElement } from 'react';
+import React, { useContext, useMemo, lazy } from 'react';
 import { _ as _unsupportedIterableToArray, a as _slicedToArray } from './slicedToArray-b4fb91fa.esm.js';
 import { _ as _toPropertyKey, a as _defineProperty } from './defineProperty-b209a901.esm.js';
 import { result } from '@valbuild/core/fp';
 import { ValApi } from '@valbuild/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import parse from 'style-to-object';
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -599,7 +598,7 @@ var ValContext = /*#__PURE__*/React.createContext({
   }
 });
 var ValUI = typeof window !== "undefined" ? /*#__PURE__*/lazy(function () {
-  return import('./ValUI-d33998d0.esm.js');
+  return import('./ValUI-4cf199a2.esm.js');
 }) : null;
 function ValProvider(_ref) {
   var _ref$host = _ref.host,
@@ -620,136 +619,138 @@ function ValProvider(_ref) {
   });
 }
 
+/* eslint-disable @typescript-eslint/ban-types */
 function ValRichText(_ref) {
-  var children = _ref.children;
+  var theme = _ref.theme,
+    children = _ref.children;
   var root = children;
-  var path = root.valPath;
-  return /*#__PURE__*/jsx("div", {
-    "data-val-path": path,
-    children: root.children.map(function (child, i) {
-      var childType = child.type;
-      var childPath = "".concat(path, ".").concat(i);
-      switch (childType) {
-        case "heading":
-          return /*#__PURE__*/jsx(HeadingNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "paragraph":
-          return /*#__PURE__*/jsx(ParagraphNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "list":
-          return /*#__PURE__*/jsx(ListNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown root node type: " + childType);
-      }
-    })
-  });
-}
-function TextNodeComponent(_ref2) {
-  var _parse, _node$format;
-  var node = _ref2.node;
-  var styleProps = node.style ? (_parse = parse(node.style)) !== null && _parse !== void 0 ? _parse : {} : {};
-  // TODO: Ugly! We should do this before serializing instead
-  if (styleProps["font-family"]) {
-    styleProps["fontFamily"] = styleProps["font-family"];
-    delete styleProps["font-family"];
-  }
-  if (styleProps["font-size"]) {
-    styleProps["fontSize"] = styleProps["font-size"];
-    delete styleProps["font-size"];
-  }
-  var bitmask = (_node$format = node.format) === null || _node$format === void 0 ? void 0 : _node$format.toString(2);
-  var bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
-  function isBitOne(bit) {
-    if (!bitmask) {
-      return false;
+  function withRenderTag(clazz, current) {
+    var renderClass = theme.tags[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
     }
-    return bitmask.length >= bitmaskOffset - bit && bitmask[bitmaskOffset - bit] === "1";
-  }
-  if (isBitOne(0)) {
-    styleProps["fontWeight"] = "bold";
-  }
-  if (isBitOne(1)) {
-    styleProps["fontStyle"] = "italic";
+    if (renderClass) {
+      return renderClass;
+    }
+    return current;
   }
-  if (isBitOne(2)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "line-through";
-    } else {
-      styleProps["textDecoration"] += " line-through";
+  function withRenderClass(clazz, current) {
+    var renderClass = theme.classes[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
+    }
+    if (renderClass) {
+      return renderClass;
     }
+    return current;
   }
-  if (isBitOne(3)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "underline";
-    } else {
-      styleProps["textDecoration"] += " underline";
+  function toReact(node, key) {
+    var _anyNode$class, _anyNode$children;
+    if (typeof node === "string") {
+      return node;
+    }
+    if (node.tag === "p") {
+      return /*#__PURE__*/jsx("p", {
+        className: withRenderTag("p"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "img") {
+      return /*#__PURE__*/jsx("div", {
+        className: withRenderClass("imgContainer"),
+        children: /*#__PURE__*/jsx("img", {
+          className: withRenderTag("img"),
+          src: node.src
+        })
+      }, key);
+    }
+    // if (node.tag === "blockquote") {
+    //   return <blockquote key={key}>{node.children.map(toReact)}</blockquote>;
+    // }
+    if (node.tag === "ul") {
+      return /*#__PURE__*/jsx("ul", {
+        className: withRenderTag("ul"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "ol") {
+      return /*#__PURE__*/jsx("ol", {
+        className: withRenderTag("ol"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "li") {
+      return /*#__PURE__*/jsx("li", {
+        className: withRenderTag("li"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "span") {
+      return /*#__PURE__*/jsx("span", {
+        className: node.classes.map(function (nodeClass) {
+          switch (nodeClass) {
+            case "bold":
+              return withRenderClass("bold");
+            case "line-through":
+              return withRenderClass("lineThrough");
+            case "italic":
+              return withRenderClass("italic");
+          }
+        }).join(" "),
+        children: node.children.map(toReact)
+      }, key);
     }
+    if (node.tag === "h1") {
+      return /*#__PURE__*/jsx("h1", {
+        className: withRenderTag("h1"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h2") {
+      return /*#__PURE__*/jsx("h2", {
+        className: withRenderTag("h2"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h3") {
+      return /*#__PURE__*/jsx("h3", {
+        className: withRenderTag("h3"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h4") {
+      return /*#__PURE__*/jsx("h4", {
+        className: withRenderTag("h4"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h5") {
+      return /*#__PURE__*/jsx("h5", {
+        className: withRenderTag("h5"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h6") {
+      return /*#__PURE__*/jsx("h6", {
+        className: withRenderTag("h6"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    console.error("Unknown tag", node.tag);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var anyNode = node;
+    if (!(anyNode !== null && anyNode !== void 0 && anyNode.tag)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(anyNode.tag, {
+      key: key,
+      className: (_anyNode$class = anyNode["class"]) === null || _anyNode$class === void 0 ? void 0 : _anyNode$class.join(" "),
+      children: (_anyNode$children = anyNode.children) === null || _anyNode$children === void 0 ? void 0 : _anyNode$children.map(toReact)
+    });
   }
-  return /*#__PURE__*/jsx("span", {
-    style: styleProps,
-    children: node.text
-  });
-}
-function HeadingNodeComponent(_ref3) {
-  var node = _ref3.node,
-    path = _ref3.path;
-  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/jsx(TextNodeComponent, {
-      node: child
-    }, childPath);
-  }));
-}
-function ParagraphNodeComponent(_ref4) {
-  var node = _ref4.node,
-    path = _ref4.path;
-  return /*#__PURE__*/jsx("p", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
-  });
-}
-function ListNodeComponent(_ref5) {
-  var node = _ref5.node,
-    path = _ref5.path;
-  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/jsx(ListItemComponent, {
-      path: childPath,
-      node: child
-    }, childPath);
-  }));
-}
-function ListItemComponent(_ref6) {
-  var node = _ref6.node,
-    path = _ref6.path;
-  return /*#__PURE__*/jsx("li", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
+  return /*#__PURE__*/jsx("div", {
+    "data-val-path": root.valPath,
+    children: root.children.map(toReact)
   });
 }
 

package/dist/valbuild-react.worker.esm.js

@@ -1,10 +1,9 @@
-import React, { useContext, useMemo, createElement } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { _ as _unsupportedIterableToArray, a as _slicedToArray } from './slicedToArray-5a51fd33.worker.esm.js';
 import { _ as _toPropertyKey, a as _defineProperty } from './defineProperty-18559492.worker.esm.js';
 import { result } from '@valbuild/core/fp';
 import { ValApi } from '@valbuild/core';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import parse from 'style-to-object';
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -618,136 +617,138 @@ function ValProvider(_ref) {
   });
 }
 
+/* eslint-disable @typescript-eslint/ban-types */
 function ValRichText(_ref) {
-  var children = _ref.children;
+  var theme = _ref.theme,
+    children = _ref.children;
   var root = children;
-  var path = root.valPath;
-  return /*#__PURE__*/jsx("div", {
-    "data-val-path": path,
-    children: root.children.map(function (child, i) {
-      var childType = child.type;
-      var childPath = "".concat(path, ".").concat(i);
-      switch (childType) {
-        case "heading":
-          return /*#__PURE__*/jsx(HeadingNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "paragraph":
-          return /*#__PURE__*/jsx(ParagraphNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "list":
-          return /*#__PURE__*/jsx(ListNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown root node type: " + childType);
-      }
-    })
-  });
-}
-function TextNodeComponent(_ref2) {
-  var _parse, _node$format;
-  var node = _ref2.node;
-  var styleProps = node.style ? (_parse = parse(node.style)) !== null && _parse !== void 0 ? _parse : {} : {};
-  // TODO: Ugly! We should do this before serializing instead
-  if (styleProps["font-family"]) {
-    styleProps["fontFamily"] = styleProps["font-family"];
-    delete styleProps["font-family"];
-  }
-  if (styleProps["font-size"]) {
-    styleProps["fontSize"] = styleProps["font-size"];
-    delete styleProps["font-size"];
-  }
-  var bitmask = (_node$format = node.format) === null || _node$format === void 0 ? void 0 : _node$format.toString(2);
-  var bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
-  function isBitOne(bit) {
-    if (!bitmask) {
-      return false;
+  function withRenderTag(clazz, current) {
+    var renderClass = theme.tags[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
     }
-    return bitmask.length >= bitmaskOffset - bit && bitmask[bitmaskOffset - bit] === "1";
-  }
-  if (isBitOne(0)) {
-    styleProps["fontWeight"] = "bold";
-  }
-  if (isBitOne(1)) {
-    styleProps["fontStyle"] = "italic";
+    if (renderClass) {
+      return renderClass;
+    }
+    return current;
   }
-  if (isBitOne(2)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "line-through";
-    } else {
-      styleProps["textDecoration"] += " line-through";
+  function withRenderClass(clazz, current) {
+    var renderClass = theme.classes[clazz];
+    if (renderClass && current) {
+      return [current, renderClass].join(" ");
+    }
+    if (renderClass) {
+      return renderClass;
     }
+    return current;
   }
-  if (isBitOne(3)) {
-    if (!styleProps["textDecoration"]) {
-      styleProps["textDecoration"] = "underline";
-    } else {
-      styleProps["textDecoration"] += " underline";
+  function toReact(node, key) {
+    var _anyNode$class, _anyNode$children;
+    if (typeof node === "string") {
+      return node;
+    }
+    if (node.tag === "p") {
+      return /*#__PURE__*/jsx("p", {
+        className: withRenderTag("p"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "img") {
+      return /*#__PURE__*/jsx("div", {
+        className: withRenderClass("imgContainer"),
+        children: /*#__PURE__*/jsx("img", {
+          className: withRenderTag("img"),
+          src: node.src
+        })
+      }, key);
+    }
+    // if (node.tag === "blockquote") {
+    //   return <blockquote key={key}>{node.children.map(toReact)}</blockquote>;
+    // }
+    if (node.tag === "ul") {
+      return /*#__PURE__*/jsx("ul", {
+        className: withRenderTag("ul"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "ol") {
+      return /*#__PURE__*/jsx("ol", {
+        className: withRenderTag("ol"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "li") {
+      return /*#__PURE__*/jsx("li", {
+        className: withRenderTag("li"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "span") {
+      return /*#__PURE__*/jsx("span", {
+        className: node.classes.map(function (nodeClass) {
+          switch (nodeClass) {
+            case "bold":
+              return withRenderClass("bold");
+            case "line-through":
+              return withRenderClass("lineThrough");
+            case "italic":
+              return withRenderClass("italic");
+          }
+        }).join(" "),
+        children: node.children.map(toReact)
+      }, key);
     }
+    if (node.tag === "h1") {
+      return /*#__PURE__*/jsx("h1", {
+        className: withRenderTag("h1"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h2") {
+      return /*#__PURE__*/jsx("h2", {
+        className: withRenderTag("h2"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h3") {
+      return /*#__PURE__*/jsx("h3", {
+        className: withRenderTag("h3"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h4") {
+      return /*#__PURE__*/jsx("h4", {
+        className: withRenderTag("h4"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h5") {
+      return /*#__PURE__*/jsx("h5", {
+        className: withRenderTag("h5"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h6") {
+      return /*#__PURE__*/jsx("h6", {
+        className: withRenderTag("h6"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    console.error("Unknown tag", node.tag);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var anyNode = node;
+    if (!(anyNode !== null && anyNode !== void 0 && anyNode.tag)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(anyNode.tag, {
+      key: key,
+      className: (_anyNode$class = anyNode["class"]) === null || _anyNode$class === void 0 ? void 0 : _anyNode$class.join(" "),
+      children: (_anyNode$children = anyNode.children) === null || _anyNode$children === void 0 ? void 0 : _anyNode$children.map(toReact)
+    });
   }
-  return /*#__PURE__*/jsx("span", {
-    style: styleProps,
-    children: node.text
-  });
-}
-function HeadingNodeComponent(_ref3) {
-  var node = _ref3.node,
-    path = _ref3.path;
-  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/jsx(TextNodeComponent, {
-      node: child
-    }, childPath);
-  }));
-}
-function ParagraphNodeComponent(_ref4) {
-  var node = _ref4.node,
-    path = _ref4.path;
-  return /*#__PURE__*/jsx("p", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
-  });
-}
-function ListNodeComponent(_ref5) {
-  var node = _ref5.node,
-    path = _ref5.path;
-  return /*#__PURE__*/createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/jsx(ListItemComponent, {
-      path: childPath,
-      node: child
-    }, childPath);
-  }));
-}
-function ListItemComponent(_ref6) {
-  var node = _ref6.node,
-    path = _ref6.path;
-  return /*#__PURE__*/jsx("li", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
+  return /*#__PURE__*/jsx("div", {
+    "data-val-path": root.valPath,
+    children: root.children.map(toReact)
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/react",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "private": false,
   "description": "Val - React internal helpers",
   "sideEffects": false,
@@ -9,8 +9,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.18.0",
-    "@valbuild/ui": "~0.18.0",
+    "@valbuild/core": "~0.20.0",
+    "@valbuild/ui": "~0.20.0",
     "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2",
     "style-to-object": "^0.4.1"

package/src/ShadowRoot.tsx

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useRef } from "react";
+import { useState, useLayoutEffect, useRef, CSSProperties } from "react";
 import { createPortal } from "react-dom";
 
 function ShadowContent({
@@ -11,7 +11,13 @@ function ShadowContent({
   return createPortal(children, root);
 }
 
-export const ShadowRoot = ({ children }: { children: React.ReactNode }) => {
+export const ShadowRoot = ({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: CSSProperties;
+}) => {
   const node = useRef<HTMLDivElement>(null);
   const [root, setRoot] = useState<ShadowRoot | null>(null);
 
@@ -29,7 +35,7 @@ export const ShadowRoot = ({ children }: { children: React.ReactNode }) => {
   }, []);
 
   return (
-    <div ref={node}>
+    <div ref={node} style={style}>
       {root && <ShadowContent root={root}>{children}</ShadowContent>}
     </div>
   );