feat: HTML lexer supports vue bind attributes

README.md

@@ -372,6 +372,23 @@ Typescript is supported via Javascript and Jsx lexers. If you are using Javascri
 }
 ```
 
+#### Vue
+
+```js
+{
+  // Vue needs to parse its syntax through both VueTemplateLexer
+  // This lexer supports HTMLLexer and JavascriptLexer options
+  vue: [
+    {
+      lexer: 'VueTemplateLexer',
+      vueBindAttr: true, // enable vue template syntax bind attribute
+      functions: ['t', '$t'], // Array of functions to match
+      namespaceFunctions: ['useTranslation', 'withTranslation'],
+    },
+  ]
+}
+```
+
 #### Custom lexers
 
 You can provide function instead of string as a custom lexer.

src/index.js

@@ -9,3 +9,4 @@ export { default as HandlebarsLexer } from './lexers/handlebars-lexer.js'
 export { default as HTMLLexer } from './lexers/html-lexer.js'
 export { default as JavascriptLexer } from './lexers/javascript-lexer.js'
 export { default as JsxLexer } from './lexers/jsx-lexer.js'
+export { default as VueTemplateLexer } from './lexers/vue-template-lexer.js'

src/lexers/vue-template-lexer.js

@@ -0,0 +1,49 @@
+/*
+ * @Author: Bin
+ * @Date: 2025-01-04
+ * @FilePath: /i18next-parser/src/lexers/vue-template-lexer.js
+ */
+import HTMLLexer from './html-lexer.js'
+import JavascriptLexer from './javascript-lexer.js'
+import * as cheerio from 'cheerio'
+
+export default class VueTemplateLexer extends HTMLLexer {
+  constructor(options = {}) {
+    super(options)
+    this.vueBindAttr = options.vueBindAttr || true
+    this.jsLexer = new JavascriptLexer(options)
+  }
+
+  extract(content, filename = '__default.vue') {
+    const $ = cheerio.load(content)
+    const jsLexer = this.jsLexer
+    let keys = []
+
+    // use HTMLLexer
+    const HTMLkeys = super.extract(content)
+    keys.push(...HTMLkeys)
+
+    // use JavascriptLexer
+    const JSKeys = jsLexer.extract(content, filename)
+    keys.push(...JSKeys)
+
+    // support vue bind attribute
+    if (this.vueBindAttr) {
+      // traverse all tags to filter bind attribute
+      $('*').each((_, node) => {
+        const attributes = node.attributes.filter(
+          (item) => item.name.startsWith(':') || item.name.startsWith('v-bind:')
+        )
+        if (attributes.length > 0) {
+          // there are computed properties, it may have simple javascript logic
+          attributes.forEach((content) => {
+            const items = jsLexer.extract(content.value, filename)
+            keys.push(...items)
+          })
+        }
+      })
+    }
+
+    return keys
+  }
+}

src/parser.js

@@ -4,6 +4,7 @@ import HandlebarsLexer from './lexers/handlebars-lexer.js'
 import HTMLLexer from './lexers/html-lexer.js'
 import JavascriptLexer from './lexers/javascript-lexer.js'
 import JsxLexer from './lexers/jsx-lexer.js'
+import VueTemplateLexer from './lexers/vue-template-lexer.js'
 
 const lexers = {
   hbs: ['HandlebarsLexer'],
@@ -18,7 +19,7 @@ const lexers = {
   jsx: ['JsxLexer'],
   tsx: ['JsxLexer'],
 
-  vue: ['JavascriptLexer'],
+  vue: ['VueTemplateLexer'],
 
   default: ['JavascriptLexer'],
 }
@@ -28,6 +29,7 @@ const lexersMap = {
   HTMLLexer,
   JavascriptLexer,
   JsxLexer,
+  VueTemplateLexer,
 }
 
 export default class Parser extends EventEmitter {

test/lexers/vue-template-lexer.test.js

@@ -0,0 +1,31 @@
+/*
+ * @Author: Bin
+ * @Date: 2025-01-04
+ * @FilePath: /i18next-parser/test/lexers/vue-template-lexer.test.js
+ */
+import { assert } from 'chai'
+import VueTemplateLexer from '../../src/lexers/vue-template-lexer.js'
+
+describe('VueTemplateLexer', () => {
+  it('supports vue bind attributes', (done) => {
+    const Lexer = new VueTemplateLexer({
+      functions: ['t', '$t'],
+      vueBindAttr: true,
+    })
+    const content = `
+    <template>
+      <button :aria-label="t('b_a_l', 'button aria label')">
+        button label
+      </button>
+      <button v-bind:aria-label="$t('button v-bind aria label')">
+        button label form v-bind
+      </button>
+    </template>
+    `
+    assert.deepEqual(Lexer.extract(content), [
+      { key: 'b_a_l', defaultValue: 'button aria label' },
+      { key: 'button v-bind aria label' },
+    ])
+    done()
+  })
+})