@dialpad/i18n 1.16.0

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

@@ -0,0 +1,511 @@
+/* eslint-disable max-lines */
+// compilation checks or maybe just be all .js files?
+import type { BundleSource } from '@dialpad/i18n-services/bundle-source';
+import { MemoryStorageWrapper } from '@dialpad/i18n-services/storage';
+import type { LocaleManagerParams } from '@dialpad/i18n-services/locale-manager';
+
+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'; // for brevity...
+
+// could certainly go harder on this mock but I don't think it's worth atm.
+function mockBundleSource(): BundleSource {
+  return {
+    getBundles: (lc: string[], ns: string[]): any => {
+      return Promise.resolve(lc.map((l) => ({ locales: [l] })));
+    },
+    addSource: () => {
+      throw new Error("Don't set me up like that!");
+    },
+  };
+}
+
+function mockVueApp(): any {
+  return { use: () => {}, provide: () => {} };
+}
+
+// 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"
+async function isResolved(check: Promise<unknown>): Promise<boolean> {
+  const dummy = {};
+  return (await Promise.race([check, Promise.resolve(dummy)])) !== dummy;
+}
+
+const testManager = (props?: Partial<LocaleManagerParams>) =>
+  new LocaleManager({
+    bundleSource: mockBundleSource(),
+    warmUp: false,
+    fallbackLocale: 'en-US',
+    ...props,
+  });
+
+describe('LocaleManager', () => {
+  let manager: LocaleManager = testManager();
+  beforeEach(() => {
+    manager = testManager();
+  });
+
+  it('initializes with fallback', () => {
+    expect(manager['preferredLocale']).toEqual(EN_US);
+  });
+
+  it('can never have zero allowedLocales', () => {
+    manager['setAllowedLocales']([]);
+    expect(manager['allowedLocales'].length).toEqual(1);
+    // EVEN IF YOU VIOLATE IT TERRIBLY
+    manager['allowedLocales'] = []; // evil access which a just god would never allow
+    expect(manager['preferredLocale']).toEqual(EN_US);
+  });
+
+  it('wont do anything useful without some namespaces', async () => {
+    expect(() => manager['getCurrentBundles']()).toThrowError(/no namespaces/);
+  });
+
+  it('requires warming up before offering bundles', async () => {
+    expect(() => manager['currentBundles']).toThrowError(
+      /No bundles! you must await/,
+    );
+    expect(manager['_cachedBundles']).toEqual(null);
+    expect(manager['_cachedHash']).toEqual(null);
+    const spy = vi.spyOn(manager['bundleSource'], 'getBundles');
+    await manager.change({ namespaces: ['x'] });
+    await manager.ready;
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('uses its cache by default', async () => {
+    const spy = vi.spyOn(manager['bundleSource'], 'getBundles');
+    await manager.change({ namespaces: ['x'] });
+    const buns = manager['currentBundles'];
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(manager['_cachedBundles']).toBe(buns);
+
+    // options were not changed, so the bundles we get must be the same object.
+    await manager.change({});
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(manager['_cachedBundles']).toBe(buns);
+
+    await manager.change({ useCache: true });
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(manager['_cachedBundles']).toBe(buns);
+  });
+
+  it('can ignore its own cache', async () => {
+    const spy = vi.spyOn(manager['bundleSource'], 'getBundles');
+
+    await manager.change({ namespaces: ['x'] });
+    const buns = manager['currentBundles'];
+    const hash = manager['_cachedHash'];
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(manager['_cachedBundles']).toBe(buns);
+
+    // called even though hash was the same.
+    await manager.change({ useCache: false });
+    expect(spy).toHaveBeenCalledTimes(2);
+    expect(manager['_cachedBundles']).not.toBe(buns);
+    expect(manager['_cachedBundles']).toEqual(buns);
+    expect(manager['_cachedHash']).toEqual(hash);
+  });
+
+  it('always ignores cache when parameters change.', async () => {
+    const spy = vi.spyOn(manager['bundleSource'], 'getBundles');
+
+    await manager.change({ namespaces: ['x'] });
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    await manager.change({ namespaces: ['y'], useCache: true });
+    expect(spy).toHaveBeenCalledTimes(2);
+
+    await manager.change({ allowedLocales: ['aa-AA', 'b'], useCache: true });
+    expect(spy).toHaveBeenCalledTimes(3);
+
+    await manager.change({ allowedLocales: ['b', 'a'], useCache: true });
+    expect(spy).toHaveBeenCalledTimes(4);
+  });
+
+  // For the forseeable future, we will only care about two locales at most: the
+  // user's setting and the fallback (en-US). LocaleManager will seemlessly
+  // support as many as we care to provide, but until we've settled on *how* we
+  // might like to manage that, we should only provide those two bundles.
+  it('only cares about the preferred and default locales.', async () => {
+    const spy = vi.spyOn(manager['bundleSource'], 'getBundles');
+    await manager.change({
+      namespaces: ['x'],
+      allowedLocales: ['aa-BB', 'xx-YY', 'pp-QQ'],
+    });
+    expect(spy).toHaveBeenCalledWith(['aa-BB', EN_US], ['x']);
+    expect(manager['activeLocales']).toEqual(['aa-BB', EN_US]);
+
+    await manager.change({ preferredLocale: 'pp-QQ' });
+    expect(spy).toHaveBeenCalledWith(['aa-BB', EN_US], ['x']);
+    expect(manager['activeLocales']).toEqual(['pp-QQ', EN_US]);
+
+    // that's only one thing if they're the same, regardless of how many total
+    // allowedLocales have been provided.
+    await manager.change({ preferredLocale: 'en-US' });
+    expect(spy).toHaveBeenCalledWith([EN_US], ['x']);
+    expect(manager['activeLocales']).toEqual([EN_US]);
+    expect(manager['allowedLocales'].length).toEqual(4);
+  });
+
+  it('warms up bundleSource at init time by default', async () => {
+    const bundleSource = mockBundleSource();
+    const spy = vi.spyOn(bundleSource, 'getBundles');
+    manager = testManager({
+      bundleSource,
+      warmUp: undefined,
+      namespaces: ['foo'],
+      preferredLocale: 'aa-BB',
+    });
+    await manager.ready;
+    expect(manager['activeLocales']).toEqual(['aa-BB', EN_US]);
+    expect(spy).toHaveBeenCalledWith(['aa-BB', EN_US], ['foo']);
+  });
+
+  it('can disable warmup', async () => {
+    const bundleSource = mockBundleSource();
+    const bundleSpy = vi.spyOn(bundleSource, 'getBundles');
+    // @ts-expect-error - warmUp is private so this will fail
+    const warmUpSpy = vi.spyOn(LocaleManager.prototype, 'warmUp');
+    manager = testManager({
+      bundleSource,
+      warmUp: false,
+      namespaces: ['foo', 'bar'],
+      preferredLocale: 'aa-BB',
+    });
+    await expect(isResolved(manager.ready)).resolves.toEqual(false);
+    // options are set nonetheless
+    expect(manager['activeLocales']).toEqual(['aa-BB', EN_US]);
+    expect(manager['currentNamespaces']).toEqual(new Set(['foo', 'bar']));
+    expect(bundleSpy).not.toHaveBeenCalled();
+    expect(warmUpSpy).not.toHaveBeenCalled();
+  });
+
+  describe('vue plugin', () => {
+    let useSpy, proSpy, app;
+
+    beforeEach(async () => {
+      app = mockVueApp();
+      useSpy = vi.spyOn(app, 'use');
+      proSpy = vi.spyOn(app, 'provide');
+      manager = testManager({ warmUp: true, namespaces: ['foo'] });
+      await manager.ready;
+
+      expect(manager['fluent']).toEqual(null);
+    });
+
+    describe('install()', () => {
+      it('should call this.addToVue with provided app and namespace', () => {
+        const addToVueSpy = vi.spyOn(manager as any, 'addToVue');
+        manager.install(app, 'my-namespace');
+        expect(addToVueSpy).toHaveBeenCalledTimes(1);
+        expect(addToVueSpy).toHaveBeenCalledWith(app, 'my-namespace');
+      });
+
+      it('should initialize this.fluent when it is null', () => {
+        (manager as any).fluent = null;
+        manager.install(app);
+        expect((manager as any).fluent).not.toBeNull();
+      });
+
+      it('should call this.addToVue with provided app and namespace', () => {
+        const namespace = 'my-namespace';
+        manager.install(app, namespace);
+        const addToVueSpy = vi.spyOn(manager as any, 'addToVue');
+
+        manager.install(app, namespace);
+
+        // Expect the addToVue method to have been called with the provided app and namespace
+        expect(addToVueSpy).toHaveBeenCalledTimes(1);
+        expect(addToVueSpy).toHaveBeenCalledWith(app, namespace);
+      });
+
+      it('should call this.addToVue with default namespace when not provided', () => {
+        const addToVueSpy = vi.spyOn(manager as any, 'addToVue');
+        manager.install(app);
+        expect(addToVueSpy).toHaveBeenCalledTimes(1);
+        expect(addToVueSpy).toHaveBeenCalledWith(app, 'default');
+      });
+    });
+
+    it('cannot be installed prior to warmup', async () => {
+      const manager = testManager({ warmUp: false, namespaces: ['foo'] });
+      const app = mockVueApp();
+      expect(() => {
+        manager.install(app);
+      }).toThrowError(/No bundles!/);
+    });
+
+    it('can be installed under the correct circumstances', async () => {
+      manager.install(app);
+
+      expect(useSpy).toHaveBeenCalledWith(manager['fluent']);
+      // checking 'app.inject' would be much more of a pain!
+      expect(proSpy).toHaveBeenCalledWith(
+        `${INJECTION_KEY_PREFIX}.default`,
+        manager,
+      );
+      const mf = manager['fluent'];
+      expect(mf?.bundles).toEqual(manager['currentBundles']);
+
+      // won't make another:
+      manager.install(app);
+      expect(manager['fluent']).toBe(mf);
+
+      // changing options sets the fluent instance's new bundles:
+      if (mf) {
+        mf.bundles = [];
+      }
+      await manager.change();
+      expect(mf?.bundles).toEqual(manager['currentBundles']);
+    });
+  });
+
+  describe('determineLocale', () => {
+    let storageWrapper;
+
+    beforeEach(() => {
+      storageWrapper = new MemoryStorageWrapper();
+    });
+
+    it('returns the provided locale if given', () => {
+      const localeManager = testManager({
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+      });
+      const result = localeManager['determineLocale']({
+        preferredLocale: 'fr-FR',
+      });
+      expect(result).toBe('fr-FR');
+    });
+
+    it('returns the first provided locale if an array is given', () => {
+      const localeManager = testManager({
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+      });
+      const result = localeManager['determineLocale']({
+        allowedLocales: ['de-DE', 'fr-FR'],
+      });
+      expect(result).toBe('de-DE');
+    });
+
+    it('returns stored locale if available', () => {
+      const localeManager = new LocaleManager({
+        allowedLocales: ['en-US'],
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        bundleSource: mockBundleSource(),
+        storageWrapper,
+      });
+
+      storageWrapper.setItem('user-locale', 'de-DE');
+      const result = localeManager['determineLocale']({});
+      expect(result).toBe('de-DE');
+    });
+
+    it('returns browser locale if no stored locale', () => {
+      const localeManager = testManager({
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+        storageWrapper,
+      });
+      storageWrapper.removeItem('user-locale');
+      vi.spyOn(navigator, 'languages', 'get').mockReturnValue(['it-IT']);
+      const result = localeManager['determineLocale']({});
+      expect(result).toBe('it-IT');
+    });
+
+    it('returns fallback locale if no other locale is found', () => {
+      const localeManager = testManager({
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+        storageWrapper,
+      });
+      storageWrapper.removeItem('user-locale');
+      vi.spyOn(navigator, 'languages', 'get').mockReturnValue([]);
+      const result = localeManager['determineLocale']({});
+      expect(result).toBe('es-ES');
+    });
+  });
+
+  describe('change locales', () => {
+    it('changes locale if the new locale is available', async () => {
+      const localeManager = testManager({ warmUp: false, namespaces: ['foo'] });
+      // @ts-expect-error - setPreferredLocale is private so this will fail
+      vi.spyOn(localeManager, 'setPreferredLocale');
+
+      // is not part of bundles but you can set it anyways (we think that's by design)
+      await localeManager.change({ preferredLocale: 'fr-FR' });
+      expect(localeManager['setPreferredLocale']).toHaveBeenCalledWith('fr-FR');
+    });
+  });
+
+  describe('setOptions', () => {
+    it('sets allowed locales and preferred locale when passing an array', () => {
+      const localeManager = testManager({
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+      });
+      // @ts-expect-error - setAllowedLocales is private so this will fail
+      vi.spyOn(localeManager, 'setAllowedLocales');
+      // @ts-expect-error - setPreferredLocale is private so this will fail
+      vi.spyOn(localeManager, 'setPreferredLocale');
+      localeManager['setOptions']({ allowedLocales: ['fr-FR', 'de-DE'] });
+      expect(localeManager['setAllowedLocales']).toHaveBeenCalledWith([
+        'fr-FR',
+        'de-DE',
+      ]);
+      expect(localeManager['allowedLocales']).toEqual([
+        'fr-FR',
+        'de-DE',
+        'es-ES',
+      ]);
+      expect(localeManager['setPreferredLocale']).toHaveBeenCalled();
+    });
+
+    it('sets preferred locale when passing a string', () => {
+      const localeManager = testManager({
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+      });
+      // @ts-expect-error - setPreferredLocale is private so this will fail
+      vi.spyOn(localeManager, 'setPreferredLocale');
+      localeManager['setOptions']({ preferredLocale: 'fr-FR' });
+      expect(localeManager['setPreferredLocale']).toHaveBeenCalledWith('fr-FR');
+    });
+
+    it('adds namespaces correctly when passing an array', () => {
+      const localeManager = testManager({
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+      });
+      // @ts-expect-error - addNamespaces is private so this will fail
+      vi.spyOn(localeManager, 'addNamespaces');
+      localeManager['setOptions']({ namespaces: ['namespace1', 'namespace2'] });
+      expect(localeManager['addNamespaces']).toHaveBeenCalledWith([
+        'namespace1',
+        'namespace2',
+      ]);
+    });
+  });
+
+  describe('setPreferredLocale', () => {
+    it('moves existing locale to the front of the allowedLocales list', () => {
+      const localeManager = testManager({
+        preferredLocale: 'en-US',
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+      });
+      localeManager['setPreferredLocale']('fr-FR');
+      expect(localeManager['allowedLocales'][0]).toBe('fr-FR');
+      expect(localeManager['allowedLocales']).toEqual(['fr-FR', 'en-US']);
+    });
+
+    it('adds new locale to the front if not already present', () => {
+      const localeManager = testManager({
+        preferredLocale: 'en-US',
+        fallbackLocale: 'es-ES',
+        warmUp: false,
+        namespaces: ['foo'],
+      });
+      localeManager['setPreferredLocale']('fr-FR');
+      expect(localeManager['allowedLocales'][0]).toBe('fr-FR');
+      expect(localeManager['allowedLocales']).toEqual(['fr-FR', 'en-US']);
+    });
+  });
+
+  describe('changeLocale', () => {
+    it('throws an error when namespace is provided but no matching LocaleManager is found', () => {
+      manager.app = { _context: { provides: {} } } as App;
+      expect(() => {
+        manager.changeLocale({}, 'non-existent-namespace');
+      }).toThrowError('LocaleManager not found!');
+    });
+
+    it('throws an error when no LocaleManager instances are set up yet', () => {
+      expect(() => {
+        manager.changeLocale();
+      }).toThrowError('No locale managers are set up yet!');
+    });
+
+    it('updates the locale of a single LocaleManager instance when namespace is provided', () => {
+      const localeManager = testManager({
+        namespaces: ['your-app'],
+        preferredLocale: 'en-US',
+      });
+      localeManager.app = {
+        _context: {
+          provides: { [`${INJECTION_KEY_PREFIX}.your-app`]: localeManager },
+        },
+      } as unknown as App;
+      const updateLocaleSettingsSpy = vi.spyOn(
+        localeManager,
+        'updateLocaleSettings',
+      );
+      localeManager.changeLocale({}, 'your-app');
+      expect(updateLocaleSettingsSpy).toHaveBeenCalledTimes(1);
+      expect(localeManager['preferredLocale']).toBe('en-US');
+    });
+
+    it('updates the locale of all LocaleManager instances when no namespace is provided', () => {
+      const localeManager1 = testManager({
+        namespaces: ['foo'],
+        preferredLocale: 'en-US',
+      });
+      const localeManager2 = testManager({
+        namespaces: ['foo'],
+        preferredLocale: 'en-US',
+      });
+      localeManager1.app = {
+        _context: {
+          provides: {
+            [`${INJECTION_KEY_PREFIX}.namespace-1`]: localeManager1,
+            [`${INJECTION_KEY_PREFIX}.namespace-2`]: localeManager2,
+          },
+        },
+      } as unknown as App;
+      const updateLocaleSettingsSpy1 = vi.spyOn(
+        localeManager1,
+        'updateLocaleSettings',
+      );
+      const updateLocaleSettingsSpy2 = vi.spyOn(
+        localeManager2,
+        'updateLocaleSettings',
+      );
+      localeManager1.changeLocale();
+      expect(updateLocaleSettingsSpy1).toHaveBeenCalledTimes(1);
+      expect(updateLocaleSettingsSpy2).toHaveBeenCalledTimes(1);
+      expect(localeManager1['preferredLocale']).toBe('en-US');
+      expect(localeManager2['preferredLocale']).toBe('en-US');
+    });
+
+    it('passes args to the updateLocaleSettings method of each LocaleManager instance', () => {
+      const localeManager = testManager({ namespaces: ['foo'] });
+      localeManager.app = {
+        _context: {
+          provides: { [`${INJECTION_KEY_PREFIX}.namespace-1`]: localeManager },
+        },
+      } as unknown as App;
+      const updateLocaleSettingsSpy = vi.spyOn(
+        localeManager,
+        'updateLocaleSettings',
+      );
+      const args = { preferredLocale: 'es-LA' };
+      localeManager.changeLocale(args, 'namespace-1');
+      expect(updateLocaleSettingsSpy).toHaveBeenCalledTimes(1);
+      expect(updateLocaleSettingsSpy).toHaveBeenCalledWith(args);
+      expect(localeManager['preferredLocale']).toBe('es-LA');
+    });
+  });
+});

package/src/locale-manager.ts

@@ -0,0 +1,139 @@
+import type { App, Ref } from 'vue';
+import type {
+  FluentFormat,
+  FluentFormatAttrs,
+  LocaleManagerParams,
+  SetLocaleParams,
+} from '@dialpad/i18n-services/locale-manager';
+
+import { computed, inject, ref } from 'vue';
+import { BaseLocaleManager } from '@dialpad/i18n-services/locale-manager';
+
+export const INJECTION_KEY_PREFIX = 'GLOBAL_LOCALE_MANAGER';
+
+export interface UseI18N {
+  currentLocale: Ref<string | null>;
+  setI18N: (args?: Partial<SetLocaleParams>, namespace?: string) => void;
+  $t: FluentFormat;
+  $ta: FluentFormatAttrs;
+}
+
+export class LocaleManager extends BaseLocaleManager {
+  currentLocaleProp: Ref<string | null> = ref<string | null>(null);
+  app: App | null = null;
+
+  constructor(params: LocaleManagerParams) {
+    super(params);
+    this.setCurrentLocaleProp(
+      this.determineLocale({
+        preferredLocale: params.preferredLocale,
+        allowedLocales: params.allowedLocales,
+      }),
+    );
+  }
+
+  protected setCurrentLocaleProp(locale: string): void {
+    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: App, namespace = 'default'): void {
+    if (this.fluent === null) {
+      this.fluent = this.initFluent();
+    }
+
+    this.addToVue(app, namespace);
+  }
+
+  private addToVue(app: App, namespace: string): void {
+    if (!this.fluent) {
+      throw new Error(
+        'fluent not ready, you probably want to call install(...) first',
+      );
+    }
+    this.app = app;
+    app.use(this.fluent);
+    // TODO - allow custom injection key i 'spose
+    app.provide(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?: 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!');
+    }
+
+    for (const localeManager of localeManagers) {
+      localeManager.updateLocaleSettings(args);
+    }
+  }
+}
+
+// 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}`);
+  return {
+    currentLocale: computed(() => localeManager.currentLocaleProp.value),
+    setI18N: (args?: Partial<SetLocaleParams>, namespace?: string) => {
+      localeManager.changeLocale(args, namespace);
+    },
+    $t: localeManager.fluentFormat,
+    $ta: localeManager.fluentFormatAttrs,
+  };
+}
+
+function parseInjectionName(namespace: string): string {
+  return `${INJECTION_KEY_PREFIX}.${namespace}`;
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./base-tsconfig.json",
+  "include": ["src/**/*.ts", "index.ts"],
+  "exclude": ["**/*.test.ts", "**/*.test-d.ts"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist/types",
+    "declaration": true
+  }
+}

package/vite.config.ts

@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath, URL } from 'node:url';
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+    minify: false,
+    rollupOptions: {
+      external: ['vue', /^@dialpad/],
+      output: {
+        preserveModules: false,
+        minifyInternalExports: false,
+        exports: 'named',
+      },
+      treeshake: 'smallest',
+    },
+    lib: {
+      entry: './index.ts',
+      formats: ['es', 'cjs'],
+    },
+  },
+  test: {
+    // Add test runner globals like test/it/describe/afterEach etc.
+    // This is required for VTL to automically call cleanup() in afterEach().
+    // See: https://vitest.dev/guide/migration.html
+    globals: true,
+    environment: 'jsdom',
+    coverage: {
+      reporter: ['html', 'json'],
+    },
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('../src', import.meta.url)),
+    },
+  },
+});