typed-locales 1.0.0

package/TODO

@@ -0,0 +1,2 @@
+Fallback language
+Allow using some of the plural in a language but not in the other (both need to use at least one way)

package/dist/config.js

@@ -0,0 +1,9 @@
+import { initReact } from './react';
+import en from './translations/en';
+const customFormatters = {
+    myCustomFormatter: () => 'Hello im custom',
+};
+export const { useTranslation, TranslationProvider } = initReact({
+    en,
+    es: () => import('./translations/es').then(m => m.default),
+}, 'en', customFormatters);

package/dist/formatters.js

@@ -0,0 +1,10 @@
+const formatters = {
+    lowercase: (value) => value.toLowerCase(),
+    uppercase: (value) => value.toUpperCase(),
+    capitalize: (value) => value.charAt(0).toUpperCase() + value.slice(1),
+    void: () => '',
+    weekday: (value) => new Date(value).toLocaleDateString('en-US', { weekday: 'long' }),
+    number: (value) => value.toLocaleString(),
+    json: (value) => JSON.stringify(value),
+};
+export default formatters;

package/dist/index.js

@@ -0,0 +1,82 @@
+import baseFormatters from './formatters';
+// Given a translations object returns a function that can be used to translate keys
+export const getTranslate = (translations, locale, extraFormatters) => {
+    const formatters = { ...baseFormatters, ...extraFormatters };
+    /**
+     * Given a key returns the translated value
+     * Supports nested keys, substitutions and plurals
+     */
+    function translate(key, ...arguments_) {
+        const parts = key.split('.');
+        let current = translations;
+        for (const part of parts) {
+            // @ts-expect-error
+            if (current && current[part]) {
+                // @ts-expect-error
+                current = current[part];
+            }
+            else {
+                break;
+            }
+        }
+        // eslint-disable-next-line sonarjs/different-types-comparison
+        if (current === undefined) {
+            console.error(`Translation key "${key}" not found`);
+            return key;
+        }
+        if (typeof current === 'object') {
+            // If its an object being returned check if its a plural key
+            const isPlural = 
+            // @ts-expect-error
+            current[`${parts.at(-1)}_none`] !== undefined ||
+                // @ts-expect-error
+                current[`${parts.at(-1)}_one`] !== undefined ||
+                // @ts-expect-error
+                current[`${parts.at(-1)}_other`] !== undefined;
+            if (isPlural) {
+                if (!arguments_[0] || !Object.hasOwn(arguments_[0], 'count')) {
+                    console.error(`Missing count value for plural key "${key}"`);
+                    return key;
+                }
+                // @ts-expect-error
+                const count = Number(arguments_[0].count);
+                if (!count) {
+                    // @ts-expect-error
+                    current = current[`${parts.at(-1)}_none`];
+                }
+                else if (count === 1) {
+                    // @ts-expect-error
+                    current = current[`${parts.at(-1)}_one`];
+                }
+                else {
+                    // @ts-expect-error
+                    current = current[`${parts.at(-1)}_other`];
+                }
+            }
+            else {
+                console.error(`Incomplete translation key "${key}"`);
+                return key;
+            }
+        }
+        let value = String(current);
+        const parameters = arguments_[0];
+        if (parameters) {
+            for (const [parameter, value_] of Object.entries(parameters)) {
+                value = value.replaceAll(new RegExp(`{${parameter}(\\|[a-z|]+)?}`, 'g'), (match, formatters_) => {
+                    const parsedFormatters = (formatters_?.split('|').filter(Boolean) ?? []);
+                    let formattedValue = String(value_);
+                    for (const formatter of parsedFormatters) {
+                        if (!formatters[formatter]) {
+                            console.error(`Formatter "${formatter}" not found used in key "${key}"`);
+                            return match;
+                        }
+                        formattedValue = formatters[formatter](formattedValue, locale);
+                    }
+                    return formattedValue;
+                });
+            }
+        }
+        return value;
+    }
+    return translate;
+};

