structured-fw 1.0.6 → 1.0.8

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
@@ -689,6 +689,51 @@ then in ComponentName.html:
 <div data-if="showDiv()"></div>
 ```
 
+### Models
+Every component client side part has it's own data store accessed by this.store. That is the primary way of storing data for your components client side, because it will survive on redraw and you can subscribe to data changes in the store using `this.store.onChange`.
+
+That being said, we need an easy way to use input fields to set values in the store, as that's often what we do when we make web apps.
+
+You can, of course, bind an even listener to the input and set the store value, that's quite easy, but we can accomplis this using `data-model` attribute.
+
+You can add data-model to any HTMLInput within your component, and it will automatically update the store on input value change.
+
+For example:
+
+Direct key:\
+`<input type="text" data-model="name">`
+
+Direct key access:\
+`this.store.get<string>('name')`
+`// returns string`
+
+Nested keys:\
+`<input type="text" data-model="user[name]">`
+
+Nested key access:\
+`this.store.get<LooseObject>('user')`
+`// returns { name: string }`
+
+
+You can nest the keys to any depth, or even make the value an array member if you end the key with `[]`, for example:
+```
+<input type="text" data-model="user[hobbies][]">
+this.store.get<LooseObject>('user')
+// returns { user: { hobbies: Array<string> } }
+```
+
+You can use two modifier attributes with `data-model`:
+- `data-type`
+- `data-nullable`
+
+`data-type` - cast value to given type. Can be one of number | boolean | string, string has no effect as HTMLInput values are already a string by default.\
+If number: if input is empty or value casts to `NaN` then `0` (unless `data-nullable` in which case `null`), othrwise the casted number (uses parseFloat so it works with decimal numbers)\
+If boolean: `"1"` and `"true"` casted to `true`, otherwise `false`\
+If string no type casting is attempted.
+
+`data-nullable` - value of this attribute is unused, as long as the attribute is present on the input, empty values will be casted to `null`. Can be used in conjunction with `data-type`
+
+
 ### Layout
 Prior to version 0.8.7:
 

package/build/system/EventEmitter.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitterCallback } from "./Types.js";
 export declare class EventEmitter<T extends Record<string, any> = Record<string, any>> {
-    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;
+    protected listeners: Partial<Record<Extract<keyof T, string>, Array<EventEmitterCallback<any>>>>;
+    on<K extends Extract<keyof T, string>>(eventName: K, callback: EventEmitterCallback<T[K]>): void;
+    emit(eventName: Extract<keyof T, string>, payload?: any): void;
     off(eventName: keyof T, callback: EventEmitterCallback<any>): void;
 }

package/build/system/EventEmitter.js

