livelocale 0.8.0 → 0.9.0

package/dist/client/index.js

@@ -1,10 +1,12 @@
 "use client";
 
 // src/client/watermark.ts
-var DELIM = "\u200D";
+var DELIM = "\u200C";
 var BIT_0 = "\u200B";
-var BIT_1 = "\u200C";
+var BIT_1 = "\u200D";
+var WATERMARK_DELIMITER = DELIM;
 var ZW_RE = /[\u200B\u200C\u200D]/g;
+var WATERMARK_RE = /\u200C(?:[\u200B\u200D]{8})+\u200C/g;
 function encodeKey(text, key) {
   const bytes = new TextEncoder().encode(key);
   let bits = "";
@@ -51,6 +53,15 @@ function stripWatermark(text) {
 function sanitizeZeroWidth(text) {
   return text.replace(ZW_RE, "");
 }
+function removeWatermarks(text) {
+  return text.replace(WATERMARK_RE, "");
+}
+function containsWatermark(text) {
+  WATERMARK_RE.lastIndex = 0;
+  const found = WATERMARK_RE.test(text);
+  WATERMARK_RE.lastIndex = 0;
+  return found;
+}
 function hasWatermark(text) {
   return text.startsWith(DELIM);
 }
@@ -147,6 +158,121 @@ function isLiveLocaleEnabled() {
   return evaluate().mode !== "off";
 }
 
+// src/client/iframe-bridge.ts
+var DEFAULT_STUDIO_ORIGIN = "http://localhost:3010";
+var STUDIO_ORIGIN_STORAGE_KEY = "livelocale-studio-origin";
+function toHttpOrigin(value) {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.origin : null;
+  } catch {
+    return null;
+  }
+}
+function readSameOriginParent(win) {
+  try {
+    const parent = win.parent;
+    if (!parent || parent === win) return null;
+    const own = toHttpOrigin(win.location.origin);
+    if (!own) return null;
+    return parent.location.origin === own ? own : null;
+  } catch {
+    return null;
+  }
+}
+function resolveStudioOrigin(search, storage, sameOriginParent) {
+  const fromParent = toHttpOrigin(sameOriginParent);
+  if (fromParent) return fromParent;
+  const fromQuery = toHttpOrigin(new URLSearchParams(search).get("livelocale-origin"));
+  if (fromQuery) {
+    try {
+      storage?.setItem(STUDIO_ORIGIN_STORAGE_KEY, fromQuery);
+    } catch {
+    }
+    return fromQuery;
+  }
+  let remembered = null;
+  try {
+    remembered = toHttpOrigin(storage?.getItem(STUDIO_ORIGIN_STORAGE_KEY));
+  } catch {
+  }
+  return remembered ?? DEFAULT_STUDIO_ORIGIN;
+}
+var MAX_VISIBLE_TEXTS = 100;
+var MAX_VISIBLE_TEXT_LENGTH = 200;
+var KEY_PATTERN = /^[a-zA-Z0-9._-]+$/;
+var IframeBridge = class {
+  allowedOrigin;
+  constructor(allowedOrigin) {
+    this.allowedOrigin = allowedOrigin;
+  }
+  /**
+   * Sends a message from the iframe client to the parent Studio window.
+   */
+  sendToParent(type, payload) {
+    if (typeof window === "undefined" || !window.parent || window.parent === window) {
+      return;
+    }
+    if (type === "ELEMENT_SELECTED") {
+      const p = payload;
+      if (!p || typeof p.key !== "string" || p.key.trim() === "" || !/^[a-zA-Z0-9._-]+$/.test(p.key) || typeof p.currentValue !== "string") {
+        return;
+      }
+    }
+    if (type === "VISIBLE_KEYS_CHANGED") {
+      if (!Array.isArray(payload)) return;
+      const validKeys = payload.filter(
+        (k) => typeof k === "string" && /^[a-zA-Z0-9._-]+$/.test(k)
+      );
+      payload = validKeys;
+    }
+    if (type === "VISIBLE_TEXTS_CHANGED") {
+      if (!Array.isArray(payload)) return;
+      const texts = [];
+      for (const entry of payload) {
+        if (texts.length >= MAX_VISIBLE_TEXTS) break;
+        if (!entry || typeof entry !== "object") continue;
+        const { key, text } = entry;
+        if (typeof key !== "string" || !KEY_PATTERN.test(key) || typeof text !== "string") {
+          continue;
+        }
+        texts.push({ key, text: text.slice(0, MAX_VISIBLE_TEXT_LENGTH) });
+      }
+      payload = texts;
+    }
+    const message = {
+      source: "livelocale-client",
+      type,
+      payload
+    };
+    window.parent.postMessage(message, this.allowedOrigin);
+  }
+  /**
+   * Sets up a listener for messages originating from the parent Studio dashboard.
+   */
+  listenToParent(callback) {
+    if (typeof window === "undefined") {
+      return () => {
+      };
+    }
+    const listener = (event) => {
+      if (event.origin !== this.allowedOrigin) {
+        return;
+      }
+      if (event.data?.source !== "livelocale-studio") {
+        return;
+      }
+      const { type, payload } = event.data;
+      callback(type, payload);
+    };
+    window.addEventListener("message", listener);
+    return () => {
+      window.removeEventListener("message", listener);
+    };
+  }
+};
+
 // src/client/dom-interceptor.ts
 function debounce(fn, wait) {
   let timer = null;
@@ -199,6 +325,35 @@ var DOMInterceptor = class {
     });
     return Array.from(keys);
   }
