@symbo.ls/brender 3.7.5 → 3.7.6

package/dist/cjs/render.js

@@ -817,7 +817,28 @@ const renderPage = async (data, route = "/", options = {}) => {
     const depth = route === "/" ? 0 : route.replace(/^\/|\/$/g, "").split("/").length;
     const prefix = depth > 0 ? "../".repeat(depth) : "./";
     if (hydrate2) {
-      isrBody = `<script>window.__BRENDER__ = true<\/script>
+      let translationSeed = "";
+      if (result.ssrTranslations) {
+        const polyglotCfg2 = data.polyglot || data.config?.polyglot;
+        const storagePrefix = polyglotCfg2?.storagePrefix || "";
+        const storageLangKey = polyglotCfg2?.storageLangKey || "";
+        const seedEntries = [];
+        for (const lang2 in result.ssrTranslations) {
+          const map = result.ssrTranslations[lang2];
+          if (map && typeof map === "object") {
+            seedEntries.push(`localStorage.setItem(${JSON.stringify(storagePrefix + lang2)},${JSON.stringify(JSON.stringify(map))})`);
+          }
+        }
+        if (storageLangKey) {
+          const defaultLang = polyglotCfg2?.defaultLang || "en";
+          seedEntries.push(`if(!localStorage.getItem(${JSON.stringify(storageLangKey)}))localStorage.setItem(${JSON.stringify(storageLangKey)},${JSON.stringify(defaultLang)})`);
+        }
+        if (seedEntries.length) {
+          translationSeed = `<script>try{${seedEntries.join(";")}}catch(e){}<\/script>
+`;
+        }
+      }
+      isrBody = `${translationSeed}<script>window.__BRENDER__ = true<\/script>
 <script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
     } else {
       isrBody = `<script type="module">

package/dist/esm/render.js

@@ -778,7 +778,28 @@ const renderPage = async (data, route = "/", options = {}) => {
     const depth = route === "/" ? 0 : route.replace(/^\/|\/$/g, "").split("/").length;
     const prefix = depth > 0 ? "../".repeat(depth) : "./";
     if (hydrate2) {
-      isrBody = `<script>window.__BRENDER__ = true<\/script>
+      let translationSeed = "";
+      if (result.ssrTranslations) {
+        const polyglotCfg2 = data.polyglot || data.config?.polyglot;
+        const storagePrefix = polyglotCfg2?.storagePrefix || "";
+        const storageLangKey = polyglotCfg2?.storageLangKey || "";
+        const seedEntries = [];
+        for (const lang2 in result.ssrTranslations) {
+          const map = result.ssrTranslations[lang2];
+          if (map && typeof map === "object") {
+            seedEntries.push(`localStorage.setItem(${JSON.stringify(storagePrefix + lang2)},${JSON.stringify(JSON.stringify(map))})`);
+          }
+        }
+        if (storageLangKey) {
+          const defaultLang = polyglotCfg2?.defaultLang || "en";
+          seedEntries.push(`if(!localStorage.getItem(${JSON.stringify(storageLangKey)}))localStorage.setItem(${JSON.stringify(storageLangKey)},${JSON.stringify(defaultLang)})`);
+        }
+        if (seedEntries.length) {
+          translationSeed = `<script>try{${seedEntries.join(";")}}catch(e){}<\/script>
+`;
+        }
+      }
+      isrBody = `${translationSeed}<script>window.__BRENDER__ = true<\/script>
 <script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
     } else {
       isrBody = `<script type="module">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.7.5",
+  "version": "3.7.6",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -36,7 +36,7 @@
     "dev:rita": "node examples/serve-rita.js"
   },
   "dependencies": {
-    "@symbo.ls/helmet": "^3.7.5",
+    "@symbo.ls/helmet": "^3.7.6",
     "linkedom": "^0.16.8"
   },
   "devDependencies": {

package/render.js

@@ -1024,7 +1024,31 @@ export const renderPage = async (data, route = '/', options = {}) => {
       // True hydration: signal the SPA to adopt existing DOM nodes
       // instead of creating new ones. The SPA detects __BRENDER__ flag
       // and uses onlyResolveExtends + node adoption.
-      isrBody = `<script>window.__BRENDER__ = true</script>
+      //
+      // Seed client-side polyglot with SSR translations so that
+      // el.call('polyglot', key) resolves immediately during hydration
+      // instead of showing raw keys until the async fetch completes.
+      let translationSeed = ''
+      if (result.ssrTranslations) {
+        const polyglotCfg = data.polyglot || data.config?.polyglot
+        const storagePrefix = polyglotCfg?.storagePrefix || ''
+        const storageLangKey = polyglotCfg?.storageLangKey || ''
+        const seedEntries = []
+        for (const lang in result.ssrTranslations) {
+          const map = result.ssrTranslations[lang]
+          if (map && typeof map === 'object') {
+            seedEntries.push(`localStorage.setItem(${JSON.stringify(storagePrefix + lang)},${JSON.stringify(JSON.stringify(map))})`)
+          }
+        }
+        if (storageLangKey) {
+          const defaultLang = polyglotCfg?.defaultLang || 'en'
+          seedEntries.push(`if(!localStorage.getItem(${JSON.stringify(storageLangKey)}))localStorage.setItem(${JSON.stringify(storageLangKey)},${JSON.stringify(defaultLang)})`)
+        }
+        if (seedEntries.length) {
+          translationSeed = `<script>try{${seedEntries.join(';')}}catch(e){}</script>\n`
+        }
+      }
+      isrBody = `${translationSeed}<script>window.__BRENDER__ = true</script>
 <script type="module" src="${prefix}${isr.clientScript}"></script>`
     } else {
       // Legacy swap mode: SPA creates new DOM, MutationObserver removes brender nodes