Renamed IgniteRenderingContext to IgniteRendering. Added a new IgniteHtml class which contains function to register elements for rendering and a global render function to start the rendering process. Changed elements css style class name to be more meaningful.

2022-08-26 08:34:20 -07:00
parent 9af84da6a0
commit fca9af5f73
3 changed files with 135 additions and 99 deletions
--- a/ignite-element.js
+++ b/ignite-element.js
@@ -1,4 +1,4 @@
-import { IgniteProperty, IgniteCallback, IgniteRenderingContext } from './ignite-html.js';
+import { IgniteProperty, IgniteCallback, IgniteRendering } from './ignite-html.js';
 import { IgniteTemplate } from './ignite-template.js';

 /**
@@ -73,9 +73,9 @@ class IgniteElement extends HTMLElement {

        //Init the element before connected callback is fired
        //Create a new rendering context so the init method can access properties correctly.
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        this.init();
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
    }

    /**
@@ -170,9 +170,9 @@ class IgniteElement extends HTMLElement {
    getProperties() {
        var ret = {};
        var props = this.properties;
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        Object.keys(props).forEach(name => ret[name] = this[name]);
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return ret;
    }

@@ -204,7 +204,7 @@ class IgniteElement extends HTMLElement {
            Object.keys(props).forEach(name => {
                var prop = (props[name] instanceof IgniteProperty ? props[name] : new IgniteProperty(props[name]));
                Object.defineProperty(this, name, {
-                    get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); },
+                    get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
                    set: (value) => { prop.value = value; }
                });
            });
@@ -239,9 +239,9 @@ class IgniteElement extends HTMLElement {

        //See if a styling sheet has been created for this element if it's needed.
        if (this.styles !== null && this.styles !== "") {
-            if (document.getElementsByClassName(`_${this.tagName}_styling_`).length == 0) {
+            if (document.getElementsByClassName(`ignite-html-${this.tagName.toLowerCase()}-css`).length == 0) {
                var styleEl = document.createElement("style");
-                styleEl.classList.add(`_${this.tagName}_styling_`);
+                styleEl.classList.add(`ignite-html-${this.tagName.toLowerCase()}-css`);
                styleEl.innerHTML = this.styles;
                document.body.prepend(styleEl);
            }
@@ -259,7 +259,7 @@ class IgniteElement extends HTMLElement {
        this.childNodes.forEach((item) => this.elements.push(item));

        //Enter a rendering context so properties don't expose their values until we are done.
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        //Make sure the render template is our template, if not, add it as a child.
        var renderTemplate = this.render();
@@ -277,10 +277,10 @@ class IgniteElement extends HTMLElement {
        }

        //Leave the rendering context.
-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();

        //Let the rendering context know this element is ready.
-        IgniteRenderingContext.ready(this.readyCallback);
+        IgniteRendering.ready(this.readyCallback);
    }

    /**
--- a/ignite-html.js
+++ b/ignite-html.js
@@ -218,57 +218,57 @@ class IgniteProperty {

    invokeOnChange(oldValue, newValue, reflect = true) {
        //Enter a new rendering context since this event may contain code that expects a new context.
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        if (reflect) {
            this.reflect();
        }
        this.onChangeCallbacks.forEach(callback => callback.invoke(oldValue, newValue));
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
    }

    invokeOnPush(items, reflect = true) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        if (reflect) {
            this.reflect();
        }
        this.onPushCallbacks.forEach(callback => callback.invoke(this._value, items));
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
    }

    invokeOnPop(reflect = true) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        if (reflect) {
            this.reflect();
        }
        this.onPopCallbacks.forEach(callback => callback.invoke(this._value));
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
    }

    invokeOnShift(reflect = true) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        if (reflect) {
            this.reflect();
        }
        this.onShiftCallbacks.forEach(callback => callback.invoke(this._value));
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
    }

    invokeOnUnshift(items, reflect = true) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        if (reflect) {
            this.reflect();
        }
        this.onUnshiftCallbacks.forEach(callback => callback.invoke(this._value, items));
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
    }

    invokeOnSplice(start, deleteCount, items, reflect = true) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();
        if (reflect) {
            this.reflect();
        }
        this.onSpliceCallbacks.forEach(callback => callback.invoke(this._value, start, deleteCount, items));
-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
    }

    attachOnChange(onChange) {
@@ -389,7 +389,7 @@ class IgniteObject {
            Object.keys(obj).forEach(name => {
                var prop = new IgniteProperty(obj[name]);
                Object.defineProperty(this, name, {
-                    get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); },
+                    get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
                    set: (value) => { prop.value = value; }
                });
            });
@@ -408,7 +408,7 @@ class IgniteObject {
                var prop = new IgniteProperty(this[name]);
                delete this[name];
                Object.defineProperty(this, name, {
-                    get: () => { return (IgniteRenderingContext.rendering ? prop : prop.value); },
+                    get: () => { return (IgniteRendering.rendering ? prop : prop.value); },
                    set: (value) => { prop.value = value; }
                });
            }
@@ -488,68 +488,68 @@ class IgniteCallback {
 * this would fail. But it's safe since events cannot do that.
 * @ignore
 */
