Refactor: setLocale$ to storeLocale$ and QRL for functions

Author: robisim74

.eslintrc.cjs

@@ -38,6 +38,5 @@ module.exports = {
     'no-console': 'off',
     'max-len': ["error", { "code": 120, "tabWidth": 2, "ignoreRegExpLiterals": true }],
     'quotes': ["error", "single", { "avoidEscape": true }],
-    'qwik/valid-lexical-scope': 'off'
   },
 };

README.md

@@ -152,8 +152,8 @@ export const resolveLocale$: ResolveLocaleFn = $(() => {
     /* Must contain the logic to resolve which locale to use during SSR */
 });
 
-export const setLocale$: SetLocaleFn = $((locale: SpeakLocale) => {
-    /* Must contain the logic to set the locale on Client when changes */
+export const storeLocale$: StoreLocaleFn = $((locale: SpeakLocale) => {
+    /* Must contain the logic to store the locale on Client when changes */
 });
 
 export const handleMissingTranslation$: HandleMissingTranslationFn = $((key: string, value?: string, params?: any, ctx?: SpeakState) => {
@@ -251,11 +251,7 @@ npm run build
 ```
 
 ## What's new
-> Released v0.0.4
-
-> Translate head
-> Preloading data
-> Fallback for missing values
+> Released v0.0.5
 
 ## License
 MIT

package-lock.json

@@ -31,10 +31,10 @@
     "@types/eslint": "8.4.5",
     "@types/jest": "^28.1.6",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.30.6",
-    "@typescript-eslint/parser": "5.30.6",
-    "eslint": "8.19.0",
-    "eslint-plugin-qwik": "0.0.36",
+    "@typescript-eslint/eslint-plugin": "5.30.7",
+    "@typescript-eslint/parser": "5.30.7",
+    "eslint": "8.20.0",
+    "eslint-plugin-qwik": "0.0.39",
     "jest": "^28.1.3",
     "node-fetch": "3.2.9",
     "np": "7.6.2",

package.json

@@ -2,7 +2,7 @@ import { $, useUserContext } from '@builder.io/qwik';
 import { isServer } from '@builder.io/qwik/build';
 import { useLocation } from '@builder.io/qwik-city';
 import { SpeakConfig, SpeakLocale, SpeakState, TranslateFn, Translation } from '../library/types';
-import { GetTranslationFn, ResolveLocaleFn, SetLocaleFn, HandleMissingTranslationFn } from '../library/types';
+import { GetTranslationFn, ResolveLocaleFn, StoreLocaleFn, HandleMissingTranslationFn } from '../library/types';
 import { getValue } from '../library/core';
 
 import { appTranslation } from './i18n';
@@ -65,8 +65,8 @@ export const getTranslateFn = (): TranslateFn => {
         return result ? JSON.parse(result[1]) : null; */
     });
 
-    // E.g. Set locale on Client replacing url
-    const setLocale$: SetLocaleFn = $((locale: SpeakLocale) => {
+    // E.g. Store locale on Client replacing url
+    const storeLocale$: StoreLocaleFn = $((locale: SpeakLocale) => {
         const url = new URL(window.location.href);
         const lang = config.supportedLocales.find(x => url.pathname.startsWith(`/${x.lang}`))?.lang;
 
@@ -87,7 +87,7 @@ export const getTranslateFn = (): TranslateFn => {
 
         window.history.pushState({}, '', url);
 
-        // E.g. Set locale in cookie 
+        // E.g. Store locale in cookie 
         /* document.cookie = `locale=${JSON.stringify(locale)};path=/`; */
     });
 
@@ -106,7 +106,7 @@ export const getTranslateFn = (): TranslateFn => {
     return {
         /* getTranslation$: getTranslation$, */
         resolveLocale$: resolveLocale$,
-        setLocale$: setLocale$,
+        storeLocale$: storeLocale$,
         handleMissingTranslation$: handleMissingTranslation$
     };
 };

src/app/speak-config.ts

@@ -9,7 +9,7 @@ export type {
 export type {
   GetTranslationFn,
   ResolveLocaleFn,
-  SetLocaleFn,
+  StoreLocaleFn,
   HandleMissingTranslationFn,
 } from './library/types';
 // Hooks
@@ -20,7 +20,7 @@ export {
   useSpeakContext,
   useSpeakLocale,
   useTranslation,
-  useSpeakConfig
+  useSpeakConfig,
 } from './library/use-functions';
 // Functions
 export { changeLocale } from './library/change-locale';

src/index.ts

@@ -17,8 +17,8 @@ export const changeLocale = async (newLocale: SpeakLocale, ctx: SpeakState): Pro
   Object.assign(translation, newTranslation);
   Object.assign(locale, newLocale);
 
-  // Set the locale
-  await translateFn.setLocale$(newLocale);
+  // Store the locale
+  await translateFn.storeLocale$(newLocale);
 
   if (qDev) {
     console.debug('%cQwik Speak',

src/library/change-locale.ts

@@ -1,7 +1,7 @@
 import { $ } from '@builder.io/qwik';
 
 import type { Translation } from './types';
-import type { GetTranslationFn, SetLocaleFn, HandleMissingTranslationFn, ResolveLocaleFn } from './types';
+import type { GetTranslationFn, StoreLocaleFn, HandleMissingTranslationFn, ResolveLocaleFn } from './types';
 import { clone, isObject } from './utils';
 
 export const getTranslation$: GetTranslationFn = $((lang: string, asset: string | Translation) => {
@@ -12,7 +12,7 @@ export const resolveLocale$: ResolveLocaleFn = $(() => {
   return null;
 });
 
-export const setLocale$: SetLocaleFn = $(() => { });
+export const setLocale$: StoreLocaleFn = $(() => { });
 
 export const handleMissingTranslation$: HandleMissingTranslationFn = $((key: string) => {
   return key;

src/library/constants.ts

@@ -36,22 +36,22 @@ export type Translation = { [key: string]: any };
 /**
  * Must contain the logic to get translation data
  */
-export type GetTranslationFn = (lang: string, asset: string | Translation) => ValueOrPromise<Translation>;
+export type GetTranslationFn = QRL<(lang: string, asset: string | Translation) => ValueOrPromise<Translation>>;
 
 /**
  * Must contain the logic to resolve which locale to use during SSR
  */
-export type ResolveLocaleFn = () => ValueOrPromise<SpeakLocale | null | undefined>;
+export type ResolveLocaleFn = QRL<() => ValueOrPromise<SpeakLocale | null | undefined>>;
 
 /**
- * Must contain the logic to set the locale on Client when changes
+ * Must contain the logic to store the locale on Client when changes
  */
-export type SetLocaleFn = (locale: SpeakLocale) => ValueOrPromise<void>;
+export type StoreLocaleFn = QRL<(locale: SpeakLocale) => ValueOrPromise<void>>;
 
 /**
  * Must contain the logic to handle missing values
  */
-export type HandleMissingTranslationFn = (key: string, value?: string, params?: any, ctx?: SpeakState) => any;
+export type HandleMissingTranslationFn = QRL<(key: string, value?: string, params?: any, ctx?: SpeakState) => any>;
 
 export interface TranslateFn {
   /**
@@ -63,9 +63,9 @@ export interface TranslateFn {
    */
   resolveLocale$?: ResolveLocaleFn;
   /**
-   * Function to set the locale on Client
+   * Function to store the locale on Client
    */
-  setLocale$?: SetLocaleFn;
+  storeLocale$?: StoreLocaleFn;
   /**
    * Function to handle missing values
    */

src/library/types.ts

@@ -17,7 +17,7 @@ export const useSpeak = (config: SpeakConfig, translateFn: TranslateFn = {}, lan
   // Assign functions
   translateFn.getTranslation$ = translateFn.getTranslation$ ?? getTranslation$;
   translateFn.resolveLocale$ = translateFn.resolveLocale$ ?? resolveLocale$;
-  translateFn.setLocale$ = translateFn.setLocale$ ?? setLocale$;
+  translateFn.storeLocale$ = translateFn.storeLocale$ ?? setLocale$;
   translateFn.handleMissingTranslation$ = translateFn.handleMissingTranslation$ ?? handleMissingTranslation$;
 
   // Set initial state

src/library/use-speak.ts

@@ -1,4 +1,5 @@
-import { SpeakLocale, SpeakConfig, SpeakState, Translation } from '../library/types';
+import { $ } from '@builder.io/qwik';
+import { SpeakLocale, SpeakConfig, Translation, SpeakState } from '../library/types';
 
 const translationData: Translation = {
   'en-US': {
@@ -36,9 +37,9 @@ export const ctx: SpeakState = new Proxy({
   translation: translationData,
   config: config,
   translateFn: {
-    getTranslation$: (lang: string, asset: string | Translation) => (<Translation>asset)[lang],
-    resolveLocale$: () => null,
-    setLocale$: () => { },
-    handleMissingTranslation$: (key: string) => 'not found'
+    getTranslation$: $((lang: string, asset: string | Translation) => (<Translation>asset)[lang]),
+    resolveLocale$: $(() => null),
+    storeLocale$: $(() => { }),
+    handleMissingTranslation$: $((key: string) => 'not found')
   }
 }, {});

src/tests/config.ts

@@ -15,8 +15,8 @@ describe('translate function', () => {
     const value = t(['test', 'testParams'], { param: 'params' }, ctx);
     expect(value).toEqual(['Test', 'Test params']);
   });
-  test('missing value', () => {
-    const value = t('test1', {}, ctx);
+  test('missing value', async () => {
+    const value = await t('test1', {}, ctx);
     expect(value).toBe('not found');
   });
   test('key separator', () => {