@weaverse/next 0.1.0-alpha.8 → 1.0.0

package/dist/index.js

@@ -27,6 +27,24 @@ function generateDataFromSchema(schema) {
 }
 
 // src/item.ts
+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 react.WeaverseItemStore {
   /**
    * Cached merged snapshot (base `_store` + translations). Reset whenever the
@@ -36,12 +54,47 @@ var WeaverseNextItem = class extends react.WeaverseItemStore {
   _cachedSnapshot = null;
   _snapshotStoreRef = null;
   _snapshotTranslationRef = null;
+  /** Create an item store from serialized component data and its runtime. */
   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).
+   *
+   * A complete serialized item (it carries `id` and `type`; core's
+   * `initProject()` always passes one) replaces the store the way the
+   * constructor builds it: the schema defaults of the item's own `type` — the
+   * Builder can replace a section in place, keeping its id — then the item's
+   * settings. A payload omits a setting — or the whole optional `data` — when
+   * its value equals the schema default, so merging into the previous store
+   * would keep the previous locale's value visible. Partial updates still
+   * merge. Either way the `_store` ref changes, 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) => {
+    if ("id" in update && "type" in update) {
+      let { data, type } = update;
+      let schema = this.weaverse.elementRegistry.get(type)?.schema;
+      this._store = {
+        ...generateDataFromSchema(schema),
+        ...data === void 0 ? {} : { data },
+        ...flattenItemData(update)
+      };
+    } else {
+      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()`:
@@ -283,18 +336,24 @@ var useThemeText = useTranslation;
 
 // src/translation-store.ts
 var TranslationStore = class {
+  /** Current flat translation overrides keyed by dot path. */
   overrides = {};
   listeners = /* @__PURE__ */ new Set();
+  /** Replace every override and notify subscribers. */
   setOverrides = (overrides) => {
     this.overrides = { ...overrides };
     this.emit();
   };
+  /** Merge changed overrides into the current values and notify subscribers. */
   updateOverrides = (newOverrides) => {
     this.overrides = { ...this.overrides, ...newOverrides };
     this.emit();
   };
+  /** Return the current client-side override snapshot. */
   getSnapshot = () => this.overrides;
+  /** Return the override snapshot used during server rendering. */
   getServerSnapshot = () => this.overrides;
+  /** Subscribe to override changes and return an unsubscribe function. */
   subscribe = (callback) => {
     this.listeners.add(callback);
     return () => {
@@ -565,13 +624,22 @@ function getSearchParamsFromContext(context) {
   }
   return new URLSearchParams();
 }
+function withPathPrefix(pathname, i18n) {
+  let raw = typeof i18n?.pathPrefix === "string" ? i18n.pathPrefix : "";
+  let segments = raw.split("/").filter(Boolean);
+  let prefix = segments.length > 0 ? `/${segments.join("/")}` : "";
+  if (prefix === "" || pathname === prefix || pathname.startsWith(`${prefix}/`)) {
+    return pathname;
+  }
+  return pathname === "/" ? prefix : `${prefix}${pathname}`;
+}
 function getPathnameFromContext(context) {
   if (context?.pathname) {
-    return context.pathname;
+    return withPathPrefix(context.pathname, context.i18n);
   }
   if (context?.url) {
     let url = toUrl(context.url);
-    return url.pathname || "/";
+    return withPathPrefix(url.pathname || "/", context.i18n);
   }
   return "/";
 }
@@ -612,7 +680,9 @@ function buildWeaverseNextRequestInfo(context) {
     pathname: getPathnameFromContext(context),
     search: search ? `?${search}` : "",
     queries: toQueryRecord(searchParams),
-    ...context?.i18n ? { i18n: context.i18n } : {}
+    ...context?.i18n ? { i18n: context.i18n } : {},
+    ...context?.pageType ? { pageType: context.pageType } : {},
+    ...context?.handle ? { handle: context.handle } : {}
   };
 }
 
@@ -629,6 +699,12 @@ function getConfigString(configs, key) {
   let value = configs?.[key];
   return typeof value === "string" ? value : void 0;
 }
+function resolveModeFlag(config, key) {
+  return config.client?.requestContext?.[key] === true || config.data.configs?.[key] === true;
+}
+function resolveSectionType(config) {
+  return config.client?.requestContext?.sectionType || getConfigString(config.data.configs, "sectionType") || void 0;
+}
 function getRecordString(record, key) {
   let value = record?.[key];
   return typeof value === "string" ? value : void 0;
@@ -665,12 +741,30 @@ function registerRuntime(runtime) {
   runtimeWindow.__weaverses[runtime.pageId] = runtime;
   runtimeWindow.__weaverse = runtime;
 }
+function rebindPageItemsToRuntime(runtime) {
+  let items = runtime.data?.items;
+  if (!items) {
+    return;
+  }
+  for (let { id } of items) {
+    let instance = runtime.itemInstances.get(id);
+    if (instance && instance.weaverse !== runtime) {
+      instance.weaverse = runtime;
+    }
+  }
+}
 var WeaverseNextRuntime = class extends react.Weaverse {
+  /** Stable ID of the page owned by this runtime. */
   pageId;
+  /** Mutable callbacks and stores consumed by the Studio bridge. */
   internal;
+  /** Path, query, and locale metadata for Studio navigation. */
   requestInfo;
+  /** Whether this runtime renders a component preview. */
   isPreviewMode;
+  /** Whether this runtime renders a saved revision. */
   isRevisionPreview;
+  /** Component type rendered in section preview mode. */
   sectionType;
   // ─── Item-level translation sidecar (design mode only) ─────────────
   /**
@@ -679,29 +773,52 @@ var WeaverseNextRuntime = class extends react.Weaverse {
    * components, so translations render without mutating the base `_store`.
    */
   translationMap = {};
+  /** Locale associated with the item-level translation sidecar. */
   translationLocale = String();
+  /** Weaverse language ID used when saving translation changes. */
   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 = [];
+  /** Create a browser runtime from a loaded page and its request context. */
   constructor(config) {
     let { client, data } = config;
     let page = getRenderablePage(data);
     let configs = data.configs;
     let requestContext = client?.requestContext;
+    let isDesignMode = resolveModeFlag(config, "isDesignMode");
+    let isPreviewMode = resolveModeFlag(config, "isPreviewMode");
+    let isRevisionPreview = resolveModeFlag(config, "isRevisionPreview");
+    let sectionType = resolveSectionType(config);
     let projectId = resolveProjectId(client, data, page.id);
     ensureNextItemConstructor();
     super({
       projectId,
       data: page,
-      isDesignMode: requestContext?.isDesignMode ?? false,
+      isDesignMode,
       weaverseHost: getConfigString(configs, "weaverseHost"),
       weaverseVersion: getConfigString(configs, "weaverseVersion")
     });
     this.pageId = page.id;
     this.dataContext = resolveDataContext(config);
     this.requestInfo = buildWeaverseNextRequestInfo(requestContext);
-    this.isDesignMode = requestContext?.isDesignMode ?? false;
-    this.isPreviewMode = requestContext?.isPreviewMode ?? false;
-    this.isRevisionPreview = requestContext?.isRevisionPreview ?? false;
-    this.sectionType = requestContext?.sectionType;
+    this.isDesignMode = isDesignMode;
+    this.isPreviewMode = isPreviewMode;
+    this.isRevisionPreview = isRevisionPreview;
+    this.sectionType = sectionType;
     let translationStore = config.translationStore ?? new TranslationStore();
     this.internal = {
       merchantOverrides: config.merchantOverrides,
@@ -804,6 +921,27 @@ var WeaverseNextRuntime = class extends react.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);
@@ -812,20 +950,26 @@ function createWeaverseNextRuntime(config) {
   let existing = runtimeWindow?.__weaverses?.[page.id];
   let requestKey = getRuntimeKey(page.id, requestInfo);
   if (existing?.__weaverseNextRequestKey === requestKey) {
-    let nextIsDesignMode = config.client?.requestContext?.isDesignMode ?? false;
-    if (!(existing.isDesignMode || nextIsDesignMode)) {
-      existing.setProjectData(page);
+    let configs = config.data.configs;
+    let nextIsDesignMode = resolveModeFlag(config, "isDesignMode");
+    let nextIsPreviewMode = resolveModeFlag(config, "isPreviewMode");
+    let nextIsRevisionPreview = resolveModeFlag(config, "isRevisionPreview");
+    let nextSectionType = resolveSectionType(config);
+    if (existing.isDesignMode || nextIsDesignMode) {
+      existing.pendingProjectData = void 0;
+    } else {
+      existing.pendingProjectData = page;
     }
     existing.__weaverseNextLatestData = page;
     existing.dataContext = resolveDataContext(config);
     existing.requestInfo = requestInfo;
     existing.projectId = resolveProjectId(config.client, config.data, page.id);
     existing.isDesignMode = nextIsDesignMode;
-    existing.isPreviewMode = config.client?.requestContext?.isPreviewMode ?? false;
-    existing.isRevisionPreview = config.client?.requestContext?.isRevisionPreview ?? false;
-    existing.sectionType = config.client?.requestContext?.sectionType;
-    existing.weaverseHost = getConfigString(config.data.configs, "weaverseHost") ?? existing.weaverseHost;
-    existing.weaverseVersion = getConfigString(config.data.configs, "weaverseVersion") ?? existing.weaverseVersion;
+    existing.isPreviewMode = nextIsPreviewMode;
+    existing.isRevisionPreview = nextIsRevisionPreview;
+    existing.sectionType = nextSectionType;
+    existing.weaverseHost = getConfigString(configs, "weaverseHost") ?? existing.weaverseHost;
+    existing.weaverseVersion = getConfigString(configs, "weaverseVersion") ?? existing.weaverseVersion;
     existing.internal.pageAssignment = config.data.pageAssignment;
     existing.internal.project = config.data.project;
     if (config.navigate) {
@@ -845,7 +989,11 @@ function createWeaverseNextRuntime(config) {
     registerRuntime(existing);
     return existing;
   }
-  let runtime = new WeaverseNextRuntime(config);
+  let [runtime, refreshedItems] = collectDeferredItemUpdates(
+    () => new WeaverseNextRuntime(config)
+  );
+  runtime.pendingItemUpdates = refreshedItems;
+  rebindPageItemsToRuntime(runtime);
   runtime.__weaverseNextRequestKey = requestKey;
   runtime.__weaverseNextLatestData = page;
   registerRuntime(runtime);
@@ -860,7 +1008,10 @@ function bindWeaverseNextStudioRuntime(runtime) {
     return false;
   }
   let boundRuntime = runtime;
-  if (!boundRuntime.__weaverseNextStudioBound) {
+  let activeRuntime = studio.weaverse;
+  let activeRequestInfo = activeRuntime?.requestInfo;
+  let isActiveUrl = !activeRequestInfo || activeRequestInfo.pathname === runtime.requestInfo.pathname && activeRequestInfo.search === runtime.requestInfo.search;
+  if (!(boundRuntime.__weaverseNextStudioBound && isActiveUrl)) {
     studio.init?.(runtime);
     boundRuntime.__weaverseNextStudioBound = true;
     return true;
@@ -872,9 +1023,67 @@ function bindWeaverseNextStudioRuntime(runtime) {
   });
   return true;
 }
-
-// src/revalidate-item.ts
 var DEFAULT_REVALIDATE_ENDPOINT = "/api/weaverse/revalidate";
+var MAX_ROUTE_CONTEXT_HANDLE_LENGTH = 512;
+var DENIED_ROUTE_CONTEXT_PARAMS = [
+  "weaverseprojectid",
+  "weaversehost",
+  "weaverseapikey",
+  "weaverseapibase",
+  "weaversepublicapibase",
+  "weaverseversion",
+  "projectid",
+  "weaversedraftitem",
+  "__weaversedraftitem",
+  "_rsc"
+];
+var ROUTE_CONTEXT_I18N_KEYS = [
+  "country",
+  "label",
+  "language",
+  "locale",
+  "pathPrefix"
+];
+function sanitizeRouteContextSearch(search) {
+  let params = new URLSearchParams(search);
+  let denied = new Set(DENIED_ROUTE_CONTEXT_PARAMS);
+  for (let key of [...new Set(params.keys())]) {
+    if (denied.has(key.toLowerCase())) {
+      params.delete(key);
+    }
+  }
+  let serialized = params.toString();
+  return serialized ? `?${serialized}` : "";
+}
+function buildWeaverseNextRevalidateRouteContext(requestInfo) {
+  if (!requestInfo || typeof requestInfo.pathname !== "string" || !requestInfo.pathname) {
+    return;
+  }
+  let routeContext = {
+    pathname: requestInfo.pathname,
+    search: sanitizeRouteContextSearch(requestInfo.search ?? "")
+  };
+  let { i18n } = requestInfo;
+  if (i18n && typeof i18n === "object") {
+    let picked = {};
+    for (let key of ROUTE_CONTEXT_I18N_KEYS) {
+      let value = i18n[key];
+      if (typeof value === "string") {
+        picked[key] = value;
+      }
+    }
+    if (Object.keys(picked).length) {
+      routeContext.i18n = picked;
+    }
+  }
+  if (requestInfo.pageType && schema.PageTypeSchema.safeParse(requestInfo.pageType).success) {
+    routeContext.pageType = requestInfo.pageType;
+  }
+  if (typeof requestInfo.handle === "string" && requestInfo.handle && requestInfo.handle.length <= MAX_ROUTE_CONTEXT_HANDLE_LENGTH) {
+    routeContext.handle = requestInfo.handle;
+  }
+  return routeContext;
+}
 async function revalidateWeaverseNextItem(runtime, draftItem, endpoint = DEFAULT_REVALIDATE_ENDPOINT) {
   let instance = runtime.itemInstances.get(draftItem.id);
   if (!instance) {
@@ -882,10 +1091,14 @@ async function revalidateWeaverseNextItem(runtime, draftItem, endpoint = DEFAULT
       `[weaverse-next] No live item instance for "${draftItem.id}".`
     );
   }
+  let routeContext = buildWeaverseNextRevalidateRouteContext(
+    runtime.requestInfo
+  );
+  let body = routeContext ? { draftItem, routeContext } : { draftItem };
   let response = await fetch(endpoint, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ draftItem })
+    body: JSON.stringify(body)
   });
   if (!response.ok) {
     throw new Error(
@@ -998,6 +1211,7 @@ function WeaverseNextStudio(props) {
   );
 }
 var EMPTY_DATA_CONTEXT = {};
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? react$1.useEffect : react$1.useLayoutEffect;
 function getRenderablePage2(data) {
   let page = data?.page;
   if (!page) {
@@ -1033,6 +1247,9 @@ var WeaverseNextRenderer = react$1.memo(function WeaverseNextRendererComponent(p
     context?.themeSettingsStore,
     context?.translationStore
   ]);
+  useIsomorphicLayoutEffect(() => {
+    weaverse?.flushRenderPhaseUpdates();
+  }, [weaverse]);
   if (!weaverse) {
     return null;
   }
@@ -1049,6 +1266,15 @@ function hasOpenGraphContent(seo) {
 function hasTwitterContent(seo) {
   return Boolean(seo?.title || seo?.description || seo?.image || seo?.cardType);
 }
+function normalizeTwitterCard(cardType) {
+  return cardType === "summary_large_image" ? "summary_large_image" : "summary";
+}
+function normalizeOpenGraphType(type) {
+  if (type === "article" || type === "profile" || type === "video.other") {
+    return type;
+  }
+  return "website";
+}
 function formatWeaverseNextSeoMetadata(seo) {
   let index = seo?.robots?.index !== false;
   let follow = seo?.robots?.follow !== false;
@@ -1076,13 +1302,13 @@ function formatWeaverseNextSeoMetadata(seo) {
       title: openGraph?.title,
       description: openGraph?.description,
       images: openGraph?.image ? [openGraph.image] : void 0,
-      type: openGraph?.type || "website"
+      type: normalizeOpenGraphType(openGraph?.type)
     };
   }
   let twitter = seo.twitter;
   if (hasTwitterContent(twitter)) {
     metadata.twitter = {
-      card: twitter?.cardType || "summary",
+      card: normalizeTwitterCard(twitter?.cardType),
       title: twitter?.title,
       description: twitter?.description,
       images: twitter?.image ? [twitter.image] : void 0
@@ -1161,7 +1387,7 @@ function resolveWeaverseNextStudioScriptSrc(context, options = {}) {
   if (!isTrustedStudioOrigin(origin, storefrontHostname)) {
     return null;
   }
-  let bundle = isDesignMode ? "index.js" : "preview.js";
+  let bundle = isPreviewMode || isRevisionPreview ? "preview.js" : "index.js";
   let version = last(searchParams, "weaverseVersion");
   let url = `${origin}/static/studio/next/${bundle}`;
   return version ? `${url}?v=${encodeURIComponent(version)}` : url;
@@ -1235,10 +1461,6 @@ Object.defineProperty(exports, "useWeaverse", {
   enumerable: true,
   get: function () { return react.useWeaverse; }
 });
-Object.defineProperty(exports, "createSchema", {
-  enumerable: true,
-  get: function () { return schema.createSchema; }
-});
 exports.DEFAULT_REVALIDATE_ENDPOINT = DEFAULT_REVALIDATE_ENDPOINT;
 exports.ThemeTextProvider = ThemeTextProvider;
 exports.ThemeTextStore = ThemeTextStore;
@@ -1253,12 +1475,14 @@ exports.WeaverseNextStudioBridge = WeaverseNextStudioBridge;
 exports.WeaverseNextStudioConnect = WeaverseNextStudioConnect;
 exports.bindWeaverseNextStudioRuntime = bindWeaverseNextStudioRuntime;
 exports.buildWeaverseNextRequestInfo = buildWeaverseNextRequestInfo;
+exports.buildWeaverseNextRevalidateRouteContext = buildWeaverseNextRevalidateRouteContext;
 exports.createTranslate = createTranslate;
 exports.createWeaverseNextClient = createWeaverseNextClient;
 exports.createWeaverseNextRuntime = createWeaverseNextRuntime;
 exports.createWeaverseNextStudioInternals = createWeaverseNextStudioInternals;
 exports.createWeaverseNextThemeSettingsStore = createWeaverseNextThemeSettingsStore;
 exports.formatWeaverseNextSeoMetadata = formatWeaverseNextSeoMetadata;
+exports.generateDataFromSchema = generateDataFromSchema;
 exports.getNestedKey = getNestedKey;
 exports.getWeaverseNextSeoMetadata = getWeaverseNextSeoMetadata;
 exports.interpolate = interpolate;
@@ -1273,5 +1497,11 @@ exports.useWeaverseCommerce = useWeaverseCommerce;
 exports.useWeaverseNextStudioInternals = useWeaverseNextStudioInternals;
 exports.useWeaversePageData = useWeaversePageData;
 exports.useWeaverseRootData = useWeaverseRootData;
+Object.keys(schema).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return schema[k]; }
+  });
+});
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map