From f4ac568976f743e1f0534a23d19e536a85966c05 Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Sun, 23 Aug 2020 11:50:31 -0700 Subject: [PATCH] Cleaned up code and fixed an issue with the gulp file where dev was still minifying js. Added reflected properties support and fixed a few other issues. --- gulpfile.js | 8 --- run-dev.bat | 1 + src/ignite-element.js | 2 +- src/ignite-html.js | 53 ++++++++++++------ src/ignite-template.js | 124 +++++++++++++++++++++++++++++++++++------ src/main-app.js | 5 +- src/sheet.js | 3 +- 7 files changed, 151 insertions(+), 45 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index afd5e82..7185fa6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -79,14 +79,6 @@ function jsTask() { 'src/**/*.js', 'src/*.js']) .pipe(sourcemaps.init({ loadMaps: true })) - .pipe(minify({ - mangle: false, - compress: true, - noSource: true, - ext: { - min: '.js' - } - })) .pipe(sourcemaps.write()) .pipe(lineec()) .pipe(gulp.dest(`${outputDirectory}/`)); diff --git a/run-dev.bat b/run-dev.bat index be4e0ea..49744d8 100644 --- a/run-dev.bat +++ b/run-dev.bat @@ -1,3 +1,4 @@ +SET BUILD_OPTIMIZE=false SET BUILD_OUTPUT_DIR=dev call gulp run pause \ No newline at end of file diff --git a/src/ignite-element.js b/src/ignite-element.js index 919af99..2f3ed58 100644 --- a/src/ignite-element.js +++ b/src/ignite-element.js @@ -106,7 +106,7 @@ class IgniteElement extends HTMLElement { if (renderTemplate !== this.template && renderTemplate) { this.template.child(renderTemplate); } else if (!renderTemplate) { - console.warn(`RenderTemplate was null for element: ${this.tagName}, is render() returning null or not returning anything?`); + throw `RenderTemplate was null for template: ${this.tagName}. Is render() returning null or not returning a template?`; } //Construct our template. diff --git a/src/ignite-html.js b/src/ignite-html.js index 483d0f8..855f29f 100644 --- a/src/ignite-html.js +++ b/src/ignite-html.js @@ -7,11 +7,13 @@ class IgniteProperty { this.onChangeCallbacks = []; this.onPushCallbacks = []; this.onPopCallbacks = []; - this.callbacks = []; + this.arrayCallbacks = []; + this.reflected = []; this._value = val; + this.ignoreValueChange = false; //Attempt to patch the value if it's a list. - this.patchList(); + this.patchArray(); } get value() { @@ -19,21 +21,39 @@ class IgniteProperty { } set value(val) { + this.setValue(val, true); + } + + setValue(val, reflect) { + //If the ignore value change flag is set exit. + if (this.ignoreValueChange) { + return; + } + var old = this._value; this._value = val; - //Disconnect any existing callbacks - this.callbacks.forEach(callback => callback.disconnect()); - this.callbacks = []; - - //Attempt to patch the value if it's a list. - this.patchList(); + //Attempt to patch the value if it's an array. + this.patchArray(); //Invoke any callbacks letting them know the value changed. this.invokeOnChange(old, val); + + if (reflect) { + this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties. + this.reflected.forEach(reflect => reflect.value = val); + this.ignoreValueChange = false; + } } - patchList() { + patchArray() { + //Disconnect any existing array callbacks + if (this.arrayCallbacks.length > 0) { + this.arrayCallbacks.forEach(callback => callback.disconnect()); + this.arrayCallbacks = []; + } + + //If our value is an array and it hasn't been patched, then patch it. if (Array.isArray(this._value) && this._value.onPushCallbacks == undefined) { this._value.onPushCallbacks = []; this._value.onPopCallbacks = []; @@ -70,11 +90,12 @@ class IgniteProperty { this.onPopCallbacks = this.onPopCallbacks.filter(pop => pop != callback); } - this.callbacks.push(this._value.attachOnPush(() => this.invokeOnPush())); - this.callbacks.push(this._value.attachOnPop(() => this.invokeOnPop())); + this.arrayCallbacks.push(this._value.attachOnPush(() => this.invokeOnPush())); + this.arrayCallbacks.push(this._value.attachOnPop(() => this.invokeOnPop())); } else if (Array.isArray(this._value) && this._value.onPushCallbacks) { - this.callbacks.push(this._value.attachOnPush(() => this.invokeOnPush())); - this.callbacks.push(this._value.attachOnPop(() => this.invokeOnPop())); + //This array has already been patched but attach to it so we get callbacks. + this.arrayCallbacks.push(this._value.attachOnPush(() => this.invokeOnPush())); + this.arrayCallbacks.push(this._value.attachOnPop(() => this.invokeOnPop())); } } @@ -146,8 +167,6 @@ class IgniteCallback { } invoke(...params) { - console.log("Invoke with params:", params); - if (this.callback) { this.callback(...params); } @@ -195,5 +214,7 @@ class IgniteRenderingContext { window.IgniteRenderingContext = IgniteRenderingContext; export { - IgniteProperty + IgniteProperty, + IgniteRenderingContext, + IgniteCallback }; \ No newline at end of file diff --git a/src/ignite-template.js b/src/ignite-template.js index e644151..9d0c9a9 100644 --- a/src/ignite-template.js +++ b/src/ignite-template.js @@ -1,4 +1,5 @@ import { IgniteProperty } from './ignite-html.js'; +import { IgniteElement } from './ignite-element.js'; class IgniteTemplate { constructor(items) { @@ -25,7 +26,7 @@ class IgniteTemplate { } else if (items[i] instanceof IgniteTemplate || items[i].prototype instanceof IgniteTemplate) { this.children.push(items[i]); } else { - console.warn("Attempted to add a child for template: ", this, " which is not supported. Unsupported child element: ", items[i]); + throw `Attempted to add a child for template: ${this.tagName} which is not supported. Child: ${items[i]}`; } } } @@ -70,12 +71,16 @@ class IgniteTemplate { * @param {string} name * @param {any} value */ - property(name, value) { + property(name, value, reflect = false) { + if (this.properties[name]) { + throw `Attempted to set a property twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`; + } + if (value instanceof IgniteProperty) { this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name))); - this.properties[name] = value.value; + this.properties[name] = { value: value.value, reflect: (reflect == true ? value : null) }; } else { - this.properties[name] = value; + this.properties[name] = { value: value, reflect: null }; } return this; @@ -97,7 +102,7 @@ class IgniteTemplate { } else if (items[i] instanceof IgniteTemplate || items[i].prototype instanceof IgniteTemplate) { this.children.push(items[i]); } else { - console.warn("Attempted to add a child for template: ", this, " which is not supported. Unsupported child element: ", items[i]); + throw `Attempted to add a child for template: ${this.tagName} which is not supported. Child: ${items[i]}`; } } @@ -139,12 +144,20 @@ class IgniteTemplate { return this; } + /** + * Adds a on click event handler to this template. + * @param {Any} func + */ onClick(func) { this.on("click", func); return this; } + /** + * Adds a on enter key press event handler to this template. + * @param {Any} func + */ onEnter(func) { var eventName = "keydown"; @@ -226,8 +239,11 @@ class IgniteTemplate { if (!this.element) { this.element = window.document.createElement(this.tagName); - //Pass back our template to the element we are creating. - this.element.template = this; + //Pass back our template to the element we are creating if it's not a ignite element, since + //it will have it's own template automatically. + if (!(this.element instanceof IgniteElement)) { + this.element.template = this; + } //If the element has a onDisconnected function, attach to it //(This way if a custom element is removed we can deconstruct and cleanup) @@ -235,7 +251,7 @@ class IgniteTemplate { this.element.onDisconnected = () => this.deconstruct(); } - //Invoke any refs we have + //Invoke any refs we have and pass back the element reference. this.refs.forEach((ref) => ref(this.element)); } @@ -274,7 +290,11 @@ class IgniteTemplate { //Set the properties on this element var keys = Object.keys(this.properties); for (var i = 0; i < keys.length; i++) { - this.element[keys[i]] = this.properties[keys[i]]; + this.element[keys[i]] = this.properties[keys[i]].value; + + if (this.properties[keys[i]].reflect != null) { + this.element[keys[i]].reflected.push(this.properties[keys[i]].reflect); + } } //Construct the children under this element @@ -297,8 +317,6 @@ class IgniteTemplate { * there are no memory leaks. */ deconstruct() { - console.log(`Deconstructing ${this.tagName}`); - //Remove and disconnect all events if (this.element && this.events) { var keys = Object.keys(this.events); @@ -390,10 +408,12 @@ class IgniteTemplate { */ onPropertyChanged(oldValue, newValue, propertyName) { if (this.element) { - this.element[propertyName] = newValue; + //Use the set value function and don't reflect the change because it came from above which + //would be the reflected property, this reduces some functions being called twice that don't need to be. + this.element[`_${propertyName}`].setValue(newValue, false); } - this.properties[propertyName] = newValue; + this.properties[propertyName].value = newValue; } /** @@ -475,6 +495,70 @@ class input extends IgniteTemplate { } } +class h1 extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "h1"; + } +} + +class h2 extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "h2"; + } +} + +class h3 extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "h3"; + } +} + +class h4 extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "h4"; + } +} + +class h5 extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "h5"; + } +} + +class p extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "p"; + } +} + +class span extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "span"; + } +} + +class i extends IgniteTemplate { + constructor(...items) { + super(items); + + this.tagName = "i"; + } +} + class html extends IgniteTemplate { constructor(code) { super([]); @@ -600,15 +684,15 @@ class list extends IgniteTemplate { } onListChanged(oldValue, newValue) { - console.log("On List changed:", newValue); - this.list = newValue; IgniteRenderingContext.enter(); try { this.construct(null); //The list changed, reconstruct this template. - } catch (error) { console.error(error); } + } catch (error) { + console.error(error); + } IgniteRenderingContext.leave(); } @@ -674,5 +758,13 @@ export { list, a, input, + h1, + h2, + h3, + h4, + h5, + p, + span, + i, slot }; \ No newline at end of file diff --git a/src/main-app.js b/src/main-app.js index 0b629e5..1a0cde4 100644 --- a/src/main-app.js +++ b/src/main-app.js @@ -20,13 +20,12 @@ class MainApp extends IgniteElement { return this.template .child( new Sheet() - .property("name", this.name) - .property("items", this.items) + .property("name", this.name, true) + .property("items", this.items, true) .ref(this.sheet) .class(this.sheetClass) .child(new html(`

Im a child for sheet!

`)) ) - .child(new Sheet().property("items", this.items)) .child( new div( new html(`

This is a slot!`), diff --git a/src/sheet.js b/src/sheet.js index 56d7410..e12e500 100644 --- a/src/sheet.js +++ b/src/sheet.js @@ -1,5 +1,5 @@ import { IgniteElement } from './ignite-element.js'; -import { IgniteTemplate, div, html, list, a, slot, input } from './ignite-template.js'; +import { IgniteTemplate, div, html, list, a, slot, input, h1 } from './ignite-template.js'; class Sheet extends IgniteElement { constructor() { @@ -34,6 +34,7 @@ class Sheet extends IgniteElement { .child( new div( new input().attribute("type", "text").onEnter(this.enter), + new h1(this.name), new html("

this is before

"), new div( new list(this.items, (item) => {