From 56530fc966f66167b09ebf58149e1eabda94a0e8 Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Sat, 22 Aug 2020 16:15:45 -0700 Subject: [PATCH] Ignite properties now patch lists to capture push/pop events so that when used in a list template the whole list doesn't have to be rerendered. Also cleaned up some code and moved things around. --- src/ignite-element.js | 5 +- src/ignite-html.js | 128 +++++++++++++++++++++++++++++++++++++---- src/ignite-template.js | 40 ++++++++++--- src/sheet.js | 8 ++- 4 files changed, 154 insertions(+), 27 deletions(-) diff --git a/src/ignite-element.js b/src/ignite-element.js index 43b48ab..919af99 100644 --- a/src/ignite-element.js +++ b/src/ignite-element.js @@ -38,9 +38,8 @@ class IgniteElement extends HTMLElement { var keys = Object.keys(props); for (var i = 0; i < keys.length; i++) { - var prop = new IgniteProperty(); + let prop = new IgniteProperty(props[keys[i]]); this[`_${keys[i]}`] = prop; - prop._value = props[keys[i]]; ((propName) => { Object.defineProperty(this, propName, { @@ -56,8 +55,6 @@ class IgniteElement extends HTMLElement { this[`_${propName}`].value = value; } }); - - })(keys[i]); } } diff --git a/src/ignite-html.js b/src/ignite-html.js index bb69e61..064ab8d 100644 --- a/src/ignite-html.js +++ b/src/ignite-html.js @@ -3,9 +3,14 @@ * can be used to invoke call back functions when the value of the property changes. */ class IgniteProperty { - constructor() { - this.callbacks = []; - this._value = null; + constructor(val) { + this.onChangeCallbacks = []; + this.onPushCallbacks = []; + this.onPopCallbacks = []; + this._value = val; + + //Attempt to patch the value if it's a list. + this.patchListValue(); } get value() { @@ -16,15 +21,64 @@ class IgniteProperty { var old = this._value; this._value = val; + //Attempt to patch the value if it's a list. + this.patchListValue(); + //Invoke any callbacks letting them know the value changed. - for (var i = 0; i < this.callbacks.length; i++) { - this.callbacks[i].invoke(old, val); + this.invokeOnChange(old, val); + } + + patchListValue() { + if (Array.isArray(this._value)) { + let prop = this; + + this._value.push = function () { + var len = Array.prototype.push.apply(this, arguments); + prop.invokeOnPush(); + return len; + }; + + this._value.pop = function () { + var len = Array.prototype.pop.apply(this, arguments); + prop.invokeOnPop(); + return len; + } } } - attach(onChange) { - var callback = new IgnitePropertyCallback(this, onChange); - this.callbacks.push(callback); + invokeOnChange(oldValue, newValue) { + for (var i = 0; i < this.onChangeCallbacks.length; i++) { + this.onChangeCallbacks[i].invoke(oldValue, newValue); + } + } + + invokeOnPush() { + for (var i = 0; i < this.onPushCallbacks.length; i++) { + this.onPushCallbacks[i].invoke(null, this._value); + } + } + + invokeOnPop() { + for (var i = 0; i < this.onPopCallbacks.length; i++) { + this.onPopCallbacks[i].invoke(null, this._value); + } + } + + attachOnChange(onChange) { + var callback = new IgnitePropertyOnChangeCallback(this, onChange); + this.onChangeCallbacks.push(callback); + return callback; + } + + attachOnPush(onPush) { + var callback = new IgnitePropertyOnPushCallback(this, onPush); + this.onPushCallbacks.push(callback); + return callback; + } + + attachOnPop(onPop) { + var callback = new IgnitePropertyOnPopCallback(this, onPop); + this.onPopCallbacks.push(callback); return callback; } } @@ -38,10 +92,10 @@ IgniteProperty.prototype.toString = function () { } /** - * The outline of a ignite property callback that allows + * The outline of a ignite property onchange callback that allows * disconnecting of callbacks on demand when they are no longer needed. */ -class IgnitePropertyCallback { +class IgnitePropertyOnChangeCallback { constructor(property, callback) { this.callback = callback; this.property = property; @@ -57,7 +111,59 @@ class IgnitePropertyCallback { this.callback = null; if (this.property) { - this.property.callbacks = this.property.callbacks.filter(callback => callback != this); + this.property.onChangeCallbacks = this.property.onChangeCallbacks.filter(callback => callback != this); + this.property = null; + } + } +} + +/** + * The outline of a ignite property onpush callback that allows + * disconnecting of callbacks on demand when they are no longer needed. + */ +class IgnitePropertyOnPushCallback { + constructor(property, callback) { + this.callback = callback; + this.property = property; + } + + invoke(oldValue, newValue) { + if (this.callback) { + this.callback(oldValue, newValue); + } + } + + disconnect() { + this.callback = null; + + if (this.property) { + this.property.onPushCallbacks = this.property.onPushCallbacks.filter(callback => callback != this); + this.property = null; + } + } +} + +/** + * The outline of a ignite property onpop callback that allows + * disconnecting of callbacks on demand when they are no longer needed. + */ +class IgnitePropertyOnPopCallback { + constructor(property, callback) { + this.callback = callback; + this.property = property; + } + + invoke(oldValue, newValue) { + if (this.callback) { + this.callback(oldValue, newValue); + } + } + + disconnect() { + this.callback = null; + + if (this.property) { + this.property.onPopCallbacks = this.property.onPopCallbacks.filter(callback => callback != this); this.property = null; } } diff --git a/src/ignite-template.js b/src/ignite-template.js index 6a02d57..32e6451 100644 --- a/src/ignite-template.js +++ b/src/ignite-template.js @@ -39,7 +39,7 @@ class IgniteTemplate { class(...items) { for (var i = 0; i < items.length; i++) { if (items[i] instanceof IgniteProperty) { - this.callbacks.push(items[i].attach((oldValue, newValue) => this.onClassChanged(oldValue, newValue))); + this.callbacks.push(items[i].attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue))); this.classes.push(items[i].value); } else { this.classes.push(items[i]); @@ -56,7 +56,7 @@ class IgniteTemplate { */ attribute(name, value) { if (value instanceof IgniteProperty) { - this.callbacks.push(value.attach((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name))); + this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name))); this.attributes[name] = value.value; } else { this.attributes[name] = value; @@ -72,7 +72,7 @@ class IgniteTemplate { */ property(name, value) { if (value instanceof IgniteProperty) { - this.callbacks.push(value.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name))); + this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name))); this.properties[name] = value.value; } else { this.properties[name] = value; @@ -110,7 +110,7 @@ class IgniteTemplate { */ ref(item) { if (item instanceof IgniteProperty) { - this.callbacks.push(item.attach((oldValue, newValue) => this.onRefChanged(oldValue, newValue, item))); + this.callbacks.push(item.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, item))); this.refs.push((element) => item.value = element); } else { this.refs.push(item); @@ -130,7 +130,7 @@ class IgniteTemplate { } if (func instanceof IgniteProperty) { - this.callbacks.push(func.attach((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName))); + this.callbacks.push(func.attachOnChange((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName))); this.events[eventName].push(func.value); } else { this.events[eventName].push(func); @@ -153,7 +153,7 @@ class IgniteTemplate { } if (func instanceof IgniteProperty) { - this.callbacks.push(func.attach((oldValue, newValue) => { + this.callbacks.push(func.attachOnChange((oldValue, newValue) => { //Create a new wrapped function to check for the enter key being pressed. var wrapped = (e) => { if (e.key === 'Enter') { @@ -201,7 +201,7 @@ class IgniteTemplate { */ style(name, value, priority = null) { if (value instanceof IgniteProperty) { - this.callbacks.push(value.attach((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name))); + this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onCssValueChanged(oldValue, newValue, name))); this.styles[name] = { name: name, value: value.value, priority: priority }; } else { this.styles[name] = { name: name, value: value, priority: priority }; @@ -480,7 +480,7 @@ class html extends IgniteTemplate { super([]); if (code instanceof IgniteProperty) { - this.callbacks.push(code.attach((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue))); + this.callbacks.push(code.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue))); this.code = code.value; } else { this.code = code; @@ -539,7 +539,9 @@ class list extends IgniteTemplate { this.tagName = "shadow list"; if (list instanceof IgniteProperty) { - this.callbacks.push(list.attach((oldValue, newValue) => this.onListChanged(oldValue, newValue))); + this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); + this.callbacks.push(list.attachOnPush((oldValue, newValue) => this.onListPush(oldValue, newValue))); + this.callbacks.push(list.attachOnPop((oldValue, newValue) => this.onListPop(oldValue, newValue))); this.list = list.value; } else { @@ -608,6 +610,26 @@ class list extends IgniteTemplate { IgniteRenderingContext.leave(); } + + onListPush(oldValue, newValue) { + IgniteRenderingContext.enter(); + + try { + var template = this.forEach(this.list[this.list.length - 1]); + template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling); + + this.children.push(template); + this.elements.push(template.element); + } catch { } + + IgniteRenderingContext.leave(); + } + + onListPop(oldValue, newValue) { + this.children[this.children.length - 1].deconstruct(); + this.children.pop(); + this.elements.pop(); + } } class slot extends IgniteTemplate { diff --git a/src/sheet.js b/src/sheet.js index 1b7c4c4..56d7410 100644 --- a/src/sheet.js +++ b/src/sheet.js @@ -35,9 +35,11 @@ class Sheet extends IgniteElement { new div( new input().attribute("type", "text").onEnter(this.enter), new html("

this is before

"), - new list(this.items, (item) => { - return new a(new html(`

${item}

`)).attribute("href", this.href) - }), + new div( + new list(this.items, (item) => { + return new a(new html(`

${item}

`)).attribute("href", this.href) + }) + ), new html("

this is after

"), new html("

---- begin sheet's slot ----

"), new slot(this),