@valbuild/shared 0.123.0 → 0.123.2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @valbuild/shared
 
+## 0.123.2
+
+### Patch Changes
+
+- [#629](https://github.com/valbuild/val/pull/629) [`04b6d4c`](https://github.com/valbuild/val/commit/04b6d4cbbecc131bbaf3c20633af9dad8c857310) Thanks [@freekh](https://github.com/freekh)! - Stop shipping zod to every visitor of a Val site (~113 KB)
+
+  `@valbuild/next`'s client code needed five things from
+  `@valbuild/shared/internal`, three of which are string constants like
+  `VAL_THEME_SESSION_STORAGE_KEY`. But preconstruct publishes each entrypoint as
+  a single bundled module, so importing a string constant pulled in the whole
+  entrypoint — including `ApiRoutes.ts` and its zod schemas. Measured on
+  val.build, that was 113 KB of zod in the initial JS of every page, for
+  visitors who never open the Studio.
+
+  Two changes:
+
+  - New `@valbuild/shared/client` entrypoint carrying the parts that are safe in
+    a browser bundle: the session-storage keys, the canvas protocol, and the
+    route-pattern helpers. Nothing reachable from it may import zod, and
+    `noZodInClientEntrypoint.test.ts` walks the source graph to enforce that —
+    one careless re-export would silently put the 113 KB back.
+  - `ValNextProvider` now imports `createValClient` on first use rather than at
+    module scope. It genuinely needs zod (it `safeParse`s every request and
+    response), but its only caller is the draft-mode poll, which returns early
+    unless the overlay is mounted. A visitor without the Val Enable cookie never
+    triggers the import.
+
+  No API change. `@valbuild/shared/internal` still exports everything it did.
+
 ## 0.123.0
 
 ### Minor Changes

package/client/dist/valbuild-shared-client.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "../../dist/declarations/src/client/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsYnVpbGQtc2hhcmVkLWNsaWVudC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL2Rpc3QvZGVjbGFyYXRpb25zL3NyYy9jbGllbnQvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/client/dist/valbuild-shared-client.cjs.dev.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getSitemapTree = require('../../dist/getSitemapTree-a0c9a0e3.cjs.dev.js');
+require('@valbuild/core');
+
+
+
+exports.VAL_AI_SESSION_STORAGE_KEY = getSitemapTree.VAL_AI_SESSION_STORAGE_KEY;
+exports.VAL_CANVAS_MESSAGE = getSitemapTree.VAL_CANVAS_MESSAGE;
+exports.VAL_CANVAS_PARAM = getSitemapTree.VAL_CANVAS_PARAM;
+exports.VAL_CONFIG_SESSION_STORAGE_KEY = getSitemapTree.VAL_CONFIG_SESSION_STORAGE_KEY;
+exports.VAL_THEME_SESSION_STORAGE_KEY = getSitemapTree.VAL_THEME_SESSION_STORAGE_KEY;
+exports.getNextAppRouterSitemapTree = getSitemapTree.getNextAppRouterSitemapTree;
+exports.getNextAppRouterSourceFolder = getSitemapTree.getNextAppRouterSourceFolder;
+exports.getPatternFromModuleFilePath = getSitemapTree.getPatternFromModuleFilePath;
+exports.isValCanvasFrame = getSitemapTree.isValCanvasFrame;
+exports.isValCanvasPageMessage = getSitemapTree.isValCanvasPageMessage;
+exports.isValCanvasStudioMessage = getSitemapTree.isValCanvasStudioMessage;
+exports.parseRoutePattern = getSitemapTree.parseRoutePattern;
+exports.withValCanvasParam = getSitemapTree.withValCanvasParam;

package/client/dist/valbuild-shared-client.cjs.js

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

package/client/dist/valbuild-shared-client.cjs.prod.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getSitemapTree = require('../../dist/getSitemapTree-77b1203a.cjs.prod.js');
+require('@valbuild/core');
+
+
+
+exports.VAL_AI_SESSION_STORAGE_KEY = getSitemapTree.VAL_AI_SESSION_STORAGE_KEY;
+exports.VAL_CANVAS_MESSAGE = getSitemapTree.VAL_CANVAS_MESSAGE;
+exports.VAL_CANVAS_PARAM = getSitemapTree.VAL_CANVAS_PARAM;
+exports.VAL_CONFIG_SESSION_STORAGE_KEY = getSitemapTree.VAL_CONFIG_SESSION_STORAGE_KEY;
+exports.VAL_THEME_SESSION_STORAGE_KEY = getSitemapTree.VAL_THEME_SESSION_STORAGE_KEY;
+exports.getNextAppRouterSitemapTree = getSitemapTree.getNextAppRouterSitemapTree;
+exports.getNextAppRouterSourceFolder = getSitemapTree.getNextAppRouterSourceFolder;
+exports.getPatternFromModuleFilePath = getSitemapTree.getPatternFromModuleFilePath;
+exports.isValCanvasFrame = getSitemapTree.isValCanvasFrame;
+exports.isValCanvasPageMessage = getSitemapTree.isValCanvasPageMessage;
+exports.isValCanvasStudioMessage = getSitemapTree.isValCanvasStudioMessage;
+exports.parseRoutePattern = getSitemapTree.parseRoutePattern;
+exports.withValCanvasParam = getSitemapTree.withValCanvasParam;

package/client/dist/valbuild-shared-client.esm.js

@@ -0,0 +1,2 @@
+export { b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, h as getNextAppRouterSitemapTree, g as getNextAppRouterSourceFolder, j as getPatternFromModuleFilePath, f as isValCanvasFrame, i as isValCanvasPageMessage, e as isValCanvasStudioMessage, p as parseRoutePattern, w as withValCanvasParam } from '../../dist/getSitemapTree-d3e98a2e.esm.js';
+import '@valbuild/core';

package/client/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "dist/valbuild-shared-client.cjs.js",
+  "module": "dist/valbuild-shared-client.esm.js"
+}

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

