structured-fw 1.0.5 → 1.0.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<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
+- `bind<T extends LooseObject | undefined = undefined>(element: HTMLElement | Window | Array<HTMLElement | Window>, eventName: string | Array<string>, callback: (e: Event, data: T) => void): void` - adds event listener(s) to given element(s). 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). Third argument provided to callback is the `element`. The method is generic, allowing you to specify expected data type received as the second argument.
 - `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,9 +159,9 @@ export type InitializerFunctionContext = {
     isRedraw: boolean;
 };
 export type StoreChangeCallback = (key: string, value: any, oldValue: any, componentId: string) => void;
-export type ClientComponentEventCallback<T> = T extends undefined ? (e: Event) => void : (e: Event, data: T) => void;
+export type ClientComponentEventCallback<T> = (e: Event, data: T, element: HTMLElement | Window) => void;
 export type ClientComponentBoundEvent<T extends LooseObject | undefined = undefined> = {
-    element: HTMLElement;
+    element: HTMLElement | Window;
     event: keyof HTMLElementEventMap;
     callback: (e: Event) => void;
     callbackOriginal: ClientComponentEventCallback<T>;

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

@@ -56,7 +56,7 @@ export declare class ClientComponent extends EventEmitter {
     private transitionAttributes;
     private transitionAxis;
     private destroy;
-    bind<T extends LooseObject | undefined = undefined>(element: HTMLElement, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: ClientComponentEventCallback<T>): void;
+    bind<T extends LooseObject | undefined = undefined>(element: HTMLElement | Window | Array<HTMLElement | Window>, 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

@@ -721,15 +721,22 @@ export class ClientComponent extends EventEmitter {
         this.emit('afterDestroy');
     }
     bind(element, event, callback) {
+        if (Array.isArray(element)) {
+            element.forEach((el) => {
+                this.bind(el, event, callback);
+            });
+            return;
+        }
         if (Array.isArray(event)) {
             event.forEach((eventName) => {
                 this.bind(element, eventName, callback);
             });
             return;
         }
-        if (element instanceof HTMLElement) {
+        const isWindow = element instanceof Window;
+        if (element instanceof HTMLElement || isWindow) {
             const callbackWrapper = (e) => {
-                callback.apply(this, [e, this.attributeData(element)]);
+                callback.apply(this, [e, isWindow ? undefined : this.attributeData(element), element]);
             };
             this.bound.push({
                 element,

package/build/system/server/Component.js

@@ -89,8 +89,14 @@ export class Component extends EventEmitter {
             return;
         }
         const importedParentData = this.parent ? this.importedParentData(this.parent.data) : {};
-        const dataServerSidePart = (this.entry && this.entry.module ?
-            await this.entry.module.getData(Object.assign(importedParentData, this.attributes, data || {}), this.document.ctx, this.document.application, this) : {}) || {};
+        let dataServerSidePart = {};
+        try {
+            dataServerSidePart = (this.entry && this.entry.module ?
+                await this.entry.module.getData(Object.assign(importedParentData, this.attributes, data || {}), this.document.ctx, this.document.application, this) : {}) || {};
+        }
+        catch (e) {
+            throw new Error(`Error executing getData in component ${this.name}: ${e.message}`);
+        }
         if (data === undefined) {
             if (this.entry && this.entry.module) {
                 this.data = Object.assign(this.data, dataServerSidePart);
@@ -250,6 +256,11 @@ export class Component extends EventEmitter {
             return;
         }
         const html = this.entry ? this.entry.html : this.dom.innerHTML;
-        this.dom.innerHTML = this.document.application.handlebars.compile(html, data);
+        try {
+            this.dom.innerHTML = this.document.application.handlebars.compile(html, data);
+        }
+        catch (e) {
+            throw new Error(`Error compiling Handlebars template in component ${this.name}, error: ${e.message}`);
+        }
     }
 }

package/build/system/server/Layout.js

@@ -25,6 +25,10 @@ export class Layout {
         }
         const component = new Component(componentName, layoutComponent[0], doc, false);
         await component.init(`<${componentName}></${componentName}>`, data);
+        const conditionals = component.dom.queryByHasAttribute('data-if');
+        for (let i = 0; i < conditionals.length; i++) {
+            conditionals[i].style.display = 'none';
+        }
         return doc;
     }
 }

package/package.json

@@ -19,14 +19,13 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.js",
     "start": "cd build && node index.js",
-    "prepublish": "tsc",
-    "pack": "tsc && npm pack",
-    "publish": "tsc && npm publish"
+    "compileAndPack": "tsc && npm pack",
+    "compileAndPublish": "tsc && npm publish"
   },
   "bin": {
     "structured": "./build/system/bin/structured.js"
@@ -57,6 +56,7 @@
     "./Component": "./build/system/server/Component.js",
     "./Layout": "./build/system/server/Layout.js",
     "./FormValidation": "./build/system/server/FormValidation.js",
-    "./ClientComponent": "./build/system/client/ClientComponent.js"
+    "./ClientComponent": "./build/system/client/ClientComponent.js",
+    "./Net": "./build/system/client/Net.js"
   }
 }