⚡ improvement(index): Allow escaping link key like @:(foo.bar). (#437)…

… by @exoego

* Allow escaping the link to other key in the form of @:(key)

* Cache the regexp to avoid instantiation every time _link called.

src/index.js

@@ -31,6 +31,8 @@ const numberFormatKeys = [
   'localeMatcher',
   'formatMatcher'
 ]
+const linkKeyMatcher = /(@:([\w\-_|.]+|\([\w\-_|.]+\)))/g
+const bracketsMatcher = /[()]/g
 
 export default class VueI18n {
   static install: () => void
@@ -251,16 +253,16 @@ export default class VueI18n {
     // Match all the links within the local
     // We are going to replace each of
     // them with its translation
-    const matches: any = ret.match(/(@:[\w\-_|.]+)/g)
+    const matches: any = ret.match(linkKeyMatcher)
     for (const idx in matches) {
       // ie compatible: filter custom array
       // prototype method
       if (!matches.hasOwnProperty(idx)) {
         continue
       }
       const link: string = matches[idx]
-      // Remove the leading @:
-      const linkPlaceholder: string = link.substr(2)
+      // Remove the leading @: and the brackets
+      const linkPlaceholder: string = link.substr(2).replace(bracketsMatcher, '')
       // Translate the link
       let translated: any = this._interpolate(
         locale, message, linkPlaceholder, host,

test/unit/basic.test.js

@@ -49,6 +49,12 @@ describe('basic', () => {
       })
     })
 
+    describe('linked translation', () => {
+      it('should translate link with braces ', () => {
+        assert.strictEqual(i18n.t('message.linkBrackets'), 'Hello hoge. Isn\'t the world great?')
+      })
+    })
+
     describe('ja locale', () => {
       it('should translate a japanese', () => {
         assert.equal(i18n.t('message.hello', 'ja'), messages.ja.message.hello)

test/unit/fixture/index.js

@@ -13,6 +13,7 @@ export default {
       linkEnd: 'This is a linked translation to @:message.hello',
       linkWithin: 'Isn\'t @:message.hello we live in great?',
       linkMultiple: 'Hello @:message.hoge!, isn\'t @:message.hello great?',
+      linkBrackets: 'Hello @:(message.hoge). Isn\'t @:(message.hello) great?',
       linkHyphen: '@:hyphen-hello',
       linkUnderscore: '@:underscore_hello',
       linkList: '@:message.hello: {0} {1}',

vuepress/guide/messages.md

@@ -102,3 +102,35 @@ Output the below:
 ```html
 <p>DIO: the world !!!!</p>
 ```
+
+
+### Grouping by brackets
+
+A translation key of linked locale message can also have the form of `@:(message.foo.bar.baz)` in which the link to another translation key is within brackets `()`.
+
+This can be useful if the link `@:message.something` is following by period `.`, which can be a part of link but in case it should not be.
+
+Locale messages the below:
+
+```js
+const messages = {
+  en: {
+    message: {
+      dio: 'DIO',
+      linked: 'There\'s a reason, you lost, @:(message.dio).'
+    }
+  }
+}
+```
+
+Template the below:
+
+```html    
+<p>{{ $t('message.linked') }}</p>
+```    
+
+Output the below:
+
+```html
+<p>There's a reason, you lost, Dio.</p>
+```