updated: fix if conditions in slots

package.json

@@ -51,7 +51,7 @@
     "rollup": "^1.27.14",
     "rollup-plugin-alias": "^2.2.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "sinon": "^8.0.1",
+    "sinon": "^8.0.2",
     "sinon-chai": "^3.4.0",
     "typescript": "^3.7.4"
   },

src/bindings/if.js

@@ -5,16 +5,12 @@ export const IfBinding = Object.seal({
   // dynamic binding properties
   // node: null,
   // evaluate: null,
-  // parent: null,
   // isTemplateTag: false,
   // placeholder: null,
   // template: null,
 
   // API methods
   mount(scope, parentScope) {
-    this.parent.insertBefore(this.placeholder, this.node)
-    this.parent.removeChild(this.node)
-
     return this.update(scope, parentScope)
   },
   update(scope, parentScope) {
@@ -24,8 +20,7 @@ export const IfBinding = Object.seal({
     const mount = () => {
       const pristine = this.node.cloneNode()
 
-      this.parent.insertBefore(pristine, this.placeholder)
-
+      this.placeholder.parentNode.insertBefore(pristine, this.placeholder)
       this.template = this.template.clone()
       this.template.mount(pristine, scope, parentScope)
     }
@@ -53,12 +48,17 @@ export const IfBinding = Object.seal({
 })
 
 export default function create(node, { evaluate, template }) {
+  const parent = node.parentNode
+  const placeholder = document.createTextNode('')
+
+  parent.insertBefore(placeholder, node)
+  parent.removeChild(node)
+
   return {
     ...IfBinding,
     node,
     evaluate,
-    parent: node.parentNode,
-    placeholder: document.createTextNode(''),
+    placeholder,
     template: template.createDOM(node)
   }
 }

test/bindings/slot.spec.js

@@ -309,4 +309,41 @@ describe('slot bindings', () => {
 
     el.unmount()
   })
+
+  it('Nested if condition work in slots', () => {
+    const target = document.createElement('div')
+    const el = template('<div><slot expr0/></div>', [{
+      type: bindingTypes.SLOT,
+      selector: '[expr0]',
+      name: 'default'
+    }])
+    const defaultSlot = {
+      'id': 'default',
+      'html': '<p expr2="expr2"></p>',
+
+      'bindings': [{
+        'type': bindingTypes.IF,
+
+        'evaluate': function(scope) {
+          return scope.isVisible
+        },
+
+        'redundantAttribute': 'expr2',
+        'selector': '[expr2]',
+        'template': template('hello', [])
+      }]
+    }
+
+    el.mount(target, {
+      slots: [defaultSlot]
+    }, { isVisible: false })
+
+    expect(target.querySelector('p')).to.be.not.ok
+
+    el.update({
+      slots: [defaultSlot]
+    }, { isVisible: true })
+
+    expect(target.querySelector('p')).to.be.ok
+  })
 })