@valbuild/react 0.18.0 → 0.19.0

package/dist/valbuild-react.cjs.dev.js

@@ -8,12 +8,10 @@ var defineProperty = require('./defineProperty-c82a49b0.cjs.dev.js');
 var fp = require('@valbuild/core/fp');
 var core = require('@valbuild/core');
 var ReactJSXRuntime = require('react/jsx-runtime');
-var parse = require('style-to-object');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var parse__default = /*#__PURE__*/_interopDefault(parse);
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -608,7 +606,7 @@ var ValContext = /*#__PURE__*/React__default["default"].createContext({
   }
 });
 var ValUI = typeof window !== "undefined" ? /*#__PURE__*/React.lazy(function () {
-  return Promise.resolve().then(function () { return require('./ValUI-9ac161d2.cjs.dev.js'); });
+  return Promise.resolve().then(function () { return require('./ValUI-7d465071.cjs.dev.js'); });
 }) : null;
 function ValProvider(_ref) {
   var _ref$host = _ref.host,
@@ -629,136 +627,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__*/ReactJSXRuntime.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__*/ReactJSXRuntime.jsx(HeadingNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "paragraph":
-          return /*#__PURE__*/ReactJSXRuntime.jsx(ParagraphNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "list":
-          return /*#__PURE__*/ReactJSXRuntime.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__default["default"](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__*/ReactJSXRuntime.jsx("p", {
+        className: withRenderTag("p"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "img") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+        className: withRenderClass("imgContainer"),
+        children: /*#__PURE__*/ReactJSXRuntime.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__*/ReactJSXRuntime.jsx("ul", {
+        className: withRenderTag("ul"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "ol") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("ol", {
+        className: withRenderTag("ol"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "li") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("li", {
+        className: withRenderTag("li"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "span") {
+      return /*#__PURE__*/ReactJSXRuntime.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__*/ReactJSXRuntime.jsx("h1", {
+        className: withRenderTag("h1"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h2") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h2", {
+        className: withRenderTag("h2"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h3") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h3", {
+        className: withRenderTag("h3"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h4") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h4", {
+        className: withRenderTag("h4"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h5") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h5", {
+        className: withRenderTag("h5"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h6") {
+      return /*#__PURE__*/ReactJSXRuntime.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__default["default"].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__*/ReactJSXRuntime.jsx("span", {
-    style: styleProps,
-    children: node.text
-  });
-}
-function HeadingNodeComponent(_ref3) {
-  var node = _ref3.node,
-    path = _ref3.path;
-  return /*#__PURE__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
-      node: child
-    }, childPath);
-  }));
-}
-function ParagraphNodeComponent(_ref4) {
-  var node = _ref4.node,
-    path = _ref4.path;
-  return /*#__PURE__*/ReactJSXRuntime.jsx("p", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/ReactJSXRuntime.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__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/ReactJSXRuntime.jsx(ListItemComponent, {
-      path: childPath,
-      node: child
-    }, childPath);
-  }));
-}
-function ListItemComponent(_ref6) {
-  var node = _ref6.node,
-    path = _ref6.path;
-  return /*#__PURE__*/ReactJSXRuntime.jsx("li", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
+  return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+    "data-val-path": root.valPath,
+    children: root.children.map(toReact)
   });
 }
 

package/dist/valbuild-react.cjs.prod.js

@@ -8,12 +8,10 @@ var defineProperty = require('./defineProperty-36ed93cd.cjs.prod.js');
 var fp = require('@valbuild/core/fp');
 var core = require('@valbuild/core');
 var ReactJSXRuntime = require('react/jsx-runtime');
-var parse = require('style-to-object');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var parse__default = /*#__PURE__*/_interopDefault(parse);
 
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
@@ -608,7 +606,7 @@ var ValContext = /*#__PURE__*/React__default["default"].createContext({
   }
 });
 var ValUI = typeof window !== "undefined" ? /*#__PURE__*/React.lazy(function () {
-  return Promise.resolve().then(function () { return require('./ValUI-3e00aae3.cjs.prod.js'); });
+  return Promise.resolve().then(function () { return require('./ValUI-b5f81233.cjs.prod.js'); });
 }) : null;
 function ValProvider(_ref) {
   var _ref$host = _ref.host,
@@ -629,136 +627,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__*/ReactJSXRuntime.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__*/ReactJSXRuntime.jsx(HeadingNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "paragraph":
-          return /*#__PURE__*/ReactJSXRuntime.jsx(ParagraphNodeComponent, {
-            path: childPath,
-            node: child
-          }, childPath);
-        case "list":
-          return /*#__PURE__*/ReactJSXRuntime.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__default["default"](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__*/ReactJSXRuntime.jsx("p", {
+        className: withRenderTag("p"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "img") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+        className: withRenderClass("imgContainer"),
+        children: /*#__PURE__*/ReactJSXRuntime.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__*/ReactJSXRuntime.jsx("ul", {
+        className: withRenderTag("ul"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "ol") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("ol", {
+        className: withRenderTag("ol"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "li") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("li", {
+        className: withRenderTag("li"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "span") {
+      return /*#__PURE__*/ReactJSXRuntime.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__*/ReactJSXRuntime.jsx("h1", {
+        className: withRenderTag("h1"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h2") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h2", {
+        className: withRenderTag("h2"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h3") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h3", {
+        className: withRenderTag("h3"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h4") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h4", {
+        className: withRenderTag("h4"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h5") {
+      return /*#__PURE__*/ReactJSXRuntime.jsx("h5", {
+        className: withRenderTag("h5"),
+        children: node.children.map(toReact)
+      }, key);
+    }
+    if (node.tag === "h6") {
+      return /*#__PURE__*/ReactJSXRuntime.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__default["default"].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__*/ReactJSXRuntime.jsx("span", {
-    style: styleProps,
-    children: node.text
-  });
-}
-function HeadingNodeComponent(_ref3) {
-  var node = _ref3.node,
-    path = _ref3.path;
-  return /*#__PURE__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
-      node: child
-    }, childPath);
-  }));
-}
-function ParagraphNodeComponent(_ref4) {
-  var node = _ref4.node,
-    path = _ref4.path;
-  return /*#__PURE__*/ReactJSXRuntime.jsx("p", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/ReactJSXRuntime.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__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
-    var childPath = "".concat(path, ".").concat(i);
-    return /*#__PURE__*/ReactJSXRuntime.jsx(ListItemComponent, {
-      path: childPath,
-      node: child
-    }, childPath);
-  }));
-}
-function ListItemComponent(_ref6) {
-  var node = _ref6.node,
-    path = _ref6.path;
-  return /*#__PURE__*/ReactJSXRuntime.jsx("li", {
-    children: node.children.map(function (child, i) {
-      var childPath = "".concat(path, ".").concat(i);
-      switch (child.type) {
-        case "text":
-          return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
-            node: child
-          }, childPath);
-        default:
-          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
-      }
-    })
+  return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+    "data-val-path": root.valPath,
+    children: root.children.map(toReact)
   });
 }