@dialpad/i18n 1.16.0 → 1.20.4

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export type { LocaleCode, NamespaceCode, ResourceKey, LocaleManagerParams, SetLocaleParams, } from '@dialpad/i18n-services/locale-manager';
+export type { BundleSource } from '@dialpad/i18n-services/bundle-source';
+export { LocaleManager, useI18N, INJECTION_KEY_PREFIX, } from './src/locale-manager';
+export { HTTPBundleSource, RawBundleSource, } from '@dialpad/i18n-services/bundle-source';

package/dist/types/index.js

@@ -0,0 +1,2 @@
+export { LocaleManager, useI18N, INJECTION_KEY_PREFIX, } from './src/locale-manager';
+export { HTTPBundleSource, RawBundleSource, } from '@dialpad/i18n-services/bundle-source';

package/dist/types/src/locale-manager.d.ts

@@ -0,0 +1,57 @@
+import type { App, Ref } from 'vue';
+import type { FluentFormat, FluentFormatAttrs, LocaleManagerParams, SetLocaleParams } from '@dialpad/i18n-services/locale-manager';
+import { BaseLocaleManager } from '@dialpad/i18n-services/locale-manager';
+export declare const INJECTION_KEY_PREFIX = "GLOBAL_LOCALE_MANAGER";
+/**
+ * This is a backup storage for LocaleManagers in order to solve
+ * the constraint of having to call useI18N() inside a <script setup>.
+ *
+ * This is kinda hackish (I tried to keep it simple as well) but otherwise we're forcing consumers
+ * (i.e. Dialtone) to potentially modify their whole database
+ * and set the <script> for each components to <script setup>
+ *
+ * (I haven't found a way to do this only relying on Vue 3 capabilities T_T)
+ */
+export declare const globalLocaleManagers: Map<string, LocaleManager>;
+export interface UseI18N {
+    currentLocale: Ref<string | null>;
+    setI18N: (args?: Partial<SetLocaleParams>, namespace?: string) => void;
+    $t: FluentFormat;
+    $ta: FluentFormatAttrs;
+}
+export declare class LocaleManager extends BaseLocaleManager {
+    currentLocaleProp: Ref<string | null>;
+    app: App | null;
+    constructor(params: LocaleManagerParams);
+    protected setCurrentLocaleProp(locale: string): void;
+    /**
+     * Registers this LocaleManager with the Vue instance so that it can
+     * be used by the {@link useI18N} hook.
+     *
+     * @param app - The Vue app to register with.
+     * @param namespace - The namespace to install the LocaleManager under.
+     *                     Defaults to 'default'
+     */
+    install(app: App, namespace?: string): void;
+    private addToVue;
+    /**
+     * Changes the locale of the {@link LocaleManager} that is currently active in
+     * the app, or the one specified by the namespace.
+     *
+     * @param args - Optional parameters to pass to the underlying
+     *               {@link BaseLocaleManager#updateLocaleSettings} method.
+     * @param namespace - Optional namespace to change the locale of. If not
+     *                    provided, all LocaleManagers will be changed.
+     */
+    changeLocale(args?: Partial<SetLocaleParams>, namespace?: string): void;
+    private getLocaleManagerByNamespace;
+    private findLocaleManagerInProvides;
+    private getAllLocaleManagers;
+    private findLocaleManagersByKeyFilter;
+}
+/**
+ * Use i18n functionality without requiring to depend only on Vue's inject
+ * @param namespace - The namespace of the locale manager to use, defaults to 'default'
+ */
+export declare function findLocaleManager(namespace: string): LocaleManager | undefined;
+export declare function useI18N(namespace?: string): UseI18N;

package/dist/types/src/locale-manager.js

