@lordfokas/yrframe 0.1.2 → 0.2.0

package/dist/Component.d.ts

@@ -5,8 +5,12 @@ export declare class Component<A extends Attributes> extends HTMLElement {
     /** Attribute Event Qualifier chars. Attributes starting with this are special. */
     static readonly AEQ = "yr:";
     readonly [evt]: ComponentEvents;
+    protected initialChildren: (string | Node)[];
+    private wasConnected;
     protected events(): ComponentEvents;
     constructor(props: Partial<A>, defaults?: Partial<A>);
+    /** Override HTMLElement */
+    append(...nodes: (string | Node)[]): void;
     /** Remove all children nodes. */
     clearChildren(): void;
     isDisabled(): boolean;
@@ -15,7 +19,7 @@ export declare class Component<A extends Attributes> extends HTMLElement {
     /** HTML5 Custom Element lifecycle callback (add to page) */
     connectedCallback(): void;
     /** Draw this component's internals. Should return only children nodes. */
-    render(): HTMLElement | HTMLElement[] | string | null;
+    render(): Node | string | (Node | string)[] | null;
     /** Redraw this component. Works by deleting all children, calling render() and appending the results. */
     redraw(): void;
     /** Called after redraw() to do special manipulation of children nodes. */

package/dist/Component.js

@@ -5,6 +5,8 @@ export class Component extends HTMLElement {
     /** Attribute Event Qualifier chars. Attributes starting with this are special. */
     static AEQ = 'yr:';
     [evt];
+    initialChildren = [];
+    wasConnected = false;
     events() {
         return this[evt];
     }
@@ -25,6 +27,13 @@ export class Component extends HTMLElement {
         }
         ComponentFactory.setAttributesAndEvents(this, attrs);
     }
+    /** Override HTMLElement */
+    append(...nodes) {
+        if (!this.wasConnected) {
+            this.initialChildren.push(...nodes);
+        }
+        super.append(...nodes);
+    }
     /** Remove all children nodes. */
     clearChildren() {
         this.innerHTML = "";
@@ -38,21 +47,24 @@ export class Component extends HTMLElement {
     }
     /** HTML5 Custom Element lifecycle callback (add to page) */
     connectedCallback() {
+        this.wasConnected = true;
         this[evt].connect();
         this.redraw();
     }
     /** Draw this component's internals. Should return only children nodes. */
-    render() { return null; }
+    render() {
+        return this.initialChildren;
+    }
     /** Redraw this component. Works by deleting all children, calling render() and appending the results. */
     redraw() {
         const child = this.render();
         this.clearChildren();
         if (child) {
             if (Array.isArray(child)) {
-                ComponentFactory.appendChildren(this, child);
+                ComponentFactory.appendChildren(this, ...child);
             }
             else {
-                ComponentFactory.appendChildren(this, [child]);
+                ComponentFactory.appendChildren(this, child);
             }
         }
         this.inject();

package/dist/ComponentEvents.js

@@ -138,7 +138,7 @@ export class ComponentEvents {
         if (!this.sources[name])
             callback.call(this.component, undefined, undefined);
         else
-            this.sources[name].call(callback);
+            this.sources[name].call(undefined, callback);
     }
     /** Create a function that will fire an event to export data. */
     attachTrigger(target, name, optional) {

package/dist/ComponentFactory.d.ts

@@ -10,7 +10,7 @@ export declare class ComponentFactory {
     /** Apply vanilla HTML attributes and event callback functions. There is no component level logic here. */
     static setAttributesAndEvents(element: HTMLElement, props: any): void;
     /** Logic for appending children to a parent element according to the possible returns of render() */
-    static appendChildren(element: HTMLElement, children: HTMLElement[]): void;
+    static appendChildren(element: HTMLElement, ...children: (string | Node)[]): void;
 }
 /**
  * ## Here be Shenanigans

package/dist/ComponentFactory.js

@@ -23,7 +23,7 @@ export class ComponentFactory {
         }
         // Append children if any
         if (children && children.length > 0) {
-            this.appendChildren(element, children);
+            this.appendChildren(element, ...children);
         }
         return element;
     }
@@ -43,7 +43,7 @@ export class ComponentFactory {
             }
     }
     /** Logic for appending children to a parent element according to the possible returns of render() */
-    static appendChildren(element, children) {
+    static appendChildren(element, ...children) {
         for (const child of children) {
             // Allow returning null from render() when there is nothing to do
             if (child === null)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lordfokas/yrframe",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A Typescript class-based WebComponents library using Material Design.",
   "main": "dist/yrframe.js",
   "scripts": {