@valbuild/react 0.13.4 → 0.15.0

package/src/ValRichText.tsx

@@ -0,0 +1,177 @@
+import {
+  HeadingNode,
+  ListItemNode,
+  ListNode,
+  ParagraphNode,
+  RichText,
+  SourcePath,
+  TextNode,
+} from "@valbuild/core";
+import { createElement } from "react";
+import parse from "style-to-object";
+
+export function ValRichText({ children }: { children: RichText }) {
+  const root: RichText = children;
+  const path = root.valPath;
+  return (
+    <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={childPath}
+                path={childPath}
+                node={child}
+              />
+            );
+          case "paragraph":
+            return (
+              <ParagraphNodeComponent
+                key={childPath}
+                path={childPath}
+                node={child}
+              />
+            );
+          case "list":
+            return (
+              <ListNodeComponent
+                key={childPath}
+                path={childPath}
+                node={child}
+              />
+            );
+          default:
+            throw Error("Unknown root node type: " + childType);
+        }
+      })}
+    </div>
+  );
+}
+
+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"];
+    delete styleProps["font-family"];
+  }
+  if (styleProps["font-size"]) {
+    styleProps["fontSize"] = styleProps["font-size"];
+    delete styleProps["font-size"];
+  }
+  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"
+    );
+  }
+  if (isBitOne(0)) {
+    styleProps["fontWeight"] = "bold";
+  }
+  if (isBitOne(1)) {
+    styleProps["fontStyle"] = "italic";
+  }
+  if (isBitOne(2)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "line-through";
+    } else {
+      styleProps["textDecoration"] += " line-through";
+    }
+  }
+  if (isBitOne(3)) {
+    if (!styleProps["textDecoration"]) {
+      styleProps["textDecoration"] = "underline";
+    } else {
+      styleProps["textDecoration"] += " underline";
+    }
+  }
+  return <span style={styleProps}>{node.text}</span>;
+}
+
+function HeadingNodeComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: HeadingNode;
+}) {
+  return createElement(
+    node.tag,
+    {},
+    node.children.map((child, i) => {
+      const childPath = `${path}.${i}` as SourcePath;
+      return <TextNodeComponent key={childPath} node={child} />;
+    })
+  );
+}
+
+function ParagraphNodeComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: ParagraphNode;
+}) {
+  return (
+    <p>
+      {node.children.map((child, i) => {
+        const childPath = `${path}.${i}` as SourcePath;
+        switch (child.type) {
+          case "text":
+            return <TextNodeComponent key={childPath} node={child} />;
+          default:
+            throw Error("Unknown paragraph node type: " + child?.type);
+        }
+      })}
+    </p>
+  );
+}
+
+function ListNodeComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: ListNode;
+}) {
+  return createElement(
+    node.tag,
+    {},
+    node.children.map((child, i) => {
+      const childPath = `${path}.${i}` as SourcePath;
+      return (
+        <ListItemComponent key={childPath} path={childPath} node={child} />
+      );
+    })
+  );
+}
+
+function ListItemComponent({
+  node,
+  path,
+}: {
+  path: SourcePath;
+  node: ListItemNode;
+}) {
+  return (
+    <li>
+      {node.children.map((child, i) => {
+        const childPath = `${path}.${i}` as SourcePath;
+        switch (child.type) {
+          case "text":
+            return <TextNodeComponent key={childPath} node={child} />;
+          default:
+            throw Error("Unknown list item node type: " + child?.type);
+        }
+      })}
+    </li>
+  );
+}

package/src/index.ts

@@ -1,5 +1,4 @@
-/* export { useContent } from "./useContent";
-export { useText } from "./useText";
-export { WithVal } from "./WithVal"; */
+// 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";

