fluent-vue · Demivan · Sep 6, 2022 · Sep 4, 2022 · Sep 4, 2022
diff --git a/__tests__/fixtures/components/errors.vue b/__tests__/fixtures/components/errors.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <div>{{ $t('hello-user', { userName }) }}</div>
+    <div>{{ $t('shared-photos', { userName, photoCount, userGender }) }}</div>
+  </div>
+</template>
diff --git a/__tests__/fixtures/errors.vue b/__tests__/fixtures/errors.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div>{{ $t('hello-user', { userName }) }}</div>
+    <div>{{ $t('shared-photos', { userName, photoCount, userGender }) }}</div>
+  </div>
+</template>
+
+<fluent locale="en">
+# Simple things are simple.
+hello-user = Hello, {$userName!
+
+# Complex things are possible.
+shared-photos =
+  {$userName} {$photoCount ->
+    [one] added one photo
+    [other] added {$photoCount} new photo
+  }to {$userGender ->
+    [male] his stream
+    [female] her stream
+   *[other] their stream
+  }.
+</fluent>
diff --git a/__tests__/fixtures/ftl/en/components/errors.vue.ftl b/__tests__/fixtures/ftl/en/components/errors.vue.ftl
@@ -0,0 +1,13 @@
+# Simple things are simple.
+hello-user = Hello, {$userName!
+
+# Complex things are possible.
+shared-photos =
+  {$userName} {$photoCount ->
+    [one] added one photo
+    [other] added {$photoCount} new photo
+  }to {$userGender ->
+    [male] his stream
+    [female] her stream
+   *[other] their stream
+  }.
diff --git a/__tests__/frameworks/vite/__snapshots__/external.spec.ts.snap b/__tests__/frameworks/vite/__snapshots__/external.spec.ts.snap
@@ -5,11 +5,7 @@ exports[`Vite external > works 1`] = `
 import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/components/external.vue\\");import da_ftl from '/fixtures/ftl/da/components/external.vue.ftl?import';
 import en_ftl from '/fixtures/ftl/en/components/external.vue.ftl?import';
 const _sfc_main = {}
-const _toDisplayString = window['Vue'].toDisplayString
-const _createElementVNode = window['Vue'].createElementVNode
-const _openBlock = window['Vue'].openBlock
-const _createElementBlock = window['Vue'].createElementBlock
-
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"/@id/virtual:empty:vue\\"
 
 function _sfc_render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"div\\", null, [
@@ -57,13 +53,13 @@ export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__f
 
 === /fixtures/ftl/da/components/external.vue.ftl ===
 
-import { FluentResource } from '.vite-plugin-externals/@fluent/bundle.js'
+import { FluentResource } from '/@id/virtual:empty:fluent-bundle'
 export default new FluentResource(\\"\\")
 
 
 === /fixtures/ftl/en/components/external.vue.ftl ===
 
-import { FluentResource } from '.vite-plugin-externals/@fluent/bundle.js'
+import { FluentResource } from '/@id/virtual:empty:fluent-bundle'
 export default new FluentResource(\\"# Simple things are simple.\\\\nhello-user = Hello, {$userName}!\\\\n\\\\n# Complex things are possible.\\\\nshared-photos =\\\\n  {$userName} {$photoCount ->\\\\n    [one] added one photo\\\\n   *[other] added {$photoCount} new photo\\\\n  }to {$userGender ->\\\\n    [male] his stream\\\\n    [female] her stream\\\\n   *[other] their stream\\\\n  }.\\\\n\\")
 "
 `;
@@ -84,11 +80,7 @@ return __returned__
 }
 
 }
