Add a virtual module that imports all translations for a file

Author: Demivan

__tests__/fixtures/ftl/da/importer.js.ftl

@@ -0,0 +1 @@
+key = Translations for js file da

__tests__/fixtures/ftl/en/importer.js.ftl

@@ -0,0 +1 @@
+key = Translations for js file

__tests__/fixtures/importer.js

@@ -0,0 +1,4 @@
+import translations from 'virtual:ftl-for-file'
+
+// eslint-disable-next-line no-console -- this is a test file
+console.log(translations)

__tests__/frameworks/vite/external.spec.ts

@@ -71,4 +71,35 @@ describe('Vite external', () => {
     expect(code).toContain('external.setup.vue.ftl')
     expect(code).toMatchSnapshot()
   })
+
+  it('virtual:ftl-for-file', async () => {
+    // Arrange
+    // Act
+    const code = await compile({
+      plugins: [
+        vue3(),
+        ExternalFluentPlugin({
+          baseDir: resolve(baseDir, 'fixtures'),
+          ftlDir: resolve(baseDir, 'fixtures/ftl'),
+          locales: ['en', 'da'],
+        }),
+      ],
+    }, '/fixtures/importer.js')
+
+    // Assert
+    expect(code).toMatchInlineSnapshot(`
+      "=== /fixtures/importer.js ===
+      import translations from '/@id/virtual:ftl-for-file?importer=/fixtures/importer.js'
+
+      // eslint-disable-next-line no-console -- this is a test file
+      console.log(translations)
+
+
+      === virtual:ftl-for-file?importer=/fixtures/importer.js ===
+      import en_ftl from '/fixtures/ftl/en/importer.js.ftl?import';
+      import da_ftl from '/fixtures/ftl/da/importer.js.ftl?import';
+      export default { 'en': en_ftl, 'da': da_ftl }
+      "
+    `)
+  })
 })

src/plugins/external-plugin.ts

@@ -61,6 +61,7 @@ interface Dependency {
 export const unplugin = createUnplugin((options: ExternalPluginOptions, meta) => {
   const resolvedOptions = {
     checkSyntax: true,
+    virtualModuleName: 'virtual:ftl-for-file',
     getFtlPath: undefined as ((locale: string, vuePath: string) => string) | undefined,
     ...options,
   }
@@ -74,9 +75,52 @@ export const unplugin = createUnplugin((options: ExternalPluginOptions, meta) =>
     }
   }
 
+  const getTranslationsForFile = async (id: string) => {
+    const dependencies: Dependency[] = []
+    for (const locale of options.locales) {
+      const ftlPath = normalizePath(resolvedOptions.getFtlPath(locale, id))
+      const ftlExists = await fileExists(ftlPath)
+
+      if (ftlExists) {
+        dependencies.push({
+          locale,
+          ftlPath,
+          importVariable: `${makeLegalIdentifier(locale)}_ftl`,
+        })
+      }
+    }
+
+    return dependencies
+  }
+
   return {
     name: 'unplugin-fluent-vue-external',
     enforce: meta.framework === 'webpack' ? 'post' : undefined,
+    resolveId(id, importer) {
+      if (id === resolvedOptions.virtualModuleName)
+        return `${id}?importer=${importer}`
+    },
+    async load(id) {
+      if (!id.startsWith(resolvedOptions.virtualModuleName))
+        return
+
+      const importer = id.split('?importer=')[1]
+
+      const translations = await getTranslationsForFile(importer)
+
+      for (const { ftlPath } of translations)
+        this.addWatchFile(ftlPath)
+
+      let code = ''
+      for (const { ftlPath, importVariable } of translations)
+        code += `import ${importVariable} from '${ftlPath}';\n`
+
+      code += `export default { ${translations
+        .map(({ locale, importVariable }) => `'${locale}': ${importVariable}`)
+        .join(', ')} }\n`
+
+      return code
+    },
     transformInclude(id: string) {
       return isVue(id) || isFtl(id)
     },
@@ -86,32 +130,21 @@ export const unplugin = createUnplugin((options: ExternalPluginOptions, meta) =>
 
         const { insertPos, target } = getInsertInfo(source)
 
-        const dependencies: Dependency[] = []
-        for (const locale of options.locales) {
-          const ftlPath = normalizePath(resolvedOptions.getFtlPath(locale, id))
-          const ftlExists = await fileExists(ftlPath)
-
-          if (ftlExists) {
-            this.addWatchFile(ftlPath)
+        const translations = await getTranslationsForFile(id)
 
-            dependencies.push({
-              locale,
-              ftlPath,
-              importVariable: `${makeLegalIdentifier(locale)}_ftl`,
-            })
-          }
-        }
+        for (const { ftlPath } of translations)
+          this.addWatchFile(ftlPath)
 
-        for (const dep of dependencies)
+        for (const dep of translations)
           magic.prepend(`import ${dep.importVariable} from '${dep.ftlPath}';\n`)
         magic.appendLeft(insertPos, `${target}.fluent = ${target}.fluent || {};\n`)
-        for (const dep of dependencies)
+        for (const dep of translations)
           magic.appendLeft(insertPos, `${target}.fluent['${dep.locale}'] = ${dep.importVariable}\n`)
         magic.appendLeft(insertPos, `
 const __HOT_API__ = import.meta.hot || import.meta.webpackHot
 if (__HOT_API__) {
-  __HOT_API__.accept([${dependencies.map(dep => `'${dep.ftlPath}'`).join(', ')}], () => {
-    ${dependencies.map(({ locale, importVariable }) => `${target}.fluent['${locale}'] = ${importVariable}`).join('\n')}
+  __HOT_API__.accept([${translations.map(dep => `'${dep.ftlPath}'`).join(', ')}], () => {
+    ${translations.map(({ locale, importVariable }) => `${target}.fluent['${locale}'] = ${importVariable}`).join('\n')}
 
     delete ${target}._fluent
     if (typeof __VUE_HMR_RUNTIME__ !== 'undefined') {

src/types.ts

@@ -1,6 +1,7 @@
 interface ExternalPluginOptionsBase {
   locales: string[]
   checkSyntax?: boolean
+  virtualModuleName?: string
 }
 
 interface ExternalPluginOptionsFolder extends ExternalPluginOptionsBase {