feat: add support for fluent-vue (#652)

examples/by-frameworks/fluent-vue-sfc/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": "i18n",
+  "i18n-ally.keystyle": "nested"
+}

examples/by-frameworks/fluent-vue-sfc/i18n/en.ftl

@@ -0,0 +1 @@
+global-key = Global value

examples/by-frameworks/fluent-vue-sfc/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "basic",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fluent/bundle": "^0.16.0",
+    "fluent-vue": "^3.0.0-beta.16",
+    "vue": "~2.6.12"
+  },
+  "devDependencies": {
+    "fluent-vue-loader": "^3.0.0-beta.16"
+  }
+}

examples/by-frameworks/fluent-vue-sfc/src/App.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <!-- Methods -->
+    <div>{{ $t('test') }}</div>
+    <div>{{ $t('global-key') }}</div>
+    <div v-bind="$ta('props')" />
+
+    <!-- Directive -->
+    <div v-t:test />
+    <div v-t:greeting="{ name: username }" />
+
+    <!-- Component -->
+    <i18n path="term" tag="span">
+      <template #tos-link="{ termsLinkText }">
+        <RouterLink to="/login/register">
+          {{ termsLinkText }}
+        </RouterLink>
+      </template>
+    </i18n>
+
+    <div>
+      Plain text to extract
+    </div>
+  </div>
+</template>
+
+<script>
+import { useFluent } from 'fluent-vue'
+
+export default {
+  setup() {
+    const { $t } = useFluent()
+
+    return {
+      test: $t('test'),
+    }
+  },
+  computed: {
+    username() {
+      return this.$t('user-name')
+    },
+    notExists() {
+      return this.$t('wrong-key')
+    },
+    plainText() {
+      return 'Plain text in js to extract'
+    },
+  },
+}
+</script>
+
+<fluent locale="en">
+user-name = World
+aria-key = Aria value
+# {$name} Name of current user
+greeting =
+  Hello, {$name}
+    .aria-label = Label value
+test = Test value
+props =
+  .aria-label = Aria
+term = I accept {$tos-link}
+  .terms-link-text = Term of Service
+</fluent>

examples/by-frameworks/fluent-vue-sfc/src/fluent.js

@@ -0,0 +1,9 @@
+import { FluentBundle } from '@fluent/bundle'
+import { createFluentVue } from 'fluent-vue'
+
+const bundle = new FluentBundle('en')
+
+export const fluent = createFluentVue({
+  locale: 'en',
+  bundles: [bundle],
+})

examples/by-frameworks/fluent-vue-sfc/src/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+import { fluent } from './fluent'
+import App from './App.vue'
+
+Vue.use(fluent)
+
+new Vue({
+  el: '#root',
+  render: (h) => h(App),
+})

examples/by-frameworks/fluent-vue/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "i18n-ally.localesPaths": "i18n",
+  "i18n-ally.keystyle": "nested"
+}

examples/by-frameworks/fluent-vue/i18n/en.ftl

@@ -0,0 +1,10 @@
+user-name = World
+aria-key = Aria value
+# {$name} Name of current user
+greeting = Hello, { $name }
+    .aria-label = Label value
+test = Test value
+props = .aria-label = Aria
+    .aria-label = Aria
+term = I accept { $tos-link }
+    .terms-link-text = Term of Service

examples/by-frameworks/fluent-vue/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "basic",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fluent/bundle": "^0.16.0",
+    "fluent-vue": "^3.0.0-beta.16",
+    "vue": "~2.6.12"
+  }
+}

examples/by-frameworks/fluent-vue/src/App.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <!-- Methods -->
+    <div>{{ $t('test') }}</div>
+    <div v-bind="$ta('props')" />
+
+    <!-- Directive -->
+    <div v-t:test />
+    <div v-t:greeting="{ name: username }" />
+
+    <!-- Component -->
+    <i18n path="term" tag="span">
+      <template #tos-link="{ termsLinkText }">
+        <RouterLink to="/login/register">
+          {{ termsLinkText }}
+        </RouterLink>
+      </template>
+    </i18n>
+
+    <div>
+      Plain text to extract
+    </div>
+  </div>
+</template>
+
+<script>
+import { useFluent } from 'fluent-vue'
+
+export default {
+  setup() {
+    const { $t } = useFluent()
+
+    return {
+      test: $t('test'),
+    }
+  },
+  computed: {
+    username() {
+      return this.$t('user-name')
+    },
+    notExists() {
+      return this.$t('wrong-key')
+    },
+    plainText() {
+      return "Plain text in js to extract"
+    },
+  },
+}
+</script>

examples/by-frameworks/fluent-vue/src/fluent.js

@@ -0,0 +1,9 @@
+import { FluentBundle } from '@fluent/bundle'
+import { createFluentVue } from 'fluent-vue'
+
+const bundle = new FluentBundle('en')
+
+export const fluent = createFluentVue({
+  locale: 'en',
+  bundles: [bundle],
+})

