feat: support JIT compilation opt-outing (#2250)

* feat: support JIT compilation opt-outing

* fix

* updates

* update snapshot

docs/content/3.options/6.misc.md

@@ -25,12 +25,22 @@ Supported properties:
 ## `compilation`
 
 - type: `object`
-- default: `{ strictMessage: true, escapeHtml: false }`
+- default: `{ jit: true, strictMessage: true, escapeHtml: false }`
 
 Configure flags that sets the behavior compilation of locale messages.
 
 Supported properties:
 
+- `jit` (default: `true`) Whether to use the JIT compilation of Vue I18n message compiler.
+
+  ::alert{type="warning"}
+
+  Mean that necessary to pre-compile locale messages that are not managed by the nuxt i18n module (e.g. in the case of importing from a specific URL, you will need to precompile them yourself.)
+
+  And also, you need to understand that you cannot support use cases where you dynamically compose locale messages from the back-end via an API.
+
+  ::
+
 - `strictMessage` (default: `true`) Strictly check that the locale message does not contain HTML tags. If HTML tags are included, an error is thrown.
   ::alert{type="warning"}
 

playground/nuxt.config.ts

@@ -111,6 +111,7 @@ export default defineNuxtConfig({
       jsTsFormatResource: true
     },
     compilation: {
+      // jit: false,
       strictMessage: false,
       escapeHtml: true
     },

src/bundler.ts

@@ -70,7 +70,7 @@ export async function extendBundler(
     const webpackPluginOptions: PluginOptions = {
       runtimeOnly: true,
       allowDynamic: true,
-      jitCompilation: true,
+      jitCompilation: nuxtOptions.compilation.jit,
       strictMessage: nuxtOptions.compilation.strictMessage,
       escapeHtml: nuxtOptions.compilation.escapeHtml
     }
@@ -87,7 +87,9 @@ export async function extendBundler(
     extendWebpackConfig(config => {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- `config.plugins` is safe, so it's assigned with nuxt!
       config.plugins!.push(
-        new webpack.DefinePlugin(assign(getFeatureFlags(), { __DEBUG__: String(nuxtOptions.debug) }))
+        new webpack.DefinePlugin(
+          assign(getFeatureFlags(nuxtOptions.compilation.jit), { __DEBUG__: String(nuxtOptions.debug) })
+        )
       )
     })
   } catch (e: unknown) {
@@ -101,7 +103,7 @@ export async function extendBundler(
   const vitePluginOptions: PluginOptions = {
     runtimeOnly: true,
     allowDynamic: true,
-    jitCompilation: true,
+    jitCompilation: nuxtOptions.compilation.jit,
     strictMessage: nuxtOptions.compilation.strictMessage,
     escapeHtml: nuxtOptions.compilation.escapeHtml
   }
@@ -126,11 +128,11 @@ export async function extendBundler(
   })
 }
 
-export function getFeatureFlags() {
+export function getFeatureFlags(jit = true) {
   return {
     __VUE_I18N_FULL_INSTALL__: 'true',
     __VUE_I18N_LEGACY_API__: 'true',
     __INTLIFY_PROD_DEVTOOLS__: 'false',
-    __INTLIFY_JIT_COMPILATION__: 'true'
+    __INTLIFY_JIT_COMPILATION__: String(jit)
   }
 }

src/constants.ts

@@ -36,6 +36,7 @@ export const DEFAULT_OPTIONS = {
     jsTsFormatResource: false
   },
   compilation: {
+    jit: true,
     strictMessage: true,
     escapeHtml: false
   },

src/module.ts

@@ -65,6 +65,14 @@ export default defineNuxtModule<NuxtI18nOptions>({
       logger.warn('JS / TS extension format is experimental')
     }
 
+    if (!options.compilation.jit) {
+      logger.warn(
+        'Opt-out JIT compilation. ' +
+          `It's necessary to pre-compile locale messages that are not managed by the nuxt i18n module (e.g. in the case of importing from a specific URL, you will need to precompile them yourself.) ` +
+          `And also, you need to understand that you cannot support use cases where you dynamically compose locale messages from the back-end via an API.`
+      )
+    }
+
     /**
      * Check vertions
      */
@@ -289,7 +297,7 @@ export default defineNuxtModule<NuxtI18nOptions>({
      * setup nitro
      */
 
-    await setupNitro(nuxt)
+    await setupNitro(nuxt, options)
 
     /**
      * auto imports

src/nitro.ts

@@ -1,16 +1,17 @@
 import { assign } from '@intlify/shared'
 import { getFeatureFlags } from './bundler'
 
+import type { NuxtI18nOptions } from './types'
 import type { Nuxt } from '@nuxt/schema'
 
-export async function setupNitro(nuxt: Nuxt) {
+export async function setupNitro(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOptions>) {
   if (nuxt.options.ssr) {
     if (!nuxt.options.nitro) {
       nuxt.options.nitro = {}
     }
     const nitroConfig = nuxt.options.nitro
 
     // vue-i18n feature flags configuration for server-side (server api, server middleware, etc...)
-    nitroConfig.replace = assign(nitroConfig.replace || {}, getFeatureFlags())
+    nitroConfig.replace = assign(nitroConfig.replace || {}, getFeatureFlags(nuxtOptions.compilation.jit))
   }
 }

src/types.ts

@@ -60,6 +60,7 @@ export interface ExperimentalFeatures {
 }
 
 export interface LocaleMessageCompilationOptions {
+  jit?: boolean
   strictMessage?: boolean
   escapeHtml?: boolean
 }

test/__snapshots__/gen.test.ts.snap

@@ -20,7 +20,7 @@ export const resolveNuxtI18nOptions = async (context) => {
   return nuxtI18nOptions
 }
 
-export const nuxtI18nOptionsDefault = Object({experimental: Object({\\"jsTsFormatResource\\":false}),compilation: Object({\\"strictMessage\\":true,\\"escapeHtml\\":false}),vueI18n: \\"\\",locales: [],defaultLocale: \\"\\",defaultDirection: \\"ltr\\",routesNameSeparator: \\"___\\",trailingSlash: false,defaultLocaleRouteNameSuffix: \\"default\\",strategy: \\"prefix_except_default\\",lazy: false,langDir: null,rootRedirect: null,detectBrowserLanguage: Object({\\"alwaysRedirect\\":false,\\"cookieCrossOrigin\\":false,\\"cookieDomain\\":null,\\"cookieKey\\":\\"i18n_redirected\\",\\"cookieSecure\\":false,\\"fallbackLocale\\":\\"\\",\\"redirectOn\\":\\"root\\",\\"useCookie\\":true}),differentDomains: false,baseUrl: \\"\\",dynamicRouteParams: false,customRoutes: \\"page\\",pages: Object({}),skipSettingLocaleOnNavigate: false,types: \\"composition\\",debug: false})
+export const nuxtI18nOptionsDefault = Object({experimental: Object({\\"jsTsFormatResource\\":false}),compilation: Object({\\"jit\\":true,\\"strictMessage\\":true,\\"escapeHtml\\":false}),vueI18n: \\"\\",locales: [],defaultLocale: \\"\\",defaultDirection: \\"ltr\\",routesNameSeparator: \\"___\\",trailingSlash: false,defaultLocaleRouteNameSuffix: \\"default\\",strategy: \\"prefix_except_default\\",lazy: false,langDir: null,rootRedirect: null,detectBrowserLanguage: Object({\\"alwaysRedirect\\":false,\\"cookieCrossOrigin\\":false,\\"cookieDomain\\":null,\\"cookieKey\\":\\"i18n_redirected\\",\\"cookieSecure\\":false,\\"fallbackLocale\\":\\"\\",\\"redirectOn\\":\\"root\\",\\"useCookie\\":true}),differentDomains: false,baseUrl: \\"\\",dynamicRouteParams: false,customRoutes: \\"page\\",pages: Object({}),skipSettingLocaleOnNavigate: false,types: \\"composition\\",debug: false})
 
 export const nuxtI18nInternalOptions = Object({__normalizedLocales: [Object({\\"code\\":\\"en\\"})]})
 export const NUXT_I18N_MODULE_ID = \\"@nuxtjs/i18n\\"
@@ -117,7 +117,7 @@ export const resolveNuxtI18nOptions = async (context) => {
   return nuxtI18nOptions
 }
 
-export const nuxtI18nOptionsDefault = Object({experimental: Object({\\"jsTsFormatResource\\":false}),compilation: Object({\\"strictMessage\\":true,\\"escapeHtml\\":false}),vueI18n: \\"\\",locales: [],defaultLocale: \\"\\",defaultDirection: \\"ltr\\",routesNameSeparator: \\"___\\",trailingSlash: false,defaultLocaleRouteNameSuffix: \\"default\\",strategy: \\"prefix_except_default\\",lazy: false,langDir: null,rootRedirect: null,detectBrowserLanguage: Object({\\"alwaysRedirect\\":false,\\"cookieCrossOrigin\\":false,\\"cookieDomain\\":null,\\"cookieKey\\":\\"i18n_redirected\\",\\"cookieSecure\\":false,\\"fallbackLocale\\":\\"\\",\\"redirectOn\\":\\"root\\",\\"useCookie\\":true}),differentDomains: false,baseUrl: \\"\\",dynamicRouteParams: false,customRoutes: \\"page\\",pages: Object({}),skipSettingLocaleOnNavigate: false,types: \\"composition\\",debug: false})
+export const nuxtI18nOptionsDefault = Object({experimental: Object({\\"jsTsFormatResource\\":false}),compilation: Object({\\"jit\\":true,\\"strictMessage\\":true,\\"escapeHtml\\":false}),vueI18n: \\"\\",locales: [],defaultLocale: \\"\\",defaultDirection: \\"ltr\\",routesNameSeparator: \\"___\\",trailingSlash: false,defaultLocaleRouteNameSuffix: \\"default\\",strategy: \\"prefix_except_default\\",lazy: false,langDir: null,rootRedirect: null,detectBrowserLanguage: Object({\\"alwaysRedirect\\":false,\\"cookieCrossOrigin\\":false,\\"cookieDomain\\":null,\\"cookieKey\\":\\"i18n_redirected\\",\\"cookieSecure\\":false,\\"fallbackLocale\\":\\"\\",\\"redirectOn\\":\\"root\\",\\"useCookie\\":true}),differentDomains: false,baseUrl: \\"\\",dynamicRouteParams: false,customRoutes: \\"page\\",pages: Object({}),skipSettingLocaleOnNavigate: false,types: \\"composition\\",debug: false})
 
 export const nuxtI18nInternalOptions = Object({__normalizedLocales: [Object({\\"code\\":\\"en\\"})]})
 export const NUXT_I18N_MODULE_ID = \\"@nuxtjs/i18n\\"
@@ -143,7 +143,7 @@ export const resolveNuxtI18nOptions = async (context) => {
   return nuxtI18nOptions
 }
 
-export const nuxtI18nOptionsDefault = Object({experimental: Object({\\"jsTsFormatResource\\":false}),compilation: Object({\\"strictMessage\\":true,\\"escapeHtml\\":false}),vueI18n: \\"\\",locales: [],defaultLocale: \\"\\",defaultDirection: \\"ltr\\",routesNameSeparator: \\"___\\",trailingSlash: false,defaultLocaleRouteNameSuffix: \\"default\\",strategy: \\"prefix_except_default\\",lazy: false,langDir: null,rootRedirect: null,detectBrowserLanguage: Object({\\"alwaysRedirect\\":false,\\"cookieCrossOrigin\\":false,\\"cookieDomain\\":null,\\"cookieKey\\":\\"i18n_redirected\\",\\"cookieSecure\\":false,\\"fallbackLocale\\":\\"\\",\\"redirectOn\\":\\"root\\",\\"useCookie\\":true}),differentDomains: false,baseUrl: \\"\\",dynamicRouteParams: false,customRoutes: \\"page\\",pages: Object({}),skipSettingLocaleOnNavigate: false,types: \\"composition\\",debug: false})
+export const nuxtI18nOptionsDefault = Object({experimental: Object({\\"jsTsFormatResource\\":false}),compilation: Object({\\"jit\\":true,\\"strictMessage\\":true,\\"escapeHtml\\":false}),vueI18n: \\"\\",locales: [],defaultLocale: \\"\\",defaultDirection: \\"ltr\\",routesNameSeparator: \\"___\\",trailingSlash: false,defaultLocaleRouteNameSuffix: \\"default\\",strategy: \\"prefix_except_default\\",lazy: false,langDir: null,rootRedirect: null,detectBrowserLanguage: Object({\\"alwaysRedirect\\":false,\\"cookieCrossOrigin\\":false,\\"cookieDomain\\":null,\\"cookieKey\\":\\"i18n_redirected\\",\\"cookieSecure\\":false,\\"fallbackLocale\\":\\"\\",\\"redirectOn\\":\\"root\\",\\"useCookie\\":true}),differentDomains: false,baseUrl: \\"\\",dynamicRouteParams: false,customRoutes: \\"page\\",pages: Object({}),skipSettingLocaleOnNavigate: false,types: \\"composition\\",debug: false})
 
 export const nuxtI18nInternalOptions = Object({__normalizedLocales: [Object({\\"code\\":\\"en\\"})]})
 export const NUXT_I18N_MODULE_ID = \\"@nuxtjs/i18n\\"