@@ -0,0 +1,21 @@
+/**
+ * The part of `@valbuild/shared/internal` that is safe to put in a browser
+ * bundle.
+ *
+ * `@valbuild/shared/internal` is a single preconstruct entrypoint, so
+ * preconstruct publishes it as ONE module: importing a string constant from it
+ * pulls in everything else, and everything else includes `ApiRoutes.ts`, whose
+ * zod schemas cost ~113 KB minified. `@valbuild/next`'s client code needs five
+ * things from that entrypoint, three of which are string constants, so every
+ * production visitor to a Val site was paying for zod to read
+ * `VAL_THEME_SESSION_STORAGE_KEY`.
+ *
+ * Nothing re-exported here may import zod, directly or transitively. The
+ * `noZodInClientEntrypoint.test.ts` beside this file is what enforces that -
+ * a single new re-export can silently put 113 KB back.
+ */
+export * from "../internal/sessionStorage.js";
+export * from "../internal/valCanvasProtocol.js";
+export * from "../internal/parseRoutePattern.js";
+export * from "../internal/getNextAppRouterSourceFolder.js";
+export * from "../internal/getSitemapTree.js";

package/dist/getSitemapTree-77b1203a.cjs.prod.js

@@ -0,0 +1,389 @@
+'use strict';
+
+var core = require('@valbuild/core');
+
+var VAL_CONFIG_SESSION_STORAGE_KEY = "val-config";
+var VAL_THEME_SESSION_STORAGE_KEY = "val-theme";
+var VAL_AI_SESSION_STORAGE_KEY = "val-ai-session";
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+/**
+ * The protocol between the studio's canvas and the page inside it.
+ *
+ * The canvas shows the running site in a frame. That frame is a different
+ * document — the customer's app, rendered by their components — so the studio
+ * cannot reach into it, and it cannot reach out. Everything they say to each
+ * other goes through `postMessage`, and this is the vocabulary.
+ *
+ * It lives in `shared` because both halves have to agree on it: the page half
+ * ships in `@valbuild/next`, the studio half in `@valbuild/ui`, and a message
+ * shape defined twice is a message shape that will differ once.
+ *
+ * ## Why a query parameter turns it on
+ *
+ * The frame has to render the page as Val sees it — draft content, with
+ * `data-val-path` on every element Val tracks — while *not* showing Val's own
+ * overlay, because the studio is already the UI. Nothing about the cookies can
+ * express that: they are per-origin, and the studio and the page share an
+ * origin, so a cookie would change the customer's own tabs too. A parameter on
+ * the frame's URL is scoped to exactly the one document that needs it.
+ */
+
+/** Marks a page load as the studio's canvas frame. */
+var VAL_CANVAS_PARAM = "val_canvas";
+
+/**
+ * Every message is tagged with this, and the tag is checked on receipt.
+ *
+ * A window receives messages from anything that has a handle on it —
+ * extensions, embeds, other frames — and `event.data` is whatever they chose to
+ * send. Checking a discriminator before reading anything else is what keeps a
+ * stray message from being read as a canvas instruction.
+ */
+var VAL_CANVAS_MESSAGE = "val-canvas";
+
+/** One element on the page that Val has a path for. */
+
+/** What the page tells the studio. */
+
+/** What the studio tells the page. */
+
+/** Narrow an unknown `event.data` to a message from the page. */
+function isValCanvasPageMessage(data) {
+  if (_typeof(data) !== "object" || data === null) return false;
+  var message = data;
+  if (message.val !== VAL_CANVAS_MESSAGE) return false;
+  return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing";
+}
+
+/** Narrow an unknown `event.data` to a message from the studio. */
+function isValCanvasStudioMessage(data) {
+  if (_typeof(data) !== "object" || data === null) return false;
+  var message = data;
+  if (message.val !== VAL_CANVAS_MESSAGE) return false;
+  return message.type === "rescan" || message.type === "highlight" || message.type === "setPicking" || message.type === "sourceUpdate" || message.type === "sourcesSynced";
+}
+
+/**
+ * Whether this document was loaded as the studio's canvas frame.
+ *
+ * Reads the location directly rather than taking it as an argument, because
+ * every caller wants the answer for the document it is running in, and passing
+ * it around is how one of them ends up asking about the wrong one.
+ */
+function isValCanvasFrame(search) {
+  try {
+    return new URLSearchParams(search).get(VAL_CANVAS_PARAM) !== null;
+  } catch (_unused) {
+    return false;
+  }
+}
+
+/** Add the canvas marker to a page URL. */
+function withValCanvasParam(url) {
+  var separator = url.includes("?") ? "&" : "?";
+  return "".concat(url).concat(separator).concat(VAL_CANVAS_PARAM, "=1");
+}
+
+function parseRoutePattern(pattern) {
+  if (pattern === "" || pattern === "/") {
+    return [];
+  }
+  var p = pattern.startsWith("/") ? pattern.slice(1) : pattern;
+  return p.split("/").map(function (part) {
+    var isOptionalParam = part.startsWith("[[") && part.endsWith("]]");
+    var isNonOptionalParam = part.startsWith("[") && part.endsWith("]");
+    var nameStart = isOptionalParam ? 2 : isNonOptionalParam ? 1 : 0;
+    var nameEnd = part.indexOf("]", nameStart);
+    var isArrayParam = part.slice(nameStart, nameStart + 3) === "...";
+    var paramName = part.slice(nameStart + (isArrayParam ? 3 : 0), nameEnd);
+    if (isOptionalParam || isNonOptionalParam) {
+      if (isArrayParam) {
+        return {
+          type: "array-param",
+          paramName: paramName,
+          optional: isOptionalParam
+        };
+      } else {
+        return {
+          type: "string-param",
+          paramName: paramName,
+          optional: isOptionalParam
+        };
+      }
+    }
+    return {
+      type: "literal",
+      name: part
+    };
+  });
+}
+
+function getNextAppRouterSourceFolder(moduleFilePath) {
+  if (moduleFilePath.startsWith("/app")) {
+    return "/app";
+  } else if (moduleFilePath.startsWith("/src/app")) {
+    return "/src/app";
+  }
+  return null;
+}
+
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function _createForOfIteratorHelper(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (!t) {
+    if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+      t && (r = t);
+      var n = 0,
+        F = function () {};
+      return {
+        s: F,
+        n: function () {
+          return n >= r.length ? {
+            done: !0
+          } : {
+            done: !1,
+            value: r[n++]
+          };
+        },
+        e: function (r) {
+          throw r;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var o,
+    a = !0,
+    u = !1;
+  return {
+    s: function () {
+      t = t.call(r);
+    },
+    n: function () {
+      var r = t.next();
+      return a = r.done, r;
+    },
+    e: function (r) {
+      u = !0, o = r;
+    },
+    f: function () {
+      try {
+        a || null == t.return || t.return();
+      } finally {
+        if (u) throw o;
+      }
+    }
+  };
+}
+
+// Strictly speaking this should be in the next package but it's shared, because we want to use it in the ui package. We want to resolve that somehow
+function getNextAppRouterSitemapTree(srcFolder, paths) {
+  var root = {
+    type: "node",
+    name: "/",
+    children: []
+  };
+  var _iterator = _createForOfIteratorHelper(paths),
+    _step;
+  try {
+    var _loop = function _loop() {
+        var path = _step.value;
+        var urlPath = path.urlPath,
+          moduleFilePathS = path.moduleFilePath;
+        var moduleFilePath = moduleFilePathS;
+        if (!urlPath.startsWith("/")) {
+          console.error("urlPath must start with /: ".concat(urlPath));
+          return 0; // continue
+        }
+        var pattern = getPatternFromModuleFilePath(moduleFilePath, srcFolder);
+        if (urlPath === "/") {
+          var fullPath = "/";
+          root.pattern = getPatternFromModuleFilePath(moduleFilePath, srcFolder);
+          root.page = {
+            fullPath: fullPath
+          };
+          root.sourcePath = core.Internal.joinModuleFilePathAndModulePath(moduleFilePath, "\"".concat(fullPath, "\""));
+          root.moduleFilePath = moduleFilePath;
+          return 0; // continue
+        }
+        var pathParts = urlPath.split("/").slice(1).filter(Boolean);
+        var currentNode = root;
+        pathParts.forEach(function (part, index) {
+          var hasChildren = index < pathParts.length - 1;
+          var isLast = index === pathParts.length - 1;
+          var fullPath = "/" + pathParts.slice(0, index + 1).join("/");
+          var sourcePath = core.Internal.joinModuleFilePathAndModulePath(moduleFilePath, "\"".concat(fullPath, "\""));
+          var node = hasChildren ? _objectSpread2(_objectSpread2({
+            type: "node",
+            name: part,
+            pattern: pattern,
+            moduleFilePath: moduleFilePath
+          }, isLast ? {
+            page: {
+              fullPath: fullPath
+            },
+            sourcePath: sourcePath
+          } : {}), {}, {
+            children: []
+          }) : {
+            type: "leaf",
+            name: part,
+            pattern: pattern,
+            fullPath: fullPath,
+            moduleFilePath: moduleFilePath,
+            sourcePath: sourcePath,
+            children: []
+          };
+          var existingNodeIndex = currentNode.children.findIndex(function (node) {
+            return node.name === part;
+          });
+          if (existingNodeIndex === -1) {
+            currentNode.children.push(node);
+            if (currentNode.type === "node") {
+              currentNode.isLinear = true;
+              if (currentNode.children.length > 1) {
+                delete currentNode.isLinear;
+              }
+            }
+            currentNode = node;
+          } else {
+            var existingNode = currentNode.children[existingNodeIndex];
+            if (existingNode.type === "leaf" && hasChildren) {
+              var _sourcePath = existingNode.sourcePath;
+              // convert leaf to node
+              currentNode.children[existingNodeIndex] = {
+                type: "node",
+                name: part,
+                pattern: pattern,
+                page: {
+                  fullPath: fullPath
+                },
+                sourcePath: _sourcePath,
+                children: existingNode.children,
+                moduleFilePath: moduleFilePath
+              };
+              currentNode = currentNode.children[existingNodeIndex];
+            } else if (existingNode.type === "node" && isLast) {
+              // add page, source path and module file path
+              existingNode.page = {
+                fullPath: fullPath
+              };
+              existingNode.sourcePath = sourcePath;
+              existingNode.moduleFilePath = moduleFilePath;
+              existingNode.pattern = pattern;
+            } else {
+              currentNode = currentNode.children[existingNodeIndex];
+            }
+          }
+        });
+      },
+      _ret;
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _ret = _loop();
+      if (_ret === 0) continue;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return root;
+}
+function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
+  return moduleFilePath.replace(srcFolder, "")
+  // TODO: hacky!
+  // remove route groups
+  .replace(/\/\([^/]+\)/g, "") // not sure we want to do this?
+  .replace("/page.val.ts", "").replace("/page.val.js", "");
+}
+
+exports.VAL_AI_SESSION_STORAGE_KEY = VAL_AI_SESSION_STORAGE_KEY;
+exports.VAL_CANVAS_MESSAGE = VAL_CANVAS_MESSAGE;
+exports.VAL_CANVAS_PARAM = VAL_CANVAS_PARAM;
+exports.VAL_CONFIG_SESSION_STORAGE_KEY = VAL_CONFIG_SESSION_STORAGE_KEY;
+exports.VAL_THEME_SESSION_STORAGE_KEY = VAL_THEME_SESSION_STORAGE_KEY;
+exports._arrayLikeToArray = _arrayLikeToArray;
+exports._createForOfIteratorHelper = _createForOfIteratorHelper;
+exports._defineProperty = _defineProperty;
+exports._objectSpread2 = _objectSpread2;
+exports._typeof = _typeof;
+exports._unsupportedIterableToArray = _unsupportedIterableToArray;
+exports.getNextAppRouterSitemapTree = getNextAppRouterSitemapTree;
+exports.getNextAppRouterSourceFolder = getNextAppRouterSourceFolder;
+exports.getPatternFromModuleFilePath = getPatternFromModuleFilePath;
+exports.isValCanvasFrame = isValCanvasFrame;
+exports.isValCanvasPageMessage = isValCanvasPageMessage;
+exports.isValCanvasStudioMessage = isValCanvasStudioMessage;
+exports.parseRoutePattern = parseRoutePattern;
+exports.withValCanvasParam = withValCanvasParam;