⭐ new: support slots syntax for component interpolation (#685) by @aavondet

aavondet · kazupon · commit 71ca843a5dbf · 2019-08-12T20:31:59.000+09:00
* Vue slots syntax for interpolation w/ tests

* 👕 refactor: slot component interpolation

* 👕 refactor: component interpolation tests

* 🍭 examples(interpolation): add slots usage example

* 🆙 update(interpolation): tweak warning messages

* 📝 docs(vuepress): update component interplation docs
diff --git a/examples/interpolation/places/index.html b/examples/interpolation/places/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>component interpolation</title>
-    <script src="../../node_modules/vue/dist/vue.min.js"></script>
-    <script src="../../dist/vue-i18n.min.js"></script>
+    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
+    <script src="../../../dist/vue-i18n.min.js"></script>
   </head>
   <body>
     <div id="app">
diff --git a/examples/interpolation/slots/index.html b/examples/interpolation/slots/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>component interpolation</title>
+    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
+    <script src="../../../dist/vue-i18n.min.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <form>
+        <div class="usernam">
+          <label for="username">username:</label>
+          <input id="username" type="text" value="username">
+        </div>
+        <div class="email">
+          <label for="email">email:</label>
+          <input id="email" type="text" value="foo@bar.com">
+        </div>
+        <div class="agreement">
+          <input id="tos" type="checkbox">
+          <i18n path="term" tag="label" for="tos">
+            <a slot="tos" :href="url" target="_blank">{{ $t('tos') }}</a>
+          </i18n>
+        </div>
+        <input type="submit" value="submit">
+      </form>
+    </div>
+    <script>
+      var messages = {
+        en: {
+          tos: 'Term of Service',
+          term: 'I accept xxx {tos}.'
+        },
+        ja: {
+          tos: '利用規約',
+          term: '私は xxx の{tos}に同意します。'
+        }
+      }
+      
+      Vue.use(VueI18n)
+      
+      var i18n = new VueI18n({
+        locale: 'en',
+        messages: messages
+      })
+      new Vue({
+        i18n: i18n,
+        data: {
+          url: '/term'
+        }
+      }).$mount('#app')
+    </script>
+  </body>
+</html>
diff --git a/src/components/interpolation.js b/src/components/interpolation.js
@@ -7,8 +7,7 @@ export default {
   functional: true,
   props: {
     tag: {
-      type: String,
-      default: 'span'
+      type: String
     },
     path: {
       type: String,
@@ -21,58 +20,75 @@ export default {
       type: [Array, Object]
     }
   },
-  render (h: Function, { props, data, children, parent }: Object) {
-    const i18n = parent.$i18n
-
-    children = (children || []).filter(child => {
-      return child.tag || (child.text = child.text.trim())
-    })
-
-    if (!i18n) {
+  render (h: Function, { data, parent, props, slots }: Object) {
+    const { $i18n } = parent
+    if (!$i18n) {
       if (process.env.NODE_ENV !== 'production') {
         warn('Cannot find VueI18n instance!')
       }
-      return children
+      return
     }
 
-    const path: Path = props.path
-    const locale: ?Locale = props.locale
+    const { path, locale, places } = props
+    const params = slots()
+    const children = $i18n.i(
+      path,
+      locale,
+      onlyHasDefaultPlace(params) || places
+        ? useLegacyPlaces(params.default, places)
+        : params
+    )
 
-    const params: Object = {}
-    const places: Array<any> | Object = props.places || {}
+    const tag = props.tag || 'span'
+    return tag ? h(tag, data, children) : children
+  }
+}
 
-    const hasPlaces: boolean = Array.isArray(places)
-      ? places.length > 0
-      : Object.keys(places).length > 0
+function onlyHasDefaultPlace (params) {
+  let prop
+  for (prop in params) {
+    if (prop !== 'default') { return false }
+  }
+  return Boolean(prop)
+}
 
-    const everyPlace: boolean = children.every(child => {
-      if (child.data && child.data.attrs) {
-        const place = child.data.attrs.place
-        return (typeof place !== 'undefined') && place !== ''
-      }
-    })
+function useLegacyPlaces (children, places) {
+  const params = places ? createParamsFromPlaces(places) : {}
+  if (!children) { return params }
 
-    if (process.env.NODE_ENV !== 'production' && hasPlaces && children.length > 0 && !everyPlace) {
-      warn('If places prop is set, all child elements must have place prop set.')
-    }
+  const everyPlace = children.every(vnodeHasPlaceAttribute)
+  if (process.env.NODE_ENV !== 'production' && everyPlace) {
+    warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.')
+  }
 
-    if (Array.isArray(places)) {
-      places.forEach((el, i) => {
-        params[i] = el
-      })
-    } else {
-      Object.keys(places).forEach(key => {
-        params[key] = places[key]
-      })
-    }
+  return children.reduce(
+    everyPlace ? assignChildPlace : assignChildIndex,
+    params
+  )
+}
+
+function createParamsFromPlaces (places) {
+  if (process.env.NODE_ENV !== 'production') {
+    warn('`places` prop is deprecated in next majaor version. Please switch to Vue slots.')
+  }
 
-    children.forEach((child, i: number) => {
-      const key: string = everyPlace
-        ? `${child.data.attrs.place}`
-        : `${i}`
-      params[key] = child
-    })
+  return Array.isArray(places)
+    ? places.reduce(assignChildIndex, {})
+    : Object.assign({}, places)
+}
 
-    return h(props.tag, data, i18n.i(path, locale, params))
+function assignChildPlace (params, child) {
+  if (child.data && child.data.attrs && child.data.attrs.place) {
+    params[child.data.attrs.place] = child
   }
+  return params
+}
+
+function assignChildIndex (params, child, index) {
+  params[index] = child
+  return params
+}
+
+function vnodeHasPlaceAttribute (vnode) {
+  return Boolean(vnode.data && vnode.data.attrs && vnode.data.attrs.place)
 }
diff --git a/test/e2e/test/interpolation.js b/test/e2e/test/interpolation.js
@@ -1,7 +1,7 @@
 module.exports = {
   interpolation: function (browser) {
     browser
-      .url('http://localhost:8080/examples/interpolation/')
+      .url('http://localhost:8080/examples/interpolation/slots')
       .waitForElementVisible('#app', 1000)
       .assert.containsText('label[for="tos"]', 'I accept xxx Term of Service.')
       .end()
diff --git a/test/unit/interpolation.test.js b/test/unit/interpolation.test.js
@@ -6,6 +6,7 @@ const messages = {
     primitive: 'one: {0}, two: {1}',
     component: 'element: {0}, component: {1}',
     mixed: 'text: {x}, component: {y}',
+    named: 'header: {header}, footer: {footer}',
     link: '@:primitive',
     term: 'I accept xxx {0}.',
     tos: 'Term of service',
@@ -290,6 +291,102 @@ describe('component interpolation', () => {
     })
   })
 
+  describe('slot', () => {
+    describe('with default slot', () => {
+      it('should be interpolated', done => {
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'text' }, slot: '' }, [this._v('1')])
+          }
+        }).$mount(el)
+        nextTick(() => {
+          assert.strictEqual(vm.$el.textContent, 'one: 1')
+        }).then(done)
+      })
+    })
+
+    describe('with named slots ', () => {
+      it('should be interpolated', done => {
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'named' } }, [
+              h('template', { slot: 'header' }, [h('p', 'header')]),
+              h('template', { slot: 'footer' }, [h('p', 'footer')])
+            ])
+          }
+        }).$mount(el)
+        nextTick(() => {
+          assert.strictEqual(
+            vm.$el.innerHTML,
+            'header: <p>header</p>, footer: <p>footer</p>'
+          )
+        }).then(done)
+      })
+    })
+
+    describe('primitive nodes', () => {
+      it('should be interpolated', done => {
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'primitive' } }, [
+              h('template', { slot: '0' }, ['1']),
+              h('template', { slot: '1' }, ['2'])
+            ])
+          }
+        }).$mount(el)
+        nextTick(() => {
+          assert.strictEqual(vm.$el.innerHTML, 'one: 1, two: 2')
+        }).then(done)
+      })
+    })
+
+    describe('linked', () => {
+      it('should be interpolated', done => {
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'link' } }, [
+              h('template', { slot: '0' }, ['1']),
+              h('template', { slot: '1' }, ['2'])
+            ])
+          }
+        }).$mount(el)
+        nextTick(() => {
+          assert.strictEqual(vm.$el.innerHTML, 'one: 1, two: 2')
+        }).then(done)
+      })
+    })
+
+    describe('included translation locale message', () => {
+      it('should be interpolated', done => {
+        const el = document.createElement('div')
+        const vm = new Vue({
+          i18n,
+          render (h) {
+            return h('i18n', { props: { path: 'term' } }, [
+              h('template', { slot: '0' }, [
+                h('a', { domProps: { href: '/term', textContent: this.$t('tos') } })
+              ])
+            ])
+          }
+        }).$mount(el)
+        nextTick(() => {
+          assert.strictEqual(
+            vm.$el.innerHTML,
+            'I accept xxx <a href=\"/term\">Term of service</a>.'
+          )
+        }).then(done)
+      })
+    })
+  })
+
   describe('warnning in render', () => {
     it('should be warned', () => {
       const spy = sinon.spy(console, 'warn')
diff --git a/vuepress/api/README.md b/vuepress/api/README.md
@@ -677,6 +677,10 @@ The element `textContent` will be cleared by default when `v-t` directive is unb
   * `tag {string}`: optional, default `span`
   * `places {Array | Object}`: optional (7.2+)
 
+:::danger Important!!
+In next major version, `places` prop is deprecated. Please switch to slots syntax.
+:::
+
 #### Usage:
 
 ```html
diff --git a/vuepress/guide/interpolation.md b/vuepress/guide/interpolation.md

-Original file line number
+Diff line change
 </div>
 ```
 -About the above example, see the [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation)
 +About the above example, see the [example](https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places)
 The children of `i18n` functional component is interpolated with locale message of `path` prop. In the above example,
 :::v-pre
 In above example, the component interpolation follows the **list formatting**.  The children of `i18n` functional component are interpolated by their orders of appearance.
 -## Advanced Usage
 +## Slots syntax usage
++
 +:::tip Support Version
 +:new: 8.14+
 +:::
++
 +You use slots syntax with Named formatting then, It's more convenient. For example:
++
 +```html
 +<div id="app">
 +  <!-- ... -->
 +  <i18n path="info" tag="p">
 +    <span slot="limit">{{ changeLimit }}</span>
 +    <a slot="action" :href="changeUrl">{{ $t('change') }}</a>
 +  </i18n>
 +  <!-- ... -->
 +</div>
 +```
++
 +```js
 +const messages = {
 +  en: {
 +    info: 'You can {action} until {limit} minutes from departure.',
 +    change: 'change your flight',
 +    refund: 'refund the ticket'
 +  }
 +}
++
 +const i18n = new VueI18n({
 +  locale: 'en',
 +  messages
 +})
++
 +new Vue({
 +  i18n,
 +  data: {
 +    changeUrl: '/change',
 +    refundUrl: '/refund',
 +    changeLimit: 15,
 +    refundLimit: 30
 +  }
 +}).$mount('#app')
 +```
++
 +Outputs:
++
 +```html
 +<div id="app">
 +  <!-- ... -->
 +  <p>
 +    You can <a href="/change">change your flight</a> until <span>15</span> minutes from departure.
 +  </p>
 +  <!-- ... -->
 +</div>
 +```
++
 +In Vue 2.6 and later,you can can use the following slots syntax in templates:
++
 +```html
 +<div id="app">
 +  <!-- ... -->
 +  <i18n path="info" tag="p">
 +    <span v-slot:limit>{{ changeLimit }}</span>
 +    <a v-slot:action :href="changeUrl">{{ $t('change') }}</a>
 +  </i18n>
 +  <!-- ... -->
 +</div>
 +```
++
 +:::warning Limitation
 +:warning: In `i18n` component, slots porps is not supported.
 +:::
++
++
 +## Places syntax usage
++
 +:::danger Important!!
 +In next major version, `place` attribute, `places` prop is deprecated. Please switch to slots syntax.
 +:::
 :::tip Support Version
 :new: 7.2+
 :::
++
 :::warning Notice
 :warning: In `i18n` component, text content consists of only white spaces will be omitted.
 :::