structured-fw 0.9.4 → 0.9.7

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/build/system/server/Application.d.ts

@@ -18,6 +18,7 @@ export declare class Application {
     readonly components: Components;
     readonly handlebars: Handlebars;
     readonly exportedRequestContextData: Array<keyof RequestContextData>;
+    data: LooseObject;
     constructor(config: StructuredConfig);
     init(): Promise<void>;
     private start;

package/build/system/server/Application.js

@@ -18,6 +18,7 @@ export class Application {
         this.eventEmitter = new EventEmitter();
         this.handlebars = new Handlebars();
         this.exportedRequestContextData = [];
+        this.data = {};
         this.config = config;
         this.cookies = new Cookies();
         this.session = new Session(this);

package/index.ts

@@ -1,30 +1,4 @@
 import { Application } from "structured-fw/Application";
 import { config } from './Config.js';
-import { Layout } from "./system/server/Layout.js";
 
-const app = new Application(config);
-
-app.registerPlugin(async (app) => {
-    
-}, {
-    poop: 123
-});
-
-// app.on('afterComponentsLoaded', (components) => {
-//     components.componentNames.forEach((componentName) => {
-//         console.log(componentName)
-//         console.log(components.getByName(componentName));
-//     });
-// })
-
-// app.on('componentCreated', (component) => {
-//     console.log(component.document.id);
-// })
-
-app.on('documentCreated', (document) => {
-    document.on('componentCreated', (component) => {
-        document.head.add(`<script>console.log('${component.name}')</script>`);
-    });
-});
-
-export const layout: Layout = new Layout(app, 'layout');
+new Application(config);

package/package.json

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