+  /**
+   * Returns one `{ key, text }` per translation key on the page, in document
+   * order, with the text it shows now (watermark removed, trimmed, cut to
+   * `MAX_VISIBLE_TEXT_LENGTH`). The first element carrying a key wins; its
+   * text is the first descendant text node whose watermark names that key.
+   * Elements without such a node, and blank texts, are skipped. At most
+   * `limit` entries are returned.
+   */
+  getVisibleTexts(limit = MAX_VISIBLE_TEXTS) {
+    const texts = [];
+    const seen = /* @__PURE__ */ new Set();
+    const elements = document.querySelectorAll("[data-i18n-key]");
+    for (const el of elements) {
+      if (texts.length >= limit) break;
+      const key = el.getAttribute("data-i18n-key");
+      if (!key || seen.has(key)) continue;
+      seen.add(key);
+      const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
+      let node;
+      while ((node = walker.nextNode()) !== null) {
+        const decoded = decodeKey(node.nodeValue ?? "");
+        if (decoded?.key !== key) continue;
+        const text = decoded.cleanText.trim().slice(0, MAX_VISIBLE_TEXT_LENGTH);
+        if (text) texts.push({ key, text });
+        break;
+      }
+    }
+    return texts;
+  }
   /**
    * Initializes the DOM event interceptors in development mode.
    * Also launches the watermark scanner and MutationObserver.
@@ -369,7 +524,7 @@ var DOMInterceptor = class {
   }
   processTextNode(node) {
     const raw = node.nodeValue ?? "";
-    if (!raw.includes("\u200D")) return;
+    if (!raw.includes(WATERMARK_DELIMITER)) return;
     const decoded = decodeKey(raw);
     if (!decoded) return;
     const parent = node.parentElement;
@@ -442,10 +597,10 @@ var DOMInterceptor = class {
     Object.defineProperty(proto, "value", {
       get() {
         const raw = original.get.call(this);
-        return sanitizeZeroWidth(raw);
+        return removeWatermarks(raw);
       },
       set(val) {
-        const clean = typeof val === "string" ? sanitizeZeroWidth(val) : val;
+        const clean = typeof val === "string" ? removeWatermarks(val) : val;
         original.set.call(this, clean);
       },
       configurable: true
@@ -456,7 +611,7 @@ var DOMInterceptor = class {
     if (!form) return;
     const inputs = form.querySelectorAll("input, textarea");
     inputs.forEach((input) => {
-      const cleaned = sanitizeZeroWidth(input.value);
+      const cleaned = removeWatermarks(input.value);
       if (cleaned !== input.value) {
         const proto = input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
         const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
@@ -547,17 +702,17 @@ var DOMInterceptor = class {
   };
   handleCopy = (event) => {
     const selection = window.getSelection()?.toString() || "";
-    if (selection.includes("\u200D") || selection.includes("\u200B") || selection.includes("\u200C")) {
-      const clean = sanitizeZeroWidth(selection);
+    if (containsWatermark(selection)) {
+      const clean = removeWatermarks(selection);
       event.clipboardData?.setData("text/plain", clean);
       event.preventDefault();
     }
   };
   handlePaste = (event) => {
     const text = event.clipboardData?.getData("text/plain") || "";
-    if (text.includes("\u200D") || text.includes("\u200B") || text.includes("\u200C")) {
+    if (containsWatermark(text)) {
       event.preventDefault();
-      const cleaned = sanitizeZeroWidth(text);
+      const cleaned = removeWatermarks(text);
       const targetInput = event.target;
       if (targetInput && "value" in targetInput) {
         const proto = targetInput instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
@@ -576,64 +731,6 @@ var DOMInterceptor = class {
   };
 };
 
-// src/client/iframe-bridge.ts
-var IframeBridge = class {
-  allowedOrigin;
-  constructor(allowedOrigin) {
-    this.allowedOrigin = allowedOrigin;
-  }
-  /**
-   * Sends a message from the iframe client to the parent Studio window.
-   */
-  sendToParent(type, payload) {
-    if (typeof window === "undefined" || !window.parent || window.parent === window) {
-      return;
-    }
-    if (type === "ELEMENT_SELECTED") {
-      const p = payload;
-      if (!p || typeof p.key !== "string" || p.key.trim() === "" || !/^[a-zA-Z0-9._-]+$/.test(p.key) || typeof p.currentValue !== "string") {
-        return;
-      }
-    }
-    if (type === "VISIBLE_KEYS_CHANGED") {
-      if (!Array.isArray(payload)) return;
-      const validKeys = payload.filter(
-        (k) => typeof k === "string" && /^[a-zA-Z0-9._-]+$/.test(k)
-      );
-      payload = validKeys;
-    }
-    const message = {
-      source: "livelocale-client",
-      type,
-      payload
-    };
-    window.parent.postMessage(message, this.allowedOrigin);
-  }
-  /**
-   * Sets up a listener for messages originating from the parent Studio dashboard.
-   */
-  listenToParent(callback) {
-    if (typeof window === "undefined") {
-      return () => {
-      };
-    }
-    const listener = (event) => {
-      if (event.origin !== this.allowedOrigin) {
-        return;
-      }
-      if (event.data?.source !== "livelocale-studio") {
-        return;
-      }
-      const { type, payload } = event.data;
-      callback(type, payload);
-    };
-    window.addEventListener("message", listener);
-    return () => {
-      window.removeEventListener("message", listener);
-    };
-  }
-};
-
 // src/client/wrap.ts
 function extractKey(arg, keyPrefix) {
   if (typeof arg === "string") {
@@ -770,8 +867,16 @@ function restorePreviews() {
   previewNodes.clear();
 }
 if (typeof window !== "undefined" && isLiveLocaleEnabled() && window.parent !== window) {
-  const urlParams = new URLSearchParams(window.location.search);
-  const allowedOrigin = urlParams.get("livelocale-origin") || "http://localhost:3010";
+  let storage = null;
+  try {
+    storage = window.sessionStorage;
+  } catch {
+  }
+  const allowedOrigin = resolveStudioOrigin(
+    window.location.search,
+    storage,
+    readSameOriginParent(window)
+  );
   const bridge = new IframeBridge(allowedOrigin);
   const interceptor = new DOMInterceptor(
     (payload) => {
@@ -779,6 +884,7 @@ if (typeof window !== "undefined" && isLiveLocaleEnabled() && window.parent !==
     },
     (keys) => {
       bridge.sendToParent("VISIBLE_KEYS_CHANGED", keys);
+      bridge.sendToParent("VISIBLE_TEXTS_CHANGED", interceptor.getVisibleTexts());
     }
   );
   interceptor.init();
@@ -809,6 +915,7 @@ export {
   decodeKey,
   encodeKey,
   hasWatermark,
+  removeWatermarks,
   sanitizeZeroWidth,
   stripWatermark,
   unwrap,