@lordfokas/yrframe 0.2.0 → 0.4.0

package/dist/Component.d.ts

@@ -23,7 +23,7 @@ export declare class Component<A extends Attributes> extends HTMLElement {
     /** 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;
+    renderedCallback(): void;
     /** Get this component's real width in pixels. */
     width(): number;
     /** Get this component's real height in pixels. */

package/dist/Component.js

@@ -67,10 +67,10 @@ export class Component extends HTMLElement {
                 ComponentFactory.appendChildren(this, child);
             }
         }
-        this.inject();
+        this.renderedCallback();
     }
     /** Called after redraw() to do special manipulation of children nodes. */
-    inject() { }
+    renderedCallback() { }
     /** Get this component's real width in pixels. */
     width() {
         return parseFloat(getComputedStyle(this, null).width.replace("px", ""));

package/dist/ComponentEvents.d.ts

@@ -15,7 +15,10 @@ export declare class ComponentEvents {
     private triggers;
     private readonly component;
     private readonly owner;
+    /** Used to keep track of internal mechanisms (triggers and sources) */
+    private internals;
     constructor(component: HTMLElement);
+    isEmpty(): boolean;
     /** Called by the component when entering DOM */
     connect(): void;
     /** Called by the component when leaving DOM */
@@ -35,8 +38,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

@@ -17,10 +17,15 @@ export class ComponentEvents {
     triggers = {};
     component;
     owner;
+    /** Used to keep track of internal mechanisms (triggers and sources) */
+    internals = 0;
     constructor(component) {
         this.component = component;
         this.owner = component.constructor.name;
     }
+    isEmpty() {
+        return (this.listeners.length + this.internals) === 0;
+    }
     /** Called by the component when entering DOM */
     connect() {
         this.listeners.forEach(l => EventBus.GLOBAL.subscribe(l.type, l));
@@ -94,19 +99,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);
             }
         });
     }
@@ -120,6 +125,7 @@ export class ComponentEvents {
                 callback.call(this.component, event.traverse(...path), event);
             });
         };
+        this.internals++;
     }
     /** Create a fake source function that supplies a static or local value. */
     attachStatic(value, source, name, optional) {
@@ -132,6 +138,7 @@ export class ComponentEvents {
         this.sources[name] = (callback) => {
             callback.call(this.component, source.call(this.component), undefined);
         };
+        this.internals++;
     }
     /** Fire a source function and process the returned data. */
     seek(name, callback) {
@@ -157,6 +164,7 @@ export class ComponentEvents {
                 throw new Error("Unsupported path length > 1 for triggers");
             event.publish();
         };
+        this.internals++;
     }
     /** Fire a trigger function with the given data. */
     fire(name, data = {}, parent) {

package/dist/Facade.d.ts

@@ -13,7 +13,6 @@ type FacadeElement = HTMLElement & EventHost & {
  * Used for aliasing and adapting components from other libraries.
  */
 export declare class Facade<A extends Attributes> {
-    static readonly AEQ = "yr:";
     protected readonly node: FacadeElement;
     protected readonly isCustom: boolean;
     protected events(): ComponentEvents;

package/dist/Facade.js

@@ -1,36 +1,23 @@
 import { ComponentEvents } from "./ComponentEvents.js";
 import { ComponentFactory } from "./ComponentFactory.js";
+import { specialAttributes } from "./utils.js";
 const evt = Symbol('evt');
 /**
  * Fake component that constructs and returns another component instead.
  * Used for aliasing and adapting components from other libraries.
  */
 export class Facade {
-    static AEQ = 'yr:'; // TODO: centralize these
     node;
     isCustom;
     events() {
+        if (!this.node[evt]) { // Lazily instantiate event manager
+            this.node[evt] = new ComponentEvents(this.node);
+        }
         return this.node[evt];
     }
     constructor(tag, props, defaults) {
         const node = this.node = document.createElement(tag);
-        const events = node[evt] = new ComponentEvents(node);
         this.isCustom = tag.includes('-');
-        // Attach to existing lifecycle callbacks.
-        if (this.isCustom) {
-            const { connectedCallback, disconnectedCallback } = node;
-            node.connectedCallback = () => {
-                events.connect();
-                return connectedCallback?.call(node);
-            };
-            node.disconnectedCallback = () => {
-                events.disconnect();
-                return disconnectedCallback?.call(node);
-            };
-        }
-        else { // TODO: rethink this, there's clearly use cases for it.
-            throw new Error(`Facade for native element '${tag}' cannot hook to lifecycle calls.`);
-        }
         const all = {};
         // Assign all defaults to object and overwrite with existing values in provided props
         if (defaults)
@@ -39,13 +26,35 @@ export class Facade {
             Object.assign(all, props);
         const attrs = {};
         for (const [k, v] of Object.entries(all)) {
-            if (!k.startsWith(Facade.AEQ)) {
+            if (!specialAttributes.test(k)) {
                 attrs[k] = v;
             }
         }
         ComponentFactory.setAttributesAndEvents(node, attrs);
     }
     content() {
+        // Dispose of unused event manager
+        if (this.node[evt]?.isEmpty()) {
+            delete this.node[evt];
+        }
         return this.node;
     }
 }
+(function FacadeMutationObserver() {
+    new MutationObserver((records, _mo) => {
+        for (const record of records) {
+            if (record.type == "childList") {
+                for (const added of record.addedNodes) {
+                    if (added instanceof HTMLElement) {
+                        added[evt]?.connect();
+                    }
+                }
+                for (const removed of record.removedNodes) {
+                    if (removed instanceof HTMLElement) {
+                        removed[evt]?.connect();
+                    }
+                }
+            }
+        }
+    }).observe(document.body, { subtree: true, childList: true });
+})();

package/dist/utils.d.ts

@@ -9,3 +9,4 @@ export type Attributes = {
 export type Consumer<T> = (t: T) => void;
 export type Source<T> = () => T;
 export declare function has($: any): boolean;
+export declare const specialAttributes: RegExp;

package/dist/utils.js

@@ -1,3 +1,4 @@
 export function has($) {
     return $ !== undefined;
 }
+export const specialAttributes = /^[a-z]+\:/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lordfokas/yrframe",
-  "version": "0.2.0",
+  "version": "0.4.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"
   }
 }