Merge pull request #15 from pioniro/interpolate-by-place

feat: interpolate by named place

src/component.js

@@ -30,7 +30,16 @@ export default {
 
         child = match;
       } else {
-        child = children[parseInt(match, 10)];
+        const place = match.trim();
+        if (isNaN(parseFloat(place)) || !isFinite(place)) {
+          children.forEach((e) => {
+            if (!child && e.data.attrs && e.data.attrs.place && e.data.attrs.place === place) {
+              child = e;
+            }
+          });
+        } else {
+          child = children[parseInt(match, 10)];
+        }
       }
 
       memo.push(child);

test/unit/interpolation.test.js

@@ -15,6 +15,7 @@ describe('interpolation', () => {
               hello: '{{0}} Hello',
               hello1: 'Hello {{0}} {{1}}',
               hello2: 'Hello {{1}} {{0}}.',
+              hello3: 'Hello {{first}} {{second}}.',
             },
           },
         },
@@ -66,6 +67,22 @@ describe('interpolation', () => {
       expect(vm.$el.outerHTML).to.equal('<div>Hello <span>test</span> <p>First Hello</p>.</div>');
     });
 
+    it('should interpolate components by place', async () => {
+      const el = document.createElement('div');
+      const vm = new Vue({
+        i18n: vueI18Next,
+        render(h) {
+          return h('i18next', { ref: 'text', props: { tag: 'div', path: 'hello3' } }, [
+            h('p', { domProps: { textContent: 'First Hello' }, attrs: { place: 'first' } }),
+            h('span', { domProps: { textContent: 'test' }, attrs: { place: 'second' } }),
+          ]);
+        },
+      }).$mount(el);
+
+      await nextTick();
+      expect(vm.$el.outerHTML).to.equal('<div>Hello <p place="first">First Hello</p> <span place="second">test</span>.</div>');
+    });
+
     it('should just return the children if i18next is not installed', async () => {
       const el = document.createElement('div');
       const vm = new Vue({