@@ -0,0 +1,138 @@
+import { computed, ref, inject } from 'vue';
+import { BaseLocaleManager } from '@dialpad/i18n-services/locale-manager';
+export const INJECTION_KEY_PREFIX = 'GLOBAL_LOCALE_MANAGER';
+/**
+ * This is a backup storage for LocaleManagers in order to solve
+ * the constraint of having to call useI18N() inside a <script setup>.
+ *
+ * This is kinda hackish (I tried to keep it simple as well) but otherwise we're forcing consumers
+ * (i.e. Dialtone) to potentially modify their whole database
+ * and set the <script> for each components to <script setup>
+ *
+ * (I haven't found a way to do this only relying on Vue 3 capabilities T_T)
+ */
+export const globalLocaleManagers = new Map();
+export class LocaleManager extends BaseLocaleManager {
+    currentLocaleProp = ref(null);
+    app = null;
+    constructor(params) {
+        super(params);
+        this.setCurrentLocaleProp(this.determineLocale({
+            preferredLocale: params.preferredLocale,
+            allowedLocales: params.allowedLocales,
+        }));
+    }
+    setCurrentLocaleProp(locale) {
+        this.currentLocaleProp = ref(locale);
+    }
+    /**
+     * Registers this LocaleManager with the Vue instance so that it can
+     * be used by the {@link useI18N} hook.
+     *
+     * @param app - The Vue app to register with.
+     * @param namespace - The namespace to install the LocaleManager under.
+     *                     Defaults to 'default'
+     */
+    install(app, namespace = 'default') {
+        if (this.fluent === null) {
+            this.fluent = this.initFluent();
+        }
+        this.addToVue(app, namespace);
+    }
+    addToVue(app, namespace) {
+        if (!this.fluent) {
+            throw new Error('fluent not ready, you probably want to call install(...) first');
+        }
+        this.app = app;
+        // Only install fluent plugin if not already installed
+        // This prevents "component i18n has already been registered" warnings
+        const isFluentInstalled = app.component('i18n') !== undefined;
+        if (!isFluentInstalled) {
+            app.use(this.fluent);
+        }
+        // Always register this LocaleManager for injection, regardless of plugin installation
+        app.provide(parseInjectionName(namespace), this);
+        globalLocaleManagers.set(parseInjectionName(namespace), this);
+    }
+    /**
+     * Changes the locale of the {@link LocaleManager} that is currently active in
+     * the app, or the one specified by the namespace.
+     *
+     * @param args - Optional parameters to pass to the underlying
+     *               {@link BaseLocaleManager#updateLocaleSettings} method.
+     * @param namespace - Optional namespace to change the locale of. If not
+     *                    provided, all LocaleManagers will be changed.
+     */
+    changeLocale(args, namespace) {
+        const localeManagers = namespace
+            ? this.getLocaleManagerByNamespace(namespace)
+            : this.getAllLocaleManagers();
+        for (const localeManager of localeManagers) {
+            localeManager.updateLocaleSettings(args);
+        }
+    }
+    getLocaleManagerByNamespace(namespace) {
+        const localeManager = this.findLocaleManagerInProvides(namespace) ??
+            findLocaleManager(namespace);
+        if (!localeManager) {
+            throw new Error('LocaleManager not found!');
+        }
+        return [localeManager];
+    }
+    // This method mostly focuses on remain backward compatible and reduce risks when implementing new instance providing mechanisms
+    findLocaleManagerInProvides(namespace) {
+        const providedValues = this.app?._context.provides;
+        if (!providedValues) {
+            return;
+        }
+        const targetKey = parseInjectionName(namespace);
+        return this.findLocaleManagersByKeyFilter(providedValues, (key) => key === targetKey)[0];
+    }
+    getAllLocaleManagers() {
+        const providedValues = this.app?._context.provides;
+        if (!providedValues) {
+            throw new Error('No locale managers are set up yet!');
+        }
+        return this.findLocaleManagersByKeyFilter(providedValues, (key) => key.startsWith(INJECTION_KEY_PREFIX.toString()));
+    }
+    findLocaleManagersByKeyFilter(providedValues, keyFilter) {
+        const localeManagers = [];
+        Object.entries(providedValues).forEach(([key, value]) => {
+            if (typeof key === 'string' &&
+                keyFilter(key) &&
+                value instanceof LocaleManager) {
+                localeManagers.push(value);
+            }
+        });
+        return localeManagers;
+    }
+}
+/**
+ * Use i18n functionality without requiring to depend only on Vue's inject
+ * @param namespace - The namespace of the locale manager to use, defaults to 'default'
+ */
+export function findLocaleManager(namespace) {
+    const injectionKey = parseInjectionName(namespace);
+    // Use null as default to suppress Vue injection warning when key is not found
+    const injected = inject(injectionKey, null);
+    return injected ?? globalLocaleManagers.get(injectionKey);
+}
+// TODO - allow custom injection key or whatever???
+// TODO - also maybe just use getCurrentApp + the app's global config? idk.
+export function useI18N(namespace = 'default') {
+    const localeManager = findLocaleManager(namespace);
+    if (!localeManager) {
+        throw new Error(`locale manager doesn't exist using ${namespace}. Make sure your locale manager was set up correctly`);
+    }
+    return {
+        currentLocale: computed(() => localeManager.currentLocaleProp.value),
+        setI18N: (args, namespace) => {
+            localeManager.changeLocale(args, namespace);
+        },
+        $t: localeManager.fluentFormat,
+        $ta: localeManager.fluentFormatAttrs,
+    };
+}
+function parseInjectionName(namespace) {
+    return `${INJECTION_KEY_PREFIX}.${namespace}`;
+}

