@lordfokas/yrframe 0.4.7 → 0.5.1

package/README.md

@@ -1,2 +1,2 @@
 # yrframe
-A Typescript class-based WebComponents library using Material Design
+A Typescript class-based WebComponents framework

package/dist/Component.d.ts

@@ -1,7 +1,7 @@
-import { ComponentEvents } from "./ComponentEvents.js";
+import { ComponentEvents, symbol as evt } from "./ComponentEvents.js";
+import { ComponentLogic } from "./ComponentLogic.js";
 import { Attributes } from "./utils.js";
-declare const evt: unique symbol;
-export declare class Component<A extends Attributes> extends HTMLElement {
+export declare class Component<A extends Attributes> extends HTMLElement implements ComponentLogic {
     readonly [evt]: ComponentEvents;
     protected initialChildren: (string | Node)[];
     private wasConnected;
@@ -29,4 +29,3 @@ export declare class Component<A extends Attributes> extends HTMLElement {
     /** Shortcut to register this component with a given tag name */
     static register(tag: string): void;
 }
-export {};

package/dist/Component.js

@@ -1,16 +1,31 @@
-import { ComponentEvents } from "./ComponentEvents.js";
+var _a;
+import { ComponentEvents, symbol as evt } from "./ComponentEvents.js";
 import { ComponentFactory } from "./ComponentFactory.js";
 import { specialAttributes } from "./utils.js";
-const evt = Symbol('evt');
 export class Component extends HTMLElement {
-    [evt];
-    initialChildren = [];
-    wasConnected = false;
     events() {
         return this[evt];
     }
     constructor(props, defaults) {
         super();
+        Object.defineProperty(this, _a, {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "initialChildren", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "wasConnected", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
         this[evt] = new ComponentEvents(this);
         const all = {};
         // Assign all defaults to object and overwrite with existing values in provided props
@@ -83,3 +98,4 @@ export class Component extends HTMLElement {
         window.customElements.define(tag, this);
     }
 }
+_a = evt;

package/dist/ComponentEvents.d.ts

@@ -1,8 +1,8 @@
 import { Event } from '@lordfokas/event-bus';
-import { Component } from './Component.js';
 import { EventTarget, Source } from './utils.js';
+export declare const symbol: unique symbol;
 type Value = object | string | number | boolean;
-type Callback<T extends Event> = (this: Component<any>, value: T | Value | Value[], evt: T) => void;
+type Callback<T extends Event> = (this: HTMLElement, value: T | Value | Value[], evt: T) => void;
 type Optional = "optional";
 /**
  * Event manager for component special functions.

package/dist/ComponentEvents.js

@@ -1,9 +1,15 @@
 import { EventBus, EventListener } from '@lordfokas/event-bus';
 import { Component } from './Component.js';
+export const symbol = Symbol('evt');
 class PersistentListener extends EventListener {
-    type;
     constructor(type, callback, nice) {
         super(callback, nice);
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.type = type;
     }
 }
@@ -13,14 +19,44 @@ class PersistentListener extends EventListener {
  * except by calling Component.events()
  */
 export class ComponentEvents {
-    listeners = [];
-    sources = {};
-    triggers = {};
-    component;
-    owner;
-    /** Used to keep track of internal mechanisms (triggers and sources) */
-    internals = 0;
     constructor(component) {
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "sources", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "triggers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "component", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "owner", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** Used to keep track of internal mechanisms (triggers and sources) */
+        Object.defineProperty(this, "internals", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         this.component = component;
         this.owner = component instanceof Component ? component.constructor.name : '<' + component.tagName.toLowerCase() + '>';
     }
@@ -59,10 +95,10 @@ export class ComponentEvents {
         this.createListener(target, name, handler);
     }
     attachGeneric(target, handler, name, optional) {
-        this.attachListener(target, handler, "generic listener", optional);
+        this.attachListener(target, handler, name, "generic listener", optional);
     }
     attachConsumer(target, handler, name, optional) {
-        this.attachListener(target, handler, "consumer", optional);
+        this.attachListener(target, handler, name, "consumer", optional);
     }
     /** Attach a listener that enriches the target event with data from this component. */
     attachSupplier(target, source, name, optional) {
@@ -70,7 +106,6 @@ export class ComponentEvents {
             return;
         const [type, path, nice] = target;
         this.listeners.push(new PersistentListener(type, event => {
-            const path = target[1];
             const data = source.call(this);
             if (path.length == 0)
                 event.with(data);
@@ -89,7 +124,6 @@ export class ComponentEvents {
             return;
         const [type, path, nice] = target;
         this.listeners.push(new PersistentListener(type, event => {
-            const path = target[1];
             if (!predicate.call(this))
                 return;
             if (path.length == 0)
@@ -144,9 +178,8 @@ export class ComponentEvents {
     /** Fire a source function and process the returned data. */
     seek(name, callback) {
         if (!this.sources[name])
-            callback.call(this.component, undefined, undefined);
-        else
-            this.sources[name].call(undefined, callback);
+            throw new Error(`Source '${name}' not found at '${this.owner}`);
+        this.sources[name].call(undefined, callback);
     }
     /** Create a function that will fire an event to export data. */
     attachTrigger(target, name, optional) {

package/dist/ComponentFactory.js

@@ -68,5 +68,10 @@ export class ComponentFactory {
  * `¯\_(ツ)_/¯`
  */
 export class FakeReact {
-    static createElement = ComponentFactory.make;
 }
+Object.defineProperty(FakeReact, "createElement", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: ComponentFactory.make
+});

package/dist/ComponentLogic.d.ts

@@ -0,0 +1,15 @@
+export interface ComponentLogic {
+    /** Remove all children nodes. */
+    clearChildren(): void;
+    isDisabled(): boolean;
+    /** HTML5 Custom Element lifecycle callback (remove from page) */
+    disconnectedCallback(): void;
+    /** HTML5 Custom Element lifecycle callback (add to page) */
+    connectedCallback(): void;
+    /** Draw this component's internals. Should return only children nodes. */
+    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. */
+    renderedCallback(): void;
+}

package/dist/ComponentLogic.js

@@ -0,0 +1 @@
+export {};

package/dist/Facade.d.ts

@@ -1,23 +1,35 @@
-import { ComponentEvents } from "./ComponentEvents.js";
-import { Attributes, Source } from "./utils.js";
-declare const evt: unique symbol;
-interface EventHost {
-    [evt]: ComponentEvents;
-}
-type FacadeElement = HTMLElement & EventHost & {
-    connectedCallback: Source<void>;
-    disconnectedCallback: Source<void>;
+import { ComponentEvents, symbol as evt } from "./ComponentEvents.js";
+import { ComponentLogic } from "./ComponentLogic.js";
+import { Attributes } from "./utils.js";
+declare const fcl: unique symbol;
+type FacadeElement = HTMLElement & {
+    [evt]?: ComponentEvents;
+    [fcl]: Facade<any>;
 };
 /**
  * Fake component that constructs and returns another component instead.
  * Used for aliasing and adapting components from other libraries.
  */
-export declare class Facade<A extends Attributes> {
+export declare class Facade<A extends Attributes> implements ComponentLogic {
     protected readonly node: FacadeElement;
     protected readonly isCustom: boolean;
     protected initialChildren: (string | Node)[];
+    protected wasConnected: boolean;
     protected events(): ComponentEvents;
     constructor(tag: string, props: Partial<A>, defaults?: Partial<A>);
+    /** Remove all children nodes. */
+    clearChildren(): void;
+    isDisabled(): boolean;
+    /** HTML5 Custom Element lifecycle callback (remove from page) */
+    disconnectedCallback(): void;
+    /** HTML5 Custom Element lifecycle callback (add to page) */
+    connectedCallback(): void;
+    /** Draw this component's internals. Should return only children nodes. */
+    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. */
+    renderedCallback(): void;
     content(): FacadeElement;
     setInitialChildren(children: (Node | string)[]): void;
 }

package/dist/Facade.js

@@ -1,15 +1,12 @@
-import { ComponentEvents } from "./ComponentEvents.js";
+import { ComponentEvents, symbol as evt } from "./ComponentEvents.js";
 import { ComponentFactory } from "./ComponentFactory.js";
 import { specialAttributes } from "./utils.js";
-const evt = Symbol('evt');
+const fcl = Symbol('fcl');
 /**
  * Fake component that constructs and returns another component instead.
  * Used for aliasing and adapting components from other libraries.
  */
 export class Facade {
-    node;
-    isCustom;
-    initialChildren = [];
     events() {
         if (!this.node[evt]) { // Lazily instantiate event manager
             this.node[evt] = new ComponentEvents(this.node);
@@ -17,7 +14,32 @@ export class Facade {
         return this.node[evt];
     }
     constructor(tag, props, defaults) {
+        Object.defineProperty(this, "node", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isCustom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "initialChildren", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "wasConnected", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
         const node = this.node = document.createElement(tag);
+        node[fcl] = this;
         this.isCustom = tag.includes('-');
         const all = {};
         // Assign all defaults to object and overwrite with existing values in provided props
@@ -33,6 +55,43 @@ export class Facade {
         }
         ComponentFactory.setAttributesAndEvents(node, attrs);
     }
+    /** Remove all children nodes. */
+    clearChildren() {
+        this.node.innerHTML = "";
+    }
+    isDisabled() {
+        return this.node.hasAttribute("disabled");
+    }
+    /** HTML5 Custom Element lifecycle callback (remove from page) */
+    disconnectedCallback() {
+        this.node[evt]?.disconnect();
+    }
+    /** HTML5 Custom Element lifecycle callback (add to page) */
+    connectedCallback() {
+        this.wasConnected = true;
+        this.node[evt]?.connect();
+        this.redraw();
+    }
+    /** Draw this component's internals. Should return only children nodes. */
+    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.node, ...child);
+            }
+            else {
+                ComponentFactory.appendChildren(this.node, child);
+            }
+        }
+        this.renderedCallback();
+    }
+    /** Called after redraw() to do special manipulation of children nodes. */
+    renderedCallback() { }
     content() {
         // Dispose of unused event manager
         if (this.node[evt]?.isEmpty()) {
@@ -56,11 +115,11 @@ function traverseHTML(node, fn) {
     new MutationObserver((records) => {
         for (const record of records) {
             for (const added of record.addedNodes) {
-                traverseHTML(added, (node) => node[evt]?.connect());
+                traverseHTML(added, (node) => node[fcl]?.connectedCallback());
             }
             for (const removed of record.removedNodes) {
-                traverseHTML(removed, (node) => node[evt]?.disconnect());
+                traverseHTML(removed, (node) => node[fcl]?.disconnectedCallback());
             }
         }
-    }).observe(document.body, { subtree: true, childList: true });
+    }).observe(document.body, { subtree: true, attributes: false, childList: true });
 })();

package/dist/yrframe.d.ts

@@ -1,5 +1,6 @@
 export { Component } from './Component.js';
 export { ComponentEvents } from './ComponentEvents.js';
 export { ComponentFactory, FakeReact } from './ComponentFactory.js';
+export { ComponentLogic } from './ComponentLogic.js';
 export { Facade } from './Facade.js';
 export { Attributes, EventTarget } from './utils.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lordfokas/yrframe",
-  "version": "0.4.7",
-  "description": "A Typescript class-based WebComponents library using Material Design.",
+  "version": "0.5.1",
+  "description": "A Typescript class-based WebComponents framework.",
   "main": "dist/yrframe.js",
   "scripts": {
     "prebuild": "rm -rf ./dist",
@@ -9,8 +9,7 @@
     "prepublishOnly": "npm run build"
   },
   "keywords": [
-    "material",
-    "design",
+    "webcomponents",
     "components",
     "typescript"
   ],