package/dist/react.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { getTranslate } from './index';
+// Initial translation always should be loaded
+export const initReact = (translations, initialLocale, extraFormatters) => {
+    const TranslationContext = createContext(undefined);
+    const TranslationProvider = ({ children }) => {
+        const [locale, setLocale] = useState(initialLocale);
+        const [translate, setTranslate] = useState(() => getTranslate(translations[locale], locale, extraFormatters));
+        const [isLoading, setIsLoading] = useState(true);
+        const loadTranslation = async (targetLocale) => {
+            try {
+                const translationOrLoader = translations[targetLocale];
+                let translationData;
+                if (typeof translationOrLoader === 'function') {
+                    setIsLoading(true);
+                    translationData = await translationOrLoader();
+                }
+                else {
+                    translationData = translationOrLoader;
+                }
+                setTranslate(getTranslate(translationData, targetLocale, extraFormatters));
+            }
+            catch (error) {
+                console.error(`Failed to load translations for locale ${String(targetLocale)}:`, error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        return (_jsx(TranslationContext.Provider, { value: {
+                isLoading,
+                locale,
+                setLocale: async (newLocale) => {
+                    if (newLocale !== locale) {
+                        setLocale(newLocale);
+                        await loadTranslation(newLocale);
+                    }
+                },
+                t: translate,
+            }, children: children }));
+    };
+    const useTranslation = () => {
+        const context = useContext(TranslationContext);
+        if (!context)
+            throw new Error('useTranslation must be used within a TranslationProvider');
+        return context;
+    };
+    return {
+        TranslationProvider,
+        useTranslation
+    };
+};

package/dist/test.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from './config';
+const Test = () => {
+    const { t, locale, setLocale } = useTranslation();
+    return _jsxs("div", { children: [t('test'), t('nested.test', { translation: 'translated text' }), t('nested.deep.again', { value: 'someValue', otherValue: 'anotherValue' }), t('withValue', { value: 'myValue' }), t('multipleValues', { one: '1', two: '2', three: '3' }), t('examplePlural', { count: 0 }), t('examplePlural', { count: 1 }), t('examplePlural', { count: 5 }), t('examplePluralWithOtherValues', { count: 0, user: 'Alice', otherUser: undefined }), t('examplePluralWithOtherValues', { count: 1, user: 'Alice', otherUser: undefined }), t('examplePluralWithOtherValues', { count: 123, user: 'Alice', otherUser: 'Bob' }), t('exampleWithFormatting', { value: 'TEXT', other: 'Text' }), t('exampleWithJSONFormatter', { data: { key: 'value' } }), t('pluralWithNestedSubstitution', { count: 0, query: 'search', user: undefined }), t('pluralWithNestedSubstitution', { count: 1, query: 'search', user: 'john' }), t('pluralWithNestedSubstitution', { count: 5, query: 'search', user: 'john' }), t('mixedPluralNested', { count: 0, itemType: 'book', location: 'shelf' }), t('mixedPluralNested', { count: 1, itemType: 'book', location: 'shelf' }), t('mixedPluralNested', { count: 10, itemType: 'book', location: 'shelf' }), t('onlyFormat', { value: 'capitalize this' }), t('escapeBraces'), locale, _jsx("button", { onClick: () => setLocale('es'), children: "Change locale" })] });
+};

package/dist/translations/en.js

@@ -0,0 +1,28 @@
+const en = {
+    test: 'Regular translation',
+    nested: {
+        test: 'Nested {translation|myCustomFormatter}',
+        deep: {
+            again: 'Nested again with {value} and {otherValue}',
+        },
+    },
+    withValue: 'With value {value}',
+    multipleValues: 'Multiple values: {one}, {two}, and {three}',
+    examplePlural_none: 'No items available',
+    examplePlural_one: 'One item available',
+    examplePlural_other: '{count} items available',
+    examplePluralWithOtherValues_none: 'No items for {user}',
+    examplePluralWithOtherValues_one: 'One item for {user}',
+    examplePluralWithOtherValues_other: '{count} items for {user} and {otherUser}',
+    exampleWithFormatting: 'Formatted {value|uppercase} text and {other|lowercase}',
+    exampleWithJSONFormatter: 'JSON formatter: {data|json}',
+    pluralWithNestedSubstitution_none: 'No results found for {query}',
+    pluralWithNestedSubstitution_one: 'One result for {query} with {user|capitalize}',
+    pluralWithNestedSubstitution_other: '{count} results for {query} by {user|capitalize}',
+    mixedPluralNested_none: 'No {itemType} in {location}',
+    mixedPluralNested_one: 'One {itemType} in {location|uppercase}',
+    mixedPluralNested_other: '{count} {itemType}s in {location|uppercase}',
+    onlyFormat: 'Just formatting: {value|capitalize}',
+    escapeBraces: 'Braces like this: \\{notAKey\\}',
+};
+export default en;

package/dist/translations/es.js

@@ -0,0 +1,30 @@
+const es = {
+    test: 'Traducción regular',
+    nested: {
+        test: 'Anidado {translation|myCustomFormatter}',
+        deep: {
+            again: 'Anidado nuevamente con {value} y {otherValue}',
+        },
+    },
+    withValue: 'Con valor {value}',
+    multipleValues: 'Múltiples valores: {one}, {two} y {three}',
+    // @ts-expect-error
+    examplePlural_none: 'No hay elementos disponibles',
+    // @ts-expect-error
+    examplePlural_one: 'Un elemento disponible',
+    examplePlural_other: '{count} elementos disponibles',
+    examplePluralWithOtherValues_none: 'No hay elementos para {user}',
+    examplePluralWithOtherValues_one: 'Un elemento para {user}',
+    examplePluralWithOtherValues_other: '{count} elementos para {user} y {otherUser}',
+    exampleWithFormatting: 'Texto formateado {value|uppercase} y {other|lowercase}',
+    exampleWithJSONFormatter: 'Formateador JSON: {data|json}',
+    pluralWithNestedSubstitution_none: 'No se encontraron resultados para {query}',
+    pluralWithNestedSubstitution_one: 'Un resultado para {query} con {user|capitalize}',
+    pluralWithNestedSubstitution_other: '{count} resultados para {query} por {user|capitalize}',
+    mixedPluralNested_none: 'No hay {itemType} en {location}',
+    mixedPluralNested_one: 'Un {itemType} en {location|uppercase}',
+    mixedPluralNested_other: '{count} {itemType}s en {location|uppercase}',
+    onlyFormat: 'Solo formateo: {value|capitalize}',
+    escapeBraces: 'Llaves como estas: \\{notAKey\\}',
+};
+export default es;

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/formatters.ts","../src/index.ts","../src/react.tsx","../src/test.tsx","../src/translations/en.ts","../src/translations/es.ts"],"errors":true,"version":"5.8.2"}

package/dist/validation.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "typed-locales",
+  "version": "1.0.0",
+  "description": "Type safe utilities for translating strings",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsx watch src/test.tsx"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.6.2",
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.5"
+  }
+}