@weaverse/hydrogen 5.11.1 → 5.12.1

package/dist/index.mjs

@@ -58,12 +58,39 @@ function interpolate(template, variables) {
 }
 var ThemeTextContext = createContext(null);
 ThemeTextContext.displayName = "WeaverseThemeTextContext";
+function unflattenKeys(flat) {
+  const result = {};
+  for (const [dotPath, value] of Object.entries(flat)) {
+    const keys = dotPath.split(".");
+    let current = result;
+    for (let i = 0; i < keys.length - 1; i++) {
+      const k = keys[i];
+      if (!(k in current) || typeof current[k] !== "object") {
+        current[k] = {};
+      }
+      current = current[k];
+    }
+    current[keys[keys.length - 1]] = value;
+  }
+  return result;
+}
+var EMPTY = {};
+var NOOP_SUBSCRIBE = () => () => {
+};
+var NOOP_SNAPSHOT = () => EMPTY;
 function ThemeTextProvider({
   staticContent,
   merchantOverrides,
   t: externalT,
+  themeTextStore,
   children
 }) {
+  const designOverrides = useSafeExternalStore(
+    themeTextStore?.subscribe ?? NOOP_SUBSCRIBE,
+    themeTextStore?.getSnapshot ?? NOOP_SNAPSHOT,
+    themeTextStore?.getServerSnapshot ?? NOOP_SNAPSHOT
+  );
+  const mergedOverrides = designOverrides !== EMPTY && Object.keys(designOverrides).length > 0 ? { ...merchantOverrides, ...unflattenKeys(designOverrides) } : merchantOverrides;
   const value = useMemo(() => {
     const t = (key, variables) => {
       if (externalT) {
@@ -72,13 +99,23 @@ function ThemeTextProvider({
           return external;
         }
       }
-      const override = merchantOverrides ? getNestedKey(merchantOverrides, key) : void 0;
+      const override = mergedOverrides ? getNestedKey(mergedOverrides, key) : void 0;
       const staticValue = getNestedKey(staticContent, key);
       const raw = override ?? staticValue ?? key;
       return interpolate(raw, variables);
     };
-    return { t };
-  }, [staticContent, merchantOverrides, externalT]);
+    return {
+      t,
+      themeTextStore: themeTextStore ?? null,
+      merchantOverrides: merchantOverrides ?? null
+    };
+  }, [
+    staticContent,
+    merchantOverrides,
+    mergedOverrides,
+    externalT,
+    themeTextStore
+  ]);
   return /* @__PURE__ */ jsx(ThemeTextContext.Provider, { value, children });
 }
 function useThemeText() {
@@ -349,6 +386,37 @@ function getPreviewData(type, components, weaverseHost) {
     }
   };
 }
