@valbuild/react 0.56.0 → 0.58.0

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

@@ -1,146 +1,125 @@
-export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-ecf57703.worker.esm.js';
+export { ValProvider, useValApi, useValStore } from '../../dist/ValProvider-7c2a7439.worker.esm.js';
+import { a as _arrayLikeToArray, _ as _unsupportedIterableToArray } from '../../dist/unsupportedIterableToArray-50359a05.worker.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/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.browser.esm.js

@@ -1,8 +1,9 @@
 import { _ as _typeof } from '../../dist/typeof-9915e135.browser.esm.js';
-import { _ as _slicedToArray } from '../../dist/slicedToArray-85f6bb43.browser.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-7b69258f.browser.esm.js';
 import { Internal } from '@valbuild/core';
 import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
+import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _typeof = require('../../dist/typeof-b568f48f.cjs.dev.js');
-var slicedToArray = require('../../dist/slicedToArray-a9d0d9cd.cjs.dev.js');
+var slicedToArray = require('../../dist/slicedToArray-11a666de.cjs.dev.js');
 var core = require('@valbuild/core');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
+require('../../dist/unsupportedIterableToArray-ac28611a.cjs.dev.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.cjs.prod.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _typeof = require('../../dist/typeof-16428c61.cjs.prod.js');
-var slicedToArray = require('../../dist/slicedToArray-a2a426c7.cjs.prod.js');
+var slicedToArray = require('../../dist/slicedToArray-c405fbf0.cjs.prod.js');
 var core = require('@valbuild/core');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
+require('../../dist/unsupportedIterableToArray-42309462.cjs.prod.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.esm.js

@@ -1,8 +1,9 @@
 import { _ as _typeof } from '../../dist/typeof-a1531d8f.esm.js';
-import { _ as _slicedToArray } from '../../dist/slicedToArray-331bebbb.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-1dc7d2d6.esm.js';
 import { Internal } from '@valbuild/core';
 import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
+import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.worker.esm.js

@@ -1,8 +1,9 @@
 import { _ as _typeof } from '../../dist/typeof-e0c837cc.worker.esm.js';
-import { _ as _slicedToArray } from '../../dist/slicedToArray-d4c4a4ed.worker.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-e7da2c5e.worker.esm.js';
 import { Internal } from '@valbuild/core';
 import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
+import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/jsx-runtime/dist/valbuild-react-jsx-runtime.browser.esm.js

@@ -1,8 +1,9 @@
 import { _ as _typeof } from '../../dist/typeof-9915e135.browser.esm.js';
-import { _ as _slicedToArray } from '../../dist/slicedToArray-85f6bb43.browser.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-7b69258f.browser.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 export * from 'react/jsx-runtime';
+import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _typeof = require('../../dist/typeof-b568f48f.cjs.dev.js');
-var slicedToArray = require('../../dist/slicedToArray-a9d0d9cd.cjs.dev.js');
+var slicedToArray = require('../../dist/slicedToArray-11a666de.cjs.dev.js');
 var core = require('@valbuild/core');
 var ReactJSXRuntime = require('react/jsx-runtime');
+require('../../dist/unsupportedIterableToArray-ac28611a.cjs.dev.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _typeof = require('../../dist/typeof-16428c61.cjs.prod.js');
-var slicedToArray = require('../../dist/slicedToArray-a2a426c7.cjs.prod.js');
+var slicedToArray = require('../../dist/slicedToArray-c405fbf0.cjs.prod.js');
 var core = require('@valbuild/core');
 var ReactJSXRuntime = require('react/jsx-runtime');
+require('../../dist/unsupportedIterableToArray-42309462.cjs.prod.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

package/jsx-runtime/dist/valbuild-react-jsx-runtime.esm.js

@@ -1,8 +1,9 @@
 import { _ as _typeof } from '../../dist/typeof-a1531d8f.esm.js';
-import { _ as _slicedToArray } from '../../dist/slicedToArray-331bebbb.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-1dc7d2d6.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 export * from 'react/jsx-runtime';
+import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

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

@@ -1,8 +1,9 @@
 import { _ as _typeof } from '../../dist/typeof-e0c837cc.worker.esm.js';
-import { _ as _slicedToArray } from '../../dist/slicedToArray-d4c4a4ed.worker.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-e7da2c5e.worker.esm.js';
 import { Internal } from '@valbuild/core';
 import * as ReactJSXRuntime from 'react/jsx-runtime';
 export * from 'react/jsx-runtime';
+import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../../dist/slicedToArray-85f6bb43.browser.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-7b69258f.browser.esm.js';
 import { _ as _typeof } from '../../dist/typeof-9915e135.browser.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
@@ -7,6 +7,7 @@ import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCom
 import { _ as _defineProperty } from '../../dist/defineProperty-6ed7deb7.browser.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
 import { parseRichTextSource } from '@valbuild/shared/internal';
+import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
 
 function stegaDecodeString(encodedString) {
   var encodedBits = vercelStegaDecode(encodedString);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-a9d0d9cd.cjs.dev.js');
+var slicedToArray = require('../../dist/slicedToArray-11a666de.cjs.dev.js');
 var _typeof = require('../../dist/typeof-b568f48f.cjs.dev.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
@@ -11,6 +11,7 @@ var stega = require('@vercel/stega');
 var defineProperty = require('../../dist/defineProperty-c84f9aba.cjs.dev.js');
 var core = require('@valbuild/core');
 var internal = require('@valbuild/shared/internal');
+require('../../dist/unsupportedIterableToArray-ac28611a.cjs.dev.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var slicedToArray = require('../../dist/slicedToArray-a2a426c7.cjs.prod.js');
+var slicedToArray = require('../../dist/slicedToArray-c405fbf0.cjs.prod.js');
 var _typeof = require('../../dist/typeof-16428c61.cjs.prod.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 var jsxRuntimeDev = require('react/jsx-dev-runtime');
@@ -11,6 +11,7 @@ var stega = require('@vercel/stega');
 var defineProperty = require('../../dist/defineProperty-f8fe5660.cjs.prod.js');
 var core = require('@valbuild/core');
 var internal = require('@valbuild/shared/internal');
+require('../../dist/unsupportedIterableToArray-42309462.cjs.prod.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

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

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../../dist/slicedToArray-331bebbb.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-1dc7d2d6.esm.js';
 import { _ as _typeof } from '../../dist/typeof-a1531d8f.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
@@ -7,6 +7,7 @@ import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCom
 import { _ as _defineProperty } from '../../dist/defineProperty-9bf3d0c0.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
 import { parseRichTextSource } from '@valbuild/shared/internal';
+import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
 
 function stegaDecodeString(encodedString) {
   var encodedBits = vercelStegaDecode(encodedString);

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

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../../dist/slicedToArray-d4c4a4ed.worker.esm.js';
+import { _ as _slicedToArray } from '../../dist/slicedToArray-e7da2c5e.worker.esm.js';
 import { _ as _typeof } from '../../dist/typeof-e0c837cc.worker.esm.js';
 import ReactJSXRuntime__default from 'react/jsx-runtime';
 import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
@@ -7,6 +7,7 @@ import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCom
 import { _ as _defineProperty } from '../../dist/defineProperty-82fbeafc.worker.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
 import { parseRichTextSource } from '@valbuild/shared/internal';
+import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
 
 function stegaDecodeString(encodedString) {
   var encodedBits = vercelStegaDecode(encodedString);

package/dist/ValProvider-c7d7067b.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValProvider-c7d7067b.cjs.prod.js");
-} else {
-  module.exports = require("./ValProvider-c7d7067b.cjs.dev.js");
-}

package/dist/ValUI-323cc3ff.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValUI-323cc3ff.cjs.prod.js");
-} else {
-  module.exports = require("./ValUI-323cc3ff.cjs.dev.js");
-}