chore(i18n): bump @solid-primitives/i18n and fix HMR

Author: dvcol

package.json

@@ -38,7 +38,7 @@
     "@emailjs/browser": "^3.11.0",
     "@lottiefiles/lottie-player": "^2.0.2",
     "@motionone/solid": "^10.16.2",
-    "@solid-primitives/i18n": "^1.4.0",
+    "@solid-primitives/i18n": "^2.0.0",
     "@solidjs/meta": "^0.28.5",
     "@solidjs/router": "^0.8.2",
     "@suid/icons-material": "^0.6.9",

pnpm-lock.yaml

@@ -1,15 +1,36 @@
-import { createI18nContext, I18nContext as I18nSolidContext } from '@solid-primitives/i18n';
+import { flatten } from '@solid-primitives/i18n';
+
+import { createMemo, createSignal } from 'solid-js';
+import { createStore } from 'solid-js/store';
 
 import type { ParentComponent } from 'solid-js';
+import type { Dictionaries, Dictionary, I18nContextModel, Locale } from '~/models';
+
+import { I18nContext } from '~/services/i18n';
 
-type CreateI18nContextInputs = Parameters<typeof createI18nContext>;
 export type I18nProviderProps = {
-  initialDictionary?: CreateI18nContextInputs[0];
-  initialLocale?: CreateI18nContextInputs[1];
+  initialDictionaries?: Dictionaries;
+  initialLocale?: Locale;
 };
-export const I18nContext: ParentComponent<I18nProviderProps> = props => {
-  const value = createI18nContext(props.initialDictionary, props.initialLocale);
-  return <I18nSolidContext.Provider value={value}>{props.children}</I18nSolidContext.Provider>;
+export const I18nContextProvider: ParentComponent<I18nProviderProps> = props => {
+  const [locale, setLocale] = createSignal<Locale>(props.initialLocale ?? 'en');
+  const [dictionaries, setDictionaries] = createStore<Dictionaries>(props.initialDictionaries ?? { en: {} });
+
+  const dictionary = createMemo(() => dictionaries[locale()] ?? {});
+  const dictionaryFlat = createMemo(() => flatten(dictionary()));
+
+  const setDictionary = (_locale: Locale, _dictionary: Dictionary) => setDictionaries(_was => ({ [_locale]: _dictionary }));
+  const context: I18nContextModel = {
+    dictionaries,
+    dictionary,
+    dictionaryFlat,
+    locale,
+    setLocale,
+    setDictionary,
+    setDictionaries,
+  };
+
+  return <I18nContext.Provider value={context}>{props.children}</I18nContext.Provider>;
 };
 
 export default I18nContext;

src/components/common/i18n/i18n-context.tsx

@@ -1,13 +1,13 @@
-import { useI18n } from '@solid-primitives/i18n';
-
 import type { Component } from 'solid-js';
 
+import { useI18n } from '~/services/i18n';
+
 export const I18nHmr: Component = () => {
-  const [, { add }] = useI18n();
+  const [, { setDictionaries }] = useI18n();
 
   if (import.meta.hot) {
     import.meta.hot.on('virtual:vite-plugin-i18n', ({ data }) => {
-      if (data) Object.keys(data).forEach(lang => add(lang, data[lang]));
+      if (data) setDictionaries(data);
     });
   }
 

src/components/common/i18n/i18n-hmr.tsx

@@ -1,20 +1,22 @@
 // @ts-expect-error -- TODO: fix typing
 import { locales } from 'virtual:vite-plugin-i18n';
 
-import { I18nContext } from './i18n-context';
+import { I18nContextProvider } from './i18n-context';
 
 import I18nHmr from './i18n-hmr';
 
 import type { ParentComponent } from 'solid-js';
 
-export const I18nProvider: ParentComponent<{ initialLocale?: string }> = props => {
+import type { Locale } from '~/models';
+
+export const I18nProvider: ParentComponent<{ initialLocale?: Locale }> = props => {
   const user = navigator.language;
   const fallback = user === 'fr' ? 'fr' : 'en';
   return (
-    <I18nContext initialDictionary={locales} initialLocale={props.initialLocale ?? fallback}>
+    <I18nContextProvider initialDictionaries={locales} initialLocale={props.initialLocale ?? fallback}>
       <I18nHmr />
       {props.children}
-    </I18nContext>
+    </I18nContextProvider>
   );
 };
 

src/components/common/i18n/i18n-provider.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n';
 import { useNavigate } from '@solidjs/router';
 import { Button, Stack, useMediaQuery } from '@suid/material';
 
@@ -9,6 +8,7 @@ import StackSvg from 'line-md/svg/text-box-multiple.svg?component-solid';
 import type { Component } from 'solid-js';
 
 import { Routes, useNavbar } from '~/services';
+import { useI18n } from '~/services/i18n';
 import { BreakPoints, BreakPointsStop } from '~/themes';
 
 export const NavbarHeader: Component = () => {

src/components/common/navbar/navbar-header.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n';
 import { Link } from '@solidjs/router';
 
 import { Box } from '@suid/material';
@@ -18,6 +17,7 @@ import { GithubLoop } from '~/components/common/svg';
 
 import { AppLink } from '~/models';
 import { RoutesMeta, useNavbar, useRouteData } from '~/services';
+import { useI18n } from '~/services/i18n';
 import { BreakPointsStop } from '~/themes';
 import { camelToSnakeCase } from '~/utils';
 

src/components/common/navbar/navbar.tsx

@@ -1,10 +1,9 @@
-import { useI18n } from '@solid-primitives/i18n';
-
 import { createEffect } from 'solid-js';
 
 import type { Component } from 'solid-js';
 
 import { useRouteData } from '~/services';
+import { useI18n } from '~/services/i18n';
 
 export const RouteData: Component = () => {
   const [t] = useI18n();

src/components/common/router/route-data.tsx

@@ -1,4 +1,3 @@
-import { useI18n } from '@solid-primitives/i18n';
 import { useNavigate } from '@solidjs/router';
 
 import { Box } from '@suid/material';
@@ -12,6 +11,7 @@ import type { JSX, ParentComponent } from 'solid-js';
 
 import { StackPageTransition } from '~/components/common/stack/stack-page-transition';
 import { RoutesMetas, useNavbar, useRouteData } from '~/services';
+import { useI18n } from '~/services/i18n';
 import { Colors } from '~/themes';
 
 type TransformOptions = { offset?: number; brightness?: number } & Omit<JSX.CSSProperties, 'offset' | 'filter' | 'transform'>;

src/components/common/stack/stack.tsx

@@ -1,11 +1,12 @@
-import { useI18n } from '@solid-primitives/i18n';
 import DownloadSvg from 'line-md/svg/downloading-loop.svg?component-solid';
 
 import { toast } from 'solid-toast';
 import { useRegisterSW } from 'virtual:pwa-register/solid';
 
 import type { Component } from 'solid-js';
 
+import { useI18n } from '~/services/i18n';
+
 export const Reload: Component = () => {
   const [t] = useI18n();