@valbuild/react 0.89.0 → 0.91.0

package/dist/declarations/src/internal/ValRichText.d.ts

@@ -29,7 +29,7 @@ type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>
  *
  * @example
  * const content = useVal(contentVal);
- * return <ValRichText>{content.myRichText}</ValRichText>
+ * return <ValRichText content={content.myRichText} />
  *
  * @example
  * const content = useVal(contentVal);
@@ -37,9 +37,9 @@ type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>
  *   <ValRichText
  *     theme={{
  *       h1: 'text-4xl font-bold',
- *     }}>
- *    {content.myRichText}
- *   </ValRichText>
+ *     }}
+ *     content={content.myRichText}
+ *   />
  * );
  *
  *
@@ -47,6 +47,7 @@ type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>
  * const content = useVal(contentVal);
  * return (
  *   <ValRichText
+ *     content={content.myRichText}
  *     theme={{
  *        block: {
  *          h1: 'text-4xl font-bold',
@@ -59,19 +60,22 @@ type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>
  *        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
  */
-export declare function ValRichText<O extends RichTextOptions>({ children, className, style, theme, transform, }: {
-    children: RichText<O>;
+export declare function ValRichText<O extends RichTextOptions>({ className, style, theme, transform, ...props }: {
     className?: string;
     style?: CSSProperties;
     theme?: ThemeOptions<O>;
     transform?: (node: RichTextNode, children: ReactNode | ReactNode[], className?: string) => JSX.Element | string | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+} & ({
+    /**
+     * When using `children` - use the `content` prop instead.
+     */
+    children: RichText<O>;
+} | {
+    content: RichText<O>;
+})): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/declarations/src/stega/stegaEncode.d.ts

@@ -160,7 +160,9 @@ export type StegaOfRichTextSource<T extends Source> = Json extends T ? Json : T
 /**
  * RichText is accessible by users (after conversion via useVal / fetchVal)
  **/
-export type RichText<O extends RichTextOptions> = StegaOfRichTextSource<RichTextSource<O>>;
+export type RichText<O extends RichTextOptions> = StegaOfRichTextSource<RichTextSource<O>> & {
+    readonly __brand?: "RichText";
+};
 export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource<infer O> ? RichText<O> : T extends ImageSource ? Image : T extends FileSource<infer M> ? M extends FileMetadata ? File<M> : never : T extends SourceObject ? {
     [key in keyof T]: StegaOfSource<T[key]>;
 } : T extends SourceArray ? StegaOfSource<T[number]>[] : T extends RawString ? string : string extends T ? ValEncodedString : T extends JsonPrimitive ? T : never;

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

@@ -3,12 +3,35 @@ import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 import '../../dist/unsupportedIterableToArray-0ac4ac41.browser.esm.js';
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+var _excluded = ["className", "style", "theme", "transform"];
 /**
  * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
- * return <ValRichText>{content.myRichText}</ValRichText>
+ * return <ValRichText content={content.myRichText} />
  *
  * @example
  * const content = useVal(contentVal);
@@ -16,9 +39,9 @@ import '../../dist/unsupportedIterableToArray-0ac4ac41.browser.esm.js';
  *   <ValRichText
  *     theme={{
  *       h1: 'text-4xl font-bold',
- *     }}>
- *    {content.myRichText}
- *   </ValRichText>
+ *     }}
+ *     content={content.myRichText}
+ *   />
  * );
  *
  *
@@ -26,6 +49,7 @@ import '../../dist/unsupportedIterableToArray-0ac4ac41.browser.esm.js';
  * const content = useVal(contentVal);
  * return (
  *   <ValRichText
+ *     content={content.myRichText}
  *     theme={{
  *        block: {
  *          h1: 'text-4xl font-bold',
@@ -38,21 +62,18 @@ import '../../dist/unsupportedIterableToArray-0ac4ac41.browser.esm.js';
  *        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 children = _ref.children,
-    className = _ref.className,
+  var className = _ref.className,
     style = _ref.style,
     theme = _ref.theme,
-    transform = _ref.transform;
-  var root = children;
+    transform = _ref.transform,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var root = "content" in props ? props.content : props.children;
   function build(child, key) {
     if (typeof child === "string") {
       var transformed = transform && transform(child, []);

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

@@ -11,12 +11,35 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+var _excluded = ["className", "style", "theme", "transform"];
 /**
  * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
- * return <ValRichText>{content.myRichText}</ValRichText>
+ * return <ValRichText content={content.myRichText} />
  *
  * @example
  * const content = useVal(contentVal);
@@ -24,9 +47,9 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  *   <ValRichText
  *     theme={{
  *       h1: 'text-4xl font-bold',
- *     }}>
- *    {content.myRichText}
- *   </ValRichText>
+ *     }}
+ *     content={content.myRichText}
+ *   />
  * );
  *
  *
@@ -34,6 +57,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  * const content = useVal(contentVal);
  * return (
  *   <ValRichText
+ *     content={content.myRichText}
  *     theme={{
  *        block: {
  *          h1: 'text-4xl font-bold',
@@ -46,21 +70,18 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  *        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 children = _ref.children,
-    className = _ref.className,
+  var className = _ref.className,
     style = _ref.style,
     theme = _ref.theme,
-    transform = _ref.transform;
-  var root = children;
+    transform = _ref.transform,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var root = "content" in props ? props.content : props.children;
   function build(child, key) {
     if (typeof child === "string") {
       var transformed = transform && transform(child, []);

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

@@ -11,12 +11,35 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+var _excluded = ["className", "style", "theme", "transform"];
 /**
  * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
- * return <ValRichText>{content.myRichText}</ValRichText>
+ * return <ValRichText content={content.myRichText} />
  *
  * @example
  * const content = useVal(contentVal);
@@ -24,9 +47,9 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  *   <ValRichText
  *     theme={{
  *       h1: 'text-4xl font-bold',
- *     }}>
- *    {content.myRichText}
- *   </ValRichText>
+ *     }}
+ *     content={content.myRichText}
+ *   />
  * );
  *
  *
@@ -34,6 +57,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  * const content = useVal(contentVal);
  * return (
  *   <ValRichText
+ *     content={content.myRichText}
  *     theme={{
  *        block: {
  *          h1: 'text-4xl font-bold',
@@ -46,21 +70,18 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  *        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 children = _ref.children,
-    className = _ref.className,
+  var className = _ref.className,
     style = _ref.style,
     theme = _ref.theme,
-    transform = _ref.transform;
-  var root = children;
+    transform = _ref.transform,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var root = "content" in props ? props.content : props.children;
   function build(child, key) {
     if (typeof child === "string") {
       var transformed = transform && transform(child, []);

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

@@ -3,12 +3,35 @@ import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 import '../../dist/unsupportedIterableToArray-f57eb659.esm.js';
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+var _excluded = ["className", "style", "theme", "transform"];
 /**
  * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
- * return <ValRichText>{content.myRichText}</ValRichText>
+ * return <ValRichText content={content.myRichText} />
  *
  * @example
  * const content = useVal(contentVal);
@@ -16,9 +39,9 @@ import '../../dist/unsupportedIterableToArray-f57eb659.esm.js';
  *   <ValRichText
  *     theme={{
  *       h1: 'text-4xl font-bold',
- *     }}>
- *    {content.myRichText}
- *   </ValRichText>
+ *     }}
+ *     content={content.myRichText}
+ *   />
  * );
  *
  *
@@ -26,6 +49,7 @@ import '../../dist/unsupportedIterableToArray-f57eb659.esm.js';
  * const content = useVal(contentVal);
  * return (
  *   <ValRichText
+ *     content={content.myRichText}
  *     theme={{
  *        block: {
  *          h1: 'text-4xl font-bold',
@@ -38,21 +62,18 @@ import '../../dist/unsupportedIterableToArray-f57eb659.esm.js';
  *        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 children = _ref.children,
-    className = _ref.className,
+  var className = _ref.className,
     style = _ref.style,
     theme = _ref.theme,
-    transform = _ref.transform;
-  var root = children;
+    transform = _ref.transform,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var root = "content" in props ? props.content : props.children;
   function build(child, key) {
     if (typeof child === "string") {
       var transformed = transform && transform(child, []);

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

@@ -3,12 +3,35 @@ import React from 'react';
 import { jsx } from 'react/jsx-runtime';
 import '../../dist/unsupportedIterableToArray-10eaf95e.worker.esm.js';
 
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+
+var _excluded = ["className", "style", "theme", "transform"];
 /**
  * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
- * return <ValRichText>{content.myRichText}</ValRichText>
+ * return <ValRichText content={content.myRichText} />
  *
  * @example
  * const content = useVal(contentVal);
@@ -16,9 +39,9 @@ import '../../dist/unsupportedIterableToArray-10eaf95e.worker.esm.js';
  *   <ValRichText
  *     theme={{
  *       h1: 'text-4xl font-bold',
- *     }}>
- *    {content.myRichText}
- *   </ValRichText>
+ *     }}
+ *     content={content.myRichText}
+ *   />
  * );
  *
  *
@@ -26,6 +49,7 @@ import '../../dist/unsupportedIterableToArray-10eaf95e.worker.esm.js';
  * const content = useVal(contentVal);
  * return (
  *   <ValRichText
+ *     content={content.myRichText}
  *     theme={{
  *        block: {
  *          h1: 'text-4xl font-bold',
@@ -38,21 +62,18 @@ import '../../dist/unsupportedIterableToArray-10eaf95e.worker.esm.js';
  *        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 children = _ref.children,
-    className = _ref.className,
+  var className = _ref.className,
     style = _ref.style,
     theme = _ref.theme,
-    transform = _ref.transform;
-  var root = children;
+    transform = _ref.transform,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var root = "content" in props ? props.content : props.children;
   function build(child, key) {
     if (typeof child === "string") {
       var transformed = transform && transform(child, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/react",
-  "version": "0.89.0",
+  "version": "0.91.0",
   "private": false,
   "description": "Val - React internal helpers",
   "repository": {
@@ -13,9 +13,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.89.0",
-    "@valbuild/shared": "~0.89.0",
-    "@valbuild/ui": "~0.89.0",
+    "@valbuild/core": "~0.91.0",
+    "@valbuild/shared": "~0.91.0",
+    "@valbuild/ui": "~0.91.0",
     "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2"
   },

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

@@ -349,15 +349,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (Array.isArray(sourceOrSelector)) {
-        var a = sourceOrSelector.map(function (el) {
+        var arraySelector = sourceOrSelector.map(function (el) {
           return rec(el, {
             path: recOpts.path,
             schema: recOpts.schema
           });
         });
-        return a;
+        return arraySelector;
       } else if (_typeof(sourceOrSelector) === "object") {
-        var _a = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
+        if (!sourceOrSelector) {
+          return null;
+        }
+        var richtextSelector = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
           var _ref3 = _slicedToArray(_ref2, 2),
             key = _ref3[0],
             value = _ref3[1];
@@ -366,7 +369,7 @@ function stegaEncode(input, opts) {
             schema: recOpts.schema
           })];
         }));
-        return _a;
+        return richtextSelector;
       }
       return sourceOrSelector;
     }

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

@@ -359,15 +359,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (Array.isArray(sourceOrSelector)) {
-        var a = sourceOrSelector.map(function (el) {
+        var arraySelector = sourceOrSelector.map(function (el) {
           return rec(el, {
             path: recOpts.path,
             schema: recOpts.schema
           });
         });
-        return a;
+        return arraySelector;
       } else if (slicedToArray._typeof(sourceOrSelector) === "object") {
-        var _a = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
+        if (!sourceOrSelector) {
+          return null;
+        }
+        var richtextSelector = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
           var _ref3 = slicedToArray._slicedToArray(_ref2, 2),
             key = _ref3[0],
             value = _ref3[1];
@@ -376,7 +379,7 @@ function stegaEncode(input, opts) {
             schema: recOpts.schema
           })];
         }));
-        return _a;
+        return richtextSelector;
       }
       return sourceOrSelector;
     }

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

@@ -359,15 +359,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (Array.isArray(sourceOrSelector)) {
-        var a = sourceOrSelector.map(function (el) {
+        var arraySelector = sourceOrSelector.map(function (el) {
           return rec(el, {
             path: recOpts.path,
             schema: recOpts.schema
           });
         });
-        return a;
+        return arraySelector;
       } else if (slicedToArray._typeof(sourceOrSelector) === "object") {
-        var _a = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
+        if (!sourceOrSelector) {
+          return null;
+        }
+        var richtextSelector = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
           var _ref3 = slicedToArray._slicedToArray(_ref2, 2),
             key = _ref3[0],
             value = _ref3[1];
@@ -376,7 +379,7 @@ function stegaEncode(input, opts) {
             schema: recOpts.schema
           })];
         }));
-        return _a;
+        return richtextSelector;
       }
       return sourceOrSelector;
     }

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

@@ -349,15 +349,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (Array.isArray(sourceOrSelector)) {
-        var a = sourceOrSelector.map(function (el) {
+        var arraySelector = sourceOrSelector.map(function (el) {
           return rec(el, {
             path: recOpts.path,
             schema: recOpts.schema
           });
         });
-        return a;
+        return arraySelector;
       } else if (_typeof(sourceOrSelector) === "object") {
-        var _a = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
+        if (!sourceOrSelector) {
+          return null;
+        }
+        var richtextSelector = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
           var _ref3 = _slicedToArray(_ref2, 2),
             key = _ref3[0],
             value = _ref3[1];
@@ -366,7 +369,7 @@ function stegaEncode(input, opts) {
             schema: recOpts.schema
           })];
         }));
-        return _a;
+        return richtextSelector;
       }
       return sourceOrSelector;
     }

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

@@ -349,15 +349,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (Array.isArray(sourceOrSelector)) {
-        var a = sourceOrSelector.map(function (el) {
+        var arraySelector = sourceOrSelector.map(function (el) {
           return rec(el, {
             path: recOpts.path,
             schema: recOpts.schema
           });
         });
-        return a;
+        return arraySelector;
       } else if (_typeof(sourceOrSelector) === "object") {
-        var _a = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
+        if (!sourceOrSelector) {
+          return null;
+        }
+        var richtextSelector = Object.fromEntries(Object.entries(sourceOrSelector).map(function (_ref2) {
           var _ref3 = _slicedToArray(_ref2, 2),
             key = _ref3[0],
             value = _ref3[1];
@@ -366,7 +369,7 @@ function stegaEncode(input, opts) {
             schema: recOpts.schema
           })];
         }));
-        return _a;
+        return richtextSelector;
       }
       return sourceOrSelector;
     }