How would one use I18n in TS classes?

[albe2669]

In the vue2 version one would do something like:
export const i18n = new VueI18n({ … })
Import it in the TS class and use it. Of course the next version is no longer a class, so that is not possible. I've tried using the .global instance with

const i18n = createI18n({
      legacy: false,
      locale: process.env.VUE_APP_I18N_LOCALE || 'en',
      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
      messages: this.loadLocaleMessages(),
    });

const global = i18n.global;
export { global };

Which when importing in other components results in
_main__WEBPACK_IMPORTED_MODULE_0__.global is undefined

So now im kinda stumped.

[albe2669]

Hmm... When is the variable instantiated?
Because something funky is going on here.

I have a class, let's call it class1. Then i have a class called I18nModule, which looks like this:

export type I18nType = I18n<LocaleMessages<VueMessageType>, unknown, unknown, false>;

export default class I18nModule {
  readonly name = '18n';

  i18n!: I18nType;

  constructor() {
    this.install();
  }

  install(): void {
    this.i18n = createI18n({
      legacy: false,
      locale: process.env.VUE_APP_I18N_LOCALE || 'en',
      fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
      messages: this.loadLocaleMessages(),
    });
  }

  /**
   * Load locale messages
   *
   * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`,
   * which is integrated into `vue-cli-plugin-i18n`.
   * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
   */
  loadLocaleMessages(): LocaleMessages<VueMessageType> {
    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
    const messages: LocaleMessages<VueMessageType> = {};

    locales.keys().forEach((key) => {
      const matched = key.match(/([A-Za-z0-9-_]+)\./i);

      if (matched && matched.length > 1) {
        const locale = matched[1];
        messages[locale] = locales(key);
      }
    });

    return messages;
  }
}

Then i have a class called CoreModule, which looks like this:

export default class CoreModule extends Module {
  readonly name = 'core';

  i18n: I18nType;

  constructor(router: Router, store: Store<any>, i18n: I18nType) {
    super(router, store);

    this.i18n = i18n;
  }

  install(): void {
    createApp(App)
      .use(this.i18n)
      .use(this.store)
      .use(this.router)
      .mount('#app');
  }
}

Lastly i instantiate it all like this:

// main.ts
const router = new RouterModule();
const store = new StoreModule();
const i18n = new I18nModule();
// Placed here for testing purposes
const { global } = i18n.i18n;
console.log(global);
export { global };

new CoreModule(router.router, store.store, i18n.i18n).install();

Now. Class1 is used by a SFC component as an instance, so something like:

// Class1.ts
export default class Class1 {
  
}

// instances.ts
import { global } from '@/main';
console.log('instances', global);
const test = new Class1(global.t);
const test2 = new Class1(global.t);

export { test, test2 };

The instances.ts is then imported in the SFC component. Weird thing is, i just tried with some good old console.log's. It seems the instances console.log is executed first, then the one's in main.ts.

Which seems incredibly weird to me.
Because that would mean, that the instances file is using an imported variable before even executing the file that variable came from. Plus the instances file is only used in SFC components, which i would think are only executed after using the createApp function. So this issue might be one caused by the way typescript importing works? Any ideas or thought are very much appreciated

[albe2669]

Welp... Imma just answer my own question then.

This WAS a problem with the typescript compiler, nothing to do with i18n. The issues was simple that imports are grouped together in the output, like this:

/* harmony import */ var _modules_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/core */ "./src/modules/core/index.ts");
/* harmony import */ var _modules_docs__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./modules/docs */ "./src/modules/docs/index.ts");
/* harmony import */ var _modules_home__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./modules/home */ "./src/modules/home/index.ts");
/* harmony import */ var _modules_map__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./modules/map */ "./src/modules/map/index.ts");
/* harmony import */ var _modules_router__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./modules/router */ "./src/modules/router/index.ts");
/* harmony import */ var _modules_store__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./modules/store */ "./src/modules/store/index.ts");

So the i18n module import was at the top of the main.ts, meaning the import from the HomeModule that apparently triggered the instances.ts import was executed before the code that actually instantiated the variable. Sometimes i really love programming.