@valbuild/react 0.57.0 → 0.58.0

package/internal/dist/valbuild-react-internal.browser.esm.js

@@ -1,146 +1,125 @@
-export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-6a12fd8e.browser.esm.js';
+export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-48e6e607.browser.esm.js';
+import { a as _arrayLikeToArray, _ as _unsupportedIterableToArray } from '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
 import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-/* eslint-disable @typescript-eslint/ban-types */
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+/**
+ * Render RichText as HTML
+ *
+ * @example
+ * const content = useVal(contentVal);
+ * return <ValRichText>{content.myRichText}</ValRichText>
+ *
+ * @example
+ * const content = useVal(contentVal);
+ * return (
+ *   <ValRichText
+ *     theme={{
+ *       h1: 'text-4xl font-bold',
+ *     }}>
+ *    {content.myRichText}
+ *   </ValRichText>
+ * );
+ *
+ *
+ * @example
+ * const content = useVal(contentVal);
+ * return (
+ *   <ValRichText
+ *     theme={{
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
+ *     }}
+ *     transform={(node, className) => {
+ *        if (node.tag === 'img') {
+ *          return <Image className={className} src={node.src} alt={node.alt || ""} width={node.metadata?.width} height={node.metadata?.height} />
+ *        }
+ *     }}>
+ *    {content.myRichText}
+ *   </ValRichText>
+ * );
+ *
+ * @param
+ * @returns
+ */
 function ValRichText(_ref) {
-  var theme = _ref.theme,
+  var children = _ref.children,
     className = _ref.className,
-    children = _ref.children;
+    style = _ref.style,
+    theme = _ref.theme,
+    transform = _ref.transform;
   var root = children;
-  function withRenderTag(clazz, current) {
-    var renderClass = theme === null || theme === void 0 ? void 0 : theme[clazz];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-  function withRenderClass(clazz, current) {
-    var renderClass = theme === null || theme === void 0 ? void 0 : theme[clazz];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-  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("img", {
-        className: withRenderTag("img"),
-        src: node.src
-      }, key);
-    }
-    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);
-    }
-    if (node.tag === "br") {
-      return /*#__PURE__*/jsx("br", {}, key);
-    }
-    if (node.tag === "a") {
-      return /*#__PURE__*/jsx("a", {
-        href: node.href,
-        children: node.children.map(toReact)
-      }, key);
-    }
-    console.error("Unknown tag", node.tag);
-    var _exhaustiveCheck = node.tag;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var anyNode = _exhaustiveCheck;
-    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)
+  function build(child, key) {
+    if (typeof child === "string") {
+      var transformed = transform && transform(child, []);
+      if (transformed !== undefined) {
+        return transformed;
+      }
+      return child;
+    }
+    var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
+    var children = "children" in child ?
+    // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
+    // Error: Cannot access Image.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
+    // https://github.com/vercel/next.js/issues/52415
+    child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
+    if (transform) {
+      var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
+      if (_transformed !== undefined) {
+        return _transformed;
+      }
+    }
+    var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
+    return /*#__PURE__*/React.createElement(tag, {
+      key: key === null || key === void 0 ? void 0 : key.toString(),
+      className: className,
+      children: children
     });
   }
   return /*#__PURE__*/jsx("div", {
     className: className,
+    style: style,
     "data-val-path": root.valPath,
-    children: root.children.map(toReact)
+    children: root.children.map(build)
   });
 }
+function classNameOfTag(tag, clazz, theme) {
+  var thisTagClassName = null;
+  if (theme && tag in theme) {
+    var _theme$tag;
+    thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
+  }
+  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
+    if (theme &&
+    // not need on type-level, but defensive on runtime:
+    typeof style === "string") {
+      if (style === "line-through") {
+        if ("lineThrough" in theme) {
+          return theme["lineThrough"];
+        }
+      }
+      if (style !== "line-through" && style in theme) {
+        return theme[style];
+      }
+    }
+    return clazz;
+  }))).join(" ");
+}
 
 export { ValRichText };

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

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ValProvider = require('../../dist/ValProvider-1009cb51.cjs.dev.js');
+var ValProvider = require('../../dist/ValProvider-87161e66.cjs.dev.js');
+var unsupportedIterableToArray = require('../../dist/unsupportedIterableToArray-ac28611a.cjs.dev.js');
 var React = require('react');
 var ReactJSXRuntime = require('react/jsx-runtime');
 
