breaking: v-t directive

README.md

@@ -93,6 +93,9 @@ The examples are offered that use the following two API styles:
   - For production mode, HTML message detect is not check due to performance.
 - Legacy API `sync` option:
   - default: change to `false` from `true`
+- `v-t` directive
+  - `preserve` modifier deprecated, keep Element content
+  - Legacy API `preserveDirectiveContent` option, and property deprecated
 - `VueI18n.version` -> `import { VERSION } from 'vue-i18n'`
 - `VueI18n.availabilities` -> `import { availabilities } from 'vue-i18n'`
 - See the details [here](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.md)
@@ -112,8 +115,6 @@ The examples are offered that use the following two API styles:
 
 ### :hammer: Missing features
 
-- `v-t` directive
-- `preserveDirectiveContent` option (depend on `v-t`)
 - SSR
 - Custom formatting
 - Tooling
@@ -145,7 +146,6 @@ yarn add vue-i18n@next
   - [x] vue-i18n message format
   - [ ] sourcemap
   - [x] HTML format handling
-  - [x] error handling
   - [ ] more unit (fuzzing) tests
   - [ ] performance tests (benchmark)
 - Intlify core runtime
@@ -157,6 +157,7 @@ yarn add vue-i18n@next
   - [ ] improve locale messages typing: `LocaleMessages` / `LocaleMessage` / `LocaleMessageDictiory`
   - [x] postTranslation context option
 - Composable API: I18n Composer
+  - [ ] error handlings
   - properties
     - [x] locale
     - [x] fallbackLocale
@@ -204,7 +205,7 @@ yarn add vue-i18n@next
     - [x] silentTranslationWarn
     - [x] silentFallbackWarn
     - [x] formatFallbackMessages
-    - [ ] preserveDirectiveContent
+    - [x] preserveDirectiveContent
     - [x] warnHtmlInMessage
     - [x] postTranslation
     - [x] t
@@ -243,7 +244,7 @@ yarn add vue-i18n@next
   - [x] NumberFormat `<i18n-n>`
   - [x] DatetimeFormat `<i18n-d>`
 - Directive
-  - [ ] `v-t`
+  - [x] `v-t`
 - Tool Chains
   - [ ] intlify devtools
   - [ ] vue-i18n-extensions
@@ -255,6 +256,9 @@ yarn add vue-i18n@next
   - [ ] documentation
   - [x] fallback localization (bubble up)
   - [ ] SSR
+- General tasks
+  - [ ] error handlings
+  - [ ] unit testings with @vue/test-utils@next
 
 </details>
 

e2e/directive/basic.test.js

@@ -0,0 +1,20 @@
+;['composable', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/${pattern}/directive/basic.html`
+      )
+    })
+
+    test('initial rendering', async () => {
+      await expect(page).toMatch('言語')
+      await expect(page).toMatch('こんにちは、世界！')
+    })
+
+    test('change locale', async () => {
+      await page.select('#app select', 'en')
+      await expect(page).toMatch('Language')
+      await expect(page).toMatch('hello world!')
+    })
+  })
+})

e2e/directive/object.test.js

@@ -0,0 +1,14 @@
+;['composable', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/${pattern}/directive/object.html`
+      )
+    })
+
+    test('rendering', async () => {
+      await expect(page).toMatch('こんにちは、 kazupon！')
+      await expect(page).toMatch('good bye!')
+    })
+  })
+})

e2e/directive/plural.test.js

@@ -0,0 +1,13 @@
+;['composable', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/${pattern}/directive/plural.html`
+      )
+    })
+
+    test('rendering', async () => {
+      await expect(page).toMatch('2 bananas')
+    })
+  })
+})

e2e/directive/preserve.test.js

@@ -0,0 +1,23 @@
+const { sleep } = require('../helper') // eslint-disable-line
+
+;['composable', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/${pattern}/directive/preserve.html`
+      )
+    })
+
+    test('initial rendering', async () => {
+      await expect(page).toMatch('hi there!')
+    })
+
+    test('trigger transition', async () => {
+      await expect(page).toClick('#app button')
+      await expect(page).toMatchElement('#app p', { text: 'hi there!' })
+      await sleep(1000)
+      await expect(page).toClick('#app button')
+      await expect(page).toMatch('hi there!')
+    })
+  })
+})

e2e/helper.js

@@ -7,6 +7,11 @@ const setupWarningConsole = (page, messages) => {
   })
 }
 
+async function sleep(delay) {
+  return new Promise(resolve => setTimeout(resolve, delay))
+}
+
 module.exports = {
-  setupWarningConsole
+  setupWarningConsole,
+  sleep
 }

