npm - react-email-locale-lab - Versions diffs - 0.4.0 → 0.4.1 - Mend

react-email-locale-lab 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/core/browser-translator-provider.d.ts +3 -1
package/dist/core/types.d.ts +1 -0
package/dist/index.js +103 -99
package/package.json +1 -1

package/dist/core/browser-translator-provider.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import type { TranslationProvider } from './types';
 type BrowserTranslator = {
-    translate: (text: string) => Promise<string>;
+    translate: (text: string, options?: {
+        signal?: AbortSignal;
+    }) => Promise<string>;
     destroy?: () => void;
 };
 type TranslatorFactory = {

package/dist/core/types.d.ts CHANGED Viewed

@@ -22,6 +22,7 @@ export type TranslationRequest = {
     texts: string[];
     sourceLocale: string;
     targetLocale: string;
+    signal?: AbortSignal;
 };
 export type TranslationProvider = {
     name: string;

package/dist/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import { createElement as B, useMemo as R, useState as L, useEffect as S } from "react";
-import { renderToStaticMarkup as F } from "react-dom/server";
-const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
+import { createElement as F, useMemo as C, useState as T, useEffect as P } from "react";
+import { renderToStaticMarkup as _ } from "react-dom/server";
+const O = ["alt", "title", "aria-label"], H = /* @__PURE__ */ new Set([
   "ar",
   "arc",
   "ckb",
@@ -18,43 +18,43 @@ const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
   "ug",
   "ur",
   "yi"
-]), H = /* @__PURE__ */ new Set(["adlm", "arab", "hebr", "mand", "nkoo", "rohg", "samr", "syrc", "thaa"]), j = (e) => {
+]), j = /* @__PURE__ */ new Set(["adlm", "arab", "hebr", "mand", "nkoo", "rohg", "samr", "syrc", "thaa"]), z = (e) => {
   const t = e.trim().split(/[-_]/), r = t[0].toLowerCase(), s = t.findIndex((o, c) => c > 0 && /^[a-z0-9]$/i.test(o)), a = t.slice(1, s === -1 ? void 0 : s).find((o) => /^[a-z]{4}$/i.test(o));
-  return a ? H.has(a.toLowerCase()) ? "rtl" : "ltr" : O.has(r) ? "rtl" : "ltr";
-}, C = (e) => new RegExp("\\p{L}", "u").test(e), z = (e) => {
+  return a ? j.has(a.toLowerCase()) ? "rtl" : "ltr" : H.has(r) ? "rtl" : "ltr";
+}, U = (e) => new RegExp("\\p{L}", "u").test(e), q = (e) => {
   const t = [], r = e.createTreeWalker(e.body, NodeFilter.SHOW_TEXT);
   let s = r.nextNode();
   for (; s; ) {
     const n = s, a = n.parentElement, o = n.data.trim();
-    if (a && !["STYLE", "SCRIPT"].includes(a.tagName) && C(o)) {
+    if (a && !["STYLE", "SCRIPT"].includes(a.tagName) && U(o)) {
       const c = n.data.match(/^\s*/)?.[0] ?? "", u = n.data.match(/\s*$/)?.[0] ?? "";
-      t.push({ value: o, apply: (w) => {
-        n.data = `${c}${w}${u}`;
+      t.push({ value: o, apply: (v) => {
+        n.data = `${c}${v}${u}`;
       } });
     }
     s = r.nextNode();
   }
   for (const n of e.body.querySelectorAll("*"))
-    for (const a of _) {
+    for (const a of O) {
       const o = n.getAttribute(a)?.trim();
-      o && C(o) && t.push({ value: o, apply: (c) => n.setAttribute(a, c) });
+      o && U(o) && t.push({ value: o, apply: (c) => n.setAttribute(a, c) });
     }
   return t;
-}, q = async (e, t, r, s) => {
+}, D = async (e, t, r, s) => {
   if (r === t) return e;
   const n = new DOMParser().parseFromString(e, "text/html");
-  n.documentElement.lang = r, n.documentElement.dir = j(r);
-  const a = z(n), o = await s(a.map((c) => c.value));
+  n.documentElement.lang = r, n.documentElement.dir = z(r);
+  const a = q(n), o = await s(a.map((c) => c.value));
   return a.forEach((c, u) => c.apply(o[u] ?? c.value)), `<!doctype html>${n.documentElement.outerHTML}`;
-}, U = async (e) => {
+}, $ = async (e) => {
   const t = new TextEncoder().encode(e), r = await crypto.subtle.digest("SHA-256", t);
   return Array.from(new Uint8Array(r).slice(0, 6), (s) => s.toString(16).padStart(2, "0")).join("");
-}, D = (e) => {
+}, G = (e) => {
   const t = new DOMParser().parseFromString(e, "text/html");
   return Array.from(t.body.querySelectorAll("[style]")).find(
     (n) => n.style.display === "none" && n.textContent?.trim()
   )?.textContent?.replace(/[\u00A0\u200B-\u200F\u202A-\u202E\u2066-\u2069\uFEFF]/g, "").trim() || void 0;
-}, G = ({ locale: e, preview: t, sourceRevision: r, onRefresh: s }) => /* @__PURE__ */ d("article", { className: "preview-card", children: [
+}, W = ({ locale: e, preview: t, sourceRevision: r, onRefresh: s }) => /* @__PURE__ */ d("article", { className: "preview-card", children: [
   /* @__PURE__ */ d("header", { className: "preview-header", children: [
     /* @__PURE__ */ d("div", { children: [
       /* @__PURE__ */ i("strong", { children: e.label }),
@@ -73,98 +73,100 @@ const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
   ] }),
   /* @__PURE__ */ d("div", { className: "preheader", children: [
     /* @__PURE__ */ i("span", { children: "Preheader" }),
-    /* @__PURE__ */ i("strong", { children: D(t.html) ?? "Not set" })
+    /* @__PURE__ */ i("strong", { children: G(t.html) ?? "Not set" })
   ] }),
   /* @__PURE__ */ i("iframe", { title: `${e.label} preview`, srcDoc: t.html, sandbox: "allow-popups allow-popups-to-escape-sandbox" }),
   t.error && /* @__PURE__ */ i("div", { className: "preview-error", children: t.error }),
   t.status !== "source" && /* @__PURE__ */ i("button", { className: "refresh", onClick: s, children: "Regenerate translation" })
-] }), W = (e) => {
+] }), V = (e) => {
   if ("render" in e && e.render) return e.render();
   const t = e.props ?? e.component.PreviewProps ?? {};
-  return B(e.component, t);
-}, $ = "/preview", k = (e = $) => `/${e}`.replace(/\/+/g, "/").replace(/\/$/, "") || $, E = (e, t, r) => {
-  const s = k(r), a = (e.pathname.startsWith(`${s}/`) ? decodeURIComponent(e.pathname.slice(s.length + 1)) : void 0) || e.searchParams.get("template") || void 0;
+  return F(e.component, t);
+}, x = "/preview", M = (e = x) => `/${e}`.replace(/\/+/g, "/").replace(/\/$/, "") || x, A = (e, t, r) => {
+  const s = M(r), a = (e.pathname.startsWith(`${s}/`) ? decodeURIComponent(e.pathname.slice(s.length + 1)) : void 0) || e.searchParams.get("template") || void 0;
   return a && t.includes(a) ? a : t[0];
-}, x = (e, t = 3) => e.searchParams.get("langs")?.split(",").filter(Boolean).slice(0, t) ?? [], I = (e, t, r) => {
+}, I = (e, t = 3) => e.searchParams.get("langs")?.split(",").filter(Boolean).slice(0, t) ?? [], k = (e, t, r) => {
   const s = new URL(e);
-  return s.pathname = `${k(r)}/${encodeURIComponent(t)}`, s.searchParams.delete("template"), s;
-}, V = (e, t) => {
+  return s.pathname = `${M(r)}/${encodeURIComponent(t)}`, s.searchParams.delete("template"), s;
+}, J = (e, t) => {
   const r = new URL(e);
   return t.length ? r.searchParams.set("langs", t.join(",")) : r.searchParams.delete("langs"), r;
-}, N = 3, J = (e) => {
-  const t = R(() => Object.keys(e.templates), [e.templates]), [r, s] = L(() => E(new URL(window.location.href), t, e.routeBasePath)), [n, a] = L(() => x(new URL(window.location.href), N)), [o, c] = L({}), [u, w] = L(""), [v, b] = L(0), f = e.templates[r] ?? e.templates[t[0]], p = R(
-    () => `<!doctype html>${F(W(f))}`,
-    [f, v]
-  ), g = e.locales.filter((l) => n.includes(l.code)), A = [e.sourceLocale, ...g];
-  return S(() => {
-    const l = E(new URL(window.location.href), t, e.routeBasePath);
-    window.history.replaceState({}, "", I(new URL(window.location.href), l, e.routeBasePath));
-    const y = () => {
-      s(E(new URL(window.location.href), t, e.routeBasePath)), a(x(new URL(window.location.href), N));
+}, N = 3, Y = (e) => {
+  const t = C(() => Object.keys(e.templates), [e.templates]), [r, s] = T(() => A(new URL(window.location.href), t, e.routeBasePath)), [n, a] = T(() => I(new URL(window.location.href), N)), [o, c] = T({}), [u, v] = T(""), [g, y] = T(0), L = e.templates[r] ?? e.templates[t[0]], m = C(
+    () => `<!doctype html>${_(V(L))}`,
+    [L, g]
+  ), f = e.locales.filter((l) => n.includes(l.code)), b = [e.sourceLocale, ...f];
+  return P(() => {
+    const l = A(new URL(window.location.href), t, e.routeBasePath);
+    window.history.replaceState({}, "", k(new URL(window.location.href), l, e.routeBasePath));
+    const w = () => {
+      s(A(new URL(window.location.href), t, e.routeBasePath)), a(I(new URL(window.location.href), N));
     };
-    return window.addEventListener("popstate", y), () => window.removeEventListener("popstate", y);
-  }, [e.routeBasePath, t]), S(() => e.sourceUpdates?.subscribe(() => {
-    b((l) => l + 1);
-  }), [e.sourceUpdates]), S(() => {
+    return window.addEventListener("popstate", w), () => window.removeEventListener("popstate", w);
+  }, [e.routeBasePath, t]), P(() => e.sourceUpdates?.subscribe(() => {
+    y((l) => l + 1);
+  }), [e.sourceUpdates]), P(() => {
     let l = !1;
-    return U(p).then((y) => {
-      l || w(y);
+    return $(m).then((w) => {
+      l || v(w);
     }), () => {
       l = !0;
     };
-  }, [p]), S(() => {
+  }, [m]), P(() => {
     let l = !1;
-    return c((h) => Object.fromEntries(A.map((m) => [
-      m.code,
-      m.code === e.sourceLocale.code ? { html: p, status: "source" } : { html: h[m.code]?.html ?? p, status: "stale", revision: h[m.code]?.revision }
+    const w = new AbortController();
+    return c((p) => Object.fromEntries(b.map((h) => [
+      h.code,
+      h.code === e.sourceLocale.code ? { html: m, status: "source" } : { html: p[h.code]?.html ?? m, status: "stale", revision: p[h.code]?.revision }
     ]))), (async () => {
-      for (const h of g) {
+      for (const p of f) {
         if (l) return;
-        c((m) => ({
-          ...m,
-          [h.code]: { ...m[h.code], status: "translating", error: void 0 }
+        c((h) => ({
+          ...h,
+          [p.code]: { ...h[p.code], status: "translating", error: void 0 }
         }));
         try {
-          const m = await q(p, e.sourceLocale.code, h.code, (P) => e.provider.translate({
-            texts: P,
+          const h = await D(m, e.sourceLocale.code, p.code, (E) => e.provider.translate({
+            texts: E,
             sourceLocale: e.sourceLocale.translationCode ?? e.sourceLocale.code,
-            targetLocale: h.translationCode ?? h.code
-          })), T = await U(p);
-          l || c((P) => ({ ...P, [h.code]: { html: m, status: "ready", revision: T } }));
-        } catch (m) {
-          l || c((T) => ({
-            ...T,
-            [h.code]: {
-              ...T[h.code],
+            targetLocale: p.translationCode ?? p.code,
+            signal: w.signal
+          })), S = await $(m);
+          l || c((E) => ({ ...E, [p.code]: { html: h, status: "ready", revision: S } }));
+        } catch (h) {
+          l || c((S) => ({
+            ...S,
+            [p.code]: {
+              ...S[p.code],
               status: "error",
-              error: m instanceof Error ? m.message : String(m)
+              error: h instanceof Error ? h.message : String(h)
             }
           }));
         }
       }
     })(), () => {
-      l = !0;
+      l = !0, w.abort();
     };
-  }, [p, v, n.join(",")]), {
+  }, [m, g, n.join(",")]), {
     activeLocaleCodes: n,
-    activeLocales: g,
-    previewLocales: A,
+    activeLocales: f,
+    previewLocales: b,
     previews: o,
-    refreshPreviews: () => b((l) => l + 1),
+    refreshPreviews: () => y((l) => l + 1),
     selectTemplate: (l) => {
-      s(l), window.history.pushState({}, "", I(new URL(window.location.href), l, e.routeBasePath));
+      s(l), window.history.pushState({}, "", k(new URL(window.location.href), l, e.routeBasePath));
     },
     selectedTemplateId: r,
-    sourceHtml: p,
+    sourceHtml: m,
     sourceRevision: u,
     templateIds: t,
     toggleLocale: (l) => {
-      const y = n.includes(l) ? n.filter((h) => h !== l) : [...n, l].slice(0, N);
-      a(y), window.history.replaceState({}, "", V(new URL(window.location.href), y));
+      const w = n.includes(l) ? n.filter((R) => R !== l) : [...n, l].slice(0, N);
+      a(w), window.history.replaceState({}, "", J(new URL(window.location.href), w));
     }
   };
-}, re = ({ config: e }) => {
-  const t = J(e);
+}, ae = ({ config: e }) => {
+  const t = Y(e);
   return /* @__PURE__ */ d("main", { className: "email-lab", children: [
     /* @__PURE__ */ d("header", { className: "topbar", children: [
       /* @__PURE__ */ d("div", { className: "topbar-copy", children: [
@@ -213,7 +215,7 @@ const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
       /* @__PURE__ */ i("span", { children: "The source template renders immediately; translation starts only on demand." })
     ] }),
     /* @__PURE__ */ i("section", { className: "grid", children: t.previewLocales.map((r) => /* @__PURE__ */ i(
-      G,
+      W,
       {
         locale: r,
         preview: t.previews[r.code] ?? { html: t.sourceHtml, status: "stale" },
@@ -223,9 +225,9 @@ const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
       r.code
     )) })
   ] });
-}, M = "react-email-locale-lab:translations:v1", Y = () => {
+}, B = "react-email-locale-lab:translations:v1", K = () => {
   try {
-    const e = window.sessionStorage?.getItem(M);
+    const e = window.sessionStorage?.getItem(B);
     if (!e) return /* @__PURE__ */ new Map();
     const t = JSON.parse(e);
     return Array.isArray(t) ? new Map(t.filter(
@@ -234,26 +236,26 @@ const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
   } catch {
     return /* @__PURE__ */ new Map();
   }
-}, K = (e) => {
+}, X = (e) => {
   try {
-    window.sessionStorage?.setItem(M, JSON.stringify([...e]));
+    window.sessionStorage?.setItem(B, JSON.stringify([...e]));
   } catch {
   }
-}, ae = () => {
-  const e = /* @__PURE__ */ new Map(), t = Y(), r = /* @__PURE__ */ new Map(), s = async (a, o) => {
+}, se = () => {
+  const e = /* @__PURE__ */ new Map(), t = K(), r = /* @__PURE__ */ new Map(), s = async (a, o) => {
     const c = r.get(a) ?? Promise.resolve();
     let u = () => {
     };
-    const w = new Promise((b) => {
-      u = b;
-    }), v = c.catch(() => {
-    }).then(() => w);
-    r.set(a, v), await c.catch(() => {
+    const v = new Promise((y) => {
+      u = y;
+    }), g = c.catch(() => {
+    }).then(() => v);
+    r.set(a, g), await c.catch(() => {
     });
     try {
       return await o();
     } finally {
-      u(), r.get(a) === v && r.delete(a);
+      u(), r.get(a) === g && r.delete(a);
     }
   }, n = async (a, o) => {
     if (!window.Translator)
@@ -268,28 +270,30 @@ const _ = ["alt", "title", "aria-label"], O = /* @__PURE__ */ new Set([
   };
   return {
     name: "Browser Translator · on-device",
-    async translate({ texts: a, sourceLocale: o, targetLocale: c }) {
+    async translate({ texts: a, sourceLocale: o, targetLocale: c, signal: u }) {
       if (a.length === 0) return [];
-      const u = await n(o, c), w = `${o}:${c}`;
-      return s(w, async () => {
-        const v = [];
-        let b = !1;
+      u?.throwIfAborted();
+      const v = await n(o, c), g = `${o}:${c}`;
+      return s(g, async () => {
+        const y = [];
+        let L = !1;
         try {
-          for (const f of a) {
-            const p = `${w}:${f}`;
-            let g = t.get(p);
-            g || (g = await u.translate(f), t.set(p, g), b = !0), v.push(g);
+          for (const m of a) {
+            u?.throwIfAborted();
+            const f = `${g}:${m}`;
+            let b = t.get(f);
+            b || (b = await v.translate(m, { signal: u }), t.set(f, b), L = !0), y.push(b);
           }
-          return v;
+          return y;
         } finally {
-          b && K(t);
+          L && X(t);
         }
       });
     }
   };
-}, se = (e) => e;
+}, ne = (e) => e;
 export {
-  re as EmailLabApp,
-  ae as browserTranslatorProvider,
-  se as defineEmailLab
+  ae as EmailLabApp,
+  se as browserTranslatorProvider,
+  ne as defineEmailLab
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-email-locale-lab",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Real-time multi-language previews for React Email templates.",
   "type": "module",
   "main": "./dist/index.js",