component/jsx) Fixes for <template> in JSX

knockout · Jun 26, 2018 · f82eafc · f82eafc
1 parent 3421af1
commit f82eafc
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 7 deletions.
diff --git a/packages/tko.binding.component/spec/componentBindingBehaviors.js b/packages/tko.binding.component/spec/componentBindingBehaviors.js
@@ -1044,6 +1044,31 @@ describe('Components: Component binding', function () {
       expect(testNode.children[0].innerText.trim()).toEqual(`beep`)
     })
 
+    it('processes default and named slots', function () {
+      testNode.innerHTML = `
+        <test-component>
+          <template slot='alpha'>beep</template>
+          Gamma
+          <div>Zeta</div>
+        </test-component>
+      `
+      class ViewModel extends components.ComponentABC {
+        static get template () {
+          return `
+            <div>
+              X <slot name='alpha'></slot> Y <slot></slot> Q
+            </div>
+          `
+        }
+      }
+      ViewModel.register('test-component')
+
+      applyBindings(outerViewModel, testNode)
+      const innerText = testNode.children[0].innerText
+        .replace(/\s+/g, ' ').trim()
+      expect(innerText).toEqual(`X beep Y Gamma Zeta Q`)
+    })
+
     it('inserts all component template nodes in an unnamed (default) slot', function () {
       testNode.innerHTML = `
         <test-component>
@@ -1068,5 +1093,26 @@ describe('Components: Component binding', function () {
       const em = testNode.children[0].children[0].children[0]
       expect(em.tagName).toEqual('EM')
     })
+
+    it('inserts multiple nodes from a <template>', function () {
+      testNode.innerHTML = `
+        <test-component>
+          <em>B.</em>
+          <i>C.</i>
+          <b>E.</b>
+        </test-component>
+      `
+      class ViewModel extends components.ComponentABC {
+        static get template () {
+          return ` <div> <slot></slot> </div> `
+        }
+      }
+      ViewModel.register('test-component')
+
+      applyBindings(outerViewModel, testNode)
+      expect(testNode.children[0].innerText.trim()).toEqual(`B. C. E.`)
+      const em = testNode.children[0].children[0].children[0]
+      expect(em.tagName).toEqual('EM')
+    })
   })
 })
diff --git a/packages/tko.binding.component/src/slotBinding.js b/packages/tko.binding.component/src/slotBinding.js
@@ -55,8 +55,9 @@ export default class SlotBinding extends DescendantBindingHandler {
 
   getNodesForSlot (slotNode) {
     if (!slotNode) { return [] }
-    if (slotNode instanceof HTMLTemplateElement) {
-      return slotNode.content.cloneNode(true).childNodes
+    if ('content' in slotNode) {
+      const clone = document.importNode(slotNode.content, true)
+      return [...clone.childNodes]
     }
     return (Array.isArray(slotNode) ? slotNode : [slotNode])
       .map(sn => sn.cloneNode(true))
@@ -78,7 +79,8 @@ export default class SlotBinding extends DescendantBindingHandler {
         ...this.genSlotsByName($componentTemplateNodes))
     }
     if (!slotName) {
-      return $componentTemplateNodes
+      return [...$componentTemplateNodes]
+        .filter(n => !n.getAttribute || !n.getAttribute('slot'))
     }
     return $componentTemplateNodes[SLOTS_SYM][slotName]
   }

diff --git a/packages/tko.utils.jsx/src/jsx.js b/packages/tko.utils.jsx/src/jsx.js
@@ -44,6 +44,14 @@ export function jsxToNode (jsx) {
   return node
 }
 
+function appendChild (possibleTemplateElement, nodeToAppend) {
+  if ('content' in possibleTemplateElement) {
+    possibleTemplateElement.content.appendChild(nodeToAppend)
+  } else {
+    possibleTemplateElement.appendChild(nodeToAppend)
+  }
+}
+
 /**
  *
  * @param {HTMLElement} node
@@ -61,7 +69,7 @@ function updateChildren (node, children, subscriptions) {
     if (isObservable(child)) {
       subscriptions.push(monitorObservableChild(node, child))
     } else {
-      node.appendChild(convertJsxChildToDom(child))
+      appendChild(node, convertJsxChildToDom(child))
     }
   }
 }
@@ -109,7 +117,7 @@ function monitorObservableChild (node, child) {
     nodeToReplace = newNode
   })
 
-  node.appendChild(nodeToReplace)
+  appendChild(node, nodeToReplace)
   return subscription
 }
 

diff --git a/packages/tko.utils/src/dom/virtualElements.js b/packages/tko.utils/src/dom/virtualElements.js
@@ -103,8 +103,11 @@ export function emptyNode (node) {
 export function setDomNodeChildren (node, childNodes) {
   if (!isStartComment(node)) { setRegularDomNodeChildren(node, childNodes) } else {
     emptyNode(node)
-    var endCommentNode = node.nextSibling // Must be the next sibling, as we just emptied the children
-    for (var i = 0, j = childNodes.length; i < j; i++) { endCommentNode.parentNode.insertBefore(childNodes[i], endCommentNode) }
+    const endCommentNode = node.nextSibling // Must be the next sibling, as we just emptied the children
+    const parentNode = endCommentNode.parentNode
+    for (var i = 0, j = childNodes.length; i < j; ++i) {
+      parentNode.insertBefore(childNodes[i], endCommentNode)
+    }
   }
 }