@valbuild/react 0.13.3 → 0.14.0

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

@@ -1,23 +1,8 @@
-import { lazy, createElement } from 'react';
-import { jsx } from 'react/jsx-runtime';
+export { ValProvider } from './ValProvider-cb5a2161.worker.esm.js';
 import { Internal } from '@valbuild/core';
+import { createElement } from 'react';
 import parse from 'style-to-object';
-
-var ValProvider = /*#__PURE__*/lazy(function () {
-  return import('./ValProvider-a45a47b9.worker.esm.js');
-});
-function ValProviderWrapper(_ref) {
-  var _ref$host = _ref.host,
-    host = _ref$host === void 0 ? "/api/val" : _ref$host,
-    children = _ref.children;
-  if (!ValProvider) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(ValProvider, {
-    host: host,
-    children: children
-  });
-}
+import { jsx } from 'react/jsx-runtime';
 
 function useVal(selector, locale) {
   // const mod = selectable.getModule();
@@ -41,37 +26,41 @@ function useVal(selector, locale) {
   return Internal.getVal(selector, locale);
 }
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-var getValPath = Internal.getValPath;
 function ValRichText(_ref) {
   var children = _ref.children;
+  var root = children;
+  var path = root.valPath;
   return /*#__PURE__*/jsx("div", {
-    "data-val-path": getValPath(children),
-    children: children.children.map(function (child) {
-      switch (child.type.val) {
+    "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
-          }, getValPath(child));
+          }, childPath);
         case "paragraph":
           return /*#__PURE__*/jsx(ParagraphNodeComponent, {
+            path: childPath,
             node: child
-          }, getValPath(child));
+          }, childPath);
         case "list":
           return /*#__PURE__*/jsx(ListNodeComponent, {
+            path: childPath,
             node: child
-          }, getValPath(child));
+          }, childPath);
         default:
-          throw Error("Unknown node type: " + (child === null || child === void 0 ? void 0 : child.type));
+          throw Error("Unknown root node type: " + childType);
       }
     })
   });
 }
 function TextNodeComponent(_ref2) {
-  var _parse;
+  var _parse, _node$format;
   var node = _ref2.node;
-  var actualVal = node.val;
-  var styleProps = actualVal.style ? (_parse = parse(actualVal.style)) !== null && _parse !== void 0 ? _parse : {} : {};
+  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"];
@@ -81,9 +70,12 @@ function TextNodeComponent(_ref2) {
     styleProps["fontSize"] = styleProps["font-size"];
     delete styleProps["font-size"];
   }
-  var bitmask = actualVal.format.toString(2);
-  var bitmaskOffset = bitmask.length - 1;
+  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;
+    }
     return bitmask.length >= bitmaskOffset - bit && bitmask[bitmaskOffset - bit] === "1";
   }
   if (isBitOne(0)) {
@@ -108,54 +100,63 @@ function TextNodeComponent(_ref2) {
   }
   return /*#__PURE__*/jsx("span", {
     style: styleProps,
-    children: actualVal.text
+    children: node.text
   });
 }
 function HeadingNodeComponent(_ref3) {
-  var node = _ref3.node;
-  return /*#__PURE__*/createElement(node.tag.val, {}, node.children.map(function (child) {
+  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
-    }, getValPath(child));
+    }, childPath);
   }));
 }
 function ParagraphNodeComponent(_ref4) {
-  var node = _ref4.node;
+  var node = _ref4.node,
+    path = _ref4.path;
   return /*#__PURE__*/jsx("p", {
-    children: node.children.map(function (child) {
-      switch (child.type.val) {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
         case "text":
           return /*#__PURE__*/jsx(TextNodeComponent, {
             node: child
-          }, getValPath(child));
+          }, childPath);
         default:
-          throw Error("Unknown node type: " + (child === null || child === void 0 ? void 0 : child.type));
+          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
       }
     })
   });
 }
 function ListNodeComponent(_ref5) {
-  var node = _ref5.node;
-  return /*#__PURE__*/createElement(node.val.tag, {}, node.children.map(function (child) {
+  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
-    }, getValPath(child));
+    }, childPath);
   }));
 }
 function ListItemComponent(_ref6) {
-  var node = _ref6.node;
+  var node = _ref6.node,
+    path = _ref6.path;
   return /*#__PURE__*/jsx("li", {
     children: node.children.map(function (child, i) {
-      switch (child.val.type) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
         case "text":
           return /*#__PURE__*/jsx(TextNodeComponent, {
             node: child
-          }, i);
+          }, childPath);
         default:
-          throw Error("Unknown node type: " + (child === null || child === void 0 ? void 0 : child.type));
+          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
       }
     })
   });
 }
 
