Skip to content

Commit

Permalink
make eventListeners dynamic (added if needed), and add advanced optim…
Browse files Browse the repository at this point in the history 
…izations ⚡
  • Loading branch information
@kbrsh
kbrsh committed Jun 1, 2017
1 parent 0093de7 commit aee07e3
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 44 deletions.
46 changes: 26 additions & 20 deletions dist/moon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,14 @@
var child = children[i];
var childProps = child.props.attrs;
var slotName = "";
var slotValue = null;

if ((slotName = childProps.slot) !== undefined) {
if (slots[slotName] === undefined) {
slotValue = slots[slotName];
if (slotValue === undefined) {
slots[slotName] = [child];
} else {
slots[slotName].push(child);
slotValue.push(child);
}
delete childProps.slot;
} else {
Expand Down Expand Up @@ -383,7 +385,10 @@
}
}
// Add all event listeners
addEventListeners(el, vnode);
var eventListeners = null;
if ((eventListeners = vnode.meta.eventListeners) !== undefined) {
addEventListeners(el, eventListeners);
}
}

// Setup Props
Expand All @@ -406,8 +411,9 @@
parent.appendChild(node);

// Check for Component
if (vnode.meta.component) {
createComponentFromVNode(node, vnode, vnode.meta.component);
var component = null;
if ((component = vnode.meta.component) !== undefined) {
createComponentFromVNode(node, vnode, component);
}
};

