ignite-html/src/ignite-element.js

import { IgniteProperty } from './ignite-html.js';
import { IgniteTemplate } from './ignite-template.js';

class IgniteElement extends HTMLElement {
    constructor() {
        super();

        this.onDisconnected = null;
        this.template = null;
        this.createProperties();
    }

    /**
     * Returns the properties for this ignite element.
     */
    get properties() {
        return [];
    }

    /**
     * Creates the getters/setters for properties in this
     * ignite element and initializes everything.
     */
    createProperties() {
        var props = this.properties;

        for (var i = 0; i < props.length; i++) {
            this[`_${props[i]}`] = new IgniteProperty();

            ((propName) => {
                Object.defineProperty(this, propName, {
                    get: function () {
                        return this[`_${propName}`];
                    },

                    set: function (value) {
                        this[`_${propName}`].value = value;
                    }
                });
            })(props[i]);
        }
    }

    /**
     * Setups this ignite element and constructs it's template when
     * this function is called by the DOM upon this element being created somewhere.
     */
    connectedCallback() {
        this.template = new IgniteTemplate();
        this.template.element = this;
        this.template.tagName = this.tagName;

        //Make sure the render template is our template, if not, add it as a child.
        var renderTemplate = this.render();
        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?`);
        }

        //Construct our template.
        this.template.construct(this.parentElement);
    }

    /**
     * Cleanups this element and deconstructs everything when this element is removed from
     * the DOM.
     */
    disconnectedCallback() {
        //If we still have a reference to our template, deconstruct it.
        if (this.template) {
            this.template.deconstruct();
        }

        //If we have a onDisconnected callback, call it and then remove the reference.
        if (this.onDisconnected) {
            this.onDisconnected();
            this.onDisconnected = null;
        }
    }

    /**
     * Returns the template to be rendered for this element.
     */
    render() {
        return null;
    }
}

export {
    IgniteElement
};