@lordfokas/yrframe 0.1.3 → 0.3.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,11 +19,11 @@ 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. */
-    inject(): void;
+    onRedraw(): void;
     /** Get this component's real width in pixels. */
     width(): number;
     /** Get this component's real height in pixels. */

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,27 +47,30 @@ 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();
+        this.onRedraw();
     }
     /** Called after redraw() to do special manipulation of children nodes. */
-    inject() { }
+    onRedraw() { }
     /** Get this component's real width in pixels. */
     width() {
         return parseFloat(getComputedStyle(this, null).width.replace("px", ""));

package/dist/ComponentEvents.d.ts

@@ -35,8 +35,8 @@ export declare class ComponentEvents {
      * If the target configuration has no path, the whole event is stopped instead.
      */
     attachRemover<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, predicate: Source<boolean>, name: string, optional?: Optional): void;
-    /** Attach a listener that disables a component based on a boolean event field. */
-    attachDisabler<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, source: Source<HTMLElement>, name: string, optional?: Optional): void;
+    /** Attach a listener that adds or removes a flag attribute from a component based on a boolean event field. */
+    attachFlagger<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, source: Source<HTMLElement>, flag: string, ref: boolean, name: string, optional?: Optional): void;
     /** Create a function that will fire an event and process data from it. */
     attachSource<T extends Event, K1 extends keyof T>(target: EventTarget<T, K1> | undefined, name: string, optional?: Optional): void;
     /** Create a fake source function that supplies a static or local value. */

package/dist/ComponentEvents.js

@@ -94,19 +94,19 @@ export class ComponentEvents {
                 throw new Error("Unsupported path length > 1 for removers");
         }, nice).named(name, this.owner));
     }
-    /** Attach a listener that disables a component based on a boolean event field. */
-    attachDisabler(target, source, name, optional) {
-        if (this.skip(target, name, "disabler", optional))
+    /** Attach a listener that adds or removes a flag attribute from a component based on a boolean event field. */
+    attachFlagger(target, source, flag, ref, name, optional) {
+        if (this.skip(target, name, "flagger", optional))
             return;
         this.createListener(target, name, (value, _) => {
             if (typeof value !== "boolean")
                 return;
             const element = source.call(this);
-            if (value) {
-                element.setAttribute("disabled", "");
+            if (value === ref) {
+                element.setAttribute(flag, "");
             }
             else {
-                element.removeAttribute("disabled");
+                element.removeAttribute(flag);
             }
         });
     }

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.3",
+  "version": "0.3.0",
   "description": "A Typescript class-based WebComponents library using Material Design.",
   "main": "dist/yrframe.js",
   "scripts": {
@@ -20,6 +20,6 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@lordfokas/event-bus": "^1.0.4"
+    "@lordfokas/event-bus": "^1.0.22"
   }
 }