Expand All @@ -418,9 +424,10 @@
*/
var removeChild = function (node, parent) {
// Check for Component
if (node.__moon__) {
var componentInstance = null;
if ((componentInstance = node.__moon__) !== undefined) {
// Component was unmounted, destroy it here
node.__moon__.destroy();
componentInstance.destroy();
}

// Remove the Node
Expand All @@ -445,8 +452,9 @@
parent.replaceChild(newNode, oldNode);

// Check for Component
if (vnode.meta.component) {
createComponentFromVNode(newNode, vnode, vnode.meta.component);
var component = null;
if ((component = vnode.meta.component) !== undefined) {
createComponentFromVNode(newNode, vnode, component);
}
};

Expand Down Expand Up @@ -563,7 +571,7 @@
} else if ((component = components[tag]) !== undefined) {
// Resolve Component
if (component.options.functional === true) {
return createFunctionalComponent(attrs, children, components[tag]);
return createFunctionalComponent(attrs, children, component);
} else {
meta.component = component;
}
Expand Down Expand Up @@ -620,9 +628,7 @@
* @param {Object} eventListeners
* @param {Object} oldVNode
*/
var diffEventListeners = function (node, eventListeners, oldVNode) {
var oldEventListeners = oldVNode.meta.eventListeners;

var diffEventListeners = function (node, eventListeners, oldEventListeners) {
for (var type in eventListeners) {
var oldEventListener = oldEventListeners[type];
if (oldEventListener === undefined) {
Expand Down Expand Up @@ -736,7 +742,7 @@
* @return {Object} adjusted node only if it was replaced
*/
var hydrate = function (node, vnode, parent) {
var nodeName = node ? node.nodeName.toLowerCase() : null;
var nodeName = node !== null ? node.nodeName.toLowerCase() : null;

if (node === null) {
// No node, create one
Expand Down Expand Up @@ -819,10 +825,9 @@
* @param {Object} oldVNode
* @param {Object} vnode
* @param {Object} parent
* @param {Object} instance
* @return {Number} patch type
*/
var diff = function (oldVNode, vnode, parent, instance) {
var diff = function (oldVNode, vnode, parent) {
if (oldVNode === null) {
// No Node, append a node
appendChild(createNodeFromVNode(vnode), vnode, parent);
Expand Down Expand Up @@ -875,7 +880,7 @@
// Diff event listeners
var eventListeners = null;
if ((eventListeners = vnode.meta.eventListeners) !== undefined) {
diffEventListeners(_node, eventListeners, oldVNode);
diffEventListeners(_node, eventListeners, oldVNode.meta.eventListeners);
}

// Check if innerHTML was changed, don't diff children
Expand Down Expand Up @@ -2088,11 +2093,12 @@
if (vnode.type !== old.type) {
// Root Element Changed During Diff
// Replace Root Element
replaceChild(old.meta.el, createNodeFromVNode(vnode), parent);
var newRoot = createNodeFromVNode(vnode);
replaceChild(old.meta.el, newRoot, vnode, parent);

// Update Bound Instance
this.$el = vnode.meta.el;
this.$el.__moon__ = this;
newRoot.__moon__ = this;
this.$el = newRoot;
} else {
// Diff
diff(old, vnode, parent);
Expand Down
2 changes: 1 addition & 1 deletion dist/moon.min.js
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions src/instance/methods.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,11 +271,12 @@ Moon.prototype.patch = function(old, vnode, parent) {
if(vnode.type !== old.type) {
// Root Element Changed During Diff
// Replace Root Element
replaceChild(old.meta.el, createNodeFromVNode(vnode), parent);
const newRoot = createNodeFromVNode(vnode);
replaceChild(old.meta.el, newRoot, vnode, parent);

// Update Bound Instance
this.$el = vnode.meta.el;
this.$el.__moon__ = this;
newRoot.__moon__ = this;
this.$el = newRoot;
} else {
// Diff
diff(old, vnode, parent);
Expand Down
20 changes: 13 additions & 7 deletions src/util/dom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,10 @@ const createNodeFromVNode = function(vnode) {
}
}
// Add all event listeners
addEventListeners(el, vnode);
let eventListeners = null;
if((eventListeners = vnode.meta.eventListeners) !== undefined) {
addEventListeners(el, eventListeners);
}
}

// Setup Props
Expand All @@ -89,8 +92,9 @@ const appendChild = function(node, vnode, parent) {
parent.appendChild(node);

// Check for Component
if(vnode.meta.component) {
createComponentFromVNode(node, vnode, vnode.meta.component);
let component = null;
if((component = vnode.meta.component) !== undefined) {
createComponentFromVNode(node, vnode, component);
}
}

Expand All @@ -101,9 +105,10 @@ const appendChild = function(node, vnode, parent) {
*/
const removeChild = function(node, parent) {
// Check for Component
if(node.__moon__) {
let componentInstance = null;
if((componentInstance = node.__moon__) !== undefined) {
// Component was unmounted, destroy it here
node.__moon__.destroy();
componentInstance.destroy();
}

// Remove the Node
Expand All @@ -128,7 +133,8 @@ const replaceChild = function(oldNode, newNode, vnode, parent) {
parent.replaceChild(newNode, oldNode);

// Check for Component
if(vnode.meta.component) {
createComponentFromVNode(newNode, vnode, vnode.meta.component);
let component = null;
if((component = vnode.meta.component) !== undefined) {
createComponentFromVNode(newNode, vnode, component);
}
}
6 changes: 4 additions & 2 deletions src/util/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,14 @@ const getSlots = function(children) {
const child = children[i];
const childProps = child.props.attrs;
let slotName = "";
let slotValue = null;

if((slotName = childProps.slot) !== undefined) {
if(slots[slotName] === undefined) {
slotValue = slots[slotName];
if(slotValue === undefined) {
slots[slotName] = [child];
} else {
slots[slotName].push(child);
slotValue.push(child);
}
delete childProps.slot;
} else {
Expand Down
13 changes: 5 additions & 8 deletions src/util/vdom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const h = function(tag, attrs, meta, children) {
} else if((component = components[tag]) !== undefined) {
// Resolve Component
if(component.options.functional === true) {
return createFunctionalComponent(attrs, children, components[tag]);
return createFunctionalComponent(attrs, children, component);
} else {
meta.component = component;
}
Expand Down Expand Up @@ -168,9 +168,7 @@ const createComponentFromVNode = function(node, vnode, component) {
* @param {Object} eventListeners
* @param {Object} oldVNode
*/
const diffEventListeners = function(node, eventListeners, oldVNode) {
const oldEventListeners = oldVNode.meta.eventListeners;

const diffEventListeners = function(node, eventListeners, oldEventListeners) {
for(const type in eventListeners) {
const oldEventListener = oldEventListeners[type];
if(oldEventListener === undefined) {
Expand Down Expand Up @@ -284,7 +282,7 @@ const diffComponent = function(node, vnode) {
* @return {Object} adjusted node only if it was replaced
*/
const hydrate = function(node, vnode, parent) {
let nodeName = node ? node.nodeName.toLowerCase() : null;
const nodeName = node !== null ? node.nodeName.toLowerCase() : null;

if(node === null) {
// No node, create one
Expand Down Expand Up @@ -367,10 +365,9 @@ const hydrate = function(node, vnode, parent) {
* @param {Object} oldVNode
* @param {Object} vnode
* @param {Object} parent
* @param {Object} instance
* @return {Number} patch type
*/
const diff = function(oldVNode, vnode, parent, instance) {
const diff = function(oldVNode, vnode, parent) {
if(oldVNode === null) {
// No Node, append a node
appendChild(createNodeFromVNode(vnode), vnode, parent);
Expand Down Expand Up @@ -424,7 +421,7 @@ const diff = function(oldVNode, vnode, parent, instance) {
// Diff event listeners
let eventListeners = null;
if((eventListeners = vnode.meta.eventListeners) !== undefined) {
diffEventListeners(node, eventListeners, oldVNode);
diffEventListeners(node, eventListeners, oldVNode.meta.eventListeners);
}

// Check if innerHTML was changed, don't diff children
Expand Down
6 changes: 3 additions & 3 deletions test/js/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -641,7 +641,7 @@ describe('Custom Render', function() {
var renderApp = new Moon({
el: "#render",
render: function(h) {
return h('div', {attrs: {id: "render"}}, {shouldRender: true, eventListeners: {}}, [h("#text", {shouldRender: true, eventListeners: {}}, this.get('msg'))])
return h('div', {attrs: {id: "render"}}, {shouldRender: true}, [h("#text", {shouldRender: true}, this.get('msg'))])
},
data: {
msg: "Hello Moon!"
Expand All @@ -666,15 +666,15 @@ describe('Functional Component', function() {
functional: true,
props: ['someprop'],
render: function(h, ctx) {
return h("h1", functionalComponentDivProps, {shouldRender: true, eventListeners: {}}, [h("#text", {shouldRender: true, eventListeners: {}}, ctx.data.someprop)]);
return h("h1", functionalComponentDivProps, {shouldRender: true}, [h("#text", {shouldRender: true}, ctx.data.someprop)]);
}
});
var functionalComponentDivSlotProps = {attrs: {}};
functionalComponentDivSlotProps.attrs["class"] = "functionalSlotComponent";
Moon.component('slot-functional-component', {
functional: true,
render: function(h, ctx) {
return h("div", functionalComponentDivSlotProps, {shouldRender: true, eventListeners: {}}, [h("h1", {}, {shouldRender: true, eventListeners: {}}, ctx.slots['default']), h("h1", {}, {shouldRender: true, eventListeners: {}}, ctx.slots.named)]);
return h("div", functionalComponentDivSlotProps, {shouldRender: true}, [h("h1", {}, {shouldRender: true}, ctx.slots['default']), h("h1", {}, {shouldRender: true}, ctx.slots.named)]);
}
});
var functionalApp = new Moon({
Expand Down

0 comments on commit aee07e3

Please sign in to comment.