Vite-plugin-typed-i18next-loader NPM

`vite-plugin-typed-i18next-loader`

This plugin will generate a virtual module that exports the compiled resources for i18next and will also generate a type definition file for the resources.

Majority of the code for this plugin is from alienfast/vite-plugin-i18next-loader.

Install

npm install --save-dev vite-plugin-typed-i18next-loader

# or
pnpm add -D vite-plugin-typed-i18next-loader

# or
yarn add -D vite-plugin-typed-i18next-loader

Options

Name	Type	Default	Description
`defaultLocale`	`string`	`'en'`	The default locale the plugin will generate the type from.
`defaultNamespace`	`string`	`'translation'`	The default i18next namespace the plugin will use.
`include`	`('*/.json' \\| '*/.yml' \\| '*/.yaml')[]`	`['*/.json', '*/.yml', '*/.yaml']`	Glob patterns of files to include for bundling.
`namespaceResolution`	`basename`, `relativePath`	none	Namespace resolution strategy.
`dtsOutputFile`	`string`	`'./src/types/i18next.d.ts'`	Output file destination for the generated types.
`virtualModuleDtsOutputFile`	`string`	`'./src/types/i18next-virtual.d.ts'`	Output file destination for the generated virtual module types.
`paths`	`string[]`	`[]`	Locale top-level directory paths.
`dts`	`{ expand: boolean }`	`{ expand: true }`	DTS generation options.

Usage with Vite

import i18nextPlugin from 'vite-plugin-typed-i18next-loader';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    i18nextPlugin({
      defaultLocale: 'en-GB',
      defaultNamespace: 'translation',
      paths: ['./src/locales/'],
      namespaceResolution: 'basename',
      dtsOutputFile: './src/types/i18next.d.ts',
      virtualModuleDtsOutputFile: './src/types/i18next-virtual.d.ts',
    }),
  ],
});

Usage with i18next

import resources from 'virtual:i18next-typed-loader';
import i18n from 'i18next';

i18n.init({
  defaultNS: 'translation',
  resources: resources,
  ns: ['translation'],
});

Example

// locales/en/translation.json
{
  "application": {
    "title": "My Application",
    "description": "This is my application"
  },
  "common": {
    "items_zero": "No items",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items",
    "rank_one": "{{count}}st",
    "rank_two": "{{count}}nd",
    "rank_few": "{{count}}rd",
    "rank_other": "{{count}}th"
  }
}

// src/types/i18next.d.ts
import 'i18next';

type GeneratedResource = {
  translation: {
    'application.title': string;
    'application.description': string;
    'common.items': string;
    'common.rank': string;
  };
};

type FlatGeneratedResources<TResource, NS extends keyof TResource> = {
  [Property in keyof TResource[NS] as `${NS & string}:${Property & string}`]: TResource[NS][Property];
};

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'translation';
    resources: GeneratedResources & {
      translation: FlatGeneratedResources<GeneratedResources, 'translation'>;
    };
  }
}