-const _toDisplayString = window['Vue'].toDisplayString
-const _createElementVNode = window['Vue'].createElementVNode
-const _openBlock = window['Vue'].openBlock
-const _createElementBlock = window['Vue'].createElementBlock
-
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"/@id/virtual:empty:vue\\"
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (_openBlock(), _createElementBlock(\\"div\\", null, [
@@ -134,7 +126,7 @@ export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__f
 
 === /fixtures/ftl/en/components/external.setup.vue.ftl ===
 
-import { FluentResource } from '.vite-plugin-externals/@fluent/bundle.js'
+import { FluentResource } from '/@id/virtual:empty:fluent-bundle'
 export default new FluentResource(\\"# Simple things are simple.\\\\nhello-user = Hello, {$userName}!\\\\n\\\\n# Complex things are possible.\\\\nshared-photos =\\\\n  {$userName} {$photoCount ->\\\\n    [one] added one photo\\\\n   *[other] added {$photoCount} new photo\\\\n  } to {$userGender ->\\\\n    [male] his stream\\\\n    [female] her stream\\\\n   *[other] their stream\\\\n  }.\\\\n\\")
 "
 `;
diff --git a/__tests__/frameworks/vite/__snapshots__/sfc.spec.ts.snap b/__tests__/frameworks/vite/__snapshots__/sfc.spec.ts.snap
@@ -3,11 +3,7 @@
 exports[`Vite SFC > generates custom block code 1`] = `
 "=== /fixtures/test.vue ===
 import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/test.vue\\");const _sfc_main = {}
-const _toDisplayString = window['Vue'].toDisplayString
-const _createElementVNode = window['Vue'].createElementVNode
-const _openBlock = window['Vue'].openBlock
-const _createElementBlock = window['Vue'].createElementBlock
-
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"/@id/virtual:empty:vue\\"
 
 function _sfc_render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(\\"div\\", null, [
@@ -35,8 +31,7 @@ export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__f
 
 === /fixtures/test.vue?vue&type=fluent&index=0&locale=en&lang.fluent ===
 
-const FluentResource = window['FluentBundle'].FluentResource
-
+import { FluentResource } from '/@id/virtual:empty:fluent-bundle'
 
 export default function (Component) {
   const target = Component.options || Component
@@ -49,8 +44,7 @@ export default function (Component) {
 exports[`Vite SFC > supports custom blockType 1`] = `
 "=== /fixtures/blockType.vue ===
 import { createHotContext as __vite__createHotContext } from \\"/@vite/client\\";import.meta.hot = __vite__createHotContext(\\"/fixtures/blockType.vue\\");const _sfc_main = {}
-const _toDisplayString = window['Vue'].toDisplayString
-
+import { toDisplayString as _toDisplayString } from \\"/@id/virtual:empty:vue\\"
 
 function _sfc_render(_ctx, _cache) {
   return _toDisplayString(_ctx.$t('test-key'))
@@ -75,8 +69,7 @@ export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__f
 
 === /fixtures/blockType.vue?vue&type=i18n&index=0&locale=en&lang.i18n ===
 
-const FluentResource = window['FluentBundle'].FluentResource
-
+import { FluentResource } from '/@id/virtual:empty:fluent-bundle'
 
 export default function (Component) {
   const target = Component.options || Component

diff --git a/__tests__/frameworks/vite/errors.spec.ts b/__tests__/frameworks/vite/errors.spec.ts
@@ -0,0 +1,59 @@
+import { resolve } from 'path'
+import { describe, expect, it } from 'vitest'
+
+import vue3base from '@vitejs/plugin-vue'
+import compiler from '@vue/compiler-sfc'
+
+import { ExternalFluentPlugin, SFCFluentPlugin } from '../../../src/vite'
+import { compile } from './util'
+
+const vue3 = () => vue3base({
+  compiler,
+})
+
+const baseDir = resolve(__dirname, '../..')
+
+describe('Error checking', () => {
+  it('checks for syntax errors in external ftl files', async () => {
+    // Arrange
+    // Act
+    const code = compile({
+      plugins: [
+        vue3(),
+        ExternalFluentPlugin({
+          baseDir: resolve(baseDir, 'fixtures'),
+          ftlDir: resolve(baseDir, 'fixtures/ftl'),
+          locales: ['en', 'da'],
+          checkSyntax: true,
+        }),
+      ],
+    }, '/fixtures/components/errors.vue')
+
+    // Assert
+    await expect(code).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "Fluent parse errors:
+          E0003: Expected token: \\"}\\" (2:31)
+          E0010: Expected one of the variants to be marked as default (*) (9:3)"
+    `)
+  })
+
+  it('checks for syntax errors in custom blocks', async () => {
+    // Arrange
+    // Act
+    const code = compile({
+      plugins: [
+        vue3(),
+        SFCFluentPlugin({
+          checkSyntax: true,
+        }),
+      ],
+    }, '/fixtures/errors.vue')
+
+    // Assert
+    await expect(code).rejects.toThrowErrorMatchingInlineSnapshot(`
+      "Fluent parse errors:
+          E0003: Expected token: \\"}\\" (2:31)
+          E0010: Expected one of the variants to be marked as default (*) (9:3)"
+    `)
+  })
+})
diff --git a/__tests__/frameworks/vite/util.ts b/__tests__/frameworks/vite/util.ts
@@ -3,8 +3,6 @@ import { resolve, sep } from 'path'
 import type { InlineConfig, ModuleNode } from 'vite'
 import { createServer } from 'vite'
 
-import { viteExternalsPlugin } from 'vite-plugin-externals'
-
 const baseDir = resolve(__dirname, '../..')
 
 export async function compile(options: InlineConfig, file: string): Promise<string | undefined> {
@@ -13,10 +11,21 @@ export async function compile(options: InlineConfig, file: string): Promise<stri
     ...options,
     plugins: [
       ...options.plugins,
-      viteExternalsPlugin({
-        'vue': 'Vue',
-        '@fluent/bundle': 'FluentBundle',
-      }),
+      {
+        name: 'externals',
+        config(config) {
+          const newAlias = [
+            ...(config?.resolve?.alias ?? []),
+            { find: /^vue$/, replacement: 'virtual:empty:vue' },
+            { find: /^@fluent\/bundle$/, replacement: 'virtual:empty:fluent-bundle' },
+          ]
+
+          config.resolve = {
+            ...(config.resolve ?? {}),
+            alias: newAlias,
+          }
+        },
+      },
     ],
   })
 

diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@fluent/syntax": "^0.18.1",
     "@rollup/pluginutils": "^4.2.1",
     "magic-string": "^0.26.2",
     "unplugin": "^0.9.0"
@@ -80,7 +81,6 @@
     "tsup": "6.2.3",
     "typescript": "4.8.2",
     "vite": "3.0.9",
-    "vite-plugin-externals": "0.5.1",
     "vitest": "0.22.1",
     "vue": "3.2.38",
     "vue-loader": "17.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/plugins/external-plugin.ts b/src/plugins/external-plugin.ts
@@ -6,6 +6,7 @@ import MagicString from 'magic-string'
 import { createFilter, makeLegalIdentifier } from '@rollup/pluginutils'
 
 import type { ExternalPluginOptions, InsertInfo } from '../types'
+import { getSyntaxErrors } from './ftl/parse'
 
 function getInsertInfo(source: string): InsertInfo {
   let target = null
@@ -58,6 +59,8 @@ interface Dependency {
 }
 
 export const unplugin = createUnplugin((options: ExternalPluginOptions, meta) => {
+  options.checkSyntax = options.checkSyntax ?? false
+
   return {
     name: 'unplugin-fluent-vue-external',
     enforce: meta.framework === 'webpack' ? 'post' : undefined,
@@ -120,6 +123,12 @@ if (__HOT_API__) {
       }
 
       if (isFtl(id)) {
+        if (options.checkSyntax) {
+          const errorsText = getSyntaxErrors(source)
+          if (errorsText)
+            this.error(errorsText)
+        }
+
         return `
 import { FluentResource } from '@fluent/bundle'
 export default new FluentResource(${JSON.stringify(source)})