Cleaned up code, added a new auto doc generator and documented code extensively.

src/ignite-element.js

@@ -2,8 +2,49 @@ import { IgniteProperty } from './ignite-html.js';
 import { IgniteTemplate } from './ignite-template.js';
 
 /**
- * The outline of a ignite element that extends the html element
- * and can be used to create custom components.
+ * The outline of a Ignite Element that extends the html element
+ * and can be used to create custom components. Ignite Element's use an Ignite Template
+ * for the render function.
+ * 
+ * @example
+ * 
+ * class MainApp extends IgniteElement {
+ *   constructor() {
+ *       super();
+ *   }
+ *
+ *   get properties() {
+ *       return {
+ *       };
+ *   }
+ *
+ *   render() {
+ *       return this.template
+ *           .child(
+ *               new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
+ *               new h4(`Adding more fire to the web.`)
+ *           );
+ *    }
+ * }
+ * 
+ * customElements.define("main-app", MainApp);
+ * 
+ * @example
+ * //If you want to easily use an Ignite Element with templates see the following which can be added
+ * //to any component file
+ * class MainAppTemplate extends IgniteTemplate {
+ *   constructor(...children) {
+ *       super("main-app", children);
+ *   }
+ * }
+ * 
+ * export {
+ *  MainAppTemplate as MainApp
+ * }
+ * 
+ * @example
+ * //If a template was created for a Ignite Element (like the previous example) it can be used just like any other template:
+ * new MainApp()
  */
 class IgniteElement extends HTMLElement {
     constructor() {
@@ -16,14 +57,46 @@ class IgniteElement extends HTMLElement {
     }
 
     /**
-     * Returns the properties for this ignite element.
+     * Returns an object with all the properties for this ignite element. If null or empty
+     * then no properties will be created. To change a property and read it's current value see below.
+     * 
+     * @returns An object with properties that will be assigned to this ignite element.
+     * 
+     * @example
+     * get properties() {
+     *  return {
+     *      show: false,
+     *      title: "This is a title",
+     *      items: [1, 2, 3]
+     *  };
+     * }
+     * 
+     * @example
+     * //To change a property access it via this.PROP_NAME
+     * this.show = false;
+     * 
+     * //To get a properties value access if via this.PROP_NAME
+     * console.log(this.title);
      */
     get properties() {
         return {};
     }
 
     /**
-     * Returns any CSS styling code for this ignite element.
+     * Returns any CSS styling code for this ignite element. If this returns a non null
+     * value the CSS will auto be injected into the current HTML page once and reused for the life
+     * of the ignite element.
+     * 
+     * @returns A string containing CSS code to be used with this ignite element.
+     *  
+     * @example
+     * get styles() {
+     *  return `
+     *      h1 {
+     *          color: black;
+     *      }
+     *  `;
+     * }
      */
     get styles() {
         return null;
@@ -32,6 +105,7 @@ class IgniteElement extends HTMLElement {
     /**
      * Creates the getters/setters for properties in this
      * ignite element and initializes everything.
+     * @ignore
      */
     createProperties() {
         var props = this.properties;
@@ -79,6 +153,7 @@ class IgniteElement extends HTMLElement {
     /**
      * Setups this ignite element and constructs it's template when
      * this function is called by the DOM upon this element being created somewhere.
+     * @ignore
      */
     connectedCallback() {
         //See if a styling sheet has been created for this element if it's needed.
@@ -127,6 +202,7 @@ class IgniteElement extends HTMLElement {
     /**
      * Cleanups this element and deconstructs everything when this element is removed from
      * the DOM.
+     * @ignore
      */
     disconnectedCallback() {
         //If we still have a reference to our template, deconstruct it.
@@ -143,6 +219,19 @@ class IgniteElement extends HTMLElement {
 
     /**
      * Returns the template to be rendered for this element.
+     * 
+     * @returns An ignite template to be used to construct this ignite element.
+     * 
+     * @see this.template is automatically created for each IgniteElement and must be used in the render() function.
+     * 
+     * @example
+     * render() {
+     *  return this.template
+     *       .child(
+     *           new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
+     *           new h4(`Adding more fire to the web.`)
+     *       );
+     * }
      */
     render() {
         return null;