@@ -10,146 +11,124 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-/* eslint-disable @typescript-eslint/ban-types */
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return unsupportedIterableToArray._arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || unsupportedIterableToArray._unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+
+/**
+ * Render RichText as HTML
+ *
+ * @example
+ * const content = useVal(contentVal);
+ * return <ValRichText>{content.myRichText}</ValRichText>
+ *
+ * @example
+ * const content = useVal(contentVal);
+ * return (
+ *   <ValRichText
+ *     theme={{
+ *       h1: 'text-4xl font-bold',
+ *     }}>
+ *    {content.myRichText}
+ *   </ValRichText>
+ * );
+ *
+ *
+ * @example
+ * const content = useVal(contentVal);
+ * return (
+ *   <ValRichText
+ *     theme={{
+ *        h1: 'text-4xl font-bold',
+ *        img: 'rounded',
+ *     }}
+ *     transform={(node, className) => {
+ *        if (node.tag === 'img') {
+ *          return <Image className={className} src={node.src} alt={node.alt || ""} width={node.metadata?.width} height={node.metadata?.height} />
+ *        }
+ *     }}>
+ *    {content.myRichText}
+ *   </ValRichText>
+ * );
+ *
+ * @param
+ * @returns
+ */
 function ValRichText(_ref) {
-  var theme = _ref.theme,
+  var children = _ref.children,
     className = _ref.className,
-    children = _ref.children;
+    style = _ref.style,
+    theme = _ref.theme,
+    transform = _ref.transform;
   var root = children;
-  function withRenderTag(clazz, current) {
-    var renderClass = theme === null || theme === void 0 ? void 0 : theme[clazz];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-  function withRenderClass(clazz, current) {
-    var renderClass = theme === null || theme === void 0 ? void 0 : theme[clazz];
-    if (renderClass && current) {
-      return [current, renderClass].join(" ");
-    }
-    if (renderClass) {
-      return renderClass;
-    }
-    return current;
-  }
-  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("img", {
-        className: withRenderTag("img"),
-        src: node.src
-      }, key);
-    }
-    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);
-    }
-    if (node.tag === "br") {
-      return /*#__PURE__*/ReactJSXRuntime.jsx("br", {}, key);
-    }
-    if (node.tag === "a") {
-      return /*#__PURE__*/ReactJSXRuntime.jsx("a", {
-        href: node.href,
-        children: node.children.map(toReact)
-      }, key);
-    }
-    console.error("Unknown tag", node.tag);
-    var _exhaustiveCheck = node.tag;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var anyNode = _exhaustiveCheck;
-    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)
+  function build(child, key) {
+    if (typeof child === "string") {
+      var transformed = transform && transform(child, []);
+      if (transformed !== undefined) {
+        return transformed;
+      }
+      return child;
+    }
+    var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
+    var children = "children" in child ?
+    // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
+    // Error: Cannot access Image.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
+    // https://github.com/vercel/next.js/issues/52415
+    child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
+    if (transform) {
+      var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
+      if (_transformed !== undefined) {
+        return _transformed;
+      }
+    }
+    var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
+    return /*#__PURE__*/React__default["default"].createElement(tag, {
+      key: key === null || key === void 0 ? void 0 : key.toString(),
+      className: className,
+      children: children
     });
   }
   return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
     className: className,
+    style: style,
     "data-val-path": root.valPath,
-    children: root.children.map(toReact)
+    children: root.children.map(build)
   });
 }
+function classNameOfTag(tag, clazz, theme) {
+  var thisTagClassName = null;
+  if (theme && tag in theme) {
+    var _theme$tag;
+    thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
+  }
+  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
+    if (theme &&
+    // not need on type-level, but defensive on runtime:
+    typeof style === "string") {
+      if (style === "line-through") {
+        if ("lineThrough" in theme) {
+          return theme["lineThrough"];
+        }
+      }
+      if (style !== "line-through" && style in theme) {
+        return theme[style];
+      }
+    }
+    return clazz;
+  }))).join(" ");
+}
 
 Object.defineProperty(exports, 'ValProvider', {
   enumerable: true,