akanjs 2.2.1 → 2.2.2-rc.0

package/client/translator.ts

@@ -11,9 +11,9 @@ export interface AllDictionary {
 
 export class Translator {
   static #langDictionaryMap = new Map<string, Dictionary>();
-  constructor(
-    dictionary: Record<string, Record<string, Record<string, unknown>>>,
-  ) {
+
+  static #seededDicts = new WeakSet<object>();
+  constructor(dictionary: Record<string, Record<string, Record<string, unknown>>>) {
     Object.entries(dictionary).forEach(([lang, dictionary]) => {
       this.#setDictionary(lang, dictionary);
     });
@@ -24,10 +24,12 @@ export class Translator {
 
   static seed(lang: string, dict: Dictionary | undefined) {
     if (!dict) return;
+    
+    if (Translator.#seededDicts.has(dict)) return;
+    Translator.#seededDicts.add(dict);
     const existingDictionary = Translator.#langDictionaryMap.get(lang) ?? {};
     Object.entries(dict).forEach(([key, modelDict]) => {
-      if (existingDictionary[key])
-        Object.assign(existingDictionary[key], modelDict);
+      if (existingDictionary[key]) Object.assign(existingDictionary[key], modelDict);
       else existingDictionary[key] = modelDict as Dictionary[string];
     });
     Translator.#langDictionaryMap.set(lang, existingDictionary);
@@ -36,22 +38,15 @@ export class Translator {
     Translator.seed(lang, dict);
     return Translator.#langDictionaryMap.get(lang) as Dictionary;
   }
-  translate(
-    lang: string,
-    key: string,
-    param?: Record<string, string | number>,
-  ): string {
+  translate(lang: string, key: string, param?: Record<string, string | number>): string {
     const dictionary = Translator.#langDictionaryMap.get(lang);
     if (!dictionary) return key;
     const msg = (pathGet(key, dictionary, ".", { t: key }) as { t: string }).t;
-    return param
-      ? msg.replace(/{([^}]+)}/g, (_, key: string) => param[key] as string)
-      : msg;
+    return param ? msg.replace(/{([^}]+)}/g, (_, key: string) => param[key] as string) : msg;
   }
   async getDictionary(lang: string) {
     const dictionary = Translator.#langDictionaryMap.get(lang);
-    if (!dictionary)
-      throw new Error(`Dictionary for language ${lang} not found`);
+    if (!dictionary) throw new Error(`Dictionary for language ${lang} not found`);
     return dictionary;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.2.1",
+  "version": "2.2.2-rc.0",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/ui/System/SSR.tsx

@@ -1,21 +1,10 @@
 import { getEnv } from "akanjs/base";
-import {
-  clsx,
-  type ReactFont,
-  router,
-  type WebAppManifest,
-} from "akanjs/client";
+import { clsx, type ReactFont, router, Translator, type WebAppManifest } from "akanjs/client";
 import { setRequestTheme } from "akanjs/fetch";
 import { Children, Fragment, type ReactNode, Suspense } from "react";
 import { FontCss } from "../fontCss";
 import { Load } from "../Load";
-import {
-  ClientBridge,
-  ClientInner,
-  ClientPathWrapper,
-  ClientSsrBridge,
-  ClientWrapper,
-} from "./Client";
+import { ClientBridge, ClientInner, ClientPathWrapper, ClientSsrBridge, ClientWrapper } from "./Client";
 import { ManifestLink, type ProviderProps } from "./Common";
 
 export const SSR = () => {
@@ -44,14 +33,13 @@ const SSRProvider = ({
   of,
 }: SSRProviderProps) => {
   setRequestTheme(theme);
-
+  if (dictionary && params.lang) Translator.seed(params.lang, dictionary);
   return (
     <Load.Page
       of={of}
       loader={async () => {
         const { lang } = params;
-        if (!router.isInitialized)
-          router.init({ type: "ssr", side: "server", lang, prefix });
+        if (!router.isInitialized) router.init({ type: "ssr", side: "server", lang, prefix });
         return { lang } as const;
       }}
       render={({ lang }) => (
@@ -65,24 +53,13 @@ const SSRProvider = ({
           prefix={prefix}
           layoutStyle={layoutStyle}
         >
-          <ClientWrapper
-            theme={theme}
-            lang={lang}
-            reconnect={reconnect}
-            dictionary={dictionary}
-          >
+          <ClientWrapper theme={theme} lang={lang} reconnect={reconnect} dictionary={dictionary}>
             <Fragment key="children">{Children.toArray(children)}</Fragment>
             <Suspense key="client-inner" fallback={null}>
               <ClientInner />
             </Suspense>
             <Suspense key="client-bridge" fallback={null}>
-              <ClientBridge
-                key="bridge"
-                env={env}
-                theme={theme}
-                prefix={prefix}
-                gaTrackingId={gaTrackingId}
-              />
+              <ClientBridge key="bridge" env={env} theme={theme} prefix={prefix} gaTrackingId={gaTrackingId} />
               <ClientSsrBridge key="ssr-bridge" lang={lang} prefix={prefix} />
             </Suspense>
           </ClientWrapper>
@@ -101,14 +78,7 @@ const ServerFontFace = ({ fonts }: { fonts: ReactFont[] }) => {
   return (
     <>
       {preloads.map((preload) => (
-        <link
-          key={preload.href}
-          rel="preload"
-          href={preload.href}
-          as="font"
-          type={preload.type}
-          crossOrigin=""
-        />
+        <link key={preload.href} rel="preload" href={preload.href} as="font" type={preload.type} crossOrigin="" />
       ))}
       {css ? (
         
@@ -145,23 +115,14 @@ const SSRWrapper = ({
     {head ? <Fragment key="head">{head}</Fragment> : null}
     <div key="frame-root" id="frameRoot" className={className}>
       <ClientPathWrapper layoutStyle={layoutStyle} prefix={prefix}>
-        <div
-          key="top-safe-area"
-          id="topSafeArea"
-          className={clsx("fixed inset-x-0 top-0 bg-base-100")}
-        />
-        <div
-          key="page-containers"
-          id="pageContainers"
-          className={clsx("isolate")}
-        >
+        <div key="top-safe-area" id="topSafeArea" className={clsx("fixed inset-x-0 top-0 bg-base-100")} />
+        <div key="page-containers" id="pageContainers" className={clsx("isolate")}>
           <div id="pageContainer">
             <div
               id="pageContent"
               className={clsx("relative isolate", {
                 "w-full": layoutStyle === "web",
-                "left-1/2 h-screen w-[600px] -translate-x-1/2":
-                  layoutStyle === "mobile",
+                "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile",
               })}
             >
               {Children.toArray(children)}
@@ -176,10 +137,7 @@ const SSRWrapper = ({
             "w-full": layoutStyle === "web",
           })}
         >
-          <div
-            id="topInsetContent"
-            className={clsx("relative isolate size-full")}
-          />
+          <div id="topInsetContent" className={clsx("relative isolate size-full")} />
         </div>
         <div
           key="top-left-action"
@@ -196,11 +154,7 @@ const SSRWrapper = ({
         >
           <div id="bottomInsetContent" className="isolate size-full" />
         </div>
-        <div
-          key="bottom-safe-area"
-          id="bottomSafeArea"
-          className="fixed inset-x-0 bg-base-100"
-        />
+        <div key="bottom-safe-area" id="bottomSafeArea" className="fixed inset-x-0 bg-base-100" />
       </ClientPathWrapper>
     </div>
   </>