@akinon/pz-theme 2.0.110-rc.0 → 2.0.110

package/src/theme-section.tsx

@@ -42,6 +42,13 @@ export interface Section {
   locked?: boolean;
   dataSourceId?: string;
   dataSource?: any;
+  /**
+   * Sent by the editor, never stored: `true` when publishing now would not
+   * change what this section's widget is bound to, so the widget's live rows
+   * are the right ones to show. Absent while a pick is unsaved, and from an
+   * editor that predates the field. See utils/live-rows.ts.
+   */
+  dataSourceSaved?: boolean;
 }
 
 interface ThemeSectionProps {
@@ -196,12 +203,12 @@ export default function ThemeSection({
   ): Record<string, unknown>[] => {
     if (!effectiveSection.dataSource?.details) return [];
 
-    const isEditorMode = isDesigner && window.parent !== window;
-    const collectionData = isEditorMode
-      ? effectiveSection.dataSource.details.collection?.products ||
-        effectiveSection.dataSource.details.collection?.data
-      : effectiveSection.dataSource.details.collection?.data ||
-        effectiveSection.dataSource.details.collection?.products;
+    // Live rows first in every mode. On the editor canvas the wrapper leaves
+    // `data` in place only for a saved pick, so an unsaved pick still shows
+    // its snapshot (utils/live-rows.ts).
+    const collectionData =
+      effectiveSection.dataSource.details.collection?.data ||
+      effectiveSection.dataSource.details.collection?.products;
 
     if (!collectionData) return [];
 

package/src/utils/iterator-utils.ts

@@ -199,19 +199,17 @@ const getItemBindingTarget = (block: Block): string => {
 };
 
 const getCollectionBindingRoot = (
-  sectionDataSource: any,
-  isDesigner: boolean
+  sectionDataSource: any
 ): Record<string, unknown> | null => {
   if (!sectionDataSource?.details?.collection) {
     return null;
   }
 
-  const isEditorMode =
-    isDesigner && typeof window !== 'undefined' && window.parent !== window;
+  // Live rows first in every mode. On the editor canvas the wrapper leaves
+  // `data` in place only for a saved pick, so an unsaved pick still binds to
+  // its snapshot (utils/live-rows.ts).
   const collection = sectionDataSource.details.collection;
-  const candidates = isEditorMode
-    ? [collection?.products, collection?.data]
-    : [collection?.data, collection?.products];
+  const candidates = [collection?.data, collection?.products];
 
   for (const candidate of candidates) {
     if (Array.isArray(candidate)) {
@@ -248,7 +246,6 @@ const getStaticBindingRoot = (
 const getSectionBindingRoot = ({
   sectionDataSource,
   pageContext,
-  isDesigner = false,
   allowPageContextFallback = false
 }: BindingContext): Record<string, unknown> | null => {
   if (
@@ -258,10 +255,7 @@ const getSectionBindingRoot = ({
     return pageContext;
   }
 
-  const collectionRoot = getCollectionBindingRoot(
-    sectionDataSource,
-    isDesigner
-  );
+  const collectionRoot = getCollectionBindingRoot(sectionDataSource);
   if (collectionRoot) {
     return collectionRoot;
   }
@@ -765,13 +759,11 @@ export const resolveBlockBindings = ({
   block,
   sectionDataSource,
   pageContext,
-  isDesigner = false,
   currency
 }: BindingContext & { block: Block }): Block => {
   const bindingRoot = getSectionBindingRoot({
     sectionDataSource,
     pageContext,
-    isDesigner,
     // Value bindings resolve against the page context when the section has no
     // data source. The iterator lookup deliberately does not — see
     // getSectionBindingRoot.
@@ -852,7 +844,6 @@ const parsePositiveNumber = (value: unknown, fallback: number): number => {
 const getIteratorItems = ({
   sectionDataSource,
   dataPath,
-  isDesigner = false,
   pageContext,
   scopedItems
 }: BindingContext & {
@@ -869,8 +860,7 @@ const getIteratorItems = ({
 
   const bindingRoot = getSectionBindingRoot({
     sectionDataSource,
-    pageContext,
-    isDesigner
+    pageContext
   });
 
   if (!bindingRoot) {
@@ -1642,7 +1632,6 @@ export const buildIteratorBlock = ({
       sectionDataSource,
       pageContext,
       dataPath,
-      isDesigner,
       scopedItems
     });
 

package/src/utils/live-rows.ts

@@ -0,0 +1,226 @@
+import { buildClientRequestUrl } from '@akinon/next/utils';
+
+/**
+ * Live rows on the editor canvas (ZERO-5084).
+ *
+ * A collection-backed section carries two row sets:
+ *
+ * - `details.collection.products` — the SNAPSHOT the editor captured when the
+ *   merchant picked the collection. Never refreshed afterwards.
+ * - `details.collection.data` — the section widget's LIVE answer, which is
+ *   what the storefront renders (see load-placeholder-sections.ts).
+ *
+ * The canvas used to rank the snapshot first, so it drifted from the site as
+ * soon as the collection's contents changed. It now ranks the live rows first
+ * like the storefront does, and this module decides when the canvas may hold
+ * live rows at all: only while the editor reports the section's pick as
+ * saved (`dataSourceSaved`). Until an unsaved pick is published, the section's
+ * widget is still bound to the previous collection, so its live answer would
+ * be the wrong rows — the picked snapshot is shown instead.
+ *
+ * Client-safe: no server-only imports. The server loader imports
+ * `carriesProducts` from here so both sides apply one acceptance rule.
+ */
+
+/** Rows kept per `<sectionId>|<bindingKey>` for the designer canvas. */
+export type LiveRowsStore = Map<string, unknown>;
+
+/**
+ * A widget answer counts as live rows only when it actually carries a
+ * non-empty `products` array: a section with no data source attached answers
+ * without the key at all, and an empty list must never replace the editor's
+ * snapshot with nothing to render.
+ */
+export const carriesProducts = (widgetData: unknown): boolean =>
+  !!widgetData &&
+  typeof widgetData === 'object' &&
+  Array.isArray((widgetData as { products?: unknown }).products) &&
+  (widgetData as { products: unknown[] }).products.length > 0;
+
+const readCollection = (
+  dataSource: unknown
+): Record<string, unknown> | null => {
+  const collection = (
+    dataSource as { details?: { collection?: unknown } } | null | undefined
+  )?.details?.collection;
+
+  return collection && typeof collection === 'object'
+    ? (collection as Record<string, unknown>)
+    : null;
+};
+
+/**
+ * What a section's widget is bound to: the two values publishing writes to it
+ * (`product_collection` and `product_limit`). `null` for a source that is not
+ * a collection, or one with no collection picked yet.
+ */
+export const collectionBindingKey = (dataSource: unknown): string | null => {
+  const collection = readCollection(dataSource);
+  if (!collection) return null;
+
+  const { pk, productLimit } = collection;
+  if (pk === undefined || pk === null || pk === '') return null;
+
+  return `${String(pk)}|${
+    productLimit === undefined || productLimit === null
+      ? ''
+      : String(productLimit)
+  }`;
+};
+
+export const liveRowsEntryKey = (sectionId: string, bindingKey: string) =>
+  `${sectionId}|${bindingKey}`;
+
+export interface LiveRowsRequest {
+  path: string;
+  /**
+   * The section's own widget answers for every section, collection-backed or
+   * not, so its answer is only taken when it carries products. An answer from
+   * the collection's own widget is taken as it is.
+   */
+  requireProducts: boolean;
+}
+
+/**
+ * The endpoints the canvas asks, in the server loader's order
+ * (`resolveSectionDataSource` in load-placeholder-sections.ts):
+ *
+ * 1. `/widgets/<collection.slug>/`, then `/product_collection_widgets/<slug>/`
+ *    — only when the source carries the collection's slug;
+ * 2. `/widgets/<sectionId>/` — the section's own widget.
+ *
+ * If the two orders drift, the canvas and the site pick different answers for
+ * the same section. A parity test pins them together.
+ */
+export const liveRowsPaths = (
+  sectionId: string,
+  collection: { slug?: unknown } | null | undefined
+): LiveRowsRequest[] => {
+  const paths: LiveRowsRequest[] = [];
+  const slug = collection?.slug;
+
+  if (typeof slug === 'string' && slug) {
+    paths.push({ path: `/widgets/${slug}/`, requireProducts: false });
+    paths.push({
+      path: `/product_collection_widgets/${slug}/`,
+      requireProducts: false
+    });
+  }
+
+  if (sectionId) {
+    paths.push({ path: `/widgets/${sectionId}/`, requireProducts: true });
+  }
+
+  return paths;
+};
+
+/**
+ * Fetches a section's live rows from the browser, walking `liveRowsPaths` in
+ * order. Cache-busted, so an answer asked for right after a publish is not a
+ * copy from before it. Resolves `null` when no endpoint gives a usable answer;
+ * never rejects.
+ */
+export const fetchDesignerLiveRows = async (
+  sectionId: string,
+  collection: { slug?: unknown } | null | undefined
+): Promise<unknown | null> => {
+  for (const { path, requireProducts } of liveRowsPaths(
+    sectionId,
+    collection
+  )) {
+    let answer: unknown = null;
+
+    try {
+      const response = await fetch(
+        buildClientRequestUrl(path, { cache: false })
+      );
+      if (response.ok) {
+        answer = await response.json();
+      }
+    } catch {
+      answer = null;
+    }
+
+    if (!answer || typeof answer !== 'object') continue;
+    if (requireProducts && !carriesProducts(answer)) continue;
+
+    return answer;
+  }
+
+  return null;
+};
+
+/**
+ * The live rows the server already wrote into the document, keyed by the
+ * binding the server resolved them for. Seeding from these is what lets a
+ * saved section keep the exact rows the storefront rendered, with no request.
+ */
+export const seedLiveRows = (
+  sections:
+    ReadonlyArray<{ id?: string; dataSource?: unknown }> | null | undefined
+): LiveRowsStore => {
+  const store: LiveRowsStore = new Map();
+
+  (sections || []).forEach((section) => {
+    const data = readCollection(section?.dataSource)?.data;
+    const bindingKey = collectionBindingKey(section?.dataSource);
+
+    if (section?.id && bindingKey && data) {
+      store.set(liveRowsEntryKey(section.id, bindingKey), data);
+    }
+  });
+
+  return store;
+};
+
+/**
+ * The data source the designer canvas renders a section with.
+ *
+ * `raw` is the source record as the editor (or theme-config) holds it. Its
+ * `details.collection.data` is dropped, and live rows are put back only when
+ * the editor reports the section's pick as saved AND rows are held for the
+ * binding the record names now. A late answer for a binding the section has
+ * since left is stored under that binding's key, so it can never be attached
+ * to the new one.
+ *
+ * A record that carries no snapshot keeps the `data` it came with: there is
+ * nothing to protect, and those rows are what the canvas showed before and
+ * what the site shows.
+ */
+export const hangDesignerDataSource = (
+  section: { id?: string; dataSourceSaved?: unknown } | null | undefined,
+  raw: any,
+  liveRows: LiveRowsStore
+): any => {
+  const collection = readCollection(raw);
+  if (!collection) return raw;
+
+  const bindingKey = collectionBindingKey(raw);
+  const rows =
+    section?.dataSourceSaved === true && section.id && bindingKey
+      ? liveRows.get(liveRowsEntryKey(section.id, bindingKey))
+      : undefined;
+
+  if (rows !== undefined) {
+    return {
+      ...raw,
+      details: {
+        ...raw.details,
+        collection: { ...collection, data: rows }
+      }
+    };
+  }
+
+  if (!('data' in collection) || !collection.products) return raw;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { data: _unsavedOrStale, ...snapshotOnly } = collection;
+
+  return {
+    ...raw,
+    details: {
+      ...raw.details,
+      collection: snapshotOnly
+    }
+  };
+};