payload-live-preview 1.0.0 → 1.0.2

package/dist/core.cjs

@@ -2,7 +2,7 @@
 
 // package.json
 var package_default = {
-  version: "1.0.0"};
+  version: "1.0.2"};
 
 // src/version.ts
 var VERSION = package_default.version;
@@ -338,6 +338,12 @@ var MessageBus = class {
   #handlers;
   #boundListener;
   #attached = false;
+  /**
+   * Tail of the async token-validation chain. Each gated update appends
+   * its validation to this promise, guaranteeing validations resolve —
+   * and updates dispatch — in the order the messages arrived.
+   */
+  #validationChain = Promise.resolve();
   constructor(matcher, handlers) {
     this.#matcher = matcher;
     this.#handlers = handlers;
@@ -394,6 +400,10 @@ var MessageBus = class {
     }
     switch (data.type) {
       case "payload-live-preview":
+        if (!isLivePreviewMessage(data)) {
+          this.#handlers.onInvalid?.("shape", origin);
+          return;
+        }
         this.#dispatchUpdate(data, origin);
         return;
       case "payload-document-event":
@@ -425,15 +435,17 @@ var MessageBus = class {
       else this.#handlers.onInvalid?.("token", origin);
       return;
     }
-    void approved.then(
-      (ok) => {
-        if (ok) this.#handlers.onUpdate(message, origin);
-        else this.#handlers.onInvalid?.("token", origin);
-      },
-      () => {
+    this.#validationChain = this.#validationChain.then(async () => {
+      let ok;
+      try {
+        ok = await approved;
+      } catch {
         this.#handlers.onInvalid?.("token", origin);
+        return;
       }
-    );
+      if (ok) this.#handlers.onUpdate(message, origin);
+      else this.#handlers.onInvalid?.("token", origin);
+    });
   }
 };
 function isObjectMessage(value) {
@@ -441,6 +453,21 @@ function isObjectMessage(value) {
   if (!("type" in value)) return false;
   return typeof value.type === "string";
 }
+function isLivePreviewMessage(value) {
+  const v = value;
+  if (v["data"] !== void 0 && !isPlainObject(v["data"])) return false;
+  if (v["fieldSchemaJSON"] !== void 0 && !Array.isArray(v["fieldSchemaJSON"])) return false;
+  if (v["globalSlug"] !== void 0 && typeof v["globalSlug"] !== "string") return false;
+  if (v["collectionSlug"] !== void 0 && typeof v["collectionSlug"] !== "string") return false;
+  if (v["locale"] !== void 0 && typeof v["locale"] !== "string") return false;
+  if (v["ready"] !== void 0 && typeof v["ready"] !== "boolean") return false;
+  if (v["previewToken"] !== void 0 && typeof v["previewToken"] !== "string") return false;
+  if (v["protocolVersion"] !== void 0 && typeof v["protocolVersion"] !== "number") return false;
+  return true;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 
 // src/core/state.ts
 var DEFAULT_TIMEOUT_MS = 0;
@@ -3172,10 +3199,12 @@ async function runWithTransition(callback) {
 var KEY_ATTRIBUTE = "data-payload-key";
 var NESTED_KEY_ATTRIBUTE = "data-payload-nested-key";
 var NESTED_TEMPLATE_ATTRIBUTE = "data-payload-nested-template";
-var previousItemValues = /* @__PURE__ */ new WeakMap();
+function createStructuralStore() {
+  return /* @__PURE__ */ new WeakMap();
+}
 function applyStructuralPatches(options) {
-  const { template, container, patches } = options;
-  const memory = getMemory(container);
+  const { template, container, patches, store } = options;
+  const memory = getMemory(container, store);
   const removes = [];
   const inserts = [];
   const moves = [];
@@ -3200,7 +3229,7 @@ function applyStructuralPatches(options) {
     const node = container.children[patch.index];
     const replacement = renderItem(template, patch.value, patch.index);
     if (!node || !replacement) continue;
-    populateNestedSlots(replacement, patch.value);
+    populateNestedSlots(replacement, patch.value, store);
     container.replaceChild(replacement, node);
     rememberItem(memory, patch.value);
   }
@@ -3209,7 +3238,7 @@ function applyStructuralPatches(options) {
     const oldNode = container.children[patch.index];
     const newNode = renderItem(template, patch.value, patch.index);
     if (!oldNode || !newNode) continue;
-    reconcileNestedSlots(oldNode, newNode, patch.value, memory);
+    reconcileNestedSlots(oldNode, newNode, patch.value, memory, store);
     container.replaceChild(newNode, oldNode);
     rememberItem(memory, patch.value);
   }
@@ -3219,7 +3248,7 @@ function applyStructuralPatches(options) {
     const before = container.children[patch.index] ?? null;
     const node = renderItem(template, patch.value, patch.index);
     if (!node) continue;
-    populateNestedSlots(node, patch.value);
+    populateNestedSlots(node, patch.value, store);
     container.insertBefore(node, before);
     rememberItem(memory, patch.value);
   }
@@ -3233,7 +3262,7 @@ function applyStructuralPatches(options) {
     container.insertBefore(node, before);
   }
 }
-function populateNestedSlots(item, value) {
+function populateNestedSlots(item, value, store) {
   const slots = item.querySelectorAll(`[${NESTED_KEY_ATTRIBUTE}]`);
   for (const slot of Array.from(slots)) {
     const key = slot.getAttribute(NESTED_KEY_ATTRIBUTE);
@@ -3247,10 +3276,12 @@ function populateNestedSlots(item, value) {
     applyStructuralPatches({
       template: nestedTemplate,
       container: slot,
-      patches});
+      patches,
+      store
+    });
   }
 }
-function reconcileNestedSlots(oldItem, newItem, nextValue, memory) {
+function reconcileNestedSlots(oldItem, newItem, nextValue, memory, store) {
   const oldSlots = oldItem.querySelectorAll(`[${NESTED_KEY_ATTRIBUTE}]`);
   if (oldSlots.length === 0) return;
   const itemKey = readKey(nextValue);
@@ -3270,7 +3301,9 @@ function reconcileNestedSlots(oldItem, newItem, nextValue, memory) {
     applyStructuralPatches({
       template: nestedTemplate,
       container: oldSlot,
-      patches});
+      patches,
+      store
+    });
   }
 }
 function readNestedArray(value, key) {
@@ -3279,11 +3312,11 @@ function readNestedArray(value, key) {
   if (!Array.isArray(nested)) return void 0;
   return nested;
 }
-function getMemory(container) {
-  let map = previousItemValues.get(container);
+function getMemory(container, store) {
+  let map = store.get(container);
   if (!map) {
     map = /* @__PURE__ */ new Map();
-    previousItemValues.set(container, map);
+    store.set(container, map);
   }
   return map;
 }
@@ -3354,44 +3387,48 @@ function escapeRegex2(value) {
 }
 
 // src/field-types/structural-array.ts
-var previousValues = /* @__PURE__ */ new WeakMap();
-var warnedContainers = /* @__PURE__ */ new WeakSet();
-var structuralArrayRenderer = {
-  name: "structural-array",
-  render(target, value) {
-    if (!Array.isArray(value)) return;
-    const container = target.element;
-    const template = target.arrayTemplate;
-    if (template === void 0 || template.length === 0) {
-      warnMissingTemplate(container, target.fieldName);
-      return;
-    }
-    const previous = previousValues.get(container) ?? [];
-    const patches = diffArray(previous, value);
-    if (patches.length === 0) {
+function createStructuralArrayRenderer() {
+  const previousValues = /* @__PURE__ */ new WeakMap();
+  const warnedContainers = /* @__PURE__ */ new WeakSet();
+  const store = createStructuralStore();
+  return {
+    name: "structural-array",
+    render(target, value) {
+      if (!Array.isArray(value)) return;
+      const container = target.element;
+      const template = target.arrayTemplate;
+      if (template === void 0 || template.length === 0) {
+        warnMissingTemplate(warnedContainers, container, target.fieldName);
+        return;
+      }
+      const previous = previousValues.get(container) ?? [];
+      const patches = diffArray(previous, value);
+      if (patches.length === 0) {
+        previousValues.set(container, value.slice());
+        return;
+      }
+      void runWithTransition(() => {
+        applyStructuralPatches({
+          template,
+          container,
+          patches,
+          store
+        });
+      });
       previousValues.set(container, value.slice());
-      return;
     }
-    void runWithTransition(() => {
-      applyStructuralPatches({
-        template,
-        container,
-        patches});
-    });
-    previousValues.set(container, value.slice());
-  }
-};
-function warnMissingTemplate(container, fieldName) {
+  };
+}
+function warnMissingTemplate(warnedContainers, container, fieldName) {
   if (warnedContainers.has(container)) return;
   warnedContainers.add(container);
   console.warn(
     `[live-preview] Skipping structural update for "${fieldName}" \u2014 the <${container.tagName.toLowerCase()}> with data-payload-structural is missing data-payload-array-template. Add an inline template (e.g., data-payload-array-template="<li>{{label}}</li>") so the renderer can materialise new items.`
   );
 }
-registerBuiltinRenderer(structuralArrayRenderer);
 
 // src/field-types/index.ts
-var BUILTIN = [
+var STATELESS_BUILTIN = [
   textRenderer2,
   textareaRenderer,
   richTextRenderer,
@@ -3407,11 +3444,10 @@ var BUILTIN = [
   dateRenderer,
   numberRenderer,
   arrayRenderer,
-  { ...arrayRenderer, name: "blocks" },
-  structuralArrayRenderer
+  { ...arrayRenderer, name: "blocks" }
 ];
 function buildBuiltinRenderers2() {
-  return buildBuiltinRenderers(BUILTIN);
+  return buildBuiltinRenderers([...STATELESS_BUILTIN, createStructuralArrayRenderer()]);
 }
 
 // src/client/index.ts