From acfc45824d1188cecea629bf5c3cac1068893667 Mon Sep 17 00:00:00 2001
From: TATSUNO Yasuhiro <tatsuno_yasuhiro@kurusugawa.jp>
Date: Sun, 14 Oct 2018 02:58:29 +0900
Subject: [PATCH] :zap: 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               |  8 +++++---
 test/unit/basic.test.js    |  6 ++++++
 test/unit/fixture/index.js |  1 +
 vuepress/guide/messages.md | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index d8b37da29..2e27202ac 100644
--- a/src/index.js
+++ b/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,7 +253,7 @@ 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
@@ -259,8 +261,8 @@ export default class VueI18n {
         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,
diff --git a/test/unit/basic.test.js b/test/unit/basic.test.js
index 5790f5f88..3527f6da8 100644
--- a/test/unit/basic.test.js
+++ b/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)
diff --git a/test/unit/fixture/index.js b/test/unit/fixture/index.js
index d30c6f64e..b456f394b 100644
--- a/test/unit/fixture/index.js
+++ b/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}',
diff --git a/vuepress/guide/messages.md b/vuepress/guide/messages.md
index 57f4a1bf4..50ccdfa98 100644
--- a/vuepress/guide/messages.md
+++ b/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>
+```