@lordfokas/yrframe 0.4.0 → 0.4.2

package/dist/Component.d.ts

@@ -2,8 +2,6 @@ import { ComponentEvents } from "./ComponentEvents.js";
 import { Attributes } from "./utils.js";
 declare const evt: unique symbol;
 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;

package/dist/Component.js

@@ -1,9 +1,8 @@
 import { ComponentEvents } from "./ComponentEvents.js";
 import { ComponentFactory } from "./ComponentFactory.js";
+import { specialAttributes } from "./utils.js";
 const evt = Symbol('evt');
 export class Component extends HTMLElement {
-    /** Attribute Event Qualifier chars. Attributes starting with this are special. */
-    static AEQ = 'yr:';
     [evt];
     initialChildren = [];
     wasConnected = false;
@@ -21,7 +20,7 @@ export class Component extends HTMLElement {
             Object.assign(all, props);
         const attrs = {};
         for (const [k, v] of Object.entries(all)) {
-            if (!k.startsWith(Component.AEQ)) {
+            if (!specialAttributes.test(k)) {
                 attrs[k] = v;
             }
         }

package/dist/ComponentEvents.js

@@ -1,4 +1,5 @@
 import { EventBus, EventListener } from '@lordfokas/event-bus';
+import { Component } from './Component.js';
 class PersistentListener extends EventListener {
     type;
     constructor(type, callback, nice) {
@@ -21,7 +22,7 @@ export class ComponentEvents {
     internals = 0;
     constructor(component) {
         this.component = component;
-        this.owner = component.constructor.name;
+        this.owner = component instanceof Component ? component.constructor.name : '<' + component.tagName + '>';
     }
     isEmpty() {
         return (this.listeners.length + this.internals) === 0;

package/dist/ComponentFactory.js

@@ -44,20 +44,14 @@ export class ComponentFactory {
     }
     /** Logic for appending children to a parent element according to the possible returns of render() */
     static appendChildren(element, ...children) {
-        for (const child of children) {
-            // Allow returning null from render() when there is nothing to do
-            if (child === null)
-                continue;
-            // Disallow returning undefined to prevent mistakes being ignored. No-ops must explicitely return null.
-            if (child === undefined)
+        element.append(...(children
+            .flat(5) // flatten arrays of arrays up to depth=5 (should be enough, if you have more, fuck you)
+            .filter(c => c !== null) // ignore nulls
+            .map(c => {
+            if (c === undefined)
                 throw new Error("An element's child cannot be undefined");
-            if (Array.isArray(child)) { // Allow returning multiple elements from render()
-                this.appendChildren(element, child);
-            }
-            else {
-                element.append(child);
-            }
-        }
+            return c; // accept anything else
+        })));
     }
 }
 /**

package/dist/Facade.d.ts

@@ -2,7 +2,7 @@ import { ComponentEvents } from "./ComponentEvents.js";
 import { Attributes, Source } from "./utils.js";
 declare const evt: unique symbol;
 interface EventHost {
-    [evt]: ComponentEvents;
+    [evt]: FacadeEvents;
 }
 type FacadeElement = HTMLElement & EventHost & {
     connectedCallback: Source<void>;
@@ -15,8 +15,14 @@ type FacadeElement = HTMLElement & EventHost & {
 export declare class Facade<A extends Attributes> {
     protected readonly node: FacadeElement;
     protected readonly isCustom: boolean;
-    protected events(): ComponentEvents;
+    protected events(): FacadeEvents;
     constructor(tag: string, props: Partial<A>, defaults?: Partial<A>);
     content(): FacadeElement;
 }
+declare class FacadeEvents extends ComponentEvents {
+    private connected;
+    constructor(component: HTMLElement);
+    connect(): void;
+    disconnect(): void;
+}
 export {};

package/dist/Facade.js

@@ -11,7 +11,7 @@ export class Facade {
     isCustom;
     events() {
         if (!this.node[evt]) { // Lazily instantiate event manager
-            this.node[evt] = new ComponentEvents(this.node);
+            this.node[evt] = new FacadeEvents(this.node);
         }
         return this.node[evt];
     }
@@ -40,6 +40,24 @@ export class Facade {
         return this.node;
     }
 }
+class FacadeEvents extends ComponentEvents {
+    connected = false;
+    constructor(component) {
+        super(component);
+    }
+    connect() {
+        if (this.connected)
+            return;
+        super.connect();
+        this.connected = true;
+    }
+    disconnect() {
+        if (!this.connected)
+            return;
+        super.disconnect();
+        this.connected = false;
+    }
+}
 (function FacadeMutationObserver() {
     new MutationObserver((records, _mo) => {
         for (const record of records) {

package/package.json

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