structured-fw 0.9.3 → 0.9.4

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(element: HTMLElement, eventName: string | Array<string>, callback: (e: Event) => 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 removed
 - `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,11 @@ export type InitializerFunctionContext = {
     isRedraw: boolean;
 };
 export type StoreChangeCallback = (key: string, value: any, oldValue: any, componentId: string) => void;
-export type AsteriskAny = '*';
+export type ClientComponentBoundEvent = {
+    element: HTMLElement;
+    event: keyof HTMLElementEventMap;
+    callback: (e: Event) => void;
+};
 export type ClientComponentTransition = {
     fade: false | number;
     slide: false | number;

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

@@ -55,6 +55,7 @@ export declare class ClientComponent extends EventEmitter {
     private transitionAttributes;
     private transitionAxis;
     private destroy;
-    bind(element: HTMLElement, event: string, callback: (e: Event) => void): void;
+    bind(element: HTMLElement, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: (e: Event) => void): void;
+    unbind(element: HTMLElement, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: (e: Event) => void): void;
     private unbindAll;
 }

package/build/system/client/ClientComponent.js

@@ -714,6 +714,12 @@ 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) {
             this.bound.push({
                 element,
@@ -723,6 +729,22 @@ export class ClientComponent extends EventEmitter {
             element.addEventListener(event, callback);
         }
     }
+    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 && callback === callback;
+        });
+        if (boundIndex > -1) {
+            const bound = this.bound[boundIndex];
+            bound.element.removeEventListener(bound.event, bound.callback);
+            this.bound.splice(boundIndex, 1);
+        }
+    }
     unbindAll() {
         this.bound.forEach((bound) => {
             bound.element.removeEventListener(bound.event, bound.callback);

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.4",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.js",