package/package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@dialpad/i18n",
+  "version": "1.20.3",
+  "private": false,
+  "description": "Dialpad's internationalization library",
+  "author": "Dialpad",
+  "license": "UNLICENSED",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint ./ --fix",
+    "lint:ci": "eslint ./ --output-file eslint_report.json --format json",
+    "format": "prettier ./ --write",
+    "format:ci": "prettier ./ --check",
+    "test": "vitest",
+    "coverage": "vitest run --coverage --passWithNoTests",
+    "coverage:open": "rushx coverage && open coverage/index.html",
+    "build": "run-p build:*",
+    "build:main": "vite build --config vite.config.ts",
+    "build:types": "rushx types:build",
+    "types:build": "tsc",
+    "types:check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@dialpad/i18n-services": "workspace:*"
+  },
+  "devDependencies": {
+    "@dialpad/eslint-config": "workspace:*",
+    "@vitejs/plugin-vue": "~5.1.4",
+    "npm-run-all": "4.1.5",
+    "typescript": "~5.6.3",
+    "vite": "~5.4.10",
+    "vue": "~3.5.12",
+    "vue-tsc": "1.8.8",
+    "vitest": "~2.1.4"
+  },
+  "exports": {
+    "import": "./dist/i18n.js",
+    "types": "./dist/types/index.d.ts",
+    "require": "./dist/i18n.cjs"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dp": {
+    "nodpend": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dialpad/web-clients.git"
+  }
+}

package/package.json

@@ -1,43 +1,31 @@
 {
   "name": "@dialpad/i18n",
-  "version": "1.16.0",
+  "version": "1.20.4",
   "private": false,
   "description": "Dialpad's internationalization library",
   "author": "Dialpad",
   "license": "UNLICENSED",
   "type": "module",
-  "scripts": {
-    "lint": "eslint ./ --fix",
-    "lint:ci": "eslint ./ --output-file eslint_report.json --format json",
-    "format": "prettier ./ --write",
-    "format:ci": "prettier ./ --check",
-    "test": "vitest",
-    "coverage": "vitest run --coverage --passWithNoTests",
-    "coverage:open": "pnpm run coverage && open coverage/index.html",
-    "build": "vite build --config vite.config.ts",
-    "build:types": "pnpm run types:build",
-    "types:build": "tsc",
-    "types:check": "tsc --noEmit"
-  },
   "dependencies": {
-    "vue": "3.3.4",
-    "@dialpad/i18n-services": "1.5.0"
+    "@dialpad/i18n-services": "1.9.0"
   },
   "devDependencies": {
-    "@dialpad/configurator": "workspace:*",
-    "@dialpad/eslint-config": "workspace:*",
-    "@vitejs/plugin-vue": "4.5.0",
-    "typescript": "5.0.4",
-    "vite": "5.0.4",
+    "@vitejs/plugin-vue": "~5.1.4",
+    "npm-run-all": "4.1.5",
+    "typescript": "~5.6.3",
+    "vite": "~5.4.10",
+    "vue": "~3.5.12",
     "vue-tsc": "1.8.8",
-    "vitest": "1.0.0-beta.6"
+    "vitest": "~2.1.4",
+    "@dialpad/eslint-config": "2.1.0"
   },
   "exports": {
-    ".": {
-      "development": "./index.ts",
-      "production": "./index.ts",
-      "default": "./index.ts"
-    }
+    "import": "./dist/i18n.js",
+    "types": "./dist/types/index.d.ts",
+    "require": "./dist/i18n.cjs"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
   },
   "dp": {
     "nodpend": true
@@ -45,5 +33,19 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/dialpad/web-clients.git"
+  },
+  "scripts": {
+    "lint": "eslint ./ --fix",
+    "lint:ci": "eslint ./ --output-file eslint_report.json --format json",
+    "format": "prettier ./ --write",
+    "format:ci": "prettier ./ --check",
+    "test": "vitest",
+    "coverage": "vitest run --coverage --passWithNoTests",
+    "coverage:open": "rushx coverage && open coverage/index.html",
+    "build": "run-p build:*",
+    "build:main": "vite build --config vite.config.ts",
+    "build:types": "rushx types:build",
+    "types:build": "tsc",
+    "types:check": "tsc --noEmit"
   }
-}
+}

