@owlmeans/client-i18n 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 OwlMeans Common — Fullstack typescript framework
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,488 @@
+# @owlmeans/client-i18n
+
+The **@owlmeans/client-i18n** package provides React-based internationalization functionality for OwlMeans Common Libraries, designed for fullstack microservices and microclients development with focus on security and proper authentication and authorization.
+
+## Purpose
+
+This package serves as the client-side React integration layer for the OwlMeans i18n system that:
+
+- **Integrates with React applications** using React Context and hooks
+- **Provides React hooks for translations** with automatic resource loading
+- **Supports dynamic resource loading** with automatic caching
+- **Integrates with client context** for configuration-driven internationalization
+- **Offers multi-level translation support** (library, app, service levels)
+- **Enables namespace-based organization** for different translation contexts
+
+## Core Concepts
+
+### I18n Context Provider
+A React Context Provider that initializes and manages the i18next instance for the entire React application, integrated with OwlMeans client configuration.
+
+### Automatic Resource Loading
+Translation resources are automatically loaded and registered with i18next when requested through hooks, with intelligent caching to prevent duplicate loading.
+
+### Multi-Level Translation Hooks
+Different hooks for accessing translations at different levels:
+- Library-level translations (`useI18nLib`)
+- Application-level translations (`useI18nApp`) 
+- Service-level translations (`useCommonI18n`)
+
+### Client Context Integration
+Seamless integration with OwlMeans client context system for configuration-driven internationalization setup.
+
+## API Reference
+
+### Components
+
+#### `I18nContext`
+
+React Context Provider component that provides i18n functionality to the entire React application.
+
+```typescript
+import { I18nContext } from '@owlmeans/client-i18n'
+import { ClientConfig } from '@owlmeans/client-context'
+
+const App: React.FC = () => {
+  const config = useClientConfig() // Your client configuration
+  
+  return (
+    <I18nContext config={config}>
+      <AppContent />
+    </I18nContext>
+  )
+}
+```
+
+**Props:**
+- `config`: ClientConfig - The client configuration object
+- `children`: ReactNode - Child components
+
+### Hooks
+
+#### `useCommonI18n(resourceName, ns?, prefix?): TFunction`
+
+Main hook for accessing translations with automatic resource loading.
+
+```typescript
+import { useCommonI18n } from '@owlmeans/client-i18n'
+
+const MyComponent: React.FC = () => {
+  const t = useCommonI18n('user-forms', 'ui', 'profile')
+  
+  return (
+    <div>
+      <h1>{t('title')}</h1>
+      <p>{t('description')}</p>
+    </div>
+  )
+}
+```
+
+**Parameters:**
+- `resourceName`: string - Name of the translation resource to load
+- `ns`: string (optional) - Namespace for the translations (defaults to default namespace)
+- `prefix`: string (optional) - Key prefix for translation lookups
+
+**Returns:** `TFunction` - i18next translation function
+
+**Behavior:**
+- Automatically loads translation resources for the current language
+- Caches loaded resources to prevent duplicate loading
+- Falls back to default language if current language resources are not available
+- Supports multi-level translation priority (service > app > library)
+
+#### `useI18nLib(libName, prefix?): TFunction`
+
+Hook for accessing library-level translations in the 'lib' namespace.
+
+```typescript
+import { useI18nLib } from '@owlmeans/client-i18n'
+
+const LibraryComponent: React.FC = () => {
+  const t = useI18nLib('common-ui', 'buttons')
+  
+  return (
+    <button>{t('save')}</button>
+  )
+}
+```
+
+**Parameters:**
+- `libName`: string - Name of the library translation resource
+- `prefix`: string (optional) - Key prefix for translation lookups
+
+**Returns:** `TFunction` - i18next translation function configured for library namespace
+
+#### `useI18nApp(appName?, prefix?): TFunction`
+
+Hook for accessing application-level translations using the service name from context.
+
+```typescript
+import { useI18nApp } from '@owlmeans/client-i18n'
+
+const AppComponent: React.FC = () => {
+  const t = useI18nApp(undefined, 'navigation')
+  
+  return (
+    <nav>
+      <a href="/">{t('home')}</a>
+      <a href="/profile">{t('profile')}</a>
+    </nav>
+  )
+}
+```
+
+**Parameters:**
+- `appName`: string (optional) - Name of the app (defaults to service name from context)
+- `prefix`: string (optional) - Key prefix for translation lookups
+
+**Returns:** `TFunction` - i18next translation function configured for app namespace
+
+### Types
+
+#### `I18nContextProps`
+
+Props interface for the I18nContext component.
+
+```typescript
+interface I18nContextProps extends PropsWithChildren {
+  config: ClientConfig
+}
+```
+
+#### `I18nProps`
+
+Generic interface for components that accept i18n properties.
+
+```typescript
+interface I18nProps {
+  i18n?: I18nBaseProps
+}
+```
+
+#### `I18nBaseProps`
+
+Base properties for i18n configuration.
+
+```typescript
+interface I18nBaseProps {
+  resource?: string    // Resource name override
+  ns?: string         // Namespace override
+  prefix?: string     // Key prefix override
+  suppress?: boolean  // Suppress translation loading
+}
+```
+
+### Utilities
+
+The package also exports utilities under the `/utils` subpackage:
+
+```typescript
+import { useI18nInstance } from '@owlmeans/client-i18n/utils'
+```
+
+#### `useI18nInstance(config): i18n`
+
+Hook that creates and configures an i18next instance based on client configuration.
+
+```typescript
+import { useI18nInstance } from '@owlmeans/client-i18n/utils'
+
+const config = useClientConfig()
+const i18n = useI18nInstance(config)
+```
+
+## Usage Examples
+
+### Basic Setup
+
+```typescript
+import React from 'react'
+import { render } from 'react-dom'
+import { I18nContext } from '@owlmeans/client-i18n'
+import { makeClientConfig, ClientContext } from '@owlmeans/client-context'
+import { AppType } from '@owlmeans/context'
+
+const config = makeClientConfig(AppType.Frontend, 'my-app', {
+  // Client configuration
+  defaultLng: 'en',
+  debug: { i18n: true }
+})
+
+const App: React.FC = () => (
+  <ClientContext.Provider value={context}>
+    <I18nContext config={config}>
+      <MainApp />
+    </I18nContext>
+  </ClientContext.Provider>
+)
+
+render(<App />, document.getElementById('root'))
+```
+
+### Component with Translations
+
+```typescript
+import React from 'react'
+import { useCommonI18n, useI18nLib, useI18nApp } from '@owlmeans/client-i18n'
+
+const UserProfileForm: React.FC = () => {
+  // Different translation levels
+  const tLib = useI18nLib('forms') // Library translations
+  const tApp = useI18nApp() // App-specific translations
+  const tUser = useCommonI18n('user-profile', 'ui') // Service translations
+  
+  return (
+    <form>
+      <h1>{tApp('profile.title')}</h1>
+      
+      <label>
+        {tUser('name.label')}
+        <input placeholder={tUser('name.placeholder')} />
+      </label>
+      
+      <label>
+        {tUser('email.label')}
+        <input type="email" placeholder={tUser('email.placeholder')} />
+      </label>
+      
+      <div>
+        <button type="submit">{tLib('save')}</button>
+        <button type="button">{tLib('cancel')}</button>
+      </div>
+    </form>
+  )
+}
+```
+
+### Custom Hook for Component Translations
+
+```typescript
+import { useCommonI18n } from '@owlmeans/client-i18n'
+
+const useProductTranslations = (prefix?: string) => {
+  return useCommonI18n('products', 'ecommerce', prefix)
+}
+
+const ProductCard: React.FC<{ product: Product }> = ({ product }) => {
+  const t = useProductTranslations('card')
+  
+  return (
+    <div className="product-card">
+      <h3>{product.name}</h3>
+      <p>{t('price')}: ${product.price}</p>
+      <button>{t('addToCart')}</button>
+    </div>
+  )
+}
+```
+
+### Dynamic Resource Loading
+
+```typescript
+import React, { useState } from 'react'
+import { useCommonI18n } from '@owlmeans/client-i18n'
+
+const DynamicContent: React.FC = () => {
+  const [selectedModule, setSelectedModule] = useState('dashboard')
+  
+  // Translations are loaded dynamically based on selected module
+  const t = useCommonI18n(selectedModule, 'modules')
+  
+  return (
+    <div>
+      <select 
+        value={selectedModule} 
+        onChange={(e) => setSelectedModule(e.target.value)}
+      >
+        <option value="dashboard">Dashboard</option>
+        <option value="analytics">Analytics</option>
+        <option value="settings">Settings</option>
+      </select>
+      
+      <div>
+        <h2>{t('title')}</h2>
+        <p>{t('description')}</p>
+      </div>
+    </div>
+  )
+}
+```
+
+### Error Handling and Fallbacks
+
+```typescript
+import React from 'react'
+import { useCommonI18n } from '@owlmeans/client-i18n'
+
+const SafeTranslatedComponent: React.FC = () => {
+  const t = useCommonI18n('user-interface', 'ui')
+  
+  // Translation function handles missing keys gracefully
+  return (
+    <div>
+      {/* Will show key if translation missing */}
+      <h1>{t('welcome', 'Welcome')}</h1>
+      
+      {/* Will use fallback value */}
+      <p>{t('description', { defaultValue: 'Default description' })}</p>
+      
+      {/* With interpolation */}
+      <p>{t('greeting', { name: 'User', defaultValue: 'Hello, {{name}}!' })}</p>
+    </div>
+  )
+}
+```
+
+### Multi-Language Support
+
+```typescript
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useCommonI18n } from '@owlmeans/client-i18n'
+
+const LanguageSwitcher: React.FC = () => {
+  const { i18n } = useTranslation()
+  const t = useCommonI18n('language-switcher', 'ui')
+  
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng)
+  }
+  
+  return (
+    <div>
+      <h3>{t('selectLanguage')}</h3>
+      <button onClick={() => changeLanguage('en')}>
+        {t('languages.english')}
+      </button>
+      <button onClick={() => changeLanguage('es')}>
+        {t('languages.spanish')}
+      </button>
+      <button onClick={() => changeLanguage('fr')}>
+        {t('languages.french')}
+      </button>
+    </div>
+  )
+}
+```
+
+## Integration Patterns
+
+### With Component Libraries
+
+```typescript
+// Create a wrapper component for your design system
+import React from 'react'
+import { useI18nLib } from '@owlmeans/client-i18n'
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary'
+  i18nKey: string
+  children?: React.ReactNode
+}
+
+const TranslatedButton: React.FC<ButtonProps> = ({ 
+  variant, 
+  i18nKey, 
+  children 
+}) => {
+  const t = useI18nLib('ui-components', 'buttons')
+  
+  return (
+    <button className={`btn btn-${variant}`}>
+      {children || t(i18nKey)}
+    </button>
+  )
+}
+
+// Usage
+<TranslatedButton variant="primary" i18nKey="save" />
+```
+
+### With Forms
+
+```typescript
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { useCommonI18n } from '@owlmeans/client-i18n'
+
+const LoginForm: React.FC = () => {
+  const t = useCommonI18n('auth-forms', 'auth')
+  const { register, handleSubmit, formState: { errors } } = useForm()
+  
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div>
+        <label>{t('email.label')}</label>
+        <input
+          {...register('email', { required: t('email.required') })}
+          placeholder={t('email.placeholder')}
+        />
+        {errors.email && <span>{errors.email.message}</span>}
+      </div>
+      
+      <div>
+        <label>{t('password.label')}</label>
+        <input
+          type="password"
+          {...register('password', { required: t('password.required') })}
+          placeholder={t('password.placeholder')}
+        />
+        {errors.password && <span>{errors.password.message}</span>}
+      </div>
+      
+      <button type="submit">{t('submit')}</button>
+    </form>
+  )
+}
+```
+
+## Performance Considerations
+
+### Resource Loading Caching
+The package implements intelligent caching:
+
+```typescript
+// Resources are cached per language and resource name
+const i18nLoadingCache = new Set<string>()
+
+// Cache key format: "{language}:{resourceName}:{namespace}"
+const key = `${i18n.language}:${resourceName}:${ns}`
+```
+
+### Automatic Resource Management
+- **Lazy Loading** - Resources are only loaded when first requested
+- **Duplicate Prevention** - Multiple components using the same resource won't trigger multiple loads
+- **Fallback Loading** - Default language resources are loaded as fallbacks
+
+### Best Practices
+
+1. **Use specific resource names** - Avoid loading large translation bundles
+2. **Leverage namespaces** - Organize translations by functional area
+3. **Implement prefixes** - Use prefixes to scope translations to specific components
+4. **Cache translation functions** - Don't recreate translation functions unnecessarily
+
+## Error Handling
+
+The package handles various error scenarios gracefully:
+
+- **Missing resources** - Falls back to translation keys or default values
+- **Network failures** - Uses cached resources or fallback languages
+- **Invalid configurations** - Provides sensible defaults
+- **Component unmounting** - Prevents memory leaks from resource loading
+
+## Dependencies
+
+This package depends on:
+- `@owlmeans/client` - Client-side context hooks
+- `@owlmeans/client-context` - Client context management
+- `@owlmeans/i18n` - Core i18n functionality and resource management
+- `react` - React framework (peer dependency)
+- `react-i18next` - React integration for i18next
+- `i18next` - Core i18n library
+
+## Related Packages
+
+- [`@owlmeans/i18n`](../i18n) - Core i18n functionality and resource management
+- [`@owlmeans/client-context`](../client-context) - Client-side context management
+- [`@owlmeans/client`](../client) - Client-side utilities and hooks

