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.

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
 };