@valbuild/next 0.101.1 → 0.103.0

package/dist/ValCanvasBridge-f75509c6.cjs.prod.js

@@ -0,0 +1,395 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var slicedToArray = require('./slicedToArray-ce613de6.cjs.prod.js');
+var React = require('react');
+var core = require('@valbuild/core');
+var internal = require('@valbuild/shared/internal');
+var jsxRuntime = require('react/jsx-runtime');
+require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var SELECTION = "#079455";
+var SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+
+/**
+ * How often the page is re-measured even when nothing said it changed.
+ *
+ * A backstop, not the mechanism — the observers below carry the responsive
+ * case. Slow enough to be free, fast enough that a field which appeared late is
+ * in the list before anyone goes looking for it.
+ */
+var RESCAN_INTERVAL_MS = 5000;
+
+/**
+ * The page's half of the canvas protocol.
+ *
+ * Mounted only in the studio's canvas frame. Its job is to tell the studio
+ * where Val's content is on the page, and to do the two things the studio can
+ * ask of a document it cannot touch: outline an element, and treat a click as a
+ * pick rather than as a click.
+ *
+ * Nothing here is visible on the customer's own site — this component is not
+ * mounted there at all.
+ */
+function ValCanvasBridge(_ref) {
+  var draftMode = _ref.draftMode,
+    isRefreshing = _ref.isRefreshing;
+  var _React$useState = React__default["default"].useState(false),
+    _React$useState2 = slicedToArray._slicedToArray(_React$useState, 2),
+    picking = _React$useState2[0],
+    setPicking = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(null),
+    _React$useState4 = slicedToArray._slicedToArray(_React$useState3, 2),
+    highlighted = _React$useState4[0],
+    setHighlighted = _React$useState4[1];
+  // Kept in a ref as well, because the capture-phase click listener below is
+  // installed once and would otherwise close over the first value forever.
+  var pickingRef = React__default["default"].useRef(false);
+  pickingRef.current = picking;
+  var post = React__default["default"].useCallback(function (message) {
+    // `*` as the target origin: the studio and the page share an origin today,
+    // but the frame does not know the parent's origin for certain and naming
+    // the wrong one silently drops the message. Nothing sent here is
+    // sensitive — it is the positions of elements on a page the parent is
+    // already displaying.
+    window.parent.postMessage(message, "*");
+  }, []);
+
+  /**
+   * The last payload posted, as a string.
+   *
+   * The periodic scan below runs whether or not anything moved, and an
+   * unchanged payload costs the studio a re-render of the fields column for
+   * nothing. Compared as a string because the comparison has to be by value —
+   * every scan builds fresh objects.
+   */
+  var lastPosted = React__default["default"].useRef(null);
+
+  /** Every element Val tagged, with where it is on the page. */
+  var scan = React__default["default"].useCallback(function () {
+    var elements = [];
+    var scrollX = window.scrollX;
+    var scrollY = window.scrollY;
+    document.querySelectorAll("[data-val-path]").forEach(function (el) {
+      if (!(el instanceof HTMLElement) && !(el instanceof SVGElement)) return;
+      var attribute = el.getAttribute("data-val-path");
+      if (!attribute) return;
+      /**
+       * A `<source>` has no box of its own, so its `<video>`/`<picture>` parent
+       * is measured instead — the same substitution the overlay makes, and for
+       * the same reason: an element with a zero-size rect cannot be pointed at.
+       */
+      var measured = el;
+      if (el.tagName === "SOURCE") {
+        var parent = el.parentElement;
+        if (parent && (parent.tagName === "VIDEO" || parent.tagName === "PICTURE")) {
+          measured = parent;
+        }
+      }
+      var rect = measured.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) return;
+      elements.push({
+        // Split by the same helper the rest of Val uses, so the studio gets
+        // the paths back in exactly the form it holds them in.
+        paths: core.Internal.splitJoinedSourcePaths(attribute),
+        // Page coordinates, not viewport: the studio scales and offsets the
+        // whole document, so a viewport-relative box would be wrong the moment
+        // the frame scrolled.
+        rect: {
+          top: rect.top + scrollY,
+          left: rect.left + scrollX,
+          width: rect.width,
+          height: rect.height
+        }
+      });
+    });
+    var message = {
+      val: internal.VAL_CANVAS_MESSAGE,
+      type: "elements",
+      elements: elements,
+      pageSize: {
+        width: document.documentElement.scrollWidth,
+        height: document.documentElement.scrollHeight
+      }
+    };
+    var serialized = JSON.stringify(message);
+    if (serialized === lastPosted.current) {
+      return;
+    }
+    lastPosted.current = serialized;
+    post(message);
+  }, [post]);
+
+  // Relayed as it changes, not polled: the studio only has to know the two
+  // edges, and a message per render would be a message per keystroke.
+  React__default["default"].useEffect(function () {
+    post({
+      val: internal.VAL_CANVAS_MESSAGE,
+      type: "refreshing",
+      pending: isRefreshing === true
+    });
+  }, [post, isRefreshing]);
+
+  // Announce the frame, and say whether it is actually showing draft content.
+  React__default["default"].useEffect(function () {
+    post({
+      val: internal.VAL_CANVAS_MESSAGE,
+      type: "ready",
+      draftMode: draftMode,
+      url: window.location.href
+    });
+  }, [post, draftMode]);
+
+  /**
+   * Re-scan whenever the page could have moved.
+   *
+   * Coalesced into one animation frame: a layout change fires mutation,
+   * resize and scroll events together, and scanning three times produces three
+   * identical messages.
+   */
+  React__default["default"].useEffect(function () {
+    var frame = null;
+    var schedule = function schedule() {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(function () {
+        frame = null;
+        scan();
+      });
+    };
+    schedule();
+    var mutations = new MutationObserver(schedule);
+    mutations.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["data-val-path", "class", "style"]
+    });
+    var resizes = new ResizeObserver(schedule);
+    resizes.observe(document.documentElement);
+    window.addEventListener("scroll", schedule, {
+      passive: true
+    });
+    window.addEventListener("resize", schedule);
+    // Images and fonts land after the first paint and move everything below
+    // them, so the boxes measured before `load` are stale by definition.
+    window.addEventListener("load", schedule);
+    return function () {
+      if (frame !== null) cancelAnimationFrame(frame);
+      mutations.disconnect();
+      resizes.disconnect();
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("load", schedule);
+    };
+  }, [scan]);
+
+  /**
+   * And re-scan every few seconds regardless.
+   *
+   * The event-driven scan above is not enough in practice, and the way it fails
+   * is confusing rather than obviously broken: the fields column shows some of
+   * what is on the page and not the rest, until you happen to edit one of the
+   * missing ones and they appear. Anything that tags content after the observers
+   * are set up but produces no mutation they watch — a streamed-in server
+   * component, an element that measured zero because its image had not decoded,
+   * content revealed by something outside `data-val-path`, `class` and `style` —
+   * is invisible until the next unrelated change. A slow poll costs nothing and
+   * closes all of those at once, without having to guess which one it was.
+   *
+   * Idle-scheduled, and never on the frame's critical path. A scan is a
+   * `querySelectorAll` plus a forced layout per tagged element, which is exactly
+   * the kind of work that should wait for a gap rather than take one — and this
+   * runs inside the customer's own page, where Val is a guest. Skipped entirely
+   * while the frame is hidden, where the boxes cannot have moved and nobody is
+   * looking at them.
+   */
+  React__default["default"].useEffect(function () {
+    var idle = null;
+    var runWhenIdle = function runWhenIdle() {
+      if (document.hidden || idle !== null) return;
+      // `requestIdleCallback` where it exists, a timeout where it does not
+      // (Safari). The timeout option matters: without it a busy page can defer
+      // an idle callback indefinitely, which is the one outcome worse than
+      // scanning at a bad moment.
+      if (typeof window.requestIdleCallback === "function") {
+        idle = window.requestIdleCallback(function () {
+          idle = null;
+          scan();
+        }, {
+          timeout: 1000
+        });
+      } else {
+        idle = window.setTimeout(function () {
+          idle = null;
+          scan();
+        }, 0);
+      }
+    };
+    var interval = window.setInterval(runWhenIdle, RESCAN_INTERVAL_MS);
+    return function () {
+      window.clearInterval(interval);
+      if (idle === null) return;
+      if (typeof window.cancelIdleCallback === "function") {
+        window.cancelIdleCallback(idle);
+      } else {
+        window.clearTimeout(idle);
+      }
+    };
+  }, [scan]);
+
+  // What the studio asks for.
+  React__default["default"].useEffect(function () {
+    var listener = function listener(event) {
+      if (!internal.isValCanvasStudioMessage(event.data)) return;
+      var message = event.data;
+      if (message.type === "rescan") {
+        scan();
+        return;
+      }
+      if (message.type === "setPicking") {
+        setPicking(message.picking);
+        return;
+      }
+      if (message.type === "sourceUpdate") {
+        /**
+         * Handed straight to the listener the page already has.
+         *
+         * `ValNextProvider` listens for this event on its own window to make an
+         * inline edit visible behind the overlay; the only thing different here
+         * is that the edit was made in another window. Re-dispatching rather
+         * than reaching into the store keeps one path into the page — including
+         * the `router.refresh()` it throttles behind it, which is what brings a
+         * server component's own re-read across.
+         */
+        window.dispatchEvent(new CustomEvent("val-event", {
+          detail: {
+            type: "source-update",
+            moduleFilePath: message.moduleFilePath,
+            source: message.source
+          }
+        }));
+        return;
+      }
+      if (message.type === "sourcesSynced") {
+        // Relayed the same way and for the same reason as `sourceUpdate`: the
+        // page is listening on its own window, and the studio is in another.
+        window.dispatchEvent(new CustomEvent("val-event", {
+          detail: {
+            type: "sources-synced"
+          }
+        }));
+        return;
+      }
+      setHighlighted(message.path);
+      if (message.path !== null && message.scrollIntoView) {
+        var target = findByPath(message.path);
+        target === null || target === void 0 || target.scrollIntoView({
+          block: "center",
+          behavior: "smooth"
+        });
+      }
+    };
+    window.addEventListener("message", listener);
+    return function () {
+      return window.removeEventListener("message", listener);
+    };
+  }, [scan]);
+
+  /**
+   * Picking.
+   *
+   * Capture phase, and the event is stopped: the point of picking mode is that
+   * a click means "this one" rather than what the page would do with it, and a
+   * link that navigates has taken the canvas somewhere else before the studio
+   * hears anything.
+   */
+  React__default["default"].useEffect(function () {
+    var onClick = function onClick(event) {
+      if (!pickingRef.current) return;
+      var target = event.target;
+      if (!(target instanceof Element)) return;
+      var tagged = target.closest("[data-val-path]");
+      var attribute = tagged === null || tagged === void 0 ? void 0 : tagged.getAttribute("data-val-path");
+      if (!attribute) return;
+      event.preventDefault();
+      event.stopPropagation();
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "clicked",
+        paths: core.Internal.splitJoinedSourcePaths(attribute)
+      });
+    };
+    document.addEventListener("click", onClick, {
+      capture: true
+    });
+    return function () {
+      return document.removeEventListener("click", onClick, {
+        capture: true
+      });
+    };
+  }, [post]);
+
+  /**
+   * The outlines, as a stylesheet rather than as injected elements.
+   *
+   * A style rule cannot disturb the page's layout, which an absolutely
+   * positioned box on top of it eventually would — and the whole value of
+   * showing the real page is that it is laid out the way the customer built
+   * it. `outline` rather than `border` for the same reason: outlines do not
+   * take up space.
+   */
+  return /*#__PURE__*/jsxRuntime.jsx("style", {
+    // The attribute selector is built from the path, so it is escaped as a
+    // CSS string. A path contains quotes (`?p="/"`) and would otherwise
+    // close the selector early.
+    dangerouslySetInnerHTML: {
+      __html: [picking ? "[data-val-path] { outline: 1px solid ".concat(SELECTION_SOFT, "; outline-offset: 1px; cursor: pointer; }\n[data-val-path]:hover { outline: 2px solid ").concat(SELECTION, "; }") : "", highlighted ? highlightRule(highlighted) : ""].filter(Boolean).join("\n")
+    }
+  });
+}
+
+/**
+ * A rule that outlines exactly the elements carrying `path`.
+ *
+ * The attribute holds a comma-separated list, so this cannot be one `=`
+ * comparison; and it cannot be a `*=` substring test either, because a path is
+ * a prefix of every path below it. `?p="/blogs/blog1"` is contained in
+ * `?p="/blogs/blog1"."title"`, so a substring test on the route would outline
+ * every field on the page — which is what it did.
+ *
+ * Four selectors instead: the whole attribute, the first item, the last item,
+ * and one in the middle. Between them they match the path as a complete list
+ * item and nothing else.
+ */
+function highlightRule(path) {
+  var value = JSON.stringify(path);
+  var inner = JSON.stringify(",".concat(path, ","));
+  var first = JSON.stringify("".concat(path, ","));
+  var last = JSON.stringify(",".concat(path));
+  var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
+  return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
+}
+function findByPath(path) {
+  var elements = document.querySelectorAll("[data-val-path]");
+  for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {
+    var el = _Array$from[_i];
+    var attribute = el.getAttribute("data-val-path");
+    if (!attribute) continue;
+    // Compared as strings: the split returns branded `SourcePath`s and what
+    // came back over `postMessage` is a plain string, which is the same value.
+    if (core.Internal.splitJoinedSourcePaths(attribute).some(function (candidate) {
+      return candidate === path;
+    })) {
+      return el;
+    }
+  }
+  return null;
+}
+
+exports.ValCanvasBridge = ValCanvasBridge;