@valbuild/next 0.13.10 → 0.14.0

package/dist/valbuild-next.esm.js

@@ -1,373 +1,7 @@
-import jsxRuntime, { jsx } from 'react/jsx-runtime';
-import jsxRuntimeDev from 'react/jsx-dev-runtime';
-import React, { createElement } from 'react';
-import { VERCEL_STEGA_REGEX, vercelStegaDecode, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
-import { useVal as useVal$1 } from '@valbuild/react';
-export { ValProvider } from '@valbuild/react';
-import { Internal } from '@valbuild/core';
 export * from '@valbuild/core';
-import parse from 'style-to-object';
+export { ValProvider, ValRichText } from '@valbuild/react';
+import { autoTagJSX } from '@valbuild/react/stega';
+export { fetchVal, useVal } from '@valbuild/react/stega';
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-  if (null != _i) {
-    var _s,
-      _e,
-      _x,
-      _r,
-      _arr = [],
-      _n = !0,
-      _d = !1;
-    try {
-      if (_x = (_i = _i.call(arr)).next, 0 === i) {
-        if (Object(_i) !== _i) return;
-        _n = !1;
-      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-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));
-  };
-}
-var JsxPro = jsxRuntime;
-var JsxDev = 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));
-
-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;
-}
-
-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;
-}
-
-/**
- * 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: "app.val.build",
-      data: {
-        valPath: Internal.getValPath(val)
-      }
-    }); // TODO: skip should false at least for URLs? Dates...?
-  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return val.val;
-}
-
-function useVal(selector, locale) {
-  return stegaEncodeVal(useVal$1(selector, locale));
-}
-
-function fetchVal(selector, locale) {
-  return Internal.fetchVal(selector, locale).then(function (val) {
-    return stegaEncodeVal(val);
-  });
-}
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-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);
-      console.log("'".concat(childType, "', ").concat(childPath));
-      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, fetchVal, useVal };
+// NOTE! Side effects:
+autoTagJSX();

package/package.json

@@ -8,7 +8,7 @@
     "next",
     "react"
   ],
-  "version": "0.13.10",
+  "version": "0.14.0",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
@@ -30,11 +30,9 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "~0.13.4",
-    "@valbuild/react": "~0.13.4",
-    "@valbuild/server": "~0.13.4",
-    "@vercel/stega": "^0.0.5",
-    "style-to-object": "^0.4.1"
+    "@valbuild/core": "~0.14.0",
+    "@valbuild/react": "~0.14.0",
+    "@valbuild/server": "~0.14.0"
   },
   "peerDependencies": {
     "next": ">=12.3.4",

package/src/index.ts

@@ -1,8 +1,14 @@
-import "./autoTagJSX";
+export * from "@valbuild/core";
 
 export { ValProvider } from "@valbuild/react";
-export { useVal } from "./hooks/useVal";
-export { type ValEncodedString } from "./stegaEncode";
-export * from "@valbuild/core";
-export { fetchVal } from "./fetchVal";
-export { ValRichText } from "./ValRichText";
+export { ValRichText } from "@valbuild/react";
+
+export { useVal } from "@valbuild/react/stega";
+export { type ValEncodedString } from "@valbuild/react/stega";
+export { fetchVal } from "@valbuild/react/stega";
+
+// Auto-tag JSX with Val paths:
+import { autoTagJSX } from "@valbuild/react/stega";
+
+// NOTE! Side effects:
+autoTagJSX();

package/tsconfig.json

@@ -12,6 +12,10 @@
     "outDir": "dist",
     "rootDir": "src"
   },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*",
+    "../react/stega/autoTagJSX.ts",
+    "../react/stega/fetchVal.ts"
+  ],
   "exclude": ["dist/**"]
 }

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { RichText } from "@valbuild/core";
-export declare function ValRichText({ children }: {
-    children: RichText;
-}): JSX.Element;

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,3 +0,0 @@
-import { SelectorSource, SelectorOf, GenericSelector } from "@valbuild/core";
-import { StegaOfSource } from "./stegaEncode";
-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/hooks/useVal.d.ts

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

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

@@ -1,24 +0,0 @@
-import { Json, Val, RichTextSource, RichText } from "@valbuild/core";
-import { FileSource, RemoteSource, Source, SourceObject } from "@valbuild/core";
-import { JsonPrimitive } from "@valbuild/core/src/Json";
-import { SourceArray } from "@valbuild/core/src/source";
-import { I18nSource } from "@valbuild/core/src/source/i18n";
-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/src/ValRichText.tsx

@@ -1,179 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-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;
-        console.log(`'${childType}', ${childPath}`);
-        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 as any)?.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 as any)?.type);
-        }
-      })}
-    </li>
-  );
-}