+
+// src/utils/theme-text-store.ts
+var ThemeTextStore = class {
+  overrides = {};
+  listeners = /* @__PURE__ */ new Set();
+  setOverrides = (overrides) => {
+    this.overrides = { ...overrides };
+    this.emit();
+  };
+  updateOverrides = (newOverrides) => {
+    this.overrides = { ...this.overrides, ...newOverrides };
+    this.emit();
+  };
+  getSnapshot = () => this.overrides;
+  getServerSnapshot = () => this.overrides;
+  subscribe = (callback) => {
+    this.listeners.add(callback);
+    return () => {
+      this.listeners.delete(callback);
+    };
+  };
+  emit = () => {
+    for (const listener of Array.from(this.listeners)) {
+      try {
+        listener();
+      } catch (error) {
+        console.error("ThemeTextStore: Listener error", error);
+      }
+    }
+  };
+};
 var ThemeSettingsStore = class {
   settings = {};
   schema;
@@ -459,6 +527,7 @@ function useStudio(weaverse) {
   let { pathname, search } = useLocation();
   let navigate = useNavigate();
   let themeSettingsStore = useThemeSettingsStore();
+  let { themeTextStore, merchantOverrides } = useThemeText();
   let {
     isDesignMode,
     weaverseHost,
@@ -476,7 +545,9 @@ function useStudio(weaverse) {
           ...weaverse.internal,
           navigate,
           revalidate,
-          themeSettingsStore
+          merchantOverrides,
+          themeSettingsStore,
+          themeTextStore
         };
         let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
         loadScript(studioSrc).then(() => {
@@ -501,6 +572,13 @@ function usePixel(context) {
   }, []);
 }
 var WeaverseHydrogenItem = class extends WeaverseItemStore {
+  /**
+   * Cached merged snapshot (base + translations).
+   * Reset to `null` whenever `_store` or the item's translation entry changes.
+   */
+  _cachedSnapshot = null;
+  _snapshotStoreRef = null;
+  _snapshotTranslationRef = null;
   constructor(initialData, weaverse) {
     super(initialData, weaverse);
     const { data, ...rest } = initialData;
@@ -514,6 +592,32 @@ var WeaverseHydrogenItem = class extends WeaverseItemStore {
   get Element() {
     return super.Element;
   }
+  /**
+   * Override getSnapShot to merge translation data when in translation mode.
+   * Memoizes the result: returns the same object reference as long as
+   * both `_store` and the translation entry haven't changed.
+   * This is critical for `useSyncExternalStore` stability.
+   */
+  getSnapShot = () => {
+    const base = this._store;
+    const translations = this.weaverse.translationMap?.[this._id];
+    if (!translations) {
+      return base;
+    }
+    if (this._cachedSnapshot && this._snapshotStoreRef === base && this._snapshotTranslationRef === translations) {
+      return this._cachedSnapshot;
+    }
+    const merged = { ...base };
+    for (const [key, entry] of Object.entries(translations)) {
+      if (entry.translatedValue !== void 0) {
+        merged[key] = entry.translatedValue;
+      }
+    }
+    this._cachedSnapshot = merged;
+    this._snapshotStoreRef = base;
+    this._snapshotTranslationRef = translations;
+    return merged;
+  };
 };
 Weaverse.ItemConstructor = WeaverseHydrogenItem;
 var WeaverseHydrogen = class extends Weaverse {
@@ -529,8 +633,16 @@ var WeaverseHydrogen = class extends Weaverse {
   isPreviewMode;
   isRevisionPreview;
   sectionType;
-  static itemInstances;
-  static elementRegistry;
+  // ─── Translation sidecar (design mode only) ────────────────────────
+  /**
+   * Translation map received from the builder in design mode.
+   * Keyed by item ID, each entry maps field names to translated values.
+   * `WeaverseHydrogenItem.getSnapShot()` merges these into the data
+   * returned to components, so translations render without monkey-patching.
+   */
+  translationMap = {};
+  translationLocale = "";
+  translationLanguageId = "";
   constructor(params) {
     const { internal, pageId, requestInfo, ...coreParams } = params;
     super({ ...coreParams });
@@ -546,7 +658,82 @@ var WeaverseHydrogen = class extends Weaverse {
     this.isPreviewMode = params.isPreviewMode ?? false;
     this.isRevisionPreview = params.isRevisionPreview ?? false;
     this.sectionType = params.sectionType || "";
+    this.extractTranslationSidecar();
   }
+  /**
+   * Extract translation sidecar data from `this.data` (the page data).
+   * The builder attaches `translationMap`, `translationLocale`, and
+   * `translationLanguageId` to the page data in design mode.
+   */
+  extractTranslationSidecar = () => {
+    const pageData = this.data;
+    if (pageData?.translationMap) {
+      this.translationMap = pageData.translationMap;
+      this.translationLocale = pageData.translationLocale || "";
+      this.translationLanguageId = pageData.translationLanguageId || "";
+    }
+  };
+  /**
+   * Set the translation sidecar data.
+   * Called by the studio bridge when translation data arrives or changes.
+   * Triggers a re-render of all items so translated snapshots are recalculated.
+   */
+  setTranslationSidecar = (translationMap, locale, languageId) => {
+    this.translationMap = translationMap;
+    this.translationLocale = locale;
+    this.translationLanguageId = languageId;
+    this.refreshAllItems();
+  };
+  /**
+   * Update a single translation entry for a specific item field.
+   * Used by the studio bridge when the user edits a translatable field.
+   */
+  updateTranslation = (itemId, key, originalValue, translatedValue) => {
+    if (!this.translationMap[itemId]) {
+      this.translationMap[itemId] = {};
+    }
+    this.translationMap[itemId] = {
+      ...this.translationMap[itemId],
+      [key]: { originalValue, translatedValue }
+    };
+    const instance = this.itemInstances.get(itemId);
+    if (instance) {
+      instance.triggerUpdate();
+    }
+  };
+  /**
+   * Collect all translation changes across all weaverse instances.
+   * Used by the save flow to persist translation edits.
+   */
+  getTranslationChanges = () => {
+    const entries = [];
+    const languageId = this.translationLanguageId;
+    if (!(this.translationLocale && languageId)) {
+      return void 0;
+    }
+    for (const [itemId, fields] of Object.entries(this.translationMap)) {
+      for (const [key, entry] of Object.entries(fields)) {
+        entries.push({
+          itemId,
+          key: `data.${key}`,
+          originalValue: entry.originalValue,
+          translatedValue: entry.translatedValue
+        });
+      }
+    }
+    if (entries.length === 0) {
+      return void 0;
+    }
+    return { languageId, entries };
+  };
+  /**
+   * Override setProjectData to re-extract translation sidecar from new page data.
+   */
+  setProjectData = (data) => {
+    this.data = data;
+    this.extractTranslationSidecar();
+    this.initProject();
+  };
 };
 function createWeaverseInstance(params) {
   if (isBrowser) {
@@ -645,12 +832,17 @@ function withWeaverse(Component, options) {
   return (props) => {
     const themeSettingsStore = useCreateThemeSettingsStore();
     const themeTextData = useThemeTextData();
+    const themeTextStoreRef = useRef(null);
+    if (!themeTextStoreRef.current) {
+      themeTextStoreRef.current = new ThemeTextStore();
+    }
     return /* @__PURE__ */ jsx(ThemeSettingsStoreContext.Provider, { value: themeSettingsStore, children: /* @__PURE__ */ jsx(
       ThemeTextProvider,
       {
         merchantOverrides: themeTextData.merchantOverrides,
         staticContent: themeTextData.staticContent,
         t: options?.t,
+        themeTextStore: themeTextStoreRef.current,
         children: /* @__PURE__ */ jsx(Component, { ...props })
       }
     ) });
@@ -1442,6 +1634,6 @@ var IMAGES_PLACEHOLDERS = {
   product_18: "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-watch-2-1024x1024.svg"
 };
 
-export { IMAGES_PLACEHOLDERS, ThemeTextProvider, WeaverseClient, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };
+export { IMAGES_PLACEHOLDERS, ThemeTextProvider, ThemeTextStore, WeaverseClient, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map