Add an option to parse FTL during build (#107)

Author: Demivan

README.md

@@ -44,12 +44,14 @@ export default defineConfig({
     SFCFluentPlugin({ // define messages in SFCs
       blockType: 'fluent', // default 'fluent' - name of the block in SFCs
       checkSyntax: true, // default true - whether to check syntax of the messages
+      parseFtl: false, // default false - whether to parse ftl files during build
     }),
     ExternalFluentPlugin({ // define messages in external ftl files
       baseDir: path.resolve('src'), // required - base directory for Vue files
       ftlDir: path.resolve('src/locales'), // required - directory with ftl files
       locales: ['en', 'da'], // required - list of locales
       checkSyntax: true, // default true - whether to check syntax of the messages
+      parseFtl: false, // default false - whether to parse ftl files during build
     }),
   ],
 })

__tests__/fixtures/errors.vue

@@ -19,4 +19,6 @@ shared-photos =
     [female] her stream
    *[other] their stream
   }.
+
+entry-without-error = Hello, World!
 </fluent>

__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
@@ -106,4 +129,57 @@ describe('Vite external', () => {
       "
     `)
   })
+
+  it('can import FTL files', async () => {
+    // Arrange
+    // Act
+    const code = await compile({
+      plugins: [
+        vue3({
+          compiler,
+        }),
+        ExternalFluentPlugin({
+          baseDir: resolve(baseDir, 'fixtures'),
+          ftlDir: resolve(baseDir, 'fixtures/ftl'),
+          locales: ['en', 'da'],
+        }),
+      ],
+    }, '/fixtures/ftl/en/importer.js.ftl')
+
+    // Assert
+    expect(code).toMatchInlineSnapshot(`
+      "=== /fixtures/ftl/en/importer.js.ftl ===
+
+      import { FluentResource } from "/@id/virtual:empty:fluent-bundle"
+
+      export default /*#__PURE__*/ new FluentResource("key = Translations for js file")
+      "
+    `)
+  })
+
+  it('can parse FTL files', 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/ftl/en/importer.js.ftl')
+
+    // Assert
+    expect(code).toMatchInlineSnapshot(`
+      "=== /fixtures/ftl/en/importer.js.ftl ===
+
+      export default {"body":[{"id":"key","value":"Translations for js file","attributes":{}}]}
+      "
+    `)
+  })
 })

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

@@ -23,6 +23,46 @@ describe('Vite SFC', () => {
     expect(code).toMatchSnapshot()
   })
 
+  describe('parseFtl', () => {
+    it('parses ftl syntax during compilation', async () => {
+      // Arrange
+      // Act
+      const code = await compile({
+        plugins: [
+          vue3({
+            compiler,
+          }),
+          SFCFluentPlugin({
+            parseFtl: true,
+            checkSyntax: false,
+          }),
+        ],
+      }, '/fixtures/test.vue')
+
+      // Assert
+      expect(code).toMatchSnapshot()
+    })
+
+    it('generates block code even if it has errors', async () => {
+      // Arrange
+      // Act
+      const code = await compile({
+        plugins: [
+          vue3({
+            compiler,
+          }),
+          SFCFluentPlugin({
+            parseFtl: true,
+            checkSyntax: false,
+          }),
+        ],
+      }, '/fixtures/errors.vue')
+
+      // Assert
+      expect(code).toMatchSnapshot()
+    })
+  })
+
   it('supports custom blockType', async () => {
     // Arrange
     // Act

__tests__/frameworks/vite/external.spec.ts

@@ -95,6 +95,7 @@
     "release": "dotenv release-it"
   },
   "peerDependencies": {
+    "@fluent/bundle": "*",
     "@nuxt/kit": "^3"
   },
   "peerDependenciesMeta": {
@@ -111,6 +112,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.3.0",
+    "@fluent/bundle": "^0.18.0",
     "@nuxt/kit": "^3.15.4",
     "@nuxt/schema": "^3.15.4",
     "@release-it-plugins/lerna-changelog": "7.0.0",

__tests__/frameworks/vite/sfc.spec.ts

@@ -17,13 +17,13 @@ export function parseVueRequest(id: string) {
     ret.type = params.get('type') as VueQuery['type']
 
   if (params.has('blockType'))
-    ret.blockType = params.get('blockType')
+    ret.blockType = params.get('blockType') ?? undefined
 
   if (params.has('index'))
     ret.index = Number(params.get('index'))
 
   if (params.has('locale'))
-    ret.locale = params.get('locale')
+    ret.locale = params.get('locale') ?? undefined
 
   return {
     filename,