@intlify/unplugin-vue-i18n 0.11.0 → 0.12.1

package/README.md

@@ -8,6 +8,7 @@
 unplugin for Vue I18n
 
 ## 🌟 Features
+
 - i18n resource pre-compilation
 - i18n custom block
   - i18n resource definition
@@ -84,14 +85,11 @@ export default defineNuxtConfig({
 
 ## 🚀 Usage
 
-### i18n resources pre-compilation
-
-Since `vue-i18n@v9.x`, the locale messages are handled with message compiler, which converts them to javascript functions after compiling. After compiling, message compiler converts them into javascript functions, which can improve the performance of the application.
+### locale messages pre-compilation
 
-However, with the message compiler, the javascript function conversion will not work in some environments (e.g. CSP). For this reason, `vue-i18n@v9.x` and later offer a full version that includes compiler and runtime, and a runtime only version.
-
-If you are using the runtime version, you will need to compile before importing locale messages by managing them in a file such as `.json`.
+Since `vue-i18n@v9.x`, the locale messages are handled with message compiler, which transform them to javascript functions or AST objects after compiling, so these can improve the performance of the application.
 
+If you want to maximize the performance of vue-i18n, we recommend using unplugin-vue-i18n for locale messages.
 
 ### i18n custom block
 
@@ -241,7 +239,9 @@ If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplu
 
 
 ## 📦 Automatic bundling
+
 ### For Vue I18n
+
 As noted [here](https://vue-i18n.intlify.dev/guide/installation.html#explanation-of-different-builds), NPM provides many different builds of Vue I18n.
 
 This plugin will automatically select and bundle Vue I18n build according to the following behavior:
@@ -345,6 +345,22 @@ This plugin will automatically select and bundle `petite-vue-i18n` build accordi
 
   If you fetch some resources from the backend, the data **must be pre-compiled** for production. exmaple is [here](https://github.com/intlify/vue-i18n-next/tree/master/examples/backend).
 
+### `jitCompilation`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  Whether locale mesages should be compiled by JIT (Just in Time) compilation with vue-i18n's message compiler.
+
+  > ⚠️ NOTE: 
+  This option works with vue-i18n v9.3 and later.
+
+  JIT compilation has been supported since vue-i18n v9.3. This means that since v9 was released until now, the message compiler compiles to executable JavaScript code, however it did not work in the CSP environment. Also, since this was an AOT (Ahead of Time) compilation, it was not possible to dynamically retrieve locale messages from the back-end Database and compose locale mesages with programatic.
+
+  > ⚠️ NOTE: 
+  Enabling JIT compilation causes the message compiler to generate AST objects for locale mesages instead of JavaScript code. If you pre-compile locale messages with a tool such as the [Intlify CLI](https://github.com/intlify/cli) and import them dynamically, you need to rebuild that resource.
+
+  About JIT compilation, See [here](https://vue-i18n.intlify.dev/guide/advanced/optimization.html#jit-compilation)
 
 ### `runtimeOnly`
 

package/lib/index.cjs

@@ -121,6 +121,8 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
   debug("bridge", bridge);
   const runtimeOnly = shared.isBoolean(options.runtimeOnly) ? options.runtimeOnly : true;
   debug("runtimeOnly", runtimeOnly);
+  const jitCompilation = !!options.jitCompilation;
+  debug("jitCompilation", jitCompilation);
   const compositionOnly = installedPkg === "vue-i18n" ? shared.isBoolean(options.compositionOnly) ? options.compositionOnly : true : true;
   debug("compositionOnly", compositionOnly);
   const fullInstall = installedPkg === "vue-i18n" ? shared.isBoolean(options.fullInstall) ? options.fullInstall : true : false;
@@ -214,6 +216,10 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
         debug(
           `set __VUE_I18N_FULL_INSTALL__ is '${config.define["__VUE_I18N_FULL_INSTALL__"]}'`
         );
+        config.define["__INTLIFY_JIT_COMPILATION__"] = jitCompilation;
+        debug(
+          `set __INTLIFY_JIT_COMPILATION__ is '${config.define["__INTLIFY_JIT_COMPILATION__"]}'`
+        );
         config.define["__VUE_I18N_PROD_DEVTOOLS__"] = false;
       },
       configResolved(config) {
@@ -269,6 +275,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                   strictMessage,
                   escapeHtml,
                   bridge,
+                  jit: jitCompilation,
                   exportESM: esm,
                   forceStringify
                 }
@@ -285,7 +292,8 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
                 return;
               return {
                 code: generatedCode,
-                map: sourceMap ? map : { mappings: "" }
+                // prettier-ignore
+                map: jitCompilation ? { mappings: "" } : sourceMap ? map : { mappings: "" }
                 // eslint-disable-line @typescript-eslint/no-explicit-any
               };
             } else {
@@ -435,6 +443,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
               strictMessage,
               escapeHtml,
               bridge,
+              jit: jitCompilation,
               exportESM: esm,
               forceStringify
             }
@@ -451,7 +460,8 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             return;
           return {
             code: generatedCode,
-            map: sourceMap ? map : { mappings: "" }
+            // prettier-ignore
+            map: jitCompilation ? { mappings: "" } : sourceMap ? map : { mappings: "" }
             // eslint-disable-line @typescript-eslint/no-explicit-any
           };
         }
@@ -474,6 +484,7 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
               isGlobal: globalSFCScope,
               useClassComponent,
               bridge,
+              jit: jitCompilation,
               strictMessage,
               escapeHtml,
               exportESM: esm,
@@ -499,7 +510,8 @@ const unplugin = unplugin$1.createUnplugin((options = {}, meta) => {
             return;
           return {
             code: generatedCode,
-            map: sourceMap ? map : { mappings: "" }
+            // prettier-ignore
+            map: jitCompilation ? { mappings: "" } : sourceMap ? map : { mappings: "" }
             // eslint-disable-line @typescript-eslint/no-explicit-any
           };
         }
@@ -546,7 +558,8 @@ async function generateBundleResources(resources, query, isProduction, {
   exportESM = true,
   strictMessage = true,
   escapeHtml = false,
-  useClassComponent = false
+  useClassComponent = false,
+  jit = false
 }) {
   const codes = [];
   for (const res of resources) {
@@ -559,6 +572,7 @@ async function generateBundleResources(resources, query, isProduction, {
         isGlobal,
         useClassComponent,
         bridge,
+        jit,
         exportESM,
         strictMessage,
         escapeHtml,
@@ -620,7 +634,8 @@ function getOptions(filename, isProduction, query, sourceMap, {
   useClassComponent = false,
   allowDynamic = false,
   strictMessage = true,
-  escapeHtml = false
+  escapeHtml = false,
+  jit = false
 }) {
   const mode = isProduction ? "production" : "development";
   const baseOptions = {
@@ -633,6 +648,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
     strictMessage,
     escapeHtml,
     bridge,
+    jit,
     exportESM,
     env: mode,
     onWarn: (msg) => {

package/lib/index.mjs

@@ -117,6 +117,8 @@ const unplugin = createUnplugin((options = {}, meta) => {
   debug("bridge", bridge);
   const runtimeOnly = isBoolean(options.runtimeOnly) ? options.runtimeOnly : true;
   debug("runtimeOnly", runtimeOnly);
+  const jitCompilation = !!options.jitCompilation;
+  debug("jitCompilation", jitCompilation);
   const compositionOnly = installedPkg === "vue-i18n" ? isBoolean(options.compositionOnly) ? options.compositionOnly : true : true;
   debug("compositionOnly", compositionOnly);
   const fullInstall = installedPkg === "vue-i18n" ? isBoolean(options.fullInstall) ? options.fullInstall : true : false;
@@ -210,6 +212,10 @@ const unplugin = createUnplugin((options = {}, meta) => {
         debug(
           `set __VUE_I18N_FULL_INSTALL__ is '${config.define["__VUE_I18N_FULL_INSTALL__"]}'`
         );
+        config.define["__INTLIFY_JIT_COMPILATION__"] = jitCompilation;
+        debug(
+          `set __INTLIFY_JIT_COMPILATION__ is '${config.define["__INTLIFY_JIT_COMPILATION__"]}'`
+        );
         config.define["__VUE_I18N_PROD_DEVTOOLS__"] = false;
       },
       configResolved(config) {
@@ -265,6 +271,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
                   strictMessage,
                   escapeHtml,
                   bridge,
+                  jit: jitCompilation,
                   exportESM: esm,
                   forceStringify
                 }
@@ -281,7 +288,8 @@ const unplugin = createUnplugin((options = {}, meta) => {
                 return;
               return {
                 code: generatedCode,
-                map: sourceMap ? map : { mappings: "" }
+                // prettier-ignore
+                map: jitCompilation ? { mappings: "" } : sourceMap ? map : { mappings: "" }
                 // eslint-disable-line @typescript-eslint/no-explicit-any
               };
             } else {
@@ -431,6 +439,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
               strictMessage,
               escapeHtml,
               bridge,
+              jit: jitCompilation,
               exportESM: esm,
               forceStringify
             }
@@ -447,7 +456,8 @@ const unplugin = createUnplugin((options = {}, meta) => {
             return;
           return {
             code: generatedCode,
-            map: sourceMap ? map : { mappings: "" }
+            // prettier-ignore
+            map: jitCompilation ? { mappings: "" } : sourceMap ? map : { mappings: "" }
             // eslint-disable-line @typescript-eslint/no-explicit-any
           };
         }
@@ -470,6 +480,7 @@ const unplugin = createUnplugin((options = {}, meta) => {
               isGlobal: globalSFCScope,
               useClassComponent,
               bridge,
+              jit: jitCompilation,
               strictMessage,
               escapeHtml,
               exportESM: esm,
@@ -495,7 +506,8 @@ const unplugin = createUnplugin((options = {}, meta) => {
             return;
           return {
             code: generatedCode,
-            map: sourceMap ? map : { mappings: "" }
+            // prettier-ignore
+            map: jitCompilation ? { mappings: "" } : sourceMap ? map : { mappings: "" }
             // eslint-disable-line @typescript-eslint/no-explicit-any
           };
         }
@@ -542,7 +554,8 @@ async function generateBundleResources(resources, query, isProduction, {
   exportESM = true,
   strictMessage = true,
   escapeHtml = false,
-  useClassComponent = false
+  useClassComponent = false,
+  jit = false
 }) {
   const codes = [];
   for (const res of resources) {
@@ -555,6 +568,7 @@ async function generateBundleResources(resources, query, isProduction, {
         isGlobal,
         useClassComponent,
         bridge,
+        jit,
         exportESM,
         strictMessage,
         escapeHtml,
@@ -616,7 +630,8 @@ function getOptions(filename, isProduction, query, sourceMap, {
   useClassComponent = false,
   allowDynamic = false,
   strictMessage = true,
-  escapeHtml = false
+  escapeHtml = false,
+  jit = false
 }) {
   const mode = isProduction ? "production" : "development";
   const baseOptions = {
@@ -629,6 +644,7 @@ function getOptions(filename, isProduction, query, sourceMap, {
     strictMessage,
     escapeHtml,
     bridge,
+    jit,
     exportESM,
     env: mode,
     onWarn: (msg) => {

package/lib/types.d.ts

@@ -2,6 +2,7 @@ type SFCLangFormat = 'json' | 'json5' | 'yml' | 'yaml';
 interface PluginOptions {
     include?: string | string[];
     allowDynamic?: boolean;
+    jitCompilation?: boolean;
     runtimeOnly?: boolean;
     compositionOnly?: boolean;
     fullInstall?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlify/unplugin-vue-i18n",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "unplugin for Vue I18n",
   "author": {
     "name": "kazuya kawaguchi",
@@ -26,8 +26,8 @@
     }
   },
   "dependencies": {
-    "@intlify/bundle-utils": "^6.0.1",
-    "@intlify/shared": "9.3.0-beta.17",
+    "@intlify/bundle-utils": "^7.0.0",
+    "@intlify/shared": "9.3.0-beta.20",
     "@rollup/pluginutils": "^5.0.2",
     "@vue/compiler-sfc": "^3.2.47",
     "debug": "^4.3.3",
@@ -36,7 +36,7 @@
     "json5": "^2.2.3",
     "pathe": "^1.0.0",
     "picocolors": "^1.0.0",
-    "source-map": "0.6.1",
+    "source-map-js": "^1.0.2",
     "unplugin": "^1.1.0"
   },
   "devDependencies": {