From d032451b87e58ae1492fc4afba202a0151e19741 Mon Sep 17 00:00:00 2001 From: Cris Ward Date: Sun, 2 Feb 2020 20:20:24 +0000 Subject: [PATCH] moved slotting to compile step --- src/compiler/compile/render_dom/index.ts | 62 ++++++++++++++++++++++++ src/runtime/internal/Component.ts | 45 ----------------- 2 files changed, 62 insertions(+), 45 deletions(-) diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index cf629e851a..8aaf68dc45 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -484,6 +484,68 @@ export default function dom( }); } + if(lightDom){ + declaration.body.body.push({ + type: 'MethodDefinition', + kind: 'method', + static: false, + computed: false, + key: { type: 'Identifier', name: '_copycontent' }, + value: x`function() { + if(this.children){ + this._content = Array.from(this.childNodes) + while (this.firstChild) { + this.removeChild(this.firstChild) + } + } + }` as FunctionExpression + }); + + declaration.body.body.push({ + type: 'MethodDefinition', + kind: 'method', + static: false, + computed: false, + key: { type: 'Identifier', name: '_slotcontent' }, + value: x`function() { + if(this.slotting) return; // prevent running in parallel + this.slotting = true; + if(this._content){ + let namedslots = Array.from(this.querySelectorAll("slot[name]")) + let defaultslot = this.querySelector("slot:not([name])") + let named = {} + if(!namedslots.length && !defaultslot) return(this.slotting=false); + let slotted = [] + this._content.filter((node)=> node.slot ).forEach((node)=> named[node.slot] = node ) + namedslots.forEach(slot =>{ + this._content.forEach(node =>{ //append all named slots + if(named[node.slot] && slot.getAttribute("name") == node.slot){ + if(!slot.hasAttribute("hasupdated")){ + slot.appendChild(named[node.slot]); + slot.setAttribute("hasupdated","") + } + slotted.push(node) + } + }) + }) + if(!defaultslot) return(this.slotting=false); + // put what evers left info default slot + this._content + .filter(node => slotted.indexOf(node)==-1) + .forEach(node => { + if(!defaultslot.hasAttribute("hasupdated")){ + + defaultslot.appendChild(node) + } + }) + defaultslot.setAttribute("hasupdated","") + } + this.slotting = false + } + }` as FunctionExpression + }); + } + declaration.body.body.push(...accessors); body.push(declaration); diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 2bb574bae6..9426b6a5ec 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -179,51 +179,6 @@ if (typeof HTMLElement === 'function') { } } - _copycontent(){ - if(this.children){ - this._content = Array.from(this.childNodes) - while (this.firstChild) { - this.removeChild(this.firstChild) - } - } - } - - _slotcontent(){ - if(this.slotting) return; - this.slotting = true; - if(this._content){ - let namedslots = Array.from(this.querySelectorAll("slot[name]")) - let defaultslot = this.querySelector("slot:not([name])") - let named = {} - if(!namedslots.length && !defaultslot) return(this.slotting=false); - let slotted = [] - this._content.filter((node : HTMLElement)=> node.slot ).forEach((node : HTMLElement)=> named[node.slot] = node ) - namedslots.forEach(slot =>{ - this._content.forEach(node =>{ //append all named slots - if(named[node.slot] && slot.getAttribute("name")==node.slot){ - if(!slot.hasAttribute("hasupdated")){ - slot.appendChild(named[node.slot]); - slot.setAttribute("hasupdated","") - } - slotted.push(node) - } - }) - }) - if(!defaultslot) return(this.slotting=false); - // put what evers left info default slot - this._content - .filter(node => slotted.indexOf(node)==-1) - .forEach(node => { - if(!defaultslot.hasAttribute("hasupdated")){ - - defaultslot.appendChild(node) - } - }) - defaultslot.setAttribute("hasupdated","") - } - this.slotting = false - } - attributeChangedCallback(attr, _oldValue, newValue) { this[attr] = newValue; }