@valbuild/react 0.13.4 → 0.15.0

package/dist/declarations/src/index.d.ts

@@ -1,2 +1,3 @@
-export { ValProvider } from "./ValProvider";
-export { useVal } from "./hooks/useVal";
+export { ValProvider } from "./ValProvider.js";
+export { useVal } from "./hooks/useVal.js";
+export { ValRichText } from "./ValRichText.js";

package/dist/declarations/src/jsx-runtime.d.ts

@@ -1 +1 @@
-export { ValJSX as JSX } from "./jsx-namespace";
+export { ValJSX as JSX } from "./jsx-namespace.js";

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

@@ -0,0 +1 @@
+export declare function autoTagJSX(): void;

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

@@ -0,0 +1,3 @@
+import { SelectorSource, SelectorOf, GenericSelector } from "@valbuild/core";
+import { StegaOfSource } from "./stegaEncode.js";
+export declare function fetchVal<T extends SelectorSource>(selector: T, locale?: string): SelectorOf<T> extends GenericSelector<infer S> ? Promise<StegaOfSource<S>> : never;

package/dist/declarations/src/stega/hooks/useVal.d.ts

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

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

@@ -0,0 +1,4 @@
+export { autoTagJSX } from "./autoTagJSX.js";
+export { fetchVal } from "./fetchVal.js";
+export { useVal } from "./hooks/useVal.js";
+export type { ValEncodedString } from "./stegaEncode.js";

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

@@ -0,0 +1,24 @@
+import { Json, Val, RichTextSource, RichText } from "@valbuild/core";
+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 declare function stegaEncodeVal<T extends Json>(val: Val<T>): T;
+export {};

package/dist/defineProperty-12b5bd29.esm.js

@@ -0,0 +1,32 @@
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+export { _defineProperty as _, _toPropertyKey as a };

package/dist/defineProperty-36ed93cd.cjs.prod.js

@@ -0,0 +1,35 @@
+'use strict';
+
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+exports._defineProperty = _defineProperty;
+exports._toPropertyKey = _toPropertyKey;

package/dist/defineProperty-a4bf59bc.worker.esm.js

@@ -0,0 +1,32 @@
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+export { _defineProperty as _, _toPropertyKey as a };

package/dist/defineProperty-c82a49b0.cjs.dev.js

@@ -0,0 +1,35 @@
+'use strict';
+
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+exports._defineProperty = _defineProperty;
+exports._toPropertyKey = _toPropertyKey;

package/dist/defineProperty-f319cb47.browser.esm.js

@@ -0,0 +1,32 @@
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+export { _defineProperty as _, _toPropertyKey as a };

package/dist/objectSpread2-30cc2856.browser.esm.js

@@ -0,0 +1,25 @@
+import { _ as _defineProperty } from './defineProperty-f319cb47.browser.esm.js';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+
+export { _objectSpread2 as _ };

package/dist/objectSpread2-61fbd9a9.cjs.dev.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var defineProperty = require('./defineProperty-c82a49b0.cjs.dev.js');
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      defineProperty._defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+
+exports._objectSpread2 = _objectSpread2;

package/dist/objectSpread2-7b752a35.cjs.prod.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var defineProperty = require('./defineProperty-36ed93cd.cjs.prod.js');
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      defineProperty._defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+
+exports._objectSpread2 = _objectSpread2;

package/dist/objectSpread2-d5a1fe1c.esm.js

@@ -0,0 +1,25 @@
+import { _ as _defineProperty } from './defineProperty-12b5bd29.esm.js';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+
+export { _objectSpread2 as _ };

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

@@ -1,5 +1,8 @@
-export { ValProvider } from './ValProvider-11be7088.browser.esm.js';
+export { ValProvider } from './ValProvider-c677e164.browser.esm.js';
 import { Internal } from '@valbuild/core';