-export { ValProviderWrapper as ValProvider, ValRichText, useVal };
+export { ValRichText, useVal };

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

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-1a246338.browser.esm.js';
 import { Internal } from '@valbuild/core';
-import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
 import '../../dist/unsupportedIterableToArray-d3087ed5.browser.esm.js';
 
@@ -36,7 +36,7 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 export { jsxDEV };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('../../dist/slicedToArray-b7cf26e0.cjs.dev.js');
 var core = require('@valbuild/core');
-var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
+var jsxRuntimeDev = require('react/jsx-dev-runtime');
 require('../../dist/unsupportedIterableToArray-9e97e24a.cjs.dev.js');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var ReactJSXRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(ReactJSXRuntimeDev);
+var jsxRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(jsxRuntimeDev);
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
@@ -59,13 +59,13 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 exports.jsxDEV = jsxDEV;
-Object.keys(ReactJSXRuntimeDev).forEach(function (k) {
+Object.keys(jsxRuntimeDev).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: function () { return ReactJSXRuntimeDev[k]; }
+    get: function () { return jsxRuntimeDev[k]; }
   });
 });

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var slicedToArray = require('../../dist/slicedToArray-0eb0bcdb.cjs.prod.js');
 var core = require('@valbuild/core');
-var ReactJSXRuntimeDev = require('react/jsx-dev-runtime');
+var jsxRuntimeDev = require('react/jsx-dev-runtime');
 require('../../dist/unsupportedIterableToArray-afbea1dd.cjs.prod.js');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var ReactJSXRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(ReactJSXRuntimeDev);
+var jsxRuntimeDev__namespace = /*#__PURE__*/_interopNamespace(jsxRuntimeDev);
 
 var isIntrinsicElement = function isIntrinsicElement(type) {
   // TODO: think this is not correct, but good enough for now?
@@ -59,13 +59,13 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev__namespace.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 exports.jsxDEV = jsxDEV;
-Object.keys(ReactJSXRuntimeDev).forEach(function (k) {
+Object.keys(jsxRuntimeDev).forEach(function (k) {
   if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
     enumerable: true,
-    get: function () { return ReactJSXRuntimeDev[k]; }
+    get: function () { return jsxRuntimeDev[k]; }
   });
 });

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

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-d846e1d2.esm.js';
 import { Internal } from '@valbuild/core';
-import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
 import '../../dist/unsupportedIterableToArray-51bb61c2.esm.js';
 
@@ -36,7 +36,7 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 export { jsxDEV };

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

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray, a as _typeof } from '../../dist/slicedToArray-9e7d1407.worker.esm.js';
 import { Internal } from '@valbuild/core';
-import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+import * as jsxRuntimeDev from 'react/jsx-dev-runtime';
 export * from 'react/jsx-dev-runtime';
 import '../../dist/unsupportedIterableToArray-738344ef.worker.esm.js';
 
@@ -36,7 +36,7 @@ function jsxDEV(type, props, key, isStaticChildren, source, self) {
   // console.log("jsxDEV", type, props, key, isStaticChildren, source, self);
 
   devalProps(type, props);
-  return ReactJSXRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
+  return jsxRuntimeDev.jsxDEV(type, props, key, isStaticChildren, source, self);
 }
 
 export { jsxDEV };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@valbuild/react",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "private": false,
-  "description": "Val - React",
+  "description": "Val - React internal helpers",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.13.3",
-    "@valbuild/ui": "~0.13.3",
+    "@valbuild/core": "~0.14.0",
+    "@valbuild/ui": "~0.13.4",
+    "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2",
     "style-to-object": "^0.4.1"
   },
