structured-fw 0.9.4 → 0.9.5

package/README.md

@@ -644,7 +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
+- `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/Types.d.ts

@@ -159,10 +159,12 @@ export type InitializerFunctionContext = {
     isRedraw: boolean;
 };
 export type StoreChangeCallback = (key: string, value: any, oldValue: any, componentId: string) => void;
-export type ClientComponentBoundEvent = {
+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;

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,7 +56,7 @@ export declare class ClientComponent extends EventEmitter {
     private transitionAttributes;
     private transitionAxis;
     private destroy;
-    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;
+    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;
@@ -721,12 +728,16 @@ export class ClientComponent extends EventEmitter {
             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) {
@@ -737,7 +748,7 @@ export class ClientComponent extends EventEmitter {
             return;
         }
         const boundIndex = this.bound.findIndex((bound) => {
-            return bound.event === event && bound.element === element && callback === callback;
+            return bound.event === event && bound.element === element && bound.callbackOriginal === callback;
         });
         if (boundIndex > -1) {
             const bound = this.bound[boundIndex];

package/package.json

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