@translation-cms/sync 1.1.59 → 1.1.61

package/README.md

@@ -1,3 +1,23 @@
+# React TranslationProvider
+
+Wrap je app of componenten met de TranslationProvider om i18n context te
+leveren:
+
+```tsx
+import { TranslationProvider } from '@translation-cms/sync';
+
+export default function RootLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return <TranslationProvider locale="nl">{children}</TranslationProvider>;
+}
+```
+
+De provider initialiseert i18n en zorgt dat de context beschikbaar is voor alle
+onderliggende componenten.
+
 # @translation-cms/sync
 
 Automatically scan translation keys in your codebase and sync them to the
@@ -39,7 +59,10 @@ root. Values here are merged with env vars — CLI args take highest priority.
     "reservedCssNamespaces": ["after", "before"],
     "previewRoutes": {
         "namespace:key": [
-            { "route": "/[locale]/blog/[slug]", "params": { "slug": "first-post" } }
+            {
+                "route": "/[locale]/blog/[slug]",
+                "params": { "slug": "first-post" }
+            }
         ]
     }
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { TranslationProvider, type TranslationProviderProps, } from './translation-provider.js';
 export { CMSClient, getCMSClient, type CMSConfig, type TranslationResponse, type NamespacedTranslations, } from './client.js';
 export { initPreviewListener, cleanupPreviewListener, type PreviewListenerOptions, } from './preview-listener.js';
 export { type TranslationsConfig } from './config.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACH,SAAS,EACT,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,GAC9B,MAAM,aAAa,CAAC;AAGrB,OAAO,EACH,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,sBAAsB,GAC9B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,EACH,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,GACnB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACH,mBAAmB,EACnB,KAAK,wBAAwB,GAChC,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACH,SAAS,EACT,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,GAC9B,MAAM,aAAa,CAAC;AAGrB,OAAO,EACH,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,sBAAsB,GAC9B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtD,OAAO,EACH,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,WAAW,GACnB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -1,3 +1,5 @@
+// TranslationProvider (React context for i18n)
+export { TranslationProvider, } from './translation-provider.js';
 // CMS client (browser-safe)
 export { CMSClient, getCMSClient, } from './client.js';
 // Preview listener (browser-safe)

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EACH,SAAS,EACT,YAAY,GAIf,MAAM,aAAa,CAAC;AAErB,kCAAkC;AAClC,OAAO,EACH,mBAAmB,EACnB,sBAAsB,GAEzB,MAAM,uBAAuB,CAAC;AAK/B,6CAA6C;AAC7C,OAAO,EACH,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,SAAS,GAIZ,MAAM,cAAc,CAAC;AAEtB,oDAAoD;AACpD,OAAO,EAAE,UAAU,EAA0B,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,OAAO,EACH,mBAAmB,GAEtB,MAAM,2BAA2B,CAAC;AACnC,4BAA4B;AAC5B,OAAO,EACH,SAAS,EACT,YAAY,GAIf,MAAM,aAAa,CAAC;AAErB,kCAAkC;AAClC,OAAO,EACH,mBAAmB,EACnB,sBAAsB,GAEzB,MAAM,uBAAuB,CAAC;AAK/B,6CAA6C;AAC7C,OAAO,EACH,WAAW,EACX,mBAAmB,EACnB,eAAe,EACf,SAAS,GAIZ,MAAM,cAAc,CAAC;AAEtB,oDAAoD;AACpD,OAAO,EAAE,UAAU,EAA0B,MAAM,WAAW,CAAC"}

