@dialpad/i18n 1.16.0 → 1.20.4

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

@@ -0,0 +1,349 @@
+import { RawBundleSource } from '@dialpad/i18n-services/bundle-source';
+import type { LocaleManagerParams } from '@dialpad/i18n-services/locale-manager';
+import { MemoryStorageWrapper } from '@dialpad/i18n-services/storage';
+
+import { expect, describe, it, beforeEach, vi } from 'vitest';
+import { INJECTION_KEY_PREFIX, LocaleManager } from '../locale-manager';
+import type { App } from 'vue';
+
+const EN_US = 'en-US';
+const ES_LA = 'es-LA';
+
+function createTestBundleSources() {
+  const PowerdialerBundle = new RawBundleSource({
+    resources: [
+      [
+        EN_US,
+        'app-core',
+        `PAGE_TITLE_CAMPAIGNS = Campaigns
+LEAD_PHONE_NUM_LABEL = Phone Number
+CREATE_LEAD_BUTTON = Create Lead`,
+      ],
+      [
+        ES_LA,
+        'app-core',
+        `PAGE_TITLE_CAMPAIGNS = Campañas
+LEAD_PHONE_NUM_LABEL = Número de Teléfono
+CREATE_LEAD_BUTTON = Crear Cliente Potencial`,
+      ],
+    ],
+  });
+
+  // Admin bundle source
+  const adminBundle = new RawBundleSource({
+    resources: [
+      [
+        EN_US,
+        'admin-test',
+        `ADMIN_DASHBOARD = Admin Dashboard
+ADMIN_USERS = Manage Users
+ADMIN_REPORTS = Admin Reports
+BUTTON_SAVE = Admin Save
+test-admin-only = This key ONLY exists in admin bundle
+
+# Same key as Powerdialer but different value
+PAGE_TITLE_CAMPAIGNS = Admin Campaigns View`,
+      ],
+      [
+        ES_LA,
+        'admin-test',
+        `ADMIN_DASHBOARD = Panel de Administración
+ADMIN_USERS = Gestionar Usuarios
+ADMIN_REPORTS = Reportes de Admin
+BUTTON_SAVE = Guardar Admin
+test-admin-only = Esta clave SOLO existe en el bundle de admin
+
+# Same key as Powerdialer but different value
+PAGE_TITLE_CAMPAIGNS = Vista de Campañas Admin`,
+      ],
+    ],
+  });
+
+  return { PowerdialerBundle, adminBundle };
+}
+
+function createTestManager(
+  bundleSource: RawBundleSource,
+  namespaces: string[],
+  props?: Partial<LocaleManagerParams>,
+): LocaleManager {
+  return new LocaleManager({
+    bundleSource,
+    namespaces,
+    warmUp: false,
+    fallbackLocale: EN_US,
+    preferredLocale: EN_US,
+    storageWrapper: new MemoryStorageWrapper(),
+    ...props,
+  });
+}
+
+function mockVueApp(): App {
+  return {
+    _context: { provides: {} },
+    use: vi.fn(),
+    provide: vi.fn(),
+    component: vi.fn(),
+  } as unknown as App;
+}
+
+describe('LocaleManager - Multiple Instances', () => {
+  let powerdialerManager: LocaleManager;
+  let adminManager: LocaleManager;
+  let mockApp: App;
+
+  beforeEach(async () => {
+    const { PowerdialerBundle, adminBundle } = createTestBundleSources();
+
+    powerdialerManager = createTestManager(PowerdialerBundle, ['app-core']);
+    adminManager = createTestManager(adminBundle, ['admin-test']);
+
+    mockApp = mockVueApp();
+
+    // Warm up both managers with proper initialization
+    powerdialerManager.updateLocaleSettings({
+      namespaces: ['app-core'],
+      preferredLocale: EN_US,
+    });
+    adminManager.updateLocaleSettings({
+      namespaces: ['admin-test'],
+      preferredLocale: EN_US,
+    });
+
+    // Install managers to Vue app (required for fluentFormat to work)
+    powerdialerManager.install(mockApp);
+    adminManager.install(mockApp);
+
+    // Wait for both managers to be ready
+    await powerdialerManager.ready;
+    await adminManager.ready;
+  });
+
+  describe('Bundle Key Isolation', () => {
+    it('should allow each manager to access only its own namespace keys', async () => {
+      // Powerdialer manager should access app-core keys
+      expect(powerdialerManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Campaigns',
+      );
+      expect(powerdialerManager.fluentFormat('LEAD_PHONE_NUM_LABEL')).toBe(
+        'Phone Number',
+      );
+      expect(powerdialerManager.fluentFormat('CREATE_LEAD_BUTTON')).toBe(
+        'Create Lead',
+      );
+
+      // Admin manager should access admin-test keys
+      expect(adminManager.fluentFormat('ADMIN_DASHBOARD')).toBe(
+        'Admin Dashboard',
+      );
+      expect(adminManager.fluentFormat('test-admin-only')).toBe(
+        'This key ONLY exists in admin bundle',
+      );
+      expect(adminManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Admin Campaigns View',
+      );
+    });
+
+    it('should return raw keys for non-existent keys in each namespace', () => {
+      // Powerdialer manager should not access admin-only keys
+      expect(powerdialerManager.fluentFormat('ADMIN_DASHBOARD')).toBe(
+        'ADMIN_DASHBOARD',
+      );
+      expect(powerdialerManager.fluentFormat('test-admin-only')).toBe(
+        'test-admin-only',
+      );
+
+      // Admin manager should not access Powerdialer-only keys
+      expect(adminManager.fluentFormat('LEAD_PHONE_NUM_LABEL')).toBe(
+        'LEAD_PHONE_NUM_LABEL',
+      );
+      expect(adminManager.fluentFormat('CREATE_LEAD_BUTTON')).toBe(
+        'CREATE_LEAD_BUTTON',
+      );
+    });
+  });
+
+  describe('Cross-contamination Prevention', () => {
+    it("should prevent managers from accessing each other's namespaces", () => {
+      // Same key name, different values based on namespace
+      const PowerdialerCampaigns = powerdialerManager.fluentFormat(
+        'PAGE_TITLE_CAMPAIGNS',
+      );
+      const adminCampaigns = adminManager.fluentFormat('PAGE_TITLE_CAMPAIGNS');
+
+      expect(PowerdialerCampaigns).toBe('Campaigns');
+      expect(adminCampaigns).toBe('Admin Campaigns View');
+      expect(PowerdialerCampaigns).not.toBe(adminCampaigns);
+    });
+
+    it('should maintain namespace isolation even with similar key names', () => {
+      // Admin has BUTTON_SAVE, Powerdialer doesn't
+      expect(adminManager.fluentFormat('BUTTON_SAVE')).toBe('Admin Save');
+      expect(powerdialerManager.fluentFormat('BUTTON_SAVE')).toBe(
+        'BUTTON_SAVE',
+      ); // Raw key returned
+
+      // Powerdialer has CREATE_LEAD_BUTTON, Admin doesn't
+      expect(powerdialerManager.fluentFormat('CREATE_LEAD_BUTTON')).toBe(
+        'Create Lead',
+      );
+      expect(adminManager.fluentFormat('CREATE_LEAD_BUTTON')).toBe(
+        'CREATE_LEAD_BUTTON',
+      ); // Raw key returned
+    });
+  });
+
+  describe('Language Switching', () => {
+    it('should switch language for individual managers independently', async () => {
+      // Set up injection keys for both managers (like the working test)
+      const provides = mockApp._context.provides as Record<
+        string,
+        LocaleManager
+      >;
+      provides[`${INJECTION_KEY_PREFIX}.app-core`] = powerdialerManager;
+      provides[`${INJECTION_KEY_PREFIX}.admin-test`] = adminManager;
+
+      // Switch Powerdialer to Spanish using change() method with namespace
+      powerdialerManager.changeLocale({ preferredLocale: ES_LA }, 'app-core');
+      await powerdialerManager.ready;
+
+      // Powerdialer should show Spanish
+      expect(powerdialerManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Campañas',
+      );
+      expect(powerdialerManager.fluentFormat('LEAD_PHONE_NUM_LABEL')).toBe(
+        'Número de Teléfono',
+      );
+
+      // Admin should still show English
+      expect(adminManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Admin Campaigns View',
+      );
+      expect(adminManager.fluentFormat('ADMIN_DASHBOARD')).toBe(
+        'Admin Dashboard',
+      );
+    });
+
+    it('should switch language for all managers when using changeLocale globally', async () => {
+      // Set up injection keys for both managers
+      const provides = mockApp._context.provides as Record<
+        string,
+        LocaleManager
+      >;
+      provides[`${INJECTION_KEY_PREFIX}.app-core`] = powerdialerManager;
+      provides[`${INJECTION_KEY_PREFIX}.admin-test`] = adminManager;
+
+      // Switch all managers to Spanish
+      powerdialerManager.changeLocale({ preferredLocale: ES_LA });
+
+      // Wait for both managers to be ready
+      await powerdialerManager.ready;
+      await adminManager.ready;
+
+      // Both managers should show Spanish
+      expect(powerdialerManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Campañas',
+      );
+      expect(adminManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Vista de Campañas Admin',
+      );
+      expect(adminManager.fluentFormat('ADMIN_DASHBOARD')).toBe(
+        'Panel de Administración',
+      );
+    });
+
+    it('should maintain namespace isolation during language switching', async () => {
+      // Switch both to Spanish
+      const provides = mockApp._context.provides as Record<
+        string,
+        LocaleManager
+      >;
+      provides[`${INJECTION_KEY_PREFIX}.app-core`] = powerdialerManager;
+      provides[`${INJECTION_KEY_PREFIX}.admin-test`] = adminManager;
+
+      powerdialerManager.changeLocale({ preferredLocale: ES_LA });
+      await powerdialerManager.ready;
+      await adminManager.ready;
+
+      // Each manager should access only its own Spanish translations
+      expect(powerdialerManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Campañas',
+      );
+      expect(adminManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Vista de Campañas Admin',
+      );
+
+      // Admin-only keys should still be isolated
+      expect(adminManager.fluentFormat('test-admin-only')).toBe(
+        'Esta clave SOLO existe en el bundle de admin',
+      );
+      expect(powerdialerManager.fluentFormat('test-admin-only')).toBe(
+        'test-admin-only',
+      ); // Raw key
+    });
+  });
+
+  describe('Manager Independence', () => {
+    it('should allow managers to have different preferred locales simultaneously', async () => {
+      // Set up injection keys for both managers
+      const provides = mockApp._context.provides as Record<
+        string,
+        LocaleManager
+      >;
+      provides[`${INJECTION_KEY_PREFIX}.app-core`] = powerdialerManager;
+      provides[`${INJECTION_KEY_PREFIX}.admin-test`] = adminManager;
+
+      // Set Powerdialer to Spanish using change() method with namespace
+      powerdialerManager.changeLocale({ preferredLocale: ES_LA }, 'app-core');
+      await powerdialerManager.ready;
+
+      // Keep Admin in English (no change)
+
+      // Verify different locales
+      expect(powerdialerManager.currentLocaleProp.value).toBe(ES_LA);
+      expect(adminManager.currentLocaleProp.value).toBe(EN_US);
+
+      // Verify translations reflect different locales
+      expect(powerdialerManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Campañas',
+      );
+      expect(adminManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Admin Campaigns View',
+      );
+    });
+
+    it("should not interfere with each other's bundle loading", async () => {
+      // Force reload bundles for one manager
+      powerdialerManager.changeLocale({ useCache: false });
+      await powerdialerManager.ready;
+
+      // Other manager should still work normally
+      expect(adminManager.fluentFormat('ADMIN_DASHBOARD')).toBe(
+        'Admin Dashboard',
+      );
+      expect(powerdialerManager.fluentFormat('PAGE_TITLE_CAMPAIGNS')).toBe(
+        'Campaigns',
+      );
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle missing translations gracefully in each manager', () => {
+      // Non-existent keys should return raw key strings
+      expect(powerdialerManager.fluentFormat('NON_EXISTENT_KEY')).toBe(
+        'NON_EXISTENT_KEY',
+      );
+      expect(adminManager.fluentFormat('ANOTHER_MISSING_KEY')).toBe(
+        'ANOTHER_MISSING_KEY',
+      );
+    });
+
+    it('should not crash when one manager has bundle issues', () => {
+      // This test ensures that if one manager has problems, others continue working
+      expect(() => {
+        powerdialerManager.fluentFormat('PAGE_TITLE_CAMPAIGNS');
+        adminManager.fluentFormat('ADMIN_DASHBOARD');
+      }).not.toThrow();
+    });
+  });
+});

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