@@ -22,8 +23,8 @@
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -34,7 +35,8 @@
     "entrypoints": [
       "./index.ts",
       "./jsx-runtime.js",
-      "./jsx-dev-runtime.js"
+      "./jsx-dev-runtime.js",
+      "./stega/index.ts"
     ],
     "exports": {
       "envConditions": [
@@ -43,6 +45,9 @@
       ]
     }
   },
+  "externals": [
+    "react"
+  ],
   "main": "dist/valbuild-react.cjs.js",
   "module": "dist/valbuild-react.esm.js",
   "browser": {
@@ -65,6 +70,14 @@
       },
       "default": "./jsx-runtime/dist/valbuild-react-jsx-runtime.cjs.js"
     },
+    "./stega": {
+      "module": {
+        "worker": "./stega/dist/valbuild-react-stega.worker.esm.js",
+        "browser": "./stega/dist/valbuild-react-stega.browser.esm.js",
+        "default": "./stega/dist/valbuild-react-stega.esm.js"
+      },
+      "default": "./stega/dist/valbuild-react-stega.cjs.js"
+    },
     "./jsx-dev-runtime": {
       "module": {
         "worker": "./jsx-dev-runtime/dist/valbuild-react-jsx-dev-runtime.worker.esm.js",

package/src/ShadowRoot.tsx

@@ -17,10 +17,14 @@ export const ShadowRoot = ({ children }: { children: React.ReactNode }) => {
 
   useLayoutEffect(() => {
     if (node.current) {
-      const root = node.current.attachShadow({
-        mode: "closed",
-      });
-      setRoot(root);
+      if (node.current.shadowRoot) {
+        setRoot(node.current.shadowRoot);
+      } else {
+        const root = node.current.attachShadow({
+          mode: "open",
+        });
+        setRoot(root);
+      }
     }
   }, []);
 

package/src/ValProvider.tsx

@@ -36,10 +36,7 @@ export type ValProviderProps = {
 const ValUI =
   typeof window !== "undefined" ? lazy(() => import("./ValUI")) : null;
 
-export default function ValProvider({
-  host = "/api/val",
-  children,
-}: ValProviderProps) {
+export function ValProvider({ host = "/api/val", children }: ValProviderProps) {
   const valApi = useMemo(() => new ValApi(host), [host]);
   const valStore = useMemo(() => new ValStore(valApi), [valApi]);
   return (

package/src/ValRichText.tsx

@@ -1,55 +1,58 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import {
   HeadingNode,
   ListItemNode,
   ListNode,
   ParagraphNode,
   RichText,
+  SourcePath,
   TextNode,
-  Val,
 } from "@valbuild/core";
-import { Internal } from "@valbuild/core";
 import { createElement } from "react";
 import parse from "style-to-object";
 
-const getValPath = Internal.getValPath;
-export function ValRichText({ children }: { children: Val<RichText> }) {
+export function ValRichText({ children }: { children: RichText }) {
+  const root: RichText = children;
+  const path = root.valPath;
   return (
-    <div data-val-path={getValPath(children)}>
-      {children.children.map((child) => {
-        switch (child.type.val) {
+    <div data-val-path={path}>
+      {root.children.map((child, i) => {
+        const childType = child.type;
+        const childPath = `${path}.${i}` as SourcePath;
+        switch (childType) {
           case "heading":
             return (
               <HeadingNodeComponent
-                key={getValPath(child)}
-                node={child as Val<HeadingNode>}
+                key={childPath}
+                path={childPath}
+                node={child}
               />
             );
           case "paragraph":
             return (
               <ParagraphNodeComponent
-                key={getValPath(child)}
-                node={child as Val<ParagraphNode>}
+                key={childPath}
+                path={childPath}
+                node={child}
               />
             );
           case "list":
             return (
               <ListNodeComponent
-                key={getValPath(child)}
-                node={child as Val<ListNode>}
+                key={childPath}
+                path={childPath}
+                node={child}
               />
             );
           default:
-            throw Error("Unknown node type: " + (child as any)?.type);
+            throw Error("Unknown root node type: " + childType);
         }
       })}
     </div>
   );
 }
 
-function TextNodeComponent({ node }: { node: Val<TextNode> }) {
-  const actualVal = node.val;
-  const styleProps = actualVal.style ? parse(actualVal.style) ?? {} : {};
+function TextNodeComponent({ node }: { node: TextNode }) {
+  const styleProps = node.style ? parse(node.style) ?? {} : {};
   // TODO: Ugly! We should do this before serializing instead
   if (styleProps["font-family"]) {
     styleProps["fontFamily"] = styleProps["font-family"];
@@ -59,9 +62,12 @@ function TextNodeComponent({ node }: { node: Val<TextNode> }) {
     styleProps["fontSize"] = styleProps["font-size"];
     delete styleProps["font-size"];
   }
-  const bitmask = actualVal.format.toString(2);
-  const bitmaskOffset = bitmask.length - 1;
+  const bitmask = node.format?.toString(2);
+  const bitmaskOffset = bitmask ? bitmask.length - 1 : 0;
   function isBitOne(bit: number) {
+    if (!bitmask) {
+      return false;
+    }
     return (
       bitmask.length >= bitmaskOffset - bit &&
       bitmask[bitmaskOffset - bit] === "1"
@@ -87,53 +93,83 @@ function TextNodeComponent({ node }: { node: Val<TextNode> }) {
       styleProps["textDecoration"] += " underline";
     }
   }
-  return <span style={styleProps}>{actualVal.text}</span>;
+  return <span style={styleProps}>{node.text}</span>;
 }
 
-function HeadingNodeComponent({ node }: { node: Val<HeadingNode> }) {
+function HeadingNodeComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: HeadingNode;
+}) {
   return createElement(
-    node.tag.val,
+    node.tag,
     {},
-    node.children.map((child) => (
-      <TextNodeComponent key={getValPath(child)} node={child} />
-    ))
+    node.children.map((child, i) => {
+      const childPath = `${path}.${i}` as SourcePath;
+      return <TextNodeComponent key={childPath} node={child} />;
+    })
   );
 }
 
-function ParagraphNodeComponent({ node }: { node: Val<ParagraphNode> }) {
+function ParagraphNodeComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: ParagraphNode;
+}) {
   return (
     <p>
-      {node.children.map((child) => {
-        switch (child.type.val) {
+      {node.children.map((child, i) => {
+        const childPath = `${path}.${i}` as SourcePath;
+        switch (child.type) {
           case "text":
-            return <TextNodeComponent key={getValPath(child)} node={child} />;
+            return <TextNodeComponent key={childPath} node={child} />;
           default:
-            throw Error("Unknown node type: " + (child as any)?.type);
+            throw Error("Unknown paragraph node type: " + child?.type);
         }
       })}
     </p>
   );
 }
 
-function ListNodeComponent({ node }: { node: Val<ListNode> }) {
+function ListNodeComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: ListNode;
+}) {
   return createElement(
-    node.val.tag,
+    node.tag,
     {},
-    node.children.map((child) => (
-      <ListItemComponent key={getValPath(child)} node={child} />
-    ))
+    node.children.map((child, i) => {
+      const childPath = `${path}.${i}` as SourcePath;
+      return (
+        <ListItemComponent key={childPath} path={childPath} node={child} />
+      );
+    })
   );
 }
 
-function ListItemComponent({ node }: { node: Val<ListItemNode> }) {
+function ListItemComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: ListItemNode;
+}) {
   return (
     <li>
       {node.children.map((child, i) => {
-        switch (child.val.type) {
+        const childPath = `${path}.${i}` as SourcePath;
+        switch (child.type) {
           case "text":
-            return <TextNodeComponent key={i} node={child} />;
+            return <TextNodeComponent key={childPath} node={child} />;
           default:
-            throw Error("Unknown node type: " + (child as any)?.type);
+            throw Error("Unknown list item node type: " + child?.type);
         }
       })}
     </li>

package/src/index.ts

@@ -1,6 +1,4 @@
-/* export { useContent } from "./useContent";
-export { useText } from "./useText";
-export { WithVal } from "./WithVal"; */
-export { ValProviderWrapper as ValProvider } from "./ValProviderWrapper";
+// NOTE: the exports of this file needs to be kept in sync with ValQuickJSRuntime
+export { ValProvider } from "./ValProvider";
 export { useVal } from "./hooks/useVal";
 export { ValRichText } from "./ValRichText";