feat: resolve template element having control directives (#44)

src/view/rendering.ts

@@ -109,26 +109,34 @@ export function resolveControlDirectives(
       }
 
       const vForIndex = attrs.indexOf(vFor)
-      const cloneNode = clone(child, {
-        startTag: clone(child.startTag, {
-          // Need to remove v-for directive to avoid infinite loop.
-          attributes: [
-            ...attrs.slice(0, vForIndex),
-            ...attrs.slice(vForIndex + 1)
-          ]
-        })
-      })
+      const resolvedNodes =
+        child.name === 'template'
+          ? child.children
+          : [
+              clone(child, {
+                startTag: clone(child.startTag, {
+                  // Need to remove v-for directive to avoid infinite loop.
+                  attributes: [
+                    ...attrs.slice(0, vForIndex),
+                    ...attrs.slice(vForIndex + 1)
+                  ]
+                })
+              })
+            ]
+
       return reduceVFor(
         iteratee.value,
         (acc, ...iteraterValues: any[]) => {
           const newScope = { ...scope }
           vFor.left.forEach((name, i) => {
             newScope[name] = iteraterValues[i]
           })
-          return resolveControlDirectives(acc, {
-            el: cloneNode,
-            scope: newScope
-          })
+          return resolvedNodes.reduce((acc, node) => {
+            return resolveControlDirectives(acc, {
+              el: node,
+              scope: newScope
+            })
+          }, acc)
         },
         acc
       )
@@ -137,7 +145,9 @@ export function resolveControlDirectives(
     // v-if
     const vIf = findDirective(attrs, d => d.name === 'if')
     if (vIf) {
-      return directiveValue(vIf, scope) ? acc.concat(item) : acc
+      return directiveValue(vIf, scope)
+        ? acc.concat(unwrapTemplate(child, scope))
+        : acc
     }
 
     // v-else or v-else-if
@@ -155,16 +165,37 @@ export function resolveControlDirectives(
       }
 
       if (vElse.name === 'else') {
-        return acc.concat(item)
+        return acc.concat(unwrapTemplate(child, scope))
       }
 
-      return directiveValue(vElse, scope) ? acc.concat(item) : acc
+      return directiveValue(vElse, scope)
+        ? acc.concat(unwrapTemplate(child, scope))
+        : acc
     }
   }
 
   return acc.concat(item)
 }
 
+function unwrapTemplate(
+  el: Element,
+  scope: Record<string, DefaultValue>
+): ResolvedChild[] {
+  if (el.name !== 'template') {
+    return [
+      {
+        el,
+        scope
+      }
+    ]
+  }
+
+  return el.children.map(child => ({
+    el: child,
+    scope
+  }))
+}
+
 /**
  * Helper function to handle v-for iteration.
  */

test/view/VueComponent/__snapshots__/else-if.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VueComponent v-else-if resolves template children as the else-if block 1`] = `"<div><style></style><strong class=\\"\\">Bar</strong>Content</div>"`;

test/view/VueComponent/__snapshots__/else.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VueComponent v-else resolves template children as the else block 1`] = `"<div><style></style><strong class=\\"\\">Bar</strong>Content</div>"`;

test/view/VueComponent/__snapshots__/for.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VueComponent v-for repeats template element children 1`] = `"<div><style></style><div class=\\"\\"><strong class=\\"\\">first - <span class=\\"\\">1</span></strong><small class=\\"\\">second - <span class=\\"\\">1</span></small><strong class=\\"\\">first - <span class=\\"\\">2</span></strong><small class=\\"\\">second - <span class=\\"\\">2</span></small><strong class=\\"\\">first - <span class=\\"\\">3</span></strong><small class=\\"\\">second - <span class=\\"\\">3</span></small></div></div>"`;

test/view/VueComponent/__snapshots__/if.spec.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VueComponent v-if gathers the contents in the template element 1`] = `"<div><style></style><p class=\\"\\">foo</p>barbaz</div>"`;
+
+exports[`VueComponent v-if gathers the contents in the template element 2`] = `"<div><style></style>baz</div>"`;

test/view/VueComponent/else-if.spec.ts

@@ -58,4 +58,20 @@ describe('VueComponent v-else-if', () => {
     expect(list.length).toBe(1)
     expect(list.at(0).text()).toBe('Bar')
   })
+
+  it('resolves template children as the else-if block', () => {
+    // prettier-ignore
+    const template = createTemplate([
+      h('p', [d('if', 'false')], [
+        'Foo'
+      ]),
+      h('template', [d('else-if', 'true')], [
+        h('strong', [], ['Bar']),
+        'Content'
+      ])
+    ])
+
+    const wrapper = render(template)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

test/view/VueComponent/else.spec.ts

@@ -125,4 +125,20 @@ describe('VueComponent v-else', () => {
     expect(baz.exists()).toBe(false)
     expect(qux.exists()).toBe(false)
   })
+
+  it('resolves template children as the else block', () => {
+    // prettier-ignore
+    const template = createTemplate([
+      h('p', [d('if', 'false')], [
+        'Foo'
+      ]),
+      h('template', [d('else')], [
+        h('strong', [], ['Bar']),
+        'Content'
+      ])
+    ])
+
+    const wrapper = render(template)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

test/view/VueComponent/for.spec.ts

@@ -104,4 +104,19 @@ describe('VueComponent v-for', () => {
     const list = wrapper.findAll('li')
     expect(list.length).toBe(0)
   })
+
+  it('repeats template element children', () => {
+    // prettier-ignore
+    const template = createTemplate([
+      h('div', [], [
+        h('template', [vFor(['i'], '3')], [
+          h('strong', [], ['first - ', exp('i')]),
+          h('small', [], ['second - ', exp('i')])
+        ])
+      ])
+    ])
+
+    const wrapper = render(template)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

test/view/VueComponent/if.spec.ts

@@ -77,4 +77,28 @@ describe('VueComponent v-if', () => {
     const p = render(template).find('p')
     expect(p.exists()).toBe(false)
   })
+
+  it('gathers the contents in the template element', () => {
+    // prettier-ignore
+    const shown = createTemplate([
+      h('template', [d('if', 'true')], [
+        h('p', [], ['foo']),
+        'bar'
+      ]),
+      'baz'
+    ])
+
+    expect(render(shown).html()).toMatchSnapshot()
+
+    // prettier-ignore
+    const hidden = createTemplate([
+      h('template', [d('if', 'false')], [
+        h('p', [], ['foo']),
+        'bar'
+      ]),
+      'baz'
+    ])
+
+    expect(render(hidden).html()).toMatchSnapshot()
+  })
 })