-class IgniteRenderingContext {
+class IgniteRendering {
    static enter() {
-        if (!IgniteRenderingContext.RenderCount) {
-            IgniteRenderingContext.RenderCount = 0;
+        if (!IgniteRendering.RenderCount) {
+            IgniteRendering.RenderCount = 0;
        }

-        IgniteRenderingContext.RenderCount++;
+        IgniteRendering.RenderCount++;
    }

    static leave() {
-        if (IgniteRenderingContext.RenderCount) {
-            IgniteRenderingContext.RenderCount--;
+        if (IgniteRendering.RenderCount) {
+            IgniteRendering.RenderCount--;
        }
    }

    static push() {
-        if (IgniteRenderingContext.Stack == null) {
-            IgniteRenderingContext.Stack = [];
+        if (IgniteRendering.Stack == null) {
+            IgniteRendering.Stack = [];
        }

-        IgniteRenderingContext.Stack.push(IgniteRenderingContext.RenderCount);
-        IgniteRenderingContext.RenderCount = 0;
+        IgniteRendering.Stack.push(IgniteRendering.RenderCount);
+        IgniteRendering.RenderCount = 0;
    }

    static pop() {
-        if (IgniteRenderingContext.Stack && IgniteRenderingContext.Stack.length > 0) {
-            IgniteRenderingContext.RenderCount = IgniteRenderingContext.Stack.pop();
+        if (IgniteRendering.Stack && IgniteRendering.Stack.length > 0) {
+            IgniteRendering.RenderCount = IgniteRendering.Stack.pop();
        }
    }

    static ready(callback) {
        //Setup the callbacks if it's not init'd.
-        if (!IgniteRenderingContext.ReadyCallbacks) {
-            IgniteRenderingContext.ReadyCallbacks = [];
+        if (!IgniteRendering.ReadyCallbacks) {
+            IgniteRendering.ReadyCallbacks = [];
        }

        //Add this ignite callback.
-        IgniteRenderingContext.ReadyCallbacks.push(callback);
+        IgniteRendering.ReadyCallbacks.push(callback);

        //Clear the existing timer if there is one.
-        if (IgniteRenderingContext.ReadyTimer && !IgniteRenderingContext.ReadyTimerRunning) {
-            clearTimeout(IgniteRenderingContext.ReadyTimer);
+        if (IgniteRendering.ReadyTimer && !IgniteRendering.ReadyTimerRunning) {
+            clearTimeout(IgniteRendering.ReadyTimer);
        }

        //Set a new timeout, it will only run once all elements are ready because
        //of the way single threaded timers work.
-        if (!IgniteRenderingContext.ReadyTimerRunning) {
-            IgniteRenderingContext.ReadyTimer = setTimeout(async () => {
-                IgniteRenderingContext.ReadyTimerRunning = true;
-                while (IgniteRenderingContext.ReadyCallbacks.length > 0) {
-                    IgniteRenderingContext.ReadyCallbacks.shift().invoke();
+        if (!IgniteRendering.ReadyTimerRunning) {
+            IgniteRendering.ReadyTimer = setTimeout(async () => {
+                IgniteRendering.ReadyTimerRunning = true;
+                while (IgniteRendering.ReadyCallbacks.length > 0) {
+                    IgniteRendering.ReadyCallbacks.shift().invoke();
                }

-                IgniteRenderingContext.ReadyCallbacks = [];
-                IgniteRenderingContext.ReadyTimer = null;
-                IgniteRenderingContext.ReadyTimerRunning = false;
+                IgniteRendering.ReadyCallbacks = [];
+                IgniteRendering.ReadyTimer = null;
+                IgniteRendering.ReadyTimerRunning = false;
            }, 1);
        }
    }

    static get rendering() {
-        if (IgniteRenderingContext.RenderCount && IgniteRenderingContext.RenderCount > 0) {
+        if (IgniteRendering.RenderCount && IgniteRendering.RenderCount > 0) {
            return true;
        }

@@ -557,13 +557,49 @@ class IgniteRenderingContext {
    }
 }

-window.IgniteRenderingContext = IgniteRenderingContext;
+/**
+ * Main helper class to access ignite html functions.
+ */
+class IgniteHtml {
+    /**
+     * Registers a new element to be rendered when render() is called.
+     * @param {String} name The tag name of the element to register.
+     * @param {Any} definition The class definition of the element.
+     */
+    static register(name, definition) {
+        if (!IgniteHtml.registered) {
+            IgniteHtml.registered = { };
+        }
+
+        if (!IgniteHtml.registered[name]) {
+            IgniteHtml.registered[name] = definition;
+        }
+    }
+
+    /**
+     * Begins rendering all registered elements.
+     */
+    static render() {
+        if (IgniteHtml.registered) {
+            var elements = Object.keys(IgniteHtml.registered);
+
+            for (var i = 0; i < elements.length; i++) {
+                customElements.define(elements[i], IgniteHtml.registered[elements[i]]);
+            }
+        }
+    }
+}
+
+window.IgniteProperty = IgniteProperty;
+window.IgniteRendering = IgniteRendering;
 window.IgniteObject = IgniteObject;
 window.IgniteCallback = IgniteCallback;
+window.IgniteHtml = IgniteHtml;

 export {
    IgniteProperty,
    IgniteObject,
-    IgniteRenderingContext,
-    IgniteCallback
+    IgniteRendering,
+    IgniteCallback,
+    IgniteHtml
 };
--- a/ignite-template.js
+++ b/ignite-template.js
@@ -1,4 +1,4 @@
-import { IgniteObject, IgniteProperty, IgniteRenderingContext } from './ignite-html.js';
+import { IgniteObject, IgniteProperty, IgniteRendering } from './ignite-html.js';
 import { IgniteElement } from './ignite-element.js';

 /**
@@ -83,7 +83,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    class(name, converter = null) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (name instanceof IgniteProperty) {
            this._callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged((converter != null ? converter(oldValue) : oldValue), (converter != null ? converter(newValue) : newValue))));
@@ -132,7 +132,7 @@ class IgniteTemplate {
            });
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -144,7 +144,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    attribute(name, value, converter = null) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (value instanceof IgniteProperty) {
            this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(name, (converter ? converter(newValue) : newValue))));
@@ -179,7 +179,7 @@ class IgniteTemplate {
            this._attributes[name] = converter ? converter(value) : value;
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -193,7 +193,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    value(value, reflect = false, converter = null, live = false) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (value instanceof IgniteProperty) {
            this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onValueChanged((converter != null ? converter(newValue) : newValue))));
@@ -243,7 +243,7 @@ class IgniteTemplate {
            this._elementValue = (converter != null ? converter(value) : value);
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -268,7 +268,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    property(name, value, reflect = false, converter = null) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (this._properties[name]) {
            throw `Attempted to set a property twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`;
@@ -297,7 +297,7 @@ class IgniteTemplate {
            };
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -309,7 +309,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    variable(name, value, converter = null) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (this._variables[name]) {
            throw `Attempted to set a variable twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`;
@@ -332,7 +332,7 @@ class IgniteTemplate {
            };
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -344,7 +344,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    reflect(name, target) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (this._reflecting[name] == undefined || this._reflecting[name] == null) {
            this._reflecting[name] = [];
@@ -356,7 +356,7 @@ class IgniteTemplate {
            this._reflecting[name].push(target);
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -393,7 +393,7 @@ class IgniteTemplate {
     * @returns This ignite template so funciton calls can be chained.
     */
    innerHTML(value, converter = null) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (value instanceof IgniteProperty) {
            this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(converter != null ? converter(newValue) : newValue)));
@@ -427,7 +427,7 @@ class IgniteTemplate {
            this._elementInnerHTML = (converter != null ? converter(value) : value);
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -438,7 +438,7 @@ class IgniteTemplate {
     * @returns This ignite template.
     */
    innerText(value, converter = null) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (value instanceof IgniteProperty) {
            this._callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerTextChanged(converter != null ? converter(newValue) : newValue)));
@@ -474,7 +474,7 @@ class IgniteTemplate {
            this._elementInnerText = converter ? converter(value) : value;
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -532,7 +532,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    on(eventName, eventCallback) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (!this._events[eventName]) {
            this._events[eventName] = [];
@@ -545,7 +545,7 @@ class IgniteTemplate {
            this._events[eventName].push(eventCallback);
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -715,7 +715,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    onResize(callback) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (callback instanceof IgniteProperty) {
            this._resizeObserverCallback.push(callback.value);
@@ -723,7 +723,7 @@ class IgniteTemplate {
            this._resizeObserverCallback.push(callback);
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -734,7 +734,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    onIntersect(callback) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        if (callback instanceof IgniteProperty) {
            this._intersectObserverCallback.push(callback.value);
@@ -742,7 +742,7 @@ class IgniteTemplate {
            this._intersectObserverCallback.push(callback);
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();
        return this;
    }

@@ -755,7 +755,7 @@ class IgniteTemplate {
     * @returns {IgniteTemplate} This ignite template so function calls can be chained.
     */
    style(name, value, priority = null, converter = null) {
-        IgniteRenderingContext.push();
+        IgniteRendering.push();

        //If the name has a : remove it.
        if (name && typeof name === "string" && name.includes(":")) {
@@ -808,7 +808,7 @@ class IgniteTemplate {
            this._styles[name] = { name: name, value: (converter != null ? converter(value) : value), priority: priority };
        }

-        IgniteRenderingContext.pop();
+        IgniteRendering.pop();

        return this;
    }
@@ -1358,13 +1358,13 @@ class IgniteTemplate {
        if (this.element) {
            //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.
-            IgniteRenderingContext.enter();
+            IgniteRendering.enter();
            if (this.element[propertyName] instanceof IgniteProperty) {
                this.element[propertyName].setValue(newValue, false);
            } else {
                this.element[propertyName] = newValue;
            }
-            IgniteRenderingContext.leave();
+            IgniteRendering.leave();
        }

        this._properties[propertyName].value = newValue;
@@ -2246,7 +2246,7 @@ class list extends IgniteTemplate {
    onListChanged(newValue) {
        this.list = newValue;

-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        try {
            //Reset the list so it's scroll resets too. ScrollTop is unreliable.
@@ -2257,11 +2257,11 @@ class list extends IgniteTemplate {
            console.error("An error occurred during onListChanged:", error);
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }

    onListPush(items) {
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        try {
            items.forEach(item => {
@@ -2285,11 +2285,11 @@ class list extends IgniteTemplate {
            console.error("An error occurred during onListPush:", error);
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }

    onListUnshift(items) {
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        try {
            items.reverse();
@@ -2313,7 +2313,7 @@ class list extends IgniteTemplate {
            console.error("An error occurred during onListUnshift:", error);
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }

    onListPop() {
@@ -2343,7 +2343,7 @@ class list extends IgniteTemplate {
    }

    onListSplice(start, deleteCount, items) {
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        //Remove any items that will no longer exist.
        if (deleteCount > 0 && this.children.length > 0) {
@@ -2390,7 +2390,7 @@ class list extends IgniteTemplate {
            });
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }

    onItemRemove(item) {
@@ -2790,7 +2790,7 @@ class pagination extends IgniteTemplate {
    onListChanged(oldValue, newValue) {
        this.list = newValue;

-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        try {
            this.construct(null); //The list changed, reconstruct this template.
@@ -2798,11 +2798,11 @@ class pagination extends IgniteTemplate {
            console.error("An error occurred during onListChanged:", error);
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }

    onListPush(list, items) {
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        try {
            items.forEach(item => {
@@ -2824,11 +2824,11 @@ class pagination extends IgniteTemplate {
            console.error("An error occurred during onListPush:", error);
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }

    onListUnshift(list, items) {
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        try {
            items.reverse();
@@ -2851,7 +2851,7 @@ class pagination extends IgniteTemplate {
            console.error("An error occurred during onListUnshift:", error);
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }

    onListPop(list) {
@@ -2877,7 +2877,7 @@ class pagination extends IgniteTemplate {
    }

    onListSplice(list, start, deleteCount, items) {
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        //Remove any items that are needed.
        if (deleteCount > 0 && this.children.length > 0) {
@@ -2915,7 +2915,7 @@ class pagination extends IgniteTemplate {
        //Recalculate the pagination.
        this.recalculate();

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }
 }

@@ -3003,7 +3003,7 @@ class population extends IgniteTemplate {
    }

    onCountChange(newValue) {
-        IgniteRenderingContext.enter();
+        IgniteRendering.enter();

        if (newValue != this.elements.length) {
            //Remove all our existing elements.
@@ -3027,7 +3027,7 @@ class population extends IgniteTemplate {
            this.count = newValue;
        }

-        IgniteRenderingContext.leave();
+        IgniteRendering.leave();
    }
 }