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.

.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
 

.github/workflows/test.yml

@@ -13,7 +13,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
 

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.0",
+    "@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.51.0",
-    "nuxi": "^3.9.0",
-    "nuxt": "^3.7.4",
-    "theme-colors": "^0.0.5",
-    "vue": "^3.3.4"
+    "eslint": "^8.54.0",
+    "nuxi": "^3.9.1",
+    "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.51.0",
-    "nuxi": "^3.9.0",
-    "nuxt": "^3.7.4"
+    "eslint": "^8.54.0",
+    "nuxi": "^3.9.1",
+    "nuxt": "^3.8.1"
   }
 }

apps/playground/pages/index.vue

@@ -29,7 +29,7 @@ const messages = defineMessages({
   },
   brokenMessage: {
     id: 'broken-message',
-    defaultMessage: 'This is {broken, }'
+    defaultMessage: 'This is {broken, }',
   },
 } as const)
 
@@ -89,10 +89,9 @@ const useAutomatic = computed({
             id="language-select"
             v-model="currentLocale"
             :disabled="vintl.automatic"
-            @change="onLocaleChange"
           >
             <option
-              v-for="locale in [...$nuxt.$i18n.$locales.value.keys()]"
+              v-for="locale in [...$i18n.$locales.value.keys()]"
               :key="locale.tag"
               :value="locale.tag"
             >

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

@@ -8,7 +8,7 @@
   ],
   "devDependencies": {
     "@changesets/cli": "^2.26.2",
-    "turbo": "^1.10.15"
+    "turbo": "^1.10.16"
   },
   "scripts": {
     "pg:prepare": "turbo run --no-daemon @vintl-dev/pg#dev:prepare",
@@ -36,5 +36,5 @@
       }
     }
   },
-  "packageManager": "pnpm@8.8.0"
+  "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.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "eslint-plugin-vue": "^9.17.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.3",
-    "eslint": "^8.51.0"
+    "@types/eslint": "^8.44.7",
+    "eslint": "^8.54.0"
   }
 }

packages/vintl-nuxt/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @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
+
+- 6479891: VIntl updated to the latest version
+
+  Latest version of VIntl fixes missing type declarations for global properties, like `$t`, `$fmt` and `$i18n`.
+
+  We might add automatic handling for disabling of `controllerOpts.globalMixin` in the future releases. You can follow the status update in [#74](https://github.com/vintl-dev/nuxt/issues/74).
+
+  For now, if you disable global mixin, use the below augmentation to disable these unusable properties:
+
+  ```ts
+  declare global {
+    namespace VueIntlController {
+      interface Options {
+        globalMixin: false
+      }
+    }
+  }
+  ```
+
+## 1.7.0
+
+### Minor Changes
+
+- a9fdc59: Add support for parsing the messages in the error handlers
+
+  With [update to `@vintl/unplugin`](https://github.com/vintl-dev/unplugin/releases/tag/v1.5.0), it's now possible to use `parseMessage` from the error handler's context to parse custom messages or re-parse the current message with any modified options.
+
 ## 1.6.0
 
 ### Minor Changes

packages/vintl-nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vintl/nuxt",
-  "version": "1.6.0",
+  "version": "1.8.1",
   "description": "Nuxt Module for VIntl integration",
   "keywords": [
     "i18n",
@@ -34,36 +34,36 @@
     "dist"
   ],
   "scripts": {
-    "build": "nuxt-module-build",
+    "build": "nuxt-module-build build",
     "lint": "eslint --cache .",
     "prepack": "pnpm run -s lint && pnpm run -s build"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.5.2",
-    "@nuxt/schema": "^3.7.4",
-    "@types/hash-sum": "^1.0.0",
-    "@types/node": "^18.18.4",
-    "@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.0",
+    "prettier-plugin-jsdoc": "^1.1.1",
     "typescript": "^5.2.2",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "@formatjs/intl": "^2.9.3",
-    "@formatjs/intl-localematcher": "^0.4.2",
-    "@nuxt/kit": "^3.7.4",
-    "@vintl/unplugin": "^1.4.1",
-    "@vintl/vintl": "^4.2.3",
+    "@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": [