package/build/context.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { I18nContextProps } from './types.js';
+import type { TFunction } from 'i18next';
+export declare const I18nContext: FC<I18nContextProps>;
+export declare const useCommonI18n: (resourceName: string, ns?: string, prefix?: string) => TFunction;
+export declare const useI18nLib: (libName: string, prefix?: string) => TFunction;
+export declare const useI18nApp: (appName?: string, prefix?: string) => TFunction;
+//# sourceMappingURL=context.d.ts.map

package/build/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKxC,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAI3C,CAAA;AAIF,eAAO,MAAM,aAAa,iBAAkB,MAAM,OAAO,MAAM,WAAW,MAAM,KAAG,SA2BlF,CAAA;AAED,eAAO,MAAM,UAAU,YAAa,MAAM,WAAW,MAAM,KAAG,SAE7D,CAAA;AAED,eAAO,MAAM,UAAU,aAAc,MAAM,WAAW,MAAM,KAAG,SAK9D,CAAA"}

package/build/context.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { I18nextProvider, useTranslation } from 'react-i18next';
+import { useI18nInstance } from './utils/instance.js';
+import { DEFAULT_LNG, DEFAULT_NAMESPACE, initI18nResource, LIB_NAMESPACE } from '@owlmeans/i18n';
+import { useContext } from '@owlmeans/client';
+export const I18nContext = memo(({ config, children }) => {
+    const i18n = useI18nInstance(config);
+    return _jsx(I18nextProvider, { i18n: i18n, children: children });
+});
+const i18nLoadingCache = new Set();
+export const useCommonI18n = (resourceName, ns, prefix) => {
+    const { i18n } = useTranslation();
+    ns = ns ?? (Array.isArray(i18n.options.defaultNS)
+        ? i18n.options.defaultNS?.[0] : i18n.options.defaultNS)
+        ?? DEFAULT_NAMESPACE;
+    const key = `${i18n.language}:${resourceName}:${ns}`;
+    if (!i18nLoadingCache.has(key)) {
+        i18nLoadingCache.add(key);
+        const resources = initI18nResource(i18n.language, resourceName, ns);
+        if (resources != null) {
+            resources.forEach(resource => i18n.addResourceBundle(i18n.language, ns ?? DEFAULT_NAMESPACE, { [resourceName]: resource.data }, true, true));
+            const defLng = typeof i18n.options.fallbackLng === 'string' ? i18n.options.fallbackLng : DEFAULT_LNG;
+            const defResources = initI18nResource(defLng, resourceName, ns);
+            defResources?.forEach(resource => i18n.addResourceBundle(i18n.language, ns ?? DEFAULT_NAMESPACE, { [resourceName]: resource.data }, true, true));
+        }
+    }
+    const { t } = useTranslation(ns, { keyPrefix: `${resourceName}${prefix != null && prefix != '' ? `.${prefix}` : ''}` });
+    return t;
+};
+export const useI18nLib = (libName, prefix) => {
+    return useCommonI18n(libName, LIB_NAMESPACE, prefix);
+};
+export const useI18nApp = (appName, prefix) => {
+    const context = useContext();
+    appName = appName ?? context.cfg.service;
+    return useCommonI18n(appName, appName, prefix);
+};
+//# sourceMappingURL=context.js.map