package/dist/translation-provider.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getCMSClient } from './client.js';
+import type { TOptions, TranslationResponse } from './client.js';
+export interface TranslationProviderProps {
+    children: React.ReactNode;
+    locale: string;
+    namespaces?: string[];
+    /**
+     * Optionally override CMS config (for multi-project setups)
+     */
+    config?: Parameters<typeof getCMSClient>[0];
+}
+interface TranslationContextValue {
+    t: (key: string, options?: TOptions) => string;
+    tDynamic: (key: string, options?: TOptions) => string;
+    isLoading: boolean;
+    locale: string;
+    translations: TranslationResponse;
+}
+export declare function TranslationProvider({ children, locale, namespaces, config, }: TranslationProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTranslationContext(): TranslationContextValue;
+export {};
+//# sourceMappingURL=translation-provider.d.ts.map

package/dist/translation-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-provider.d.ts","sourceRoot":"","sources":["../src/translation-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,WAAW,wBAAwB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;CAC/C;AAGD,UAAU,uBAAuB;IAC7B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC/C,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC;IACtD,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,mBAAmB,CAAC;CACrC;AAMD,wBAAgB,mBAAmB,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,UAAuB,EACvB,MAAM,GACT,EAAE,wBAAwB,2CA6G1B;AAGD,wBAAgB,qBAAqB,4BAOpC"}

package/dist/translation-provider.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, useMemo, } from 'react';
+import { getCMSClient } from './client.js';
+const TranslationContext = createContext(undefined);
+export function TranslationProvider({ children, locale, namespaces = ['common'], config, }) {
+    // Compose a key from dependencies to reset loading state
+    const depsKey = useMemo(() => [locale, JSON.stringify(namespaces), JSON.stringify(config)].join('|'), [locale, namespaces, config]);
+    const [state, setState] = useState(() => ({
+        isLoading: true,
+        translations: {},
+        depsKey,
+    }));
+    // Reset loading state when depsKey changes
+    useEffect(() => {
+        if (state.depsKey !== depsKey) {
+            setState({ isLoading: true, translations: {}, depsKey });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [depsKey]);
+    useEffect(() => {
+        if (state.depsKey !== depsKey)
+            return;
+        let cancelled = false;
+        const client = getCMSClient(config);
+        client
+            .getTranslations(namespaces, locale)
+            .then((data) => {
+            if (!cancelled) {
+                setState({ isLoading: false, translations: data, depsKey });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [depsKey, config, namespaces, locale, state.depsKey]);
+    // Plural/variable interpolation logic (mirrors use-translation.ts)
+    const resolveTranslation = useMemo(() => {
+        return (key, options) => {
+            // Plural key selection: try count-specific suffix first
+            let resolvedKey = key;
+            if (options && typeof options.count === 'number') {
+                const count = options.count;
+                const suffix = count === 0 ? '_zero' : count === 1 ? '_one' : '_other';
+                const pluralKey = `${key}${suffix}`;
+                if (pluralKey in state.translations) {
+                    resolvedKey = pluralKey;
+                }
+                else if (`${key}_other` in state.translations) {
+                    resolvedKey = `${key}_other`;
+                }
+            }
+            let value;
+            if (resolvedKey in state.translations) {
+                value = state.translations[resolvedKey];
+            }
+            else if (key in state.translations) {
+                value = state.translations[key];
+            }
+            else {
+                value = options?.defaultValue ?? key;
+            }
+            // Interpolate {{variable}} placeholders (i18next default format)
+            if (options) {
+                value = value.replace(/\{\{(\w+)\}\}/g, (_, varKey) => varKey in options
+                    ? String(options[varKey])
+                    : `{{${varKey}}}`);
+            }
+            return value;
+        };
+    }, [state.translations]);
+    const t = useMemo(() => (key, options) => resolveTranslation(key, options), [resolveTranslation]);
+    const tDynamic = t; // identical for now
+    const contextValue = useMemo(() => ({
+        t,
+        tDynamic,
+        isLoading: state.isLoading,
+        locale,
+        translations: state.translations,
+    }), [t, tDynamic, state.isLoading, locale, state.translations]);
+    // Set <html lang="..."> for accessibility
+    useEffect(() => {
+        if (typeof document !== 'undefined') {
+            document.documentElement.lang = locale;
+        }
+    }, [locale]);
+    return (_jsx(TranslationContext.Provider, { value: contextValue, children: children }));
+}
+// Consumer hook
+export function useTranslationContext() {
+    const ctx = useContext(TranslationContext);
+    if (!ctx)
+        throw new Error('useTranslationContext must be used within a TranslationProvider');
+    return ctx;
+}
+//# sourceMappingURL=translation-provider.js.map

package/dist/translation-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-provider.js","sourceRoot":"","sources":["../src/translation-provider.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@translation-cms/sync",
-    "version": "1.1.59",
+    "version": "1.1.61",
     "description": "Scan translation keys in your codebase and sync them to the Translations CMS",
     "type": "module",
     "main": "./dist/index.js",
@@ -16,6 +16,10 @@
             "import": "./dist/use-translation.js",
             "types": "./dist/use-translation.d.ts"
         },
+        "./translation-provider": {
+            "import": "./dist/translation-provider.js",
+            "types": "./dist/translation-provider.d.ts"
+        },
         "./cli": {
             "import": "./dist/cli-utils.js",
             "types": "./dist/cli-utils.d.ts"