@pushwoosh/dumb-components 1.1.133 → 1.1.134

package/polyglot/react.js

@@ -1,7 +1,62 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import { stringToAst } from './liquid/parser';
 import { renderToReact, renderToString } from './liquid/render';
-const LangContext = createContext(null);
+const createLangPack = (language, timezone) => {
+  const astCache = {};
+  const register = languages => {
+    const langMessages = languages[language] ?? languages.en;
+    if (!langMessages) {
+      return;
+    }
+    Object.entries(langMessages).forEach(([key, message]) => {
+      if (key in astCache) {
+        return;
+      }
+      try {
+        astCache[key] = stringToAst(message);
+      } catch (e) {
+        console.error(key, message, e);
+        astCache[key] = [];
+      }
+    });
+  };
+  const getAst = message => {
+    const ast = astCache[message];
+    if (!ast) {
+      console.error('no message', message);
+      return [];
+    }
+    return ast;
+  };
+  return {
+    language,
+    timezone,
+    register,
+    lang: allProps => {
+      const {
+        message,
+        ...values
+      } = allProps;
+      return renderToString(getAst(message), {
+        values,
+        language,
+        timezone
+      });
+    },
+    langReact: allProps => {
+      const {
+        message,
+        ...values
+      } = allProps;
+      return renderToReact(getAst(message), {
+        values,
+        language,
+        timezone
+      });
+    }
+  };
+};
+const LangContext = createContext(createLangPack('en', 'UTC'));
 export const LangProvider = ({
   timezone,
   language,
@@ -9,49 +64,9 @@ export const LangProvider = ({
   children
 }) => {
   const langFnPack = useMemo(() => {
-    const langMessages = languages[language];
-    const asts = Object.fromEntries(Object.entries(langMessages).map(([k, v]) => {
-      try {
-        return [k, stringToAst(v)];
-      } catch (e) {
-        console.error(k, v, e);
-        return [k, []];
-      }
-    }));
-    const getAst = message => {
-      const ast = asts[message];
-      if (!ast) {
-        console.error('no message', message);
-        return [];
-      }
-      return ast;
-    };
-    return {
-      lang: allProps => {
-        const {
-          message,
-          ...values
-        } = allProps;
-        const ast = getAst(message);
-        return renderToString(ast, {
-          values,
-          language,
-          timezone
-        });
-      },
-      langReact: allProps => {
-        const {
-          message,
-          ...values
-        } = allProps;
-        const ast = getAst(message);
-        return renderToReact(ast, {
-          values,
-          language,
-          timezone
-        });
-      }
-    };
+    const pack = createLangPack(language, timezone);
+    pack.register(languages);
+    return pack;
   }, [languages, language, timezone]);
   return React.createElement(LangContext.Provider, {
     value: langFnPack
@@ -60,4 +75,24 @@ export const LangProvider = ({
 export const LangBase = props => {
   return useContext(LangContext).langReact(props);
 };
-export const useLangBase = () => useContext(LangContext).lang;
+export const useLangBase = () => useContext(LangContext).lang;
+export const LangLib = ({
+  $languages,
+  ...props
+}) => {
+  const ctx = useContext(LangContext);
+  useMemo(() => ctx.register($languages), [ctx, $languages]);
+  return ctx.langReact(props);
+};
+export const useLangLib = languages => {
+  const ctx = useContext(LangContext);
+  useMemo(() => ctx.register(languages), [ctx, languages]);
+  return ctx.lang;
+};
+export const createLang = languages => ({
+  Lang: props => React.createElement(LangLib, {
+    "$languages": languages,
+    ...props
+  }),
+  useLang: () => useLangLib(languages)
+});