@@ -9,9 +9,9 @@ export class EventEmitter {
         this.listeners[eventName].push(callback);
     }
     emit(eventName, payload) {
-        if (Array.isArray(this.listeners[eventName])) {
-            this.listeners[eventName].forEach((callback) => {
-                callback(payload);
+        if (Array.isArray(this.listeners[eventName]) || Array.isArray(this.listeners['*'])) {
+            (this.listeners[eventName] || []).concat(this.listeners['*'] || []).forEach((callback) => {
+                callback(payload, eventName);
             });
         }
     }

package/build/system/Types.d.ts

@@ -159,7 +159,7 @@ 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 | Window;
     event: keyof HTMLElementEventMap;
@@ -172,4 +172,4 @@ export type ClientComponentTransition = {
 };
 export type ClientComponentTransitionEvent = 'show' | 'hide';
 export type ClientComponentTransitions = Record<ClientComponentTransitionEvent, ClientComponentTransition>;
-export type EventEmitterCallback<T> = (payload: T) => void;
+export type EventEmitterCallback<T> = (payload: T, eventName: string) => void;

package/build/system/Util.d.ts

@@ -6,7 +6,7 @@ export declare function toCamelCase(dataKey: string, separator?: string): string
 export declare function toSnakeCase(str: string, joinWith?: string): string;
 export declare function capitalize(str: string): string;
 export declare function isAsync(fn: Function): boolean;
-export declare function randomString(len: number): string;
+export declare function randomString(len: number, method?: 'alphanumeric' | 'numbers' | 'letters' | 'lettersUppercase' | 'lettersLowercase'): string;
 export declare function unique<T>(arr: Array<T>): Array<T>;
 export declare function stripTags(contentWithHTML: string, keepTags?: Array<string>): string;
 export declare function attributeValueToString(key: string, value: any): string;

package/build/system/Util.js

@@ -168,7 +168,7 @@ export function capitalize(str) {
 export function isAsync(fn) {
     return fn.constructor.name === 'AsyncFunction';
 }
-export function randomString(len) {
+export function randomString(len, method = 'alphanumeric') {
     const charCodes = new Uint8Array(len);
     const generators = [
         function () {
@@ -181,8 +181,24 @@ export function randomString(len) {
             return 48 + Math.floor(Math.random() * 10);
         }
     ];
+    const generatorsUsed = [];
+    if (method === 'alphanumeric') {
+        generatorsUsed.push(...generators);
+    }
+    else if (method === 'numbers') {
+        generatorsUsed.push(generators[2]);
+    }
+    else if (method === 'letters') {
+        generatorsUsed.push(...generators.slice(0, 2));
+    }
+    else if (method === 'lettersLowercase') {
+        generatorsUsed.push(generators[1]);
+    }
+    else if (method === 'lettersUppercase') {
+        generatorsUsed.push(generators[0]);
+    }
     for (let i = 0; i < len; i++) {
-        charCodes[i] = generators[Math.floor(Math.random() * generators.length)]();
+        charCodes[i] = generatorsUsed[Math.floor(Math.random() * generatorsUsed.length)]();
     }
     return String.fromCodePoint(...charCodes);
 }

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 | Window, 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

@@ -277,21 +277,6 @@ export class ClientComponent extends EventEmitter {
         if (node === undefined) {
             node = this.domNode;
         }
-        const modelData = (node) => {
-            const field = node.getAttribute('data-model');
-            if (field) {
-                const isCheckbox = node.tagName === 'INPUT' && node.type === 'checkbox';
-                const valueRaw = isCheckbox ? node.checked : node.value;
-                const value = queryStringDecodedSetValue(field, valueRaw);
-                return value;
-            }
-            return {};
-        };
-        const update = (data) => {
-            objectEach(data, (key, val) => {
-                this.store.set(key, val);
-            });
-        };
         if (node.hasAttribute('data-model') && (node.tagName === 'INPUT' || node.tagName === 'SELECT' || node.tagName === 'TEXTAREA')) {
             modelNodes.push(node);
         }
@@ -303,6 +288,53 @@ export class ClientComponent extends EventEmitter {
             });
         }
         if (isSelf) {
+            const modelData = (node) => {
+                const field = node.getAttribute('data-model');
+                if (field) {
+                    const isCheckbox = node.tagName === 'INPUT' && node.type === 'checkbox';
+                    const valueRaw = isCheckbox ? node.checked : node.value;
+                    let valueCasted = valueRaw;
+                    if (!isCheckbox && typeof valueRaw === 'string') {
+                        const dataType = isCheckbox ? 'boolean' : node.getAttribute('data-type') || 'string';
+                        const nullable = node.hasAttribute('data-nullable');
+                        if (nullable && valueRaw.trim().length === 0) {
+                            valueCasted = null;
+                        }
+                        else {
+                            if (dataType === 'number') {
+                                if (valueRaw.trim().length === 0) {
+                                    valueCasted = 0;
+                                }
+                                else {
+                                    const num = parseFloat(valueRaw);
+                                    if (isNaN(num)) {
+                                        valueCasted = nullable ? null : 0;
+                                    }
+                                    else {
+                                        valueCasted = num;
+                                    }
+                                }
+                            }
+                            else if (dataType === 'boolean') {
+                                if (valueRaw === '1' || valueRaw === 'true') {
+                                    valueCasted = true;
+                                }
+                                else {
+                                    valueCasted = false;
+                                }
+                            }
+                        }
+                    }
+                    const value = queryStringDecodedSetValue(field, valueCasted);
+                    return value;
+                }
+                return {};
+            };
+            const update = (data) => {
+                objectEach(data, (key, val) => {
+                    this.store.set(key, val);
+                });
+            };
             let data = {};
             modelNodes.forEach((modelNode) => {
                 modelNode.addEventListener('input', () => {
@@ -321,10 +353,11 @@ export class ClientComponent extends EventEmitter {
                 });
                 const field = modelNode.getAttribute('data-model');
                 if (field) {
-                    const isCheckbox = modelNode.tagName === 'INPUT' && modelNode.type === 'checkbox';
-                    const valueRaw = isCheckbox ? modelNode.checked : modelNode.value;
-                    const value = queryStringDecodedSetValue(field, valueRaw);
-                    data = mergeDeep(data, value);
+                    const updateModel = modelNode.type !== 'radio' || modelNode.checked;
+                    if (updateModel) {
+                        const valueObject = modelData(modelNode);
+                        data = mergeDeep(data, valueObject);
+                    }
                 }
             });
             update(data);
@@ -721,6 +754,12 @@ 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);
@@ -730,7 +769,7 @@ export class ClientComponent extends EventEmitter {
         const isWindow = element instanceof Window;
         if (element instanceof HTMLElement || isWindow) {
             const callbackWrapper = (e) => {
-                callback.apply(this, [e, isWindow ? {} : 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/build/system/server/Request.js

@@ -328,15 +328,15 @@ export class Request {
         const files = readdirSync(routesPath);
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
-            if (!(file.endsWith('.js') || file.endsWith('.ts')) || file.endsWith('.d.ts')) {
-                continue;
-            }
             const filePath = path.resolve(routesPath + '/' + file);
             const isDirectory = statSync(filePath).isDirectory();
             if (isDirectory) {
                 await this.loadHandlers(filePath);
             }
             else {
+                if (!(file.endsWith('.js') || file.endsWith('.ts')) || file.endsWith('.d.ts')) {
+                    continue;
+                }
                 const fn = (await import('file:///' + filePath)).default;
                 if (typeof fn === 'function') {
                     fn(this.app);

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

@@ -1,6 +1,6 @@
 import { HTMLParser } from "./HTMLParser.js";
-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 const selfClosingTags = ['br', 'wbr', 'hr', 'input', 'img', 'link', 'meta', 'source', 'embed', 'path', 'area', 'rect'];
+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', 'rect'];
 export class DOMNode {
     constructor(root, parentNode, tagName) {
         this.parentNode = null;

package/package.json

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