Releases · intlify/vue-i18n-next

We are excited to announce the release of Vue I18n v9.3, finally !! This release includes some new features, bug fixes, improvements, and document fixes.

We had commited with 37 contributors. Thanks for your contributing ❤️

In the following, we introduce some of the new features:

🌟 Features

Node.js Dual packages (`cjs` / `mjs`)

We provide CommonJS and Native ESM dual module packages for Node.js. This supports both require and import for loading modules in Node.js.

feat: cjs/mjs file extension fully by @kazupon in #1147
feat: support ESM file extension by @kazupon in #1137
feat: node esm for message compiler by @kazupon in #1460

JIT Style Compilation

Supports JIT (Just In Time) style compilation of message formats. This mean, removes the CSP limitation and allows for use in environments such as Service worker, Web worker, and Edge.

It mean also now supports the use-case where locale messages are dynamically retrieved from the backend via the API.

For more information, please see the docs

The performance of JIT-style compilation is close to that of conventional AOT (Ahead Of Time) style compilation, and you can improve the performance to nearly 3x with combination of JIT + AOT.

Below are the compile performance benchmark results for vue-i18n:

> node ./benchmark/index.mjs

compilation:

compile simple message x 396,898 ops/sec ±0.31% (98 runs sampled)
compile complex message x 60,036 ops/sec ±0.34% (99 runs sampled)

simple pattern on 1000 resources (AOT):

resolve time with core x 279,919 ops/sec ±0.19% (99 runs sampled)
resolve time on composition x 93,963 ops/sec ±0.48% (93 runs sampled)
resolve time on composition with compile cache x 230,928 ops/sec ±0.20% (100 runs sampled)

simple pattern on 1000 resources (JIT):

resolve time with core x 277,813 ops/sec ±0.18% (99 runs sampled)
resolve time on composition x 91,959 ops/sec ±0.43% (97 runs sampled)
resolve time on composition with compile cache x 227,117 ops/sec ±0.15% (99 runs sampled)

simple pattern on 1000 resources (JIT + AOT):

resolve time with core x 319,061 ops/sec ±0.18% (100 runs sampled)
resolve time on composition x 204,529 ops/sec ±0.22% (95 runs sampled)
resolve time on composition with compile cache x 204,652 ops/sec ±0.30% (100 runs sampled)

complex pattern on 1000 resources (AOT):

resolve time with core x 240,427 ops/sec ±0.37% (100 runs sampled)
resolve time on composition x 33,959 ops/sec ±0.45% (94 runs sampled)
resolve time on composition with compile cache x 200,980 ops/sec ±0.15% (99 runs sampled)

complex pattern on 1000 resources (JIT):

resolve time with core x 225,739 ops/sec ±0.25% (99 runs sampled)
resolve time on composition x 36,379 ops/sec ±0.49% (97 runs sampled)
resolve time on composition with compile cache x 191,653 ops/sec ±0.24% (100 runs sampled)

complex pattern on 1000 resources (JIT + AOT):

resolve time with core x 278,542 ops/sec ±0.20% (98 runs sampled)
resolve time on composition x 92,781 ops/sec ±0.31% (98 runs sampled)
resolve time on composition with compile cache x 92,865 ops/sec ±0.33% (98 runs sampled)

You can clone Vue I18n and run the benchmark with pnpm build:type && pnpm benchmark to check.

feat: support JIT like compilation by @kazupon in #1434
feat: support AST minification by @kazupon in #1474

Custome message format

Starting with v9.3, Vue I18n will give message format customization as an experimental feature. This will allow for extending to the message format:

import { createI18n } from 'vue-i18n'
import { messageCompiler } from './compilation'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messageCompiler,
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    }
  }
})

About details, please see the docs

feat: support custom message format with messageCompiler option by @kazupon in #1497
perf: support drop message compiler feature flag by @kazupon in #1510

Exports type definition and API

Export v-t type definitions and API $te to support Vue I18n extending for third vendors and your Vue applications.

feat: export v-t directive type by @kazupon in #1511
feat: export $te as global on composition mode by @kazupon in #1222

❗ Important Changes: 1

`allowComposition` option

The allowComposition option will be removed in Vue I18n v10. We have accordingly output a warning if you are using it.

If you are using Vue I18n Legacy API to migrate to the Composition API, please make sure you have done so with the Vue I18n v9 version.

fix: prepare to drop allowComposition option by @kazupon in #1496

Deprecate vue-i18n official bundle plugins

The following plugin or loader for bundler is deprecated because it can be replaced by the unplugin-vue-i18n.

These will only be taken as hot fixes in the future, and no additional functionality will be added.

⚡ Improvement Features: 15

fix: improve custom extender by @kazupon in #1494
Improve documentation about TypeScript Support by @bchazelle-ubitransport in #1374
fix: typo in I18nErrorCodes enum by @T0TProduction in #1394
Fix typo by @tkalmar in #1393
fix: drop node v14 by @NozomuIkuta in #1399
fix: avoid transform to globalThis with bundler by @kazupon in #1413
fix: global locale is not respected by useI18n by @Csszabi98 in #1316
chore: switch to vitest from jest by @kazupon in #1342
fix: support pascal case for components by @kazupon in #1313
fix: support type inference of Translation, NumberFormat and DatetimeFormat components on SFC template and JSX/TSX by @kazupon in #1310
fix: update typescript version and fix type error by @littleboarx in #1277
fix: correct typo in TranslateVNodeSymbol by @DamianGlowala in #1236
fix: exntending for Composer and VueI18n by @kazupon in #1237
fix: change to optionalDependencies by @kazupon in #1184
improvement: remove feature flag warning by @kazupon in #1140

🐛 Bug Fixes: 17

fix(message-compiler): linked modifier breaks with parenthesis by @kazupon in #1506
fix(core-base): isMessageAST more strictly by @kazupon in #1509
fix: root context message availability for linked messages in SFCs on production by @kazupon in #1477
fix: cleanup global injection resources by @kazupon in #1479
fix: conditional exports order for message compiler by @kazupon in #1461
fix: allow AST on rt by @kazupon in #1455
fix: JIT compilation on runtime only by @kazupon in #1451
fix: reslove with caml-case for components by @kazupon in #1418
fix: crash of the app when we mix flat json keys by @kazupon in #1419
fix: Resolve the message in components which was rendered with slots, for about <i18n-t>, <i18n-n> and <i18n-d> by @kazupon in #1416
fix: isPlainObject incorrectly identifies objects wrapped in a Proxy object in Safari 10 by @reed-soul in #1379
fix: useI18n wrong type and other type broken by @kazupon in #1309
fix: generate ComponentCustomProperties d.ts by @kazupon in #1306
fix: avoid VueI18n extending on root by @kazupon in #1241
fix: multiple VueI18n extending by @kazupon in #1239
fix: tree-shaking Fragment with for vue-i18n-bridge by @kazupon in #1187
fi...