structured-fw 0.9.3 → 0.9.5

package/README.md

@@ -644,6 +644,7 @@ Methods:
 - `find(componentName: string, recursive: boolean = true): ClientComponent | null` - find a child component
 - `findParent(componentName: string): ClientComponent | null` - find the first parent with given name
 - `query(componentName: string, recursive: boolean = true): Array<ClientComponent>` - return all components with given name found within this component, if `recursive = false`, only direct children are considered
+- `bind<T extends LooseObject | undefined = undefined>(element: HTMLElement, eventName: string | Array<string>, callback: (e: Event, data: T) => void): void` - adds event listener(s) to given element. This is preferred over addEventListener because when the component is redrawn/removed, the event listeners added using bind method are automatically restored/removed. Callback receives event as the first argument. Any "data-" prefixed attributes found on `element` are parsed into an object and provided as second argument to callback (you can specify data using attr helper if you want to pass in something other than a string). The method is generic, allowing you to specify expected data type
 - `ref<T>(refName: string): T` - get a HTMLElement or ClientComponent that has attribute `ref="[refName]"`
 - `arrayRef<T>(refName: string): Array<T>` - get an array of HTMLElement or ClientComponent that have attribute `array:ref="[refName]"`
 - `add(appendTo: HTMLElement, componentName: string, data?: LooseObject): Promise<ClientComponent | null>` - add `componentName` component to `appendTo` element, optionally passing `data` to the component when it's being rendered. Returns a promise that resolves with added ClientComponent or null if something went wrong

package/build/system/EventEmitter.d.ts

@@ -3,5 +3,5 @@ export declare class EventEmitter<T extends Record<string, any> = Record<string,
     protected listeners: Partial<Record<keyof T, Array<EventEmitterCallback<any>>>>;
     on<K extends keyof T>(eventName: K, callback: EventEmitterCallback<T[K]>): void;
     emit(eventName: keyof T, payload?: any): void;
-    unbind(eventName: keyof T, callback: EventEmitterCallback<any>): void;
+    off(eventName: keyof T, callback: EventEmitterCallback<any>): void;
 }

package/build/system/EventEmitter.js

@@ -15,7 +15,7 @@ export class EventEmitter {
             });
         }
     }
