@lordfokas/yrframe 0.4.6 → 0.5.0

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,17 +1,19 @@
-import { ComponentEvents } from "./ComponentEvents.js";
-import { ComponentFactory } from "./ComponentFactory.js";
-import { specialAttributes } from "./utils.js";
-const evt = Symbol('evt');
-export class Component extends HTMLElement {
-    [evt];
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Component = void 0;
+const ComponentEvents_js_1 = require("./ComponentEvents.js");
+const ComponentFactory_js_1 = require("./ComponentFactory.js");
+const utils_js_1 = require("./utils.js");
+class Component extends HTMLElement {
+    [ComponentEvents_js_1.symbol];
     initialChildren = [];
     wasConnected = false;
     events() {
-        return this[evt];
+        return this[ComponentEvents_js_1.symbol];
     }
     constructor(props, defaults) {
         super();
-        this[evt] = new ComponentEvents(this);
+        this[ComponentEvents_js_1.symbol] = new ComponentEvents_js_1.ComponentEvents(this);
         const all = {};
         // Assign all defaults to object and overwrite with existing values in provided props
         if (defaults)
@@ -20,11 +22,11 @@ export class Component extends HTMLElement {
             Object.assign(all, props);
         const attrs = {};
         for (const [k, v] of Object.entries(all)) {
-            if (!specialAttributes.test(k)) {
+            if (!utils_js_1.specialAttributes.test(k)) {
                 attrs[k] = v;
             }
         }
-        ComponentFactory.setAttributesAndEvents(this, attrs);
+        ComponentFactory_js_1.ComponentFactory.setAttributesAndEvents(this, attrs);
     }
     /** Override HTMLElement */
     append(...nodes) {
@@ -42,12 +44,12 @@ export class Component extends HTMLElement {
     }
     /** HTML5 Custom Element lifecycle callback (remove from page) */
     disconnectedCallback() {
-        this[evt].disconnect();
+        this[ComponentEvents_js_1.symbol].disconnect();
     }
     /** HTML5 Custom Element lifecycle callback (add to page) */
     connectedCallback() {
         this.wasConnected = true;
-        this[evt].connect();
+        this[ComponentEvents_js_1.symbol].connect();
         this.redraw();
     }
     /** Draw this component's internals. Should return only children nodes. */
@@ -60,10 +62,10 @@ export class Component extends HTMLElement {
         this.clearChildren();
         if (child) {
             if (Array.isArray(child)) {
-                ComponentFactory.appendChildren(this, ...child);
+                ComponentFactory_js_1.ComponentFactory.appendChildren(this, ...child);
             }
             else {
-                ComponentFactory.appendChildren(this, child);
+                ComponentFactory_js_1.ComponentFactory.appendChildren(this, child);
             }
         }
         this.renderedCallback();
@@ -83,3 +85,4 @@ export class Component extends HTMLElement {
         window.customElements.define(tag, this);
     }
 }
+exports.Component = Component;

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,6 +1,10 @@
-import { EventBus, EventListener } from '@lordfokas/event-bus';
-import { Component } from './Component.js';
-class PersistentListener extends EventListener {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentEvents = exports.symbol = void 0;
+const event_bus_1 = require("@lordfokas/event-bus");
+const Component_js_1 = require("./Component.js");
+exports.symbol = Symbol('evt');
+class PersistentListener extends event_bus_1.EventListener {
     type;
     constructor(type, callback, nice) {
         super(callback, nice);
@@ -12,7 +16,7 @@ class PersistentListener extends EventListener {
  * A developer isn't meant to directly interface with this class,
  * except by calling Component.events()
  */
-export class ComponentEvents {
+class ComponentEvents {
     listeners = [];
     sources = {};
     triggers = {};
@@ -22,18 +26,18 @@ export class ComponentEvents {
     internals = 0;
     constructor(component) {
         this.component = component;
-        this.owner = component instanceof Component ? component.constructor.name : '<' + component.tagName.toLowerCase() + '>';
+        this.owner = component instanceof Component_js_1.Component ? component.constructor.name : '<' + component.tagName.toLowerCase() + '>';
     }
     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));
+        this.listeners.forEach(l => event_bus_1.EventBus.GLOBAL.subscribe(l.type, l));
     }
     /** Called by the component when leaving DOM */
     disconnect() {
-        this.listeners.forEach(l => EventBus.GLOBAL.unsubscribe(l));
+        this.listeners.forEach(l => event_bus_1.EventBus.GLOBAL.unsubscribe(l));
     }
     /** Set up and attach a listener, given a configuration  */
     createListener(target, name, handler) {
@@ -59,10 +63,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 +74,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 +92,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 +146,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) {
@@ -172,3 +173,4 @@ export class ComponentEvents {
         this.triggers[name].call(this.component, data, parent);
     }
 }
+exports.ComponentEvents = ComponentEvents;

package/dist/ComponentFactory.js

@@ -1,9 +1,12 @@
-import { Facade } from "./Facade.js";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FakeReact = exports.ComponentFactory = void 0;
+const Facade_js_1 = require("./Facade.js");
 /**
  * JSX / TSX component factory.
  * Should not be invoked manually, is used by TSC when building the project.
  */
-export class ComponentFactory {
+class ComponentFactory {
     static make(tag, props, ...children) {
         if (tag === Array)
             return children; // Allow returning multiple elements from render()
@@ -11,7 +14,7 @@ export class ComponentFactory {
         let element;
         let facade = undefined;
         if (typeof tag === 'function') { // Construct class based components
-            if (tag.prototype instanceof Facade) {
+            if (tag.prototype instanceof Facade_js_1.Facade) {
                 facade = new tag(props ?? {});
                 element = facade.content();
             }
@@ -57,6 +60,7 @@ export class ComponentFactory {
         })));
     }
 }
+exports.ComponentFactory = ComponentFactory;
 /**
  * ## Here be Shenanigans
  * In the event your TSC refuses to find ComponentFactory.make
@@ -67,6 +71,7 @@ export class ComponentFactory {
  * At least until you can be arsed to figure it out...
  * `¯\_(ツ)_/¯`
  */
-export class FakeReact {
+class FakeReact {
     static createElement = ComponentFactory.make;
 }
+exports.FakeReact = FakeReact;

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,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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,23 +1,28 @@
-import { ComponentEvents } from "./ComponentEvents.js";
-import { ComponentFactory } from "./ComponentFactory.js";
-import { specialAttributes } from "./utils.js";
-const evt = Symbol('evt');
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Facade = void 0;
+const ComponentEvents_js_1 = require("./ComponentEvents.js");
+const ComponentFactory_js_1 = require("./ComponentFactory.js");
+const utils_js_1 = require("./utils.js");
+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 {
+class Facade {
     node;
     isCustom;
     initialChildren = [];
+    wasConnected = false;
     events() {
-        if (!this.node[evt]) { // Lazily instantiate event manager
-            this.node[evt] = new ComponentEvents(this.node);
+        if (!this.node[ComponentEvents_js_1.symbol]) { // Lazily instantiate event manager
+            this.node[ComponentEvents_js_1.symbol] = new ComponentEvents_js_1.ComponentEvents(this.node);
         }
-        return this.node[evt];
+        return this.node[ComponentEvents_js_1.symbol];
     }
     constructor(tag, props, defaults) {
         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
@@ -27,16 +32,53 @@ export class Facade {
             Object.assign(all, props);
         const attrs = {};
         for (const [k, v] of Object.entries(all)) {
-            if (!specialAttributes.test(k)) {
+            if (!utils_js_1.specialAttributes.test(k)) {
                 attrs[k] = v;
             }
         }
-        ComponentFactory.setAttributesAndEvents(node, attrs);
+        ComponentFactory_js_1.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[ComponentEvents_js_1.symbol]?.disconnect();
+    }
+    /** HTML5 Custom Element lifecycle callback (add to page) */
+    connectedCallback() {
+        this.wasConnected = true;
+        this.node[ComponentEvents_js_1.symbol]?.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_js_1.ComponentFactory.appendChildren(this.node, ...child);
+            }
+            else {
+                ComponentFactory_js_1.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()) {
-            delete this.node[evt];
+        if (this.node[ComponentEvents_js_1.symbol]?.isEmpty()) {
+            delete this.node[ComponentEvents_js_1.symbol];
         }
         return this.node;
     }
@@ -44,19 +86,24 @@ export class Facade {
         this.initialChildren = children;
     }
 }
+exports.Facade = Facade;
+function traverseHTML(node, fn) {
+    if (node instanceof HTMLElement) {
+        fn(node);
+        for (const child of node.children) {
+            traverseHTML(child, fn);
+        }
+    }
+}
 (function FacadeMutationObserver() {
     new MutationObserver((records) => {
         for (const record of records) {
             for (const added of record.addedNodes) {
-                if (added instanceof HTMLElement) {
-                    added[evt]?.connect();
-                }
+                traverseHTML(added, (node) => node[fcl]?.connectedCallback());
             }
             for (const removed of record.removedNodes) {
-                if (removed instanceof HTMLElement) {
-                    removed[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/utils.js

@@ -1,4 +1,8 @@
-export function has($) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.specialAttributes = exports.has = void 0;
+function has($) {
     return $ !== undefined;
 }
-export const specialAttributes = /^[a-z]+\:/;
+exports.has = has;
+exports.specialAttributes = /^[a-z]+\:/;

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/dist/yrframe.js

@@ -1,4 +1,12 @@
-export { Component } from './Component.js';
-export { ComponentEvents } from './ComponentEvents.js';
-export { ComponentFactory, FakeReact } from './ComponentFactory.js';
-export { Facade } from './Facade.js';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Facade = exports.FakeReact = exports.ComponentFactory = exports.ComponentEvents = exports.Component = void 0;
+var Component_js_1 = require("./Component.js");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return Component_js_1.Component; } });
+var ComponentEvents_js_1 = require("./ComponentEvents.js");
+Object.defineProperty(exports, "ComponentEvents", { enumerable: true, get: function () { return ComponentEvents_js_1.ComponentEvents; } });
+var ComponentFactory_js_1 = require("./ComponentFactory.js");
+Object.defineProperty(exports, "ComponentFactory", { enumerable: true, get: function () { return ComponentFactory_js_1.ComponentFactory; } });
+Object.defineProperty(exports, "FakeReact", { enumerable: true, get: function () { return ComponentFactory_js_1.FakeReact; } });
+var Facade_js_1 = require("./Facade.js");
+Object.defineProperty(exports, "Facade", { enumerable: true, get: function () { return Facade_js_1.Facade; } });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lordfokas/yrframe",
-  "version": "0.4.6",
-  "description": "A Typescript class-based WebComponents library using Material Design.",
+  "version": "0.5.0",
+  "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"
   ],