package/build/context.js.map

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

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './context.js';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA"}

package/build/index.js

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './context.js';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA"}

package/build/types.d.ts

@@ -0,0 +1,15 @@
+import { ClientConfig } from '@owlmeans/client-context';
+import type { PropsWithChildren } from 'react';
+export interface I18nContextProps extends PropsWithChildren {
+    config: ClientConfig;
+}
+export interface I18nProps {
+    i18n?: I18nBaseProps;
+}
+export interface I18nBaseProps {
+    resource?: string;
+    ns?: string;
+    prefix?: string;
+    suppress?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/build/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,MAAM,EAAE,YAAY,CAAA;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/build/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/build/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './instance.js';
+//# sourceMappingURL=index.d.ts.map

package/build/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAA"}

package/build/utils/index.js

@@ -0,0 +1,2 @@
+export * from './instance.js';
+//# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAA"}

package/build/utils/instance.d.ts

@@ -0,0 +1,5 @@
+import type { i18n } from 'i18next';
+import type { ClientConfig } from '@owlmeans/client-context';
+export declare const useI18nInstance: (config: ClientConfig) => i18n;
+export declare const getI18nInstance: (config: ClientConfig) => i18n;
+//# sourceMappingURL=instance.d.ts.map

package/build/utils/instance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instance.d.ts","sourceRoot":"","sources":["../../src/utils/instance.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAEnC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAK5D,eAAO,MAAM,eAAe,WAAY,YAAY,KAAG,IAItD,CAAA;AAED,eAAO,MAAM,eAAe,WAAY,YAAY,KAAG,IAC3B,CAAA"}

package/build/utils/instance.js

@@ -0,0 +1,24 @@
+import { createInstance } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { useMemo } from 'react';
+import { DEFAULT_LNG, DEFAULT_NAMESPACE } from '@owlmeans/i18n';
+let i18nInstance = null;
+export const useI18nInstance = (config) => {
+    const instance = useMemo(() => createI18nInstance(config), []);
+    return instance;
+};
+export const getI18nInstance = (config) => createI18nInstance(config);
+const createI18nInstance = (config) => {
+    if (i18nInstance != null) {
+        return i18nInstance;
+    }
+    const instance = createInstance({
+        compatibilityJSON: 'v3',
+        defaultNS: config.i18n?.defaultNs ?? DEFAULT_NAMESPACE,
+        fallbackLng: config.i18n?.defaultLng ?? DEFAULT_LNG,
+        debug: config.debug?.all ?? config.debug?.i18n ?? false,
+    });
+    instance.use(initReactI18next).init();
+    return i18nInstance = instance;
+};
+//# sourceMappingURL=instance.js.map

package/build/utils/instance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instance.js","sourceRoot":"","sources":["../../src/utils/instance.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAE/D,IAAI,YAAY,GAAgB,IAAI,CAAA;AAEpC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAoB,EAAQ,EAAE;IAC5D,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAA;IAE9D,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAoB,EAAQ,EAAE,CAC5D,kBAAkB,CAAC,MAAM,CAAC,CAAA;AAE5B,MAAM,kBAAkB,GAAG,CAAC,MAAoB,EAAQ,EAAE;IACxD,IAAI,YAAY,IAAI,IAAI,EAAE,CAAC;QACzB,OAAO,YAAY,CAAA;IACrB,CAAC;IAED,MAAM,QAAQ,GAAG,cAAc,CAAC;QAC9B,iBAAiB,EAAE,IAAI;QACvB,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,IAAI,iBAAiB;QACtD,WAAW,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,IAAI,WAAW;QACnD,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,IAAI,IAAI,KAAK;KACxD,CAAC,CAAA;IAEF,QAAQ,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,IAAI,EAAE,CAAA;IAErC,OAAO,YAAY,GAAG,QAAQ,CAAA;AAChC,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@owlmeans/client-i18n",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "sleep 96 && nodemon -e ts,tsx,json --watch src --exec \"tsc -p ./tsconfig.json\"",
+    "watch": "tsc -b -w --preserveWatchOutput --pretty"
+  },
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.js",
+      "default": "./build/index.js",
+      "module": "./build/index.js",
+      "types": "./build/index.d.ts"
+    },
+    "./utils": {
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js",
+      "default": "./build/utils/index.js",
+      "module": "./build/utils/index.js",
+      "types": "./build/utils/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "nodemon": "^3.1.7",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "@owlmeans/client": "^0.1.0",
+    "@owlmeans/client-context": "^0.1.0",
+    "@owlmeans/i18n": "^0.1.0",
+    "i18next": "^23.15.1",
+    "react-i18next": "^15.0.2"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/context.tsx

@@ -0,0 +1,56 @@
+import { memo } from 'react'
+import type { FC } from 'react'
+import type { I18nContextProps } from './types.js'
+import { I18nextProvider, useTranslation } from 'react-i18next'
+import type { TFunction } from 'i18next'
+import { useI18nInstance } from './utils/instance.js'
+import { DEFAULT_LNG, DEFAULT_NAMESPACE, initI18nResource, LIB_NAMESPACE } from '@owlmeans/i18n'
+import { useContext } from '@owlmeans/client'
+
+export const I18nContext: FC<I18nContextProps> = memo(({ config, children }) => {
+  const i18n = useI18nInstance(config)
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+})
+
+const i18nLoadingCache = new Set<string>()
+
+export const useCommonI18n = (resourceName: string, ns?: string, prefix?: string): TFunction => {
+  const { i18n } = useTranslation()
+
+  ns = ns ?? (Array.isArray(i18n.options.defaultNS)
+    ? i18n.options.defaultNS?.[0] : i18n.options.defaultNS)
+    ?? DEFAULT_NAMESPACE
+
+  const key = `${i18n.language}:${resourceName}:${ns}`
+  if (!i18nLoadingCache.has(key)) {
+    i18nLoadingCache.add(key)
+    const resources = initI18nResource(i18n.language, resourceName, ns)
+    if (resources != null) {
+      resources.forEach(
+        resource => i18n.addResourceBundle(i18n.language, ns ?? DEFAULT_NAMESPACE, { [resourceName]: resource.data }, true, true)
+      )
+
+      const defLng = typeof i18n.options.fallbackLng === 'string' ? i18n.options.fallbackLng : DEFAULT_LNG
+      const defResources = initI18nResource(defLng, resourceName, ns)
+      defResources?.forEach(
+        resource => i18n.addResourceBundle(i18n.language, ns ?? DEFAULT_NAMESPACE, { [resourceName]: resource.data }, true, true)
+      )
+    }
+  }
+
+  const { t } = useTranslation(ns, { keyPrefix: `${resourceName}${prefix != null && prefix != '' ? `.${prefix}` : ''}` })
+
+  return t
+}
+
+export const useI18nLib = (libName: string, prefix?: string): TFunction => {
+  return useCommonI18n(libName, LIB_NAMESPACE, prefix)
+}
+
+export const useI18nApp = (appName?: string, prefix?: string): TFunction => {
+  const context = useContext()
+  appName = appName ?? context.cfg.service
+
+  return useCommonI18n(appName, appName, prefix)
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+
+export * from './types.js'
+export * from './context.js'

package/src/types.ts

@@ -0,0 +1,17 @@
+import { ClientConfig } from '@owlmeans/client-context'
+import type { PropsWithChildren } from 'react'
+
+export interface I18nContextProps extends PropsWithChildren {
+  config: ClientConfig
+}
+
+export interface I18nProps {
+  i18n?: I18nBaseProps
+}
+
+export interface I18nBaseProps {
+  resource?: string
+  ns?: string
+  prefix?: string
+  suppress?: boolean
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+
+export * from './instance.js'

package/src/utils/instance.ts

@@ -0,0 +1,35 @@
+
+import { createInstance } from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import type { i18n } from 'i18next'
+import { useMemo } from 'react'
+import type { ClientConfig } from '@owlmeans/client-context'
+import { DEFAULT_LNG, DEFAULT_NAMESPACE } from '@owlmeans/i18n'
+
+let i18nInstance: i18n | null = null
+
+export const useI18nInstance = (config: ClientConfig): i18n => {
+  const instance = useMemo(() => createI18nInstance(config), [])
+
+  return instance
+}
+
+export const getI18nInstance = (config: ClientConfig): i18n =>
+  createI18nInstance(config)
+
+const createI18nInstance = (config: ClientConfig): i18n => {
+  if (i18nInstance != null) {
+    return i18nInstance
+  }
+
+  const instance = createInstance({
+    compatibilityJSON: 'v3',
+    defaultNS: config.i18n?.defaultNs ?? DEFAULT_NAMESPACE,
+    fallbackLng: config.i18n?.defaultLng ?? DEFAULT_LNG,
+    debug: config.debug?.all ?? config.debug?.i18n ?? false,
+  })
+
+  instance.use(initReactI18next).init()
+
+  return i18nInstance = instance
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "../tsconfig.default.json",
+    "../tsconfig.react.json",
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/", /* Specify the root folder within your source files. */
+    "outDir": "./build/", /* Specify an output folder for all emitted files. */
+    "moduleResolution": "Bundler"
+  },
+  "exclude": [
+    "./dist/**/*",
+    "./build/**/*",
+    "./*.ts"
+  ]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/context.tsx","./src/index.ts","./src/types.ts","./src/utils/index.ts","./src/utils/instance.ts"],"version":"5.6.3"}