package/rush-logs/i18n.build.log

@@ -0,0 +1,22 @@
+Invoking: run-p build:* 
+
+> @dialpad/i18n@1.20.4 build:types
+> rushx types:build
+
+
+> @dialpad/i18n@1.20.4 build:main
+> vite build --config vite.config.ts
+
+vite v5.4.19 building for production...
+Found configuration in /Users/daniellovero/src/wcf-sdk/rush.json
+
+transforming...
+Rush Multi-Project Build Tool 5.139.0 - Node.js 20.14.0 (LTS)
+> "tsc"
+
+✓ 30 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/i18n.js  209.85 kB │ gzip: 49.05 kB │ map: 511.13 kB
+dist/i18n.cjs  210.03 kB │ gzip: 49.09 kB │ map: 511.37 kB
+✓ built in 373ms

package/src/__test__/locale-manager.find.test.ts

@@ -0,0 +1,78 @@
+import { describe, beforeEach, vi, afterEach, it, expect } from 'vitest';
+import type { LocaleManager } from '../locale-manager';
+import {
+  globalLocaleManagers,
+  INJECTION_KEY_PREFIX,
+  findLocaleManager,
+} from '../locale-manager';
+import * as vue from 'vue';
+
+vi.mock('vue', () => ({
+  inject: vi.fn(),
+}));
+
+describe('findLocaleManager', () => {
+  // Reset mocks and clear data before each test
+  beforeEach(() => {
+    vi.clearAllMocks();
+    globalLocaleManagers.clear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should return locale manager from Vue inject if available', () => {
+    const namespace = 'test-namespace';
+    const injectionKey = `${INJECTION_KEY_PREFIX}.${namespace}`;
+    const mockLocaleManager = {
+      id: 'injected-manager',
+    } as unknown as LocaleManager;
+
+    vi.mocked(vue.inject).mockReturnValue(mockLocaleManager);
+
+    const result = findLocaleManager(namespace);
+
+    expect(vue.inject).toHaveBeenCalledWith(injectionKey, null);
+    expect(result).toBe(mockLocaleManager);
+  });
+
+  it('should return locale manager from globalLocaleManagers if not available in inject', () => {
+    const namespace = 'test-namespace';
+    const injectionKey = `${INJECTION_KEY_PREFIX}.${namespace}`;
+    const mockLocaleManager = {
+      id: 'global-manager',
+    } as unknown as LocaleManager;
+
+    vi.mocked(vue.inject).mockReturnValue(null);
+    globalLocaleManagers.set(injectionKey, mockLocaleManager);
+
+    const result = findLocaleManager(namespace);
+
+    expect(vue.inject).toHaveBeenCalledWith(injectionKey, null);
+    expect(result).toBe(mockLocaleManager);
+  });
+
+  it('should return undefined if locale manager is not found anywhere', () => {
+    const namespace = 'nonexistent-namespace';
+    const injectionKey = `${INJECTION_KEY_PREFIX}.${namespace}`;
+
+    vi.mocked(vue.inject).mockReturnValue(null);
+
+    const result = findLocaleManager(namespace);
+
+    expect(vue.inject).toHaveBeenCalledWith(injectionKey, null);
+    expect(result).toBeUndefined();
+  });
+
+  it('should use the correct injection key format', () => {
+    const namespace = 'custom-namespace';
+    const injectionKey = `${INJECTION_KEY_PREFIX}.${namespace}`;
+
+    vi.mocked(vue.inject).mockReturnValue(null);
+
+    findLocaleManager(namespace);
+
+    expect(vue.inject).toHaveBeenCalledWith(injectionKey, null);
+  });
+});

package/src/__test__/locale-manager.formatters.test.ts

@@ -3,7 +3,7 @@ import { RawBundleSource } from '@dialpad/i18n-services/bundle-source';
 import { describe, it, expect } from 'vitest';
 
 function mockVueApp(): any {
-  return { use: () => {}, provide: () => {} };
+  return { use: () => {}, provide: () => {}, component: () => {} };
 }
 
 describe('Fluent Formatters', () => {