examples/composable/directive/basic.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>v-t directive basic usage</title>
+    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../../dist/vue-i18n.global.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <form>
+        <!-- e.g. string lieteral -->
+        <label v-t="'message.language'"></label>
+        <select v-model="locale">
+          <option value="en">en</option>
+          <option value="ja">ja</option>
+        </select>
+      </form>
+      <!-- e.g. use render context -->
+      <p v-t="target"></p>
+    </div>
+    <script>
+      const { createApp, ref } = Vue
+      const { createI18n, useI18n } = VueI18n
+
+      const i18n = createI18n({
+        locale: 'ja',
+        messages: {
+          en: {
+            message: {
+              language: 'Language',
+              hello: 'hello world!'
+            }
+          },
+          ja: {
+            message: {
+              language: '言語',
+              hello: 'こんにちは、世界！'
+            }
+          }
+        }
+      })
+
+      const app = createApp({
+        setup() {
+          const target = ref('message.hello')
+          return { target, ...useI18n() }
+        }
+      })
+      app.use(i18n)
+      app.mount('#app')
+    </script>
+  </body>
+</html>

examples/composable/directive/object.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>v-t directive object value usage</title>
+    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../../dist/vue-i18n.global.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <p v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
+      <p v-t="{ path: byePath, locale: 'en' }"></p>
+    </div>
+    <script>
+      const { createApp, ref } = Vue
+      const { createI18n, useI18n } = VueI18n
+
+      const i18n = createI18n({
+        locale: 'ja',
+        messages: {
+          en: {
+            message: {
+              hi: 'Hi, {name}!',
+              bye: 'good bye!'
+            }
+          },
+          ja: {
+            message: {
+              hi: 'こんにちは、 {name}！',
+              bye: 'さようなら！'
+            }
+          }
+        }
+      })
+
+      const app = createApp({
+        setup() {
+          const byePath = ref('message.bye')
+          return { byePath, ...useI18n() }
+        }
+      })
+      app.use(i18n)
+      app.mount('#app')
+    </script>
+  </body>
+</html>

examples/composable/directive/plural.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>v-t directive plural usage</title>
+    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../../dist/vue-i18n.global.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <p v-t="{ path: 'banana', choice: 2 }"></p>
+    </div>
+    <script>
+      const { createApp } = Vue
+      const { createI18n, useI18n } = VueI18n
+
+      const i18n = createI18n({
+        locale: 'en',
+        messages: {
+          en: {
+            banana: 'no bananas | {n} banana | {n} bananas'
+          }
+        }
+      })
+
+      const app = createApp({
+        setup() {
+          return useI18n()
+        }
+      })
+      app.use(i18n)
+      app.mount('#app')
+    </script>
+  </body>
+</html>

examples/composable/directive/preserve.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>v-t directive preserve content usage</title>
+    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../../dist/vue-i18n.global.js"></script>
+    <style>
+      .fade-enter-active,
+      .fade-leave-active {
+        transition: opacity 0.5s;
+      }
+      .fade-enter,
+      .fade-leave-to {
+        opacity: 0;
+        transition: ease all 1s;
+      }
+      .red-bg {
+        background-color: red;
+        padding: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <transition name="fade">
+        <p v-if="toggle" v-t="'hello'" class="red-bg"></p>
+      </transition>
+      <button @click="toggle = !toggle">click me</button>
+    </div>
+    <script>
+      const { createApp, ref } = Vue
+      const { createI18n, useI18n } = VueI18n
+
+      const i18n = createI18n({
+        locale: 'en',
+        messages: {
+          en: { hello: 'hi there!' },
+          ja: { hello: 'こんにちは！' }
+        }
+      })
+
+      const app = createApp({
+        setup() {
+          const toggle = ref(true)
+          return { toggle, ...useI18n() }
+        }
+      })
+      app.use(i18n)
+      app.mount('#app')
+    </script>
+  </body>
+</html>

examples/legacy/directive/basic.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>v-t directive basic usage</title>
+    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../../dist/vue-i18n.global.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <form>
+        <!-- e.g. string lieteral -->
+        <label v-t="'message.language'"></label>
+        <select v-model="$i18n.locale">
+          <option value="en">en</option>
+          <option value="ja">ja</option>
+        </select>
+      </form>
+      <!-- e.g. use render context -->
+      <p v-t="target"></p>
+    </div>
+    <script>
+      const { createApp } = Vue
+      const { createI18n, useI18n } = VueI18n
+
+      const i18n = createI18n({
+        legacy: true,
+        locale: 'ja',
+        messages: {
+          en: {
+            message: {
+              language: 'Language',
+              hello: 'hello world!'
+            }
+          },
+          ja: {
+            message: {
+              language: '言語',
+              hello: 'こんにちは、世界！'
+            }
+          }
+        }
+      })
+
+      const app = createApp({
+        data() {
+          return { target: 'message.hello' }
+        }
+      })
+      app.use(i18n)
+      app.mount('#app')
+    </script>
+  </body>
+</html>