@weaverse/hydrogen 5.11.0 → 5.12.0

package/dist/index.mjs

@@ -48,12 +48,12 @@ function getNestedKey(obj, path, fallback) {
   return fallback;
 }
 function interpolate(template, variables) {
-  if (!variables || Object.keys(variables).length === 0) {
+  if (!variables) {
     return template;
   }
   return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
     const value = variables[key];
-    return value !== void 0 ? String(value) : match;
+    return value === void 0 ? match : String(value);
   });
 }
 var ThemeTextContext = createContext(null);
@@ -501,6 +501,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 +521,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 +562,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 +587,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) {
@@ -1097,7 +1213,7 @@ var WeaverseClient = class {
             type: typeof result,
             isString: typeof result === "string",
             length: typeof result === "string" ? result.length : "N/A",
-            preview: typeof result === "string" ? `${result.substring(0, 50)}...` : String(result)
+            preview: typeof result === "string" ? `${result.slice(0, 50)}...` : String(result)
           }
         );
         result = { theme: defaultThemeSettings };