Parse FTL in ExternalPlugin

Author: Demivan

__tests__/frameworks/vite/__snapshots__/external.spec.ts.snap

@@ -74,6 +74,29 @@ describe('Vite external', () => {
     expect(code).toMatchSnapshot()
   })
 
+  describe('parseFtl', () => {
+    it('parses ftl syntax during compilation', async () => {
+      // Arrange
+      // Act
+      const code = await compile({
+        plugins: [
+          vue3({
+            compiler,
+          }),
+          ExternalFluentPlugin({
+            baseDir: resolve(baseDir, 'fixtures'),
+            ftlDir: resolve(baseDir, 'fixtures/ftl'),
+            locales: ['en', 'da'],
+            parseFtl: true,
+          }),
+        ],
+      }, '/fixtures/components/external.vue')
+
+      // Assert
+      expect(code).toMatchSnapshot()
+    })
+  })
+
   it('virtual:ftl-for-file', async () => {
     // Arrange
     // Act

__tests__/frameworks/vite/external.spec.ts

@@ -132,7 +132,7 @@ export const unplugin = createUnplugin((options: ExternalPluginOptions) => {
       }
 
       if (isFtl(id)) {
-        if (options.checkSyntax) {
+        if (resolvedOptions.checkSyntax) {
           const errorsText = getSyntaxErrors(source)
           if (errorsText)
             this.error(errorsText)
@@ -158,19 +158,15 @@ export default /*#__PURE__*/ new FluentResource(${source})
             this.error(errorsText)
         }
 
-        const magic = new MagicString(source, { filename: id })
-        if (source.length > 0)
-          magic.update(0, source.length, JSON.stringify(source))
-        else
-          magic.append('""')
-        magic.prepend(`
-import { FluentResource } from '@fluent/bundle'
+        const injectFtl = getInjectFtl(resolvedOptions)
 
+        const magic = injectFtl`
 export default function (Component) {
   const target = Component.options || Component
   target.fluent = target.fluent || {}
-  target.fluent['${query.locale}'] = new FluentResource(`)
-        magic.append(')\n}')
+  target.fluent['${query.locale}'] = ${source}
+}
+`
 
         return {
           code: magic.toString(),

src/plugins/external-plugin.ts

@@ -1,5 +1,3 @@
-import type { SFCPluginOptions } from 'src/types'
-
 import { FluentResource } from '@fluent/bundle'
 import MagicString from 'magic-string'
 
@@ -9,7 +7,7 @@ function normalize(str: string) {
   return str.replace(/\r\n/g, '\n').trim()
 }
 
-export function getInjectFtl(options: SFCPluginOptions): InjectFtlFn {
+export function getInjectFtl(options: { parseFtl?: boolean }): InjectFtlFn {
   return (template, locale, source) => {
     if (source == null) {
       source = locale

src/plugins/ftl/inject.ts

@@ -13,7 +13,12 @@ export interface ExternalPluginOptionsFunction extends ExternalPluginOptionsBase
   getFtlPath: (locale: string, vuePath: string) => string
 }
 
-export type ExternalPluginOptions = ExternalPluginOptionsFolder | ExternalPluginOptionsFunction
+export type ExternalPluginOptions = (ExternalPluginOptionsFolder | ExternalPluginOptionsFunction) & {
+  /**
+   * Whether to parse the ftl syntax before injecting it into component
+   */
+  parseFtl?: boolean
+}
 
 export interface SFCPluginOptions {
   /**