@@ -23,11 +23,11 @@ function mockBundleSource(): BundleSource {
 }
 
 function mockVueApp(): any {
-  return { use: () => {}, provide: () => {} };
+  return { use: () => {}, provide: () => {}, component: () => {} };
 }
 
 // TODO - would go well in a testing util lib. not quite sync, but immediate
-// and reliable for stuff that you don't expect to resovle for "a hot second"
+// and reliable for stuff that you don't expect to resolve for "a hot second"
 async function isResolved(check: Promise<unknown>): Promise<boolean> {
   const dummy = {};
   return (await Promise.race([check, Promise.resolve(dummy)])) !== dummy;

package/src/locale-manager.ts

@@ -6,11 +6,23 @@ import type {
   SetLocaleParams,
 } from '@dialpad/i18n-services/locale-manager';
 
-import { computed, inject, ref } from 'vue';
+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<string, LocaleManager>();
+
 export interface UseI18N {
   currentLocale: Ref<string | null>;
   setI18N: (args?: Partial<SetLocaleParams>, namespace?: string) => void;
@@ -59,9 +71,17 @@ export class LocaleManager extends BaseLocaleManager {
       );
     }
     this.app = app;
-    app.use(this.fluent);
-    // TODO - allow custom injection key i 'spose
+
+    // 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);
   }
 
   /**
@@ -74,56 +94,95 @@ export class LocaleManager extends BaseLocaleManager {
    *                    provided, all LocaleManagers will be changed.
    */
   changeLocale(args?: Partial<SetLocaleParams>, namespace?: string): void {
-    const localeManagers: LocaleManager[] = [];
-    const providedValues = this.app?._context.provides;
-    if (providedValues) {
-      if (namespace) {
-        // We cannot use inject here because is likely to not either inside setup() or functional components. Also see Line #93
-        // btw, Object.entries() returns [key, value]
-        const keyValue =
-          Object.entries(providedValues).find(
-            ([key, value]) =>
-              typeof key === 'string' &&
-              key === parseInjectionName(namespace) &&
-              value instanceof LocaleManager,
-          ) ?? [];
-        const localeManager = keyValue[1];
-        if (!localeManager) {
-          throw new Error('LocaleManager not found!');
-        }
-        localeManagers.push(localeManager);
-      } else {
-        // This is very ugly but it's the only way I found to get all the localeManagers without
-        // having to create a singleton, if you have a better idea, let me know!! :-]
-        // Get string-keyed properties
-        Object.entries(providedValues).forEach(([key, value]) => {
-          if (
-            typeof key === 'string' &&
-            key.startsWith(INJECTION_KEY_PREFIX.toString()) &&
-            value instanceof LocaleManager
-          ) {
-            localeManagers.push(value);
-          }
-        });
-      }
-    } else {
-      throw new Error('No locale managers are set up yet!');
-    }
+    const localeManagers = namespace
+      ? this.getLocaleManagerByNamespace(namespace)
+      : this.getAllLocaleManagers();
 
     for (const localeManager of localeManagers) {
       localeManager.updateLocaleSettings(args);
     }
   }
