Version Packages

Previously VIntl for Nuxt kept track of files that were used as locale
messages and matched module IDs based on them. This, however, was very
unreliable in certain environments.

With this change VIntl for Nuxt now uses 'markers', URL parameters added
to the end of imported module IDs. This allows it to very quickly test
whether a specific module is imported through a message file and should
be processed by the VIntl unplugin.

apps/docs/nuxt.config.ts

@@ -1,5 +1,5 @@
 export default defineNuxtConfig({
-  extends: '@nuxt-themes/docus',
+  extends: ['@nuxt-themes/docus'],
   modules: ['@vintl/nuxt'],
   vintl: {
     defaultLocale: 'en-US',

apps/docs/package.json

@@ -13,15 +13,15 @@
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.2.1",
+    "@formatjs/cli": "^6.2.4",
     "@nuxt-themes/docus": "^1.15.0",
     "@nuxt/eslint-config": "^0.2.0",
     "@vintl-dev/eslint-config-peony": "workspace:^",
     "@vintl/nuxt": "workspace:^",
-    "eslint": "^8.52.0",
+    "eslint": "^8.54.0",
     "nuxi": "^3.9.1",
-    "nuxt": "^3.8.0",
-    "theme-colors": "^0.0.5",
-    "vue": "^3.3.7"
+    "nuxt": "^3.8.1",
+    "theme-colors": "^0.1.0",
+    "vue": "^3.3.8"
   }
 }

apps/docs/plugins/global-vintl.ts

@@ -0,0 +1,24 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  if (process.client && typeof window !== 'undefined') {
+    Object.defineProperty(window, 'vintl', {
+      configurable: true,
+      writable: true,
+      enumerable: true,
+      value: nuxtApp.$i18n,
+    })
+    console.log('~'.repeat(80))
+    console.log('%cHey there! 👋', 'font-size: 1.2rem')
+    console.log(
+      'VIntl controller can be used here through a global `vintl` variable.',
+    )
+    console.log(
+      'Have playing with it! And if you break anything, just refresh the page :P',
+    )
+    if (!process.dev) {
+      console.log(
+        '⚠️ This is a production environment. Message parsing is unavailable.',
+      )
+    }
+    console.log('~'.repeat(80))
+  }
+})

apps/playground/nuxt.config.ts

@@ -41,4 +41,17 @@ export default defineNuxtConfig({
     },
     onParseError: 'log-and-skip',
   },
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        moduleResolution: 'bundler',
+      },
+    },
+  },
+  plugins: [
+    {
+      src: './plugins/test.ts',
+      order: -100,
+    },
+  ],
 })

apps/playground/package.json

@@ -17,8 +17,8 @@
     "@vintl-dev/eslint-config-peony": "workspace:^",
     "@vintl-dev/pg-messages": "workspace:^",
     "@vintl/nuxt": "workspace:^",
-    "eslint": "^8.52.0",
+    "eslint": "^8.54.0",
     "nuxi": "^3.9.1",
-    "nuxt": "^3.8.0"
+    "nuxt": "^3.8.1"
   }
 }

apps/playground/plugins/test.ts

@@ -0,0 +1,9 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('i18n:extendLocale', ({ event }) => {
+    console.log('[vintl] loading locale', event.locale.tag)
+  })
+
+  nuxtApp.hook('i18n:ready', () => {
+    console.log('[vintl] ready')
+  })
+})

package.json

@@ -36,5 +36,5 @@
       }
     }
   },
-  "packageManager": "pnpm@8.9.2"
+  "packageManager": "pnpm@8.10.5"
 }

packages/eslint-config/package.json

@@ -27,13 +27,13 @@
   ],
   "dependencies": {
     "@rushstack/eslint-patch": "^1.5.1",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "eslint-plugin-vue": "^9.18.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "eslint-plugin-vue": "^9.18.1",
     "typescript": "^5.2.2"
   },
   "devDependencies": {
-    "@types/eslint": "^8.44.6",
-    "eslint": "^8.52.0"
+    "@types/eslint": "^8.44.7",
+    "eslint": "^8.54.0"
   }
 }

packages/vintl-nuxt/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vintl/nuxt
 
+## 1.8.1
+
+### Patch Changes
+
+- 114d04a: Switched to a slightly more compatible `#app` augmentation
+
+## 1.8.0
+
+### Minor Changes
+
+- 9d939c1: Switched to using module ID markers
+
+  Previously VIntl for Nuxt kept track of files that were used as locale messages and matched module IDs based on them. This, however, was very unreliable in certain environments.
+
+  With this change VIntl for Nuxt now uses ‘markers’, URL parameters added to the end of imported module IDs. This allows it to very quickly test whether a specific module is imported through a message file and should be processed by the VIntl unplugin.
+
 ## 1.7.1
 
 ### Patch Changes

