@weaverse/next 0.1.0-alpha.8 → 0.1.0-alpha.9

package/dist/index.mjs

@@ -5,9 +5,27 @@ export { isBrowser, isIframe, useChildInstances, useItemInstance, useParentInsta
 import { createSchema } from '@weaverse/schema';
 export { createSchema } from '@weaverse/schema';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createContext, memo, useContext, useMemo, useRef, useEffect, useSyncExternalStore } from 'react';
+import { createContext, memo, useContext, useMemo, useEffect, useLayoutEffect, useRef, useSyncExternalStore } from 'react';
 import { useRouter } from 'next/navigation';
 
+function flattenItemData(update) {
+  let { data, ...rest } = update;
+  if (!(data && typeof data === "object" && !Array.isArray(data))) {
+    return rest;
+  }
+  return { ...data, ...rest };
+}
+var deferredItemUpdates = null;
+function collectDeferredItemUpdates(create) {
+  let previousQueue = deferredItemUpdates;
+  let queue = /* @__PURE__ */ new Set();
+  deferredItemUpdates = queue;
+  try {
+    return [create(), [...queue]];
+  } finally {
+    deferredItemUpdates = previousQueue;
+  }
+}
 var WeaverseNextItem = class extends WeaverseItemStore {
   /**
    * Cached merged snapshot (base `_store` + translations). Reset whenever the
@@ -19,10 +37,28 @@ var WeaverseNextItem = class extends WeaverseItemStore {
   _snapshotTranslationRef = null;
   constructor(initialData, weaverse) {
     super(initialData, weaverse);
-    let { data, ...rest } = initialData;
     let schemaData = generateDataFromSchema(this.Element?.schema);
-    Object.assign(this._store, schemaData, data, rest);
+    Object.assign(this._store, schemaData, flattenItemData(initialData));
   }
+  /**
+   * Flatten nested `data` on updates exactly like the constructor does. Core's
+   * `initProject()` calls `setData(item)` when a new runtime serves a page
+   * whose item instances already exist (e.g. locale/client navigation), and
+   * the inherited shallow merge would leave stale top-level props behind.
+   * Assigning through the inherited `data` setter swaps the `_store` ref,
+   * which invalidates the memoized snapshot below. The subscriber emit is
+   * queued instead of fired when a render-phase deferral is active (see
+   * `collectDeferredItemUpdates`).
+   */
+  setData = (update) => {
+    this.data = flattenItemData(update);
+    if (deferredItemUpdates) {
+      deferredItemUpdates.add(this);
+    } else {
+      this.triggerUpdate();
+    }
+    return this.data;
+  };
   /**
    * Overlay item-level translations onto the base store when the runtime is in
    * translation mode. Mirrors Hydrogen's `WeaverseHydrogenItem.getSnapShot()`:
@@ -518,6 +554,22 @@ var WeaverseNextRuntime = class extends Weaverse {
   translationMap = {};
   translationLocale = String();
   translationLanguageId = String();
+  /**
+   * Fresh page data captured while React was rendering. Runtime reuse happens
+   * inside the renderer's render phase (`useMemo`), where applying it through
+   * `setProjectData()` would emit item updates to `useSyncExternalStore`
+   * subscribers mid-render. The renderer applies it post-commit via
+   * `flushRenderPhaseUpdates()`. Never set on design-mode runtimes — the live
+   * Studio tree owns the page data there.
+   */
+  pendingProjectData;
+  /**
+   * Reused item instances whose data was refreshed while this runtime was
+   * constructed during render (core `initProject()` calls `setData()` on
+   * them). Their data is already fresh; only the subscriber notification was
+   * deferred to `flushRenderPhaseUpdates()`.
+   */
+  pendingItemUpdates = [];
   constructor(config) {
     let { client, data } = config;
     let page = getRenderablePage(data);
@@ -641,6 +693,27 @@ var WeaverseNextRuntime = class extends Weaverse {
     this.extractTranslationSidecar();
     this.initProject();
   };
+  /**
+   * Apply updates deferred off the render phase: swap in any pending page data
+   * captured on runtime reuse, then notify items whose data was refreshed
+   * during construction. The renderer calls this from a layout effect right
+   * after commit, so subscribers re-render before paint (no content flash) and
+   * without React's setState-in-render warning.
+   */
+  flushRenderPhaseUpdates = () => {
+    let pendingData = this.pendingProjectData;
+    if (pendingData) {
+      this.pendingProjectData = void 0;
+      this.setProjectData(pendingData);
+    }
+    let pendingItems = this.pendingItemUpdates;
+    if (pendingItems.length > 0) {
+      this.pendingItemUpdates = [];
+      for (let item of pendingItems) {
+        item.triggerUpdate();
+      }
+    }
+  };
 };
 function createWeaverseNextRuntime(config) {
   let requestInfo = buildWeaverseNextRequestInfo(config.client?.requestContext);
@@ -650,8 +723,10 @@ function createWeaverseNextRuntime(config) {
   let requestKey = getRuntimeKey(page.id, requestInfo);
   if (existing?.__weaverseNextRequestKey === requestKey) {
     let nextIsDesignMode = config.client?.requestContext?.isDesignMode ?? false;
-    if (!(existing.isDesignMode || nextIsDesignMode)) {
-      existing.setProjectData(page);
+    if (existing.isDesignMode || nextIsDesignMode) {
+      existing.pendingProjectData = void 0;
+    } else {
+      existing.pendingProjectData = page;
     }
     existing.__weaverseNextLatestData = page;
     existing.dataContext = resolveDataContext(config);
@@ -682,7 +757,10 @@ function createWeaverseNextRuntime(config) {
     registerRuntime(existing);
     return existing;
   }
-  let runtime = new WeaverseNextRuntime(config);
+  let [runtime, refreshedItems] = collectDeferredItemUpdates(
+    () => new WeaverseNextRuntime(config)
+  );
+  runtime.pendingItemUpdates = refreshedItems;
   runtime.__weaverseNextRequestKey = requestKey;
   runtime.__weaverseNextLatestData = page;
   registerRuntime(runtime);
@@ -835,6 +913,7 @@ function WeaverseNextStudio(props) {
   );
 }
 var EMPTY_DATA_CONTEXT = {};
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function getRenderablePage2(data) {
   let page = data?.page;
   if (!page) {
@@ -870,6 +949,9 @@ var WeaverseNextRenderer = memo(function WeaverseNextRendererComponent(props) {
     context?.themeSettingsStore,
     context?.translationStore
   ]);
+  useIsomorphicLayoutEffect(() => {
+    weaverse?.flushRenderPhaseUpdates();
+  }, [weaverse]);
   if (!weaverse) {
     return null;
   }