+
+  private getLocaleManagerByNamespace(namespace: string): LocaleManager[] {
+    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
+  private findLocaleManagerInProvides(
+    namespace: string,
+  ): LocaleManager | undefined {
+    const providedValues = this.app?._context.provides;
+    if (!providedValues) {
+      return;
+    }
+
+    const targetKey = parseInjectionName(namespace);
+    return this.findLocaleManagersByKeyFilter(
+      providedValues,
+      (key) => key === targetKey,
+    )[0];
+  }
+
+  private getAllLocaleManagers(): LocaleManager[] {
+    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()),
+    );
+  }
+
+  private findLocaleManagersByKeyFilter(
+    providedValues: Record<string | symbol, unknown>,
+    keyFilter: (key: string) => boolean,
+  ): LocaleManager[] {
+    const localeManagers: LocaleManager[] = [];
+    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: string,
+): LocaleManager | undefined {
+  const injectionKey = parseInjectionName(namespace);
+  // Use null as default to suppress Vue injection warning when key is not found
+  const injected = inject<LocaleManager | null>(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'): UseI18N {
-  const localeManager: LocaleManager | undefined = inject(
-    parseInjectionName(namespace),
-  );
-  if (!localeManager)
-    throw new Error(`locale manager doesn't exist using ${namespace}`);
+  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?: Partial<SetLocaleParams>, namespace?: string) => {

package/vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
     sourcemap: true,
     minify: false,
     rollupOptions: {
-      external: ['vue', /^@dialpad/],
+      external: ['vue'],
       output: {
         preserveModules: false,
         minifyInternalExports: false,