packages/vintl-nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vintl/nuxt",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "Nuxt Module for VIntl integration",
   "keywords": [
     "i18n",
@@ -39,11 +39,11 @@
     "prepack": "pnpm run -s lint && pnpm run -s build"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.5.2",
-    "@nuxt/schema": "^3.8.0",
-    "@types/hash-sum": "^1.0.1",
-    "@types/node": "^18.18.7",
-    "@unhead/vue": "^1.7.4",
+    "@nuxt/module-builder": "^0.5.4",
+    "@nuxt/schema": "^3.8.1",
+    "@types/hash-sum": "^1.0.2",
+    "@types/node": "^18.18.10",
+    "@unhead/vue": "^1.8.4",
     "@vintl-dev/eslint-config-peony": "workspace:^",
     "hookable": "^5.5.3",
     "prettier-plugin-jsdoc": "^1.1.1",
@@ -51,19 +51,19 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "@formatjs/intl": "^2.9.5",
-    "@formatjs/intl-localematcher": "^0.4.2",
-    "@nuxt/kit": "^3.8.0",
+    "@formatjs/intl": "^2.9.9",
+    "@formatjs/intl-localematcher": "^0.5.2",
+    "@nuxt/kit": "^3.8.1",
     "@vintl/unplugin": "^1.5.1",
     "@vintl/vintl": "^4.4.1",
     "astring": "^1.8.6",
     "consola": "^3.2.3",
     "hash-sum": "^2.0.0",
-    "import-meta-resolve": "^3.0.0",
+    "import-meta-resolve": "^3.1.1",
     "pathe": "^1.1.1",
     "picocolors": "^1.0.0",
     "slash": "^5.1.0",
-    "ufo": "^1.3.1",
+    "ufo": "^1.3.2",
     "zod": "^3.21.4"
   }
 }

packages/vintl-nuxt/src/module.ts

@@ -96,7 +96,7 @@ export default defineNuxtModule<ModuleOptions>({
               return resolveInResDir(specifier).relativeTo(optionsFile.dst)
             },
             registerMessagesFile(file, importPath) {
-              pluginOptionsBank.registerFile(
+              return pluginOptionsBank.registerFile(
                 file,
                 resolvePath(dirname(optionsFile.dst), importPath),
               )

packages/vintl-nuxt/src/options-gen.ts

@@ -623,11 +623,12 @@ interface GeneratorContext {
    *
    * @param file Input message file options.
    * @param importPath Resolved path.
+   * @returns Marked import path.
    */
   registerMessagesFile(
     file: t.output<typeof messagesImportSourceSchema>,
     importPath: string,
-  ): void
+  ): string
 
   /**
    * Resolves a module from the runtime directory.
@@ -780,8 +781,10 @@ export function generate(
 
     for (const messageFile of files) {
       const { from: importPath, name: importKey } = messageFile
-      const resolvedPath = resolve(messageFile.from)
-      registerMessagesFile(messageFile, resolvedPath)
+      const resolvedPath = registerMessagesFile(
+        messageFile,
+        resolve(messageFile.from),
+      )
 
       if (isDefaultLocale) {
         // if import key is 'default' then:

packages/vintl-nuxt/src/parser-bank.ts

@@ -12,9 +12,36 @@ import type {
 
 type UniqueOptions = t.output<typeof messagesImportOptionsSchema>
 
+class Marker {
+  private readonly regExp: RegExp
+
+  public constructor(public readonly marker: string) {
+    this.regExp = new RegExp(`(\\?|&)${marker}(&|$)`)
+  }
+
+  public apply(id: string) {
+    return `${id}${id.includes('?') ? '&' : '?'}${this.marker}`
+  }
+
+  public matches(id: string) {
+    return this.regExp.test(id)
+  }
+}
+
+class MarkedFileSet extends Set<string> {
+  public readonly marker: Marker
+
+  constructor(marker: Marker, iterable?: Iterable<string> | null | undefined) {
+    super(iterable)
+    this.marker = marker
+  }
+}
+
 export class PluginOptionsBank {
   // let the uniqueOptions be a map of unique options to a list of files that have the same options
-  private readonly filesByOptions: Map<UniqueOptions, Set<string>> = new Map()
+  private readonly filesByOptions = new Map<UniqueOptions, MarkedFileSet>()
+
+  private incrementingMarker = 0
 
   private findOrCreateFileSet(optionsVariation: UniqueOptions) {
     for (const [knownOptionsVariation, files] of this.filesByOptions) {
@@ -31,7 +58,9 @@ export class PluginOptionsBank {
       parser: optionsVariation.parser,
     }
 
-    const fileSet = new Set<string>()
+    const marker = new Marker(`icu-messages-${this.incrementingMarker++}`)
+
+    const fileSet = new MarkedFileSet(marker)
     this.filesByOptions.set(filteredOptions, fileSet)
     return fileSet
   }
@@ -40,7 +69,8 @@ export class PluginOptionsBank {
     file: t.output<typeof messagesImportSourceSchema>,
     resolvedPath: string,
   ) {
-    this.findOrCreateFileSet(file).add(resolvedPath)
+    const { marker } = this.findOrCreateFileSet(file).add(resolvedPath)
+    return marker.apply(resolvedPath)
   }
 
   public createOptions<T extends { name: string }>(
@@ -49,7 +79,7 @@ export class PluginOptionsBank {
     const options: PluginOptions<T>[] = []
 
     for (const [{ format, parser }, files] of this.filesByOptions) {
-      const filter = (id: string) => files.has(id)
+      const filter = (id: string) => files.marker.matches(id)
 
       options.push({
         ...baseOptions,

packages/vintl-nuxt/src/runtime/plugin.ts

@@ -163,7 +163,7 @@ type EventContext<E> = {
   controller: IntlController<MessageValueType>
 }
 
-declare module 'nuxt/app' {
+declare module '#app' {
   interface NuxtApp
     extends InjectedProperties<VueIntlController.MessageValueTypes> {}
 

packages/vintl-nuxt/stubs/app.d.ts

@@ -0,0 +1 @@
+export * from 'nuxt/app'

packages/vintl-nuxt/tsconfig.runtime.json

@@ -10,7 +10,8 @@
 
     "outDir": "./dist",
     "paths": {
-      "#imports": ["./stubs/imports.js"]
+      "#imports": ["./stubs/imports.js"],
+      "#app": ["./stubs/app.js"]
     }
   },
   "include": [