package/src/stega/autoTagJSX.ts

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import jsxRuntime from "react/jsx-runtime";
+import jsxRuntimeDev from "react/jsx-dev-runtime";
+import React from "react";
+import {
+  vercelStegaSplit,
+  vercelStegaDecode,
+  VERCEL_STEGA_REGEX,
+} from "@vercel/stega";
+
+const isIntrinsicElement = (type: any) => {
+  // TODO: think this is not correct, but good enough for now?
+  return typeof type === "string";
+};
+
+const addValPathIfFound = (type: any, props: any) => {
+  const valSources: any = [];
+
+  if (isIntrinsicElement(type) && props && typeof props === "object") {
+    for (const [key, value] of Object.entries(props)) {
+      if (typeof value === "string" && value.match(VERCEL_STEGA_REGEX)) {
+        const encodedBits = vercelStegaDecode(value);
+        if (!encodedBits || typeof encodedBits !== "object") continue;
+        if (
+          "origin" in encodedBits &&
+          "data" in encodedBits &&
+          typeof encodedBits.data === "object" &&
+          encodedBits.data &&
+          "valPath" in encodedBits.data
+        ) {
+          const valPath = encodedBits?.data?.valPath;
+          if (valPath) {
+            console.log("Found encoded valPath", valPath);
+            valSources.push(valPath);
+            props[key] = vercelStegaSplit(value).cleaned;
+          }
+        }
+      }
+    }
+
+    if (valSources.length > 0) {
+      props["data-val-path"] = valSources.join(",");
+    }
+  }
+};
+
+function WrapJsx<T>(jsx: T): T {
+  if (typeof jsx !== "function") return jsx;
+
+  return function (type: any, props: any, ...rest: any[]) {
+    addValPathIfFound(type, props);
+    return jsx.call(jsx, type, props, ...rest);
+  } as any as T;
+}
+
+interface JsxRuntimeModule {
+  jsx?(type: any, ...rest: any[]): unknown;
+  jsxs?(type: any, ...rest: any[]): unknown;
+  jsxDEV?(type: any, ...rest: any[]): unknown;
+}
+
+export function autoTagJSX() {
+  const JsxPro: JsxRuntimeModule = jsxRuntime;
+  const JsxDev: JsxRuntimeModule = jsxRuntimeDev;
+
+  /**
+   * createElement _may_ be called by jsx runtime as a fallback in certain cases,
+   * so we need to wrap it regardless.
+   *
+   * The jsx exports depend on the `NODE_ENV` var to ensure the users' bundler doesn't
+   * include both, so one of them will be set with `undefined` values.
+   */
+  React.createElement = WrapJsx(React.createElement);
+  JsxDev.jsx && /*   */ (JsxDev.jsx = WrapJsx(JsxDev.jsx));
+  JsxPro.jsx && /*   */ (JsxPro.jsx = WrapJsx(JsxPro.jsx));
+  JsxDev.jsxs && /*  */ (JsxDev.jsxs = WrapJsx(JsxDev.jsxs));
+  JsxPro.jsxs && /*  */ (JsxPro.jsxs = WrapJsx(JsxPro.jsxs));
+  JsxDev.jsxDEV && /**/ (JsxDev.jsxDEV = WrapJsx(JsxDev.jsxDEV));
+  JsxPro.jsxDEV && /**/ (JsxPro.jsxDEV = WrapJsx(JsxPro.jsxDEV));
+}

package/src/stega/fetchVal.ts

@@ -0,0 +1,16 @@
+import { SelectorSource, SelectorOf, GenericSelector } from "@valbuild/core";
+import { stegaEncodeVal, StegaOfSource } from "./stegaEncode";
+import { Internal } from "@valbuild/core";
+
+export function fetchVal<T extends SelectorSource>(
+  selector: T,
+  locale?: string
+): SelectorOf<T> extends GenericSelector<infer S>
+  ? Promise<StegaOfSource<S>>
+  : never {
+  return Internal.fetchVal(selector, locale).then((val) =>
+    stegaEncodeVal(val)
+  ) as SelectorOf<T> extends GenericSelector<infer S>
+    ? Promise<StegaOfSource<S>>
+    : never;
+}

package/src/stega/hooks/useVal.ts

@@ -0,0 +1,14 @@
+import { GenericSelector, SelectorOf, SelectorSource } from "@valbuild/core";
+import { useVal as useReactVal } from "@valbuild/react";
+import { stegaEncodeVal, StegaOfSource } from "../stegaEncode";
+
+export function useVal<T extends SelectorSource>(
+  selector: T,
+  locale?: string
+): SelectorOf<T> extends GenericSelector<infer S> ? StegaOfSource<S> : never {
+  return stegaEncodeVal(
+    useReactVal(selector, locale)
+  ) as SelectorOf<T> extends GenericSelector<infer S>
+    ? StegaOfSource<S>
+    : never;
+}

package/src/stega/index.ts

@@ -0,0 +1,5 @@
+// NOTE: the exports of this file needs to be kept in sync with ValQuickJSRuntime
+export { autoTagJSX } from "./autoTagJSX";
+export { fetchVal } from "./fetchVal";
+export { useVal } from "./hooks/useVal";
+export type { ValEncodedString } from "./stegaEncode";

package/src/stega/stegaEncode.ts