-    unbind(eventName, callback) {
+    off(eventName, callback) {
         if (Array.isArray(this.listeners[eventName])) {
             while (true) {
                 const index = this.listeners[eventName].indexOf(callback);

package/build/system/Types.d.ts

@@ -159,7 +159,13 @@ export type InitializerFunctionContext = {
     isRedraw: boolean;
 };
 export type StoreChangeCallback = (key: string, value: any, oldValue: any, componentId: string) => void;
-export type AsteriskAny = '*';
+export type ClientComponentEventCallback<T> = T extends undefined ? (e: Event) => void : (e: Event, data: T) => void;
+export type ClientComponentBoundEvent<T extends LooseObject | undefined = undefined> = {
+    element: HTMLElement;
+    event: keyof HTMLElementEventMap;
+    callback: (e: Event) => void;
+    callbackOriginal: ClientComponentEventCallback<T>;
+};
 export type ClientComponentTransition = {
     fade: false | number;
     slide: false | number;

package/build/system/client/ClientComponent.d.ts

@@ -1,4 +1,4 @@
-import { LooseObject } from '../Types.js';
+import { ClientComponentEventCallback, LooseObject } from '../Types.js';
 import { DataStoreView } from './DataStoreView.js';
 import { DataStore } from './DataStore.js';
 import { Net } from './Net.js';
@@ -29,6 +29,7 @@ export declare class ClientComponent extends EventEmitter {
     private init;
     private runInitializer;
     private initData;
+    private attributeData;
     pathData(): Array<{
         [key: string]: string;
     }>;
@@ -55,6 +56,7 @@ export declare class ClientComponent extends EventEmitter {
     private transitionAttributes;
     private transitionAxis;
     private destroy;
-    bind(element: HTMLElement, event: string, callback: (e: Event) => void): void;
+    bind<T extends LooseObject | undefined = undefined>(element: HTMLElement, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: ClientComponentEventCallback<T>): void;
+    unbind<T extends LooseObject | undefined = undefined>(element: HTMLElement, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: ClientComponentEventCallback<T>): void;
     private unbindAll;
 }

package/build/system/client/ClientComponent.js

@@ -90,19 +90,26 @@ export class ClientComponent extends EventEmitter {
         this.initializerExecuted = true;
     }
     initData() {
-        for (let i = 0; i < this.domNode.attributes.length; i++) {
-            if (/^((number|string|boolean|object|any):)?data-[^\s]+/.test(this.domNode.attributes[i].name)) {
-                const value = this.domNode.attributes[i].value;
+        objectEach(this.attributeData(this.domNode), (key, val) => {
+            this.setData(key, val, false);
+        });
+    }
+    attributeData(node) {
+        const data = {};
+        for (let i = 0; i < node.attributes.length; i++) {
+            if (/^((number|string|boolean|object|any):)?data-[^\s]+/.test(node.attributes[i].name)) {
+                const value = node.attributes[i].value;
                 const attrData = attributeValueFromString(value);
                 if (typeof attrData === 'object') {
-                    this.setData(attrData.key, attrData.value, false);
+                    data[attrData.key] = attrData.value;
                 }
                 else {
-                    const key = toCamelCase(this.domNode.attributes[i].name.substring(5));
-                    this.setData(key, attrData, false);
+                    const key = toCamelCase(node.attributes[i].name.substring(5));
+                    data[key] = attrData;
                 }
             }
         }
+        return data;
     }
     pathData() {
         let current = this;
@@ -714,13 +721,39 @@ export class ClientComponent extends EventEmitter {
         this.emit('afterDestroy');
     }
     bind(element, event, callback) {
+        if (Array.isArray(event)) {
+            event.forEach((eventName) => {
+                this.bind(element, eventName, callback);
+            });
+            return;
+        }
         if (element instanceof HTMLElement) {
+            const callbackWrapper = (e) => {
+                callback.apply(this, [e, this.attributeData(element)]);
+            };
             this.bound.push({
                 element,
                 event,
-                callback
+                callback: callbackWrapper,
+                callbackOriginal: callback
             });
-            element.addEventListener(event, callback);
+            element.addEventListener(event, callbackWrapper);
+        }
+    }
+    unbind(element, event, callback) {
+        if (Array.isArray(event)) {
+            event.forEach((eventName) => {
+                this.unbind(element, eventName, callback);
+            });
+            return;
+        }
+        const boundIndex = this.bound.findIndex((bound) => {
+            return bound.event === event && bound.element === element && bound.callbackOriginal === callback;
+        });
+        if (boundIndex > -1) {
+            const bound = this.bound[boundIndex];
+            bound.element.removeEventListener(bound.event, bound.callback);
+            this.bound.splice(boundIndex, 1);
         }
     }
     unbindAll() {

package/build/system/client/DataStore.d.ts

@@ -1,4 +1,4 @@
-import { AsteriskAny, StoreChangeCallback } from '../Types.js';
+import { StoreChangeCallback } from '../Types.js';
 import { ClientComponent } from './ClientComponent.js';
 export declare class DataStore {
     protected data: {
@@ -16,7 +16,7 @@ export declare class DataStore {
     hasKey(componentId: string, key: string): boolean;
     clear(componentId: string): void;
     destroy(componentId: string): void;
-    onChange(componentId: string, key: string | AsteriskAny, callback: StoreChangeCallback): DataStore;
+    onChange(componentId: string, key: string, callback: StoreChangeCallback): DataStore;
     onChangeCallbacks(componentId: string): Record<string, Array<StoreChangeCallback>>;
     private unbindAll;
 }

package/build/system/client/DataStoreView.d.ts

@@ -1,4 +1,4 @@
-import { AsteriskAny, StoreChangeCallback } from '../Types.js';
+import { StoreChangeCallback } from '../Types.js';
 import { ClientComponent } from './ClientComponent.js';
 import { DataStore } from './DataStore.js';
 export declare class DataStoreView {
@@ -14,6 +14,6 @@ export declare class DataStoreView {
     clear(): void;
     destroy(): void;
     private componentId;
-    onChange(key: string | AsteriskAny, callback: StoreChangeCallback): DataStoreView;
+    onChange(key: string, callback: StoreChangeCallback): DataStoreView;
     onChangeCallbacks(): Record<string, Array<StoreChangeCallback>>;
 }

package/build/system/server/dom/DOMNode.js

@@ -1,6 +1,6 @@
 import { HTMLParser } from "./HTMLParser.js";
-export const selfClosingTags = ['br', 'hr', 'input', 'img', 'link', 'meta', 'source', 'embed', 'path', 'area'];
-export const recognizedHTMLTags = ['body', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'b', 'i', 'a', 'em', 'strong', 'br', 'hr', 'abbr', 'bdi', 'bdo', 'blockquote', 'cite', 'code', 'del', 'dfn', 'ins', 'kbd', 'mark', 'pre', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small', 'span', 'sub', 'sup', 'time', 'u', 'var', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'img', 'area', 'map', 'object', 'param', 'table', 'tr', 'td', 'th', 'caption', 'colgroup', 'col', 'form', 'input', 'label', 'select', 'option', 'textarea', 'button', 'fieldset', 'datalist', 'iframe', 'audio', 'video', 'source', 'track', 'script', 'noscript', 'div', 'nav', 'aside', 'canvas', 'embed', 'template'];
+export const selfClosingTags = ['br', 'wbr', 'hr', 'input', 'img', 'link', 'meta', 'source', 'embed', 'path', 'area'];
+export const recognizedHTMLTags = ['body', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'b', 'i', 'a', 'em', 'strong', 'br', 'wbr', 'hr', 'abbr', 'bdi', 'bdo', 'blockquote', 'cite', 'code', 'del', 'dfn', 'ins', 'kbd', 'mark', 'pre', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small', 'span', 'sub', 'sup', 'time', 'u', 'var', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'img', 'area', 'map', 'object', 'param', 'table', 'tr', 'td', 'th', 'caption', 'colgroup', 'col', 'form', 'input', 'label', 'select', 'option', 'textarea', 'button', 'fieldset', 'datalist', 'iframe', 'audio', 'video', 'source', 'track', 'script', 'noscript', 'div', 'nav', 'aside', 'canvas', 'embed', 'template'];
 export class DOMNode {
     constructor(root, parentNode, tagName) {
         this.parentNode = null;

package/package.json

@@ -14,7 +14,7 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.js",