examples/by-frameworks/fluent-vue/src/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+import { fluent } from './fluent'
+import App from './App.vue'
+
+Vue.use(fluent)
+
+new Vue({
+  el: '#root',
+  render: (h) => h(App),
+})

package.json

@@ -48,6 +48,7 @@
     "consolidate": "^0.16.0",
     "esm": "^3.2.25",
     "fast-glob": "^3.2.7",
+    "fluent-vue-cli": "^3.0.0-beta.18",
     "glob-gitignore": "^1.0.14",
     "htmlparser2": "^6.1.0",
     "iconv-lite": "^0.6.3",

src/core/CurrentFile.ts

@@ -3,13 +3,15 @@ import { throttle } from 'lodash'
 import { ComposedLoader } from './loaders/ComposedLoader'
 import { Global } from './Global'
 import { VueSfcLoader } from './loaders/VueSfcLoader'
+import { FluentVueSfcLoader } from './loaders/FluentVueSfcLoader'
 import { Loader, Analyst } from '.'
 import { DetectHardStrings } from '~/commands/detectHardStrings'
 import { DetectionResult } from '~/core/types'
 import { Log } from '~/utils/Log'
 
 export class CurrentFile {
   static _vue_sfc_loader: VueSfcLoader | null = null
+  static _fluent_vue_sfc_loader: FluentVueSfcLoader | null = null
   static _composed_loader = new ComposedLoader()
   static _onInvalidate = new EventEmitter<boolean>()
   static _onInitialized = new EventEmitter<void>()
@@ -24,6 +26,10 @@ export class CurrentFile {
     return Global.hasFeatureEnabled('VueSfc')
   }
 
+  static get FluentVueSfc() {
+    return Global.hasFeatureEnabled('FluentVueSfc')
+  }
+
   static watch(ctx: ExtensionContext) {
     ctx.subscriptions.push(workspace.onDidSaveTextDocument(e => this._currentUri && e?.uri === this._currentUri && this.update(e.uri)))
     ctx.subscriptions.push(workspace.onDidChangeTextDocument(e => this._currentUri && e?.document?.uri === this._currentUri && this.throttleUpdate(e.document.uri)))
@@ -61,6 +67,21 @@ export class CurrentFile {
         this._vue_sfc_loader = new VueSfcLoader(uri)
     }
 
+    if (this.FluentVueSfc) {
+      if (this._fluent_vue_sfc_loader) {
+        if (uri && this._fluent_vue_sfc_loader.uri.path === uri.path) {
+          this._fluent_vue_sfc_loader.load()
+          return
+        }
+        else {
+          this._fluent_vue_sfc_loader.dispose()
+          this._fluent_vue_sfc_loader = null
+        }
+      }
+      if (uri && uri.fsPath.endsWith('.vue'))
+        this._fluent_vue_sfc_loader = new FluentVueSfcLoader(uri)
+    }
+
     this.updateLoaders()
     this._onInitialized.fire()
   }
@@ -71,6 +92,9 @@ export class CurrentFile {
     if (this.VueSfc && this._vue_sfc_loader)
       loaders.push(this._vue_sfc_loader)
 
+    if (this.FluentVueSfc && this._fluent_vue_sfc_loader)
+      loaders.push(this._fluent_vue_sfc_loader)
+
     this._composed_loader.loaders = loaders
   }
 

src/core/Extract.ts

@@ -74,30 +74,27 @@ export async function extractHardStrings(document: TextDocument, extracts: Extra
 
   extracts.sort((a, b) => b.range.start.compareTo(a.range.start))
 
-  await Promise.all(
-    [
-      // replace
-      editor.edit((editBuilder) => {
-        for (const extract of extracts) {
-          editBuilder.replace(
-            extract.range,
-            extract.replaceTo,
-          )
-        }
-      }),
-      // save keys
-      CurrentFile.loader.write(
-        extracts
-          .filter(i => i.keypath != null && i.message != null)
-          .map(e => ({
-            textFromPath: filepath,
-            filepath: undefined,
-            keypath: e.keypath!,
-            value: e.message!,
-            locale: e.locale || sourceLanguage,
-          })),
-      ),
-    ],
+  // replace
+  await editor.edit((editBuilder) => {
+    for (const extract of extracts) {
+      editBuilder.replace(
+        extract.range,
+        extract.replaceTo,
+      )
+    }
+  })
+
+  // save keys
+  await CurrentFile.loader.write(
+    extracts
+      .filter(i => i.keypath != null && i.message != null)
+      .map(e => ({
+        textFromPath: filepath,
+        filepath: undefined,
+        keypath: e.keypath!,
+        value: e.message!,
+        locale: e.locale || sourceLanguage,
+      })),
   )
 
   if (saveFile)