structured-fw 1.0.7 → 1.0.8

package/README.md

@@ -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

@@ -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.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);

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,7 +19,7 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.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"