+import { createElement } from 'react';
+import parse from 'style-to-object';
+import { jsx } from 'react/jsx-runtime';
 
 function useVal(selector, locale) {
   // const mod = selectable.getModule();
@@ -23,4 +26,137 @@ function useVal(selector, locale) {
   return Internal.getVal(selector, locale);
 }
 
-export { useVal };
+function ValRichText(_ref) {
+  var children = _ref.children;
+  var root = children;
+  var path = root.valPath;
+  return /*#__PURE__*/jsx("div", {
+    "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
+          }, childPath);
+        case "paragraph":
+          return /*#__PURE__*/jsx(ParagraphNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "list":
+          return /*#__PURE__*/jsx(ListNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown root node type: " + childType);
+      }
+    })
+  });
+}
+function TextNodeComponent(_ref2) {
+  var _parse, _node$format;
+  var node = _ref2.node;
+  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"];
+    delete styleProps["font-family"];
+  }
+  if (styleProps["font-size"]) {
+    styleProps["fontSize"] = styleProps["font-size"];
+    delete styleProps["font-size"];
+  }
+  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)) {
+    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 /*#__PURE__*/jsx("span", {
+    style: styleProps,
+    children: node.text
+  });
+}
+function HeadingNodeComponent(_ref3) {
+  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
+    }, childPath);
+  }));
+}
+function ParagraphNodeComponent(_ref4) {
+  var node = _ref4.node,
+    path = _ref4.path;
+  return /*#__PURE__*/jsx("p", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+function ListNodeComponent(_ref5) {
+  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
+    }, childPath);
+  }));
+}
+function ListItemComponent(_ref6) {
+  var node = _ref6.node,
+    path = _ref6.path;
+  return /*#__PURE__*/jsx("li", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+
+export { ValRichText, useVal };

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

@@ -2,8 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ValProvider = require('./ValProvider-7b9d888e.cjs.dev.js');
+var ValProvider = require('./ValProvider-f647e355.cjs.dev.js');
 var core = require('@valbuild/core');
+var React = require('react');
+var parse = require('style-to-object');
+var ReactJSXRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var parse__default = /*#__PURE__*/_interopDefault(parse);
 
 function useVal(selector, locale) {
   // const mod = selectable.getModule();
@@ -27,8 +34,142 @@ function useVal(selector, locale) {
   return core.Internal.getVal(selector, locale);
 }
 
+function ValRichText(_ref) {
+  var children = _ref.children;
+  var root = children;
+  var path = root.valPath;
+  return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
+    "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__*/ReactJSXRuntime.jsx(HeadingNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "paragraph":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(ParagraphNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        case "list":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(ListNodeComponent, {
+            path: childPath,
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown root node type: " + childType);
+      }
+    })
+  });
+}
+function TextNodeComponent(_ref2) {
+  var _parse, _node$format;
+  var node = _ref2.node;
+  var styleProps = node.style ? (_parse = parse__default["default"](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"];
+    delete styleProps["font-family"];
+  }
+  if (styleProps["font-size"]) {
+    styleProps["fontSize"] = styleProps["font-size"];
+    delete styleProps["font-size"];
+  }
+  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)) {
+    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 /*#__PURE__*/ReactJSXRuntime.jsx("span", {
+    style: styleProps,
+    children: node.text
+  });
+}
+function HeadingNodeComponent(_ref3) {
+  var node = _ref3.node,
+    path = _ref3.path;
+  return /*#__PURE__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
+      node: child
+    }, childPath);
+  }));
+}
+function ParagraphNodeComponent(_ref4) {
+  var node = _ref4.node,
+    path = _ref4.path;
+  return /*#__PURE__*/ReactJSXRuntime.jsx("p", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown paragraph node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+function ListNodeComponent(_ref5) {
+  var node = _ref5.node,
+    path = _ref5.path;
+  return /*#__PURE__*/React.createElement(node.tag, {}, node.children.map(function (child, i) {
+    var childPath = "".concat(path, ".").concat(i);
+    return /*#__PURE__*/ReactJSXRuntime.jsx(ListItemComponent, {
+      path: childPath,
+      node: child
+    }, childPath);
+  }));
+}
+function ListItemComponent(_ref6) {
+  var node = _ref6.node,
+    path = _ref6.path;
+  return /*#__PURE__*/ReactJSXRuntime.jsx("li", {
+    children: node.children.map(function (child, i) {
+      var childPath = "".concat(path, ".").concat(i);
+      switch (child.type) {
+        case "text":
+          return /*#__PURE__*/ReactJSXRuntime.jsx(TextNodeComponent, {
+            node: child
+          }, childPath);
+        default:
+          throw Error("Unknown list item node type: " + (child === null || child === void 0 ? void 0 : child.type));
+      }
+    })
+  });
+}
+
 Object.defineProperty(exports, 'ValProvider', {
   enumerable: true,
   get: function () { return ValProvider.ValProvider; }
 });
+exports.ValRichText = ValRichText;
 exports.useVal = useVal;