@@ -0,0 +1,84 @@
+import { Json, Val, Internal, RichTextSource, RichText } from "@valbuild/core";
+import { vercelStegaCombine } from "@vercel/stega";
+import { FileSource, RemoteSource, Source, SourceObject } from "@valbuild/core";
+import { JsonPrimitive } from "@valbuild/core";
+import { SourceArray } from "@valbuild/core";
+import { I18nSource } from "@valbuild/core";
+
+declare const brand: unique symbol;
+
+/**
+ * ValEncodedString is a string that is encoded using steganography.
+ *
+ * This means that there is a hidden / non-visible object embedded in the string.
+ * This object includes a path, which is used to automatically tag
+ * where the content comes from for contextual editing.
+ *
+ */
+export type ValEncodedString = string & {
+  [brand]: "ValEncodedString";
+};
+
+export type StegaOfSource<T extends Source> = Json extends T
+  ? Json
+  : T extends I18nSource<readonly string[], infer U>
+  ? StegaOfSource<U>
+  : T extends RemoteSource<infer U>
+  ? StegaOfSource<U>
+  : T extends RichTextSource
+  ? RichText
+  : T extends FileSource
+  ? { url: ValEncodedString }
+  : T extends SourceObject
+  ? {
+      [key in keyof T]: StegaOfSource<T[key]>;
+    }
+  : T extends SourceArray
+  ? StegaOfSource<T[number]>[]
+  : T extends string
+  ? ValEncodedString
+  : T extends JsonPrimitive
+  ? T
+  : never;
+
+export function stegaEncodeVal<T extends Json>(val: Val<T>): T {
+  if (typeof val.val === "object") {
+    if (Array.isArray(val)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return val.map(stegaEncodeVal) as any;
+    }
+
+    if (
+      typeof val.val === "object" &&
+      val.val &&
+      "_type" in val.val &&
+      val.val["_type"] === "richtext"
+    ) {
+      return {
+        ...val.val,
+        valPath: Internal.getValPath(val),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any;
+    }
+
+    return Object.fromEntries(
+      Object.entries(val).map(([key, value]) => [key, stegaEncodeVal(value)])
+    ) as T;
+  }
+  if (typeof val.val === "string") {
+    return vercelStegaCombine(
+      val.val,
+      {
+        origin: "val.build",
+        data: { valPath: Internal.getValPath(val) },
+      },
+      isDate(val.val) // skip = true if isDate
+    ) as T;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return val.val as any;
+}
+
+function isDate(s: string) {
+  return Boolean(Date.parse(s));
+}

package/stega/README.md

@@ -0,0 +1,3 @@
+# Val React Stega
+
+This package contains Val specific code that utilizes Vercel's steganography lib (stega) to tag strings.

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

@@ -0,0 +1,127 @@
+import { a as _typeof, _ as _slicedToArray } from '../../dist/slicedToArray-1a246338.browser.esm.js';
+import ReactJSXRuntime__default from 'react/jsx-runtime';
+import jsxRuntimeDev__default from 'react/jsx-dev-runtime';
+import React from 'react';
+import { VERCEL_STEGA_REGEX, vercelStegaDecode, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
+import { _ as _objectSpread2 } from '../../dist/objectSpread2-30cc2856.browser.esm.js';
+import { Internal } from '@valbuild/core';
+import { useVal as useVal$1 } from '@valbuild/react';
+import '../../dist/unsupportedIterableToArray-d3087ed5.browser.esm.js';
+import '../../dist/defineProperty-f319cb47.browser.esm.js';
+
+var isIntrinsicElement = function isIntrinsicElement(type) {
+  // TODO: think this is not correct, but good enough for now?
+  return typeof type === "string";
+};
+var addValPathIfFound = function addValPathIfFound(type, props) {
+  var valSources = [];
+  if (isIntrinsicElement(type) && props && _typeof(props) === "object") {
+    for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+      if (typeof value === "string" && value.match(VERCEL_STEGA_REGEX)) {
+        var encodedBits = vercelStegaDecode(value);
+        if (!encodedBits || _typeof(encodedBits) !== "object") continue;
+        if ("origin" in encodedBits && "data" in encodedBits && _typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data) {
+          var _encodedBits$data;
+          var valPath = encodedBits === null || encodedBits === void 0 ? void 0 : (_encodedBits$data = encodedBits.data) === null || _encodedBits$data === void 0 ? void 0 : _encodedBits$data.valPath;
+          if (valPath) {
+            console.log("Found encoded valPath", valPath);
+            valSources.push(valPath);
+            props[key] = vercelStegaSplit(value).cleaned;
+          }
+        }
+      }
+    }
+    if (valSources.length > 0) {
+      props["data-val-path"] = valSources.join(",");
+    }
+  }
+};
+function WrapJsx(jsx) {
+  if (typeof jsx !== "function") return jsx;
+  return function (type, props) {
+    addValPathIfFound(type, props);
+    for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      rest[_key - 2] = arguments[_key];
+    }
+    return jsx.call.apply(jsx, [jsx, type, props].concat(rest));
+  };
+}
+function autoTagJSX() {
+  var JsxPro = ReactJSXRuntime__default;
+  var JsxDev = jsxRuntimeDev__default;
+
+  /**
+   * createElement _may_ be called by jsx runtime as a fallback in certain cases,
+   * so we need to wrap it regardless.
+   *
+   * The jsx exports depend on the `NODE_ENV` var to ensure the users' bundler doesn't
+   * include both, so one of them will be set with `undefined` values.
+   */
+  React.createElement = WrapJsx(React.createElement);
+  JsxDev.jsx && ( /*   */JsxDev.jsx = WrapJsx(JsxDev.jsx));
+  JsxPro.jsx && ( /*   */JsxPro.jsx = WrapJsx(JsxPro.jsx));
+  JsxDev.jsxs && ( /*  */JsxDev.jsxs = WrapJsx(JsxDev.jsxs));
+  JsxPro.jsxs && ( /*  */JsxPro.jsxs = WrapJsx(JsxPro.jsxs));
+  JsxDev.jsxDEV && ( /**/JsxDev.jsxDEV = WrapJsx(JsxDev.jsxDEV));
+  JsxPro.jsxDEV && ( /**/JsxPro.jsxDEV = WrapJsx(JsxPro.jsxDEV));
+}
+
+/**
+ * ValEncodedString is a string that is encoded using steganography.
+ *
+ * This means that there is a hidden / non-visible object embedded in the string.
+ * This object includes a path, which is used to automatically tag
+ * where the content comes from for contextual editing.
+ *
+ */
+
+function stegaEncodeVal(val) {
+  if (_typeof(val.val) === "object") {
+    if (Array.isArray(val)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return val.map(stegaEncodeVal);
+    }
+    if (_typeof(val.val) === "object" && val.val && "_type" in val.val && val.val["_type"] === "richtext") {
+      return _objectSpread2(_objectSpread2({}, val.val), {}, {
+        valPath: Internal.getValPath(val)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      });
+    }
+
+    return Object.fromEntries(Object.entries(val).map(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      return [key, stegaEncodeVal(value)];
+    }));
+  }
+  if (typeof val.val === "string") {
+    return vercelStegaCombine(val.val, {
+      origin: "val.build",
+      data: {
+        valPath: Internal.getValPath(val)
+      }
+    }, isDate(val.val) // skip = true if isDate
+    );
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return val.val;
+}
+function isDate(s) {
+  return Boolean(Date.parse(s));
+}
+
+function fetchVal(selector, locale) {
+  return Internal.fetchVal(selector, locale).then(function (val) {
+    return stegaEncodeVal(val);
+  });
+}
+
+function useVal(selector, locale) {
+  return stegaEncodeVal(useVal$1(selector, locale));
+}
+
+export { autoTagJSX, fetchVal, useVal };

package/stega/dist/valbuild-react-stega.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "../../dist/declarations/src/stega/index";
+//# sourceMappingURL=valbuild-react-stega.cjs.d.ts.map

package/stega/dist/valbuild-react-stega.cjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"valbuild-react-stega.cjs.d.ts","sourceRoot":"","sources":["../../dist/declarations/src/stega/index.d.ts"],"names":[],"mappings":"AAAA"}

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

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var slicedToArray = require('../../dist/slicedToArray-b7cf26e0.cjs.dev.js');
+var ReactJSXRuntime = require('react/jsx-runtime');
+var jsxRuntimeDev = require('react/jsx-dev-runtime');
+var React = require('react');
+var stega = require('@vercel/stega');
+var objectSpread2 = require('../../dist/objectSpread2-61fbd9a9.cjs.dev.js');
+var core = require('@valbuild/core');
+var react = require('@valbuild/react');
+require('../../dist/unsupportedIterableToArray-9e97e24a.cjs.dev.js');
+require('../../dist/defineProperty-c82a49b0.cjs.dev.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var ReactJSXRuntime__default = /*#__PURE__*/_interopDefault(ReactJSXRuntime);
+var jsxRuntimeDev__default = /*#__PURE__*/_interopDefault(jsxRuntimeDev);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var isIntrinsicElement = function isIntrinsicElement(type) {
+  // TODO: think this is not correct, but good enough for now?
+  return typeof type === "string";
+};
+var addValPathIfFound = function addValPathIfFound(type, props) {
+  var valSources = [];
+  if (isIntrinsicElement(type) && props && slicedToArray._typeof(props) === "object") {
+    for (var _i = 0, _Object$entries = Object.entries(props); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = slicedToArray._slicedToArray(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+      if (typeof value === "string" && value.match(stega.VERCEL_STEGA_REGEX)) {
+        var encodedBits = stega.vercelStegaDecode(value);
+        if (!encodedBits || slicedToArray._typeof(encodedBits) !== "object") continue;
+        if ("origin" in encodedBits && "data" in encodedBits && slicedToArray._typeof(encodedBits.data) === "object" && encodedBits.data && "valPath" in encodedBits.data) {
+          var _encodedBits$data;
+          var valPath = encodedBits === null || encodedBits === void 0 ? void 0 : (_encodedBits$data = encodedBits.data) === null || _encodedBits$data === void 0 ? void 0 : _encodedBits$data.valPath;
+          if (valPath) {
+            console.log("Found encoded valPath", valPath);
+            valSources.push(valPath);
+            props[key] = stega.vercelStegaSplit(value).cleaned;
+          }
+        }
+      }
+    }
+    if (valSources.length > 0) {
+      props["data-val-path"] = valSources.join(",");
+    }
+  }
+};
+function WrapJsx(jsx) {
+  if (typeof jsx !== "function") return jsx;
+  return function (type, props) {
+    addValPathIfFound(type, props);
+    for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      rest[_key - 2] = arguments[_key];
+    }
+    return jsx.call.apply(jsx, [jsx, type, props].concat(rest));
+  };
+}
+function autoTagJSX() {
+  var JsxPro = ReactJSXRuntime__default["default"];
+  var JsxDev = jsxRuntimeDev__default["default"];
+
+  /**
+   * createElement _may_ be called by jsx runtime as a fallback in certain cases,
+   * so we need to wrap it regardless.
+   *
+   * The jsx exports depend on the `NODE_ENV` var to ensure the users' bundler doesn't
+   * include both, so one of them will be set with `undefined` values.
+   */
+  React__default["default"].createElement = WrapJsx(React__default["default"].createElement);
+  JsxDev.jsx && ( /*   */JsxDev.jsx = WrapJsx(JsxDev.jsx));
+  JsxPro.jsx && ( /*   */JsxPro.jsx = WrapJsx(JsxPro.jsx));
+  JsxDev.jsxs && ( /*  */JsxDev.jsxs = WrapJsx(JsxDev.jsxs));
+  JsxPro.jsxs && ( /*  */JsxPro.jsxs = WrapJsx(JsxPro.jsxs));
+  JsxDev.jsxDEV && ( /**/JsxDev.jsxDEV = WrapJsx(JsxDev.jsxDEV));
+  JsxPro.jsxDEV && ( /**/JsxPro.jsxDEV = WrapJsx(JsxPro.jsxDEV));
+}
+
+/**
+ * ValEncodedString is a string that is encoded using steganography.
+ *
+ * This means that there is a hidden / non-visible object embedded in the string.
+ * This object includes a path, which is used to automatically tag
+ * where the content comes from for contextual editing.
+ *
+ */
+
+function stegaEncodeVal(val) {
+  if (slicedToArray._typeof(val.val) === "object") {
+    if (Array.isArray(val)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return val.map(stegaEncodeVal);
+    }
+    if (slicedToArray._typeof(val.val) === "object" && val.val && "_type" in val.val && val.val["_type"] === "richtext") {
+      return objectSpread2._objectSpread2(objectSpread2._objectSpread2({}, val.val), {}, {
+        valPath: core.Internal.getValPath(val)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      });
+    }
+
+    return Object.fromEntries(Object.entries(val).map(function (_ref) {
+      var _ref2 = slicedToArray._slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      return [key, stegaEncodeVal(value)];
+    }));
+  }
+  if (typeof val.val === "string") {
+    return stega.vercelStegaCombine(val.val, {
+      origin: "val.build",
+      data: {
+        valPath: core.Internal.getValPath(val)
+      }
+    }, isDate(val.val) // skip = true if isDate
+    );
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return val.val;
+}
+function isDate(s) {
+  return Boolean(Date.parse(s));
+}
+
+function fetchVal(selector, locale) {
+  return core.Internal.fetchVal(selector, locale).then(function (val) {
+    return stegaEncodeVal(val);
+  });
+}
+
+function useVal(selector, locale) {
+  return stegaEncodeVal(react.useVal(selector, locale));
+}
+
+exports.autoTagJSX = autoTagJSX;
+exports.fetchVal = fetchVal;
+exports.useVal = useVal;

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

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