structured-fw 1.0.9 → 1.1.0

package/build/system/EventEmitter.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitterCallback } from './types/eventEmitter.types.js';
 export declare class EventEmitter<T extends Record<string, any> = Record<string, any>> {
     protected listeners: Partial<Record<Extract<keyof T, string>, Array<EventEmitterCallback<any>>>>;
+    protected destroyed: boolean;
     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;
+    unbindAllListeners(): void;
+    emitterDestroy(): void;
 }

package/build/system/EventEmitter.js

@@ -1,14 +1,21 @@
 export class EventEmitter {
     constructor() {
         this.listeners = {};
+        this.destroyed = false;
     }
     on(eventName, callback) {
+        if (this.destroyed) {
+            return;
+        }
         if (!Array.isArray(this.listeners[eventName])) {
             this.listeners[eventName] = [];
         }
         this.listeners[eventName].push(callback);
     }
     emit(eventName, payload) {
+        if (this.destroyed) {
+            return;
+        }
         if (Array.isArray(this.listeners[eventName]) || Array.isArray(this.listeners['*'])) {
             (this.listeners[eventName] || []).concat(this.listeners['*'] || []).forEach((callback) => {
                 callback(payload, eventName);
@@ -28,4 +35,11 @@ export class EventEmitter {
             }
         }
     }
+    unbindAllListeners() {
+        this.listeners = {};
+    }
+    emitterDestroy() {
+        this.unbindAllListeners();
+        this.destroyed = true;
+    }
 }

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

@@ -23,11 +23,11 @@ export declare class ClientComponent extends EventEmitter {
     private conditionalClassNames;
     private refs;
     private refsArray;
-    loaded: boolean;
-    private initializer;
+    isReady: boolean;
     private data;
     constructor(parent: ClientComponent | null, name: string, domNode: HTMLElement, store: DataStore, runInitializer?: boolean);
     private init;
+    private reset;
     private runInitializer;
     private initData;
     private attributeData;
@@ -60,4 +60,7 @@ export declare class ClientComponent extends EventEmitter {
     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;
+    log(msg: any): void;
+    warn(msg: any): void;
+    error(err: any): void;
 }

package/build/system/client/ClientComponent.js

@@ -17,8 +17,7 @@ export class ClientComponent extends EventEmitter {
         this.conditionalClassNames = [];
         this.refs = {};
         this.refsArray = {};
-        this.loaded = false;
-        this.initializer = null;
+        this.isReady = false;
         this.data = {};
         this.name = name;
         this.domNode = domNode;
@@ -35,36 +34,49 @@ export class ClientComponent extends EventEmitter {
         this.storeGlobal = store;
         this.store = new DataStoreView(this.storeGlobal, this);
         if (this.isRoot) {
-            this.init(runInitializer);
+            this.init(false);
         }
     }
-    async init(runInitializer) {
+    async init(isRedraw) {
         const initializerExists = window.initializers !== undefined && this.name in window.initializers;
+        this.reset();
+        this.initChildren();
+        await Promise.all(this.children.map(async (child) => {
+            await child.init(isRedraw);
+        }));
+        if (!initializerExists && this.conditionals.length > 0) {
+            this.store.import(undefined, false, false);
+        }
         this.initRefs();
         this.initData();
         this.initModels();
-        this.initConditionals();
-        await this.initChildren();
         this.promoteRefs();
+        this.initConditionals();
+        await this.runInitializer(isRedraw);
+        this.updateConditionals(false);
         this.store.onChange('*', () => {
             this.updateConditionals(true);
         });
-        if (runInitializer && initializerExists) {
-            await this.runInitializer();
-        }
-        if (this.conditionals.length > 0) {
-            if (!initializerExists) {
-                this.store.import(undefined, false, false);
-            }
-            this.updateConditionals(false);
-        }
         if (this.data.deferred === true) {
             this.setData('deferred', false, false);
             this.redraw();
         }
-        this.loaded = true;
+        this.isReady = true;
         this.emit('ready');
     }
+    reset() {
+        this.data = {};
+        this.isReady = false;
+        this.refs = {};
+        this.refsArray = {};
+        this.conditionalClassNames = [];
+        this.conditionalCallbacks = {};
+        this.conditionals = [];
+        this.redrawRequest = null;
+        this.initializerExecuted = false;
+        this.bound = [];
+        this.children = [];
+    }
     async runInitializer(isRedraw = false) {
         const initializer = window.initializers[this.name];
         if (!initializer) {
@@ -74,14 +86,22 @@ export class ClientComponent extends EventEmitter {
             let initializerFunction = null;
             if (typeof initializer === 'string') {
                 const AsyncFunction = async function () { }.constructor;
-                initializerFunction = new AsyncFunction('const init = ' + initializer + '; await init.apply(this, [...arguments]);');
+                initializerFunction = new AsyncFunction(`
+                    const init = ${initializer};
+                    if (!this.destroyed) {
+                        try {
+                            await init.apply(this, [...arguments]);
+                        } catch(e) {
+                            console.error('Error in component ${this.name}: ' + e.message, this);
+                        }
+                    }
+                `);
             }
             else {
                 initializerFunction = initializer;
             }
             if (initializerFunction) {
-                this.initializer = initializerFunction;
-                await this.initializer.apply(this, [{
+                await initializerFunction.apply(this, [{
                         net: this.net,
                         isRedraw
                     }]);
@@ -133,41 +153,33 @@ export class ClientComponent extends EventEmitter {
         }
         return this;
     }
-    async initChildren(scope, callback) {
+    initChildren(scope, callback) {
         scope = scope || this.domNode;
-        const childInitPromises = [];
         for (let i = 0; i < scope.childNodes.length; i++) {
             const childNode = scope.childNodes[i];
             if (childNode.nodeType == 1) {
                 if (childNode.hasAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`)) {
-                    const component = new ClientComponent(this, childNode.getAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`) || '', childNode, this.storeGlobal);
+                    const component = new ClientComponent(this, childNode.getAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`) || '', childNode, this.storeGlobal, false);
                     this.children.push(component);
                     if (typeof callback === 'function') {
                         callback(component);
                     }
-                    childInitPromises.push(component.init(true));
                 }
                 else {
-                    childInitPromises.push(this.initChildren(childNode, callback));
+                    this.initChildren(childNode, callback);
                 }
             }
         }
-        await Promise.all(childInitPromises);
     }
     async redraw(data) {
         if (window.structuredClientConfig.componentRender === false) {
-            console.error(`Can't redraw component, component rendering URL disabled`);
+            this.error(`Can't redraw component, component rendering URL disabled`);
             return;
         }
         if (this.destroyed) {
             return;
         }
         this.emit('beforeRedraw');
-        if (data) {
-            objectEach(data, (key, val) => {
-                this.setData(key, val, false);
-            });
-        }
         if (this.redrawRequest !== null) {
             this.redrawRequest.abort();
             this.redrawRequest = null;
@@ -178,20 +190,22 @@ export class ClientComponent extends EventEmitter {
         this.redrawRequest = redrawRequest.xhr;
         const componentDataJSON = await redrawRequest.send(JSON.stringify({
             component: this.name,
-            attributes: this.data,
+            attributes: Object.assign(this.data, data || {}),
             unwrap: true
         }));
         this.redrawRequest = null;
         if (componentDataJSON.length === 0) {
             return;
         }
-        this.loaded = false;
+        this.isReady = false;
         this.unbindAll();
         const childStoreChangeCallbacks = {};
-        Array.from(this.children).forEach((child) => {
+        const childrenOld = Array.from(this.children);
+        for (let i = 0; i < childrenOld.length; i++) {
+            const child = childrenOld[i];
             childStoreChangeCallbacks[child.getData('componentId')] = child.store.onChangeCallbacks();
-            child.remove();
-        });
+            await child.remove();
+        }
         const componentData = JSON.parse(componentDataJSON);
         this.domNode.innerHTML = componentData.html;
         objectEach(componentData.data, (key, val) => {
@@ -202,7 +216,9 @@ export class ClientComponent extends EventEmitter {
                 window.initializers[key] = componentData.initializers[key];
             }
         }
-        await this.initChildren(this.domNode, (childNew) => {
+        await this.init(true);
+        for (let i = 0; i < this.children.length; i++) {
+            const childNew = this.children[i];
             const childNewId = childNew.getData('componentId');
             const existingChild = childNewId in childStoreChangeCallbacks;
             if (existingChild) {
@@ -212,20 +228,7 @@ export class ClientComponent extends EventEmitter {
                     });
                 });
             }
-        });
-        this.refs = {};
-        this.refsArray = {};
-        this.conditionals = [];
-        this.initRefs();
-        this.initModels();
-        this.initConditionals();
-        this.promoteRefs();
-        if (this.initializer) {
-            this.initializerExecuted = false;
-            this.runInitializer(true);
         }
-        this.updateConditionals(false);
-        this.loaded = true;
         this.emit('afterRedraw');
     }
     initConditionals(node) {
@@ -337,7 +340,7 @@ export class ClientComponent extends EventEmitter {
             };
             let data = {};
             modelNodes.forEach((modelNode) => {
-                modelNode.addEventListener('input', () => {
+                this.bind(modelNode, 'input', () => {
                     let data = modelData(modelNode);
                     const key = Object.keys(data)[0];
                     if (typeof data[key] === 'object') {
@@ -390,14 +393,14 @@ export class ClientComponent extends EventEmitter {
         if (isMethod) {
             const parts = /^(!?)\s*([a-zA-Z]+[a-zA-Z0-9_]*)\(([^)]*)\)$/.exec(condition);
             if (parts === null) {
-                console.error(`Could not parse condition ${condition}`);
+                this.error(`Could not parse condition ${condition}`);
                 return false;
             }
             const negated = parts[1] === '!';
             const functionName = parts[2];
             const args = parts[3].trim();
             if (typeof this.conditionalCallbacks[functionName] !== 'function') {
-                console.warn(`No registered conditional callback '${functionName}'`);
+                this.warn(`No registered conditional callback '${functionName}'`);
                 return false;
             }
             const isTrue = this.conditionalCallbacks[functionName](args === '' ? undefined : eval(`(${args})`));
@@ -409,7 +412,7 @@ export class ClientComponent extends EventEmitter {
         else {
             const parts = /^(!)?\s*([a-zA-Z0-9_]+)\s*((?:==)|(?:===)|(?:!=)|(?:!==)|<|>|(?:<=)|(?:>=))?\s?([^=]+)?$/.exec(condition);
             if (parts === null) {
-                console.error(`Could not parse condition ${condition}`);
+                this.error(`Could not parse condition ${condition}`);
                 return false;
             }
             const property = parts[2];
@@ -559,7 +562,7 @@ export class ClientComponent extends EventEmitter {
     }
     async add(appendTo, componentName, data) {
         if (window.structuredClientConfig.componentRender === false) {
-            console.error(`Can't add component, component rendering URL disabled`);
+            this.error(`Can't add component, component rendering URL disabled`);
             return null;
         }
         const container = typeof appendTo === 'string' ? this.domNode.querySelector(appendTo) : appendTo;
@@ -585,7 +588,7 @@ export class ClientComponent extends EventEmitter {
         const componentNode = tmpContainer.firstChild;
         const component = new ClientComponent(this, componentName, componentNode, this.storeGlobal);
         this.children.push(component);
-        await component.init(true);
+        await component.init(false);
         container.appendChild(componentNode);
         return component;
     }
@@ -780,10 +783,10 @@ export class ClientComponent extends EventEmitter {
         this.conditionalCallbacks = {};
         this.refs = {};
         this.refsArray = {};
-        this.initializer = null;
         this.data = {};
         this.destroyed = true;
         this.emit('afterDestroy');
+        this.emitterDestroy();
     }
     bind(element, event, callback) {
         if (Array.isArray(element)) {
@@ -834,4 +837,13 @@ export class ClientComponent extends EventEmitter {
         });
         this.bound = [];
     }
+    log(msg) {
+        console.log(this.name, msg);
+    }
+    warn(msg) {
+        console.warn(this.name, msg);
+    }
+    error(err) {
+        console.error(this.name, err);
+    }
 }

package/build/system/server/Document.d.ts

@@ -11,6 +11,8 @@ export declare class Document extends Component<{
     head: DocumentHead;
     language: string;
     application: Application;
+    htmlTagAttributes: Record<string, string>;
+    bodyTagAttributes: Record<string, string>;
     initializers: Initializers;
     initializersInitialized: boolean;
     componentIds: Array<string>;
@@ -25,4 +27,6 @@ export declare class Document extends Component<{
     allocateId(): string;
     loadView(pathRelative: string, data?: LooseObject): Promise<Document>;
     loadComponent(componentName: string, data?: LooseObject): Promise<Document>;
+    private htmlTagAttributesString;
+    private bodyTagAttributesString;
 }

package/build/system/server/Document.js

@@ -8,6 +8,8 @@ export class Document extends Component {
     constructor(app, title, ctx) {
         super('root');
         this.language = 'en';
+        this.htmlTagAttributes = {};
+        this.bodyTagAttributes = {};
         this.initializers = {};
         this.initializersInitialized = false;
         this.componentIds = [];
@@ -55,10 +57,12 @@ export class Document extends Component {
             this.initInitializers();
             this.initClientConfig();
         }
+        const htmlTagAttributes = this.htmlTagAttributesString();
+        const bodyTagAttributes = this.bodyTagAttributesString();
         return `<!DOCTYPE html>
-        <html lang="${this.language}">
+        <html lang="${this.language}"${htmlTagAttributes.length > 0 ? ` ${htmlTagAttributes}` : ''}>
         ${this.head.toString()}
-        <body>
+        <body${bodyTagAttributes.length > 0 ? ` ${bodyTagAttributes}` : ''}>
             ${this.body()}
         </body>
         </html>`;
@@ -88,4 +92,18 @@ export class Document extends Component {
         }
         return this;
     }
+    htmlTagAttributesString() {
+        const parts = [];
+        for (const attributeName in this.htmlTagAttributes) {
+            parts.push(`${attributeName}="${this.htmlTagAttributes[attributeName]}"`);
+        }
+        return parts.join(' ');
+    }
+    bodyTagAttributesString() {
+        const parts = [];
+        for (const attributeName in this.bodyTagAttributes) {
+            parts.push(`${attributeName}="${this.bodyTagAttributes[attributeName]}"`);
+        }
+        return parts.join(' ');
+    }
 }

package/package.json

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

package/build/system/RequestHandler.d.ts

@@ -1 +0,0 @@
-export {};

package/build/system/RequestHandler.js

@@ -1 +0,0 @@
-export {};

package/build/system/RequestMethod.d.ts

@@ -1 +0,0 @@
-export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';

package/build/system/RequestMethod.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,7 +0,0 @@
-import { EventEmitterCallback } from "../Types.js";
-export declare class EventEmitter {
-    protected listeners: Record<string, Array<EventEmitterCallback>>;
-    on(eventName: string, callback: EventEmitterCallback): void;
-    emit(eventName: string, payload?: any): void;
-    unbind(eventName: string, callback: EventEmitterCallback): void;
-}

package/build/system/client/EventEmitter.js

@@ -1,31 +0,0 @@
-export class EventEmitter {
-    constructor() {
-        this.listeners = {};
-    }
-    on(eventName, callback) {
-        if (!Array.isArray(this.listeners[eventName])) {
-            this.listeners[eventName] = [];
-        }
-        this.listeners[eventName].push(callback);
-    }
-    emit(eventName, payload) {
-        if (Array.isArray(this.listeners[eventName])) {
-            this.listeners[eventName].forEach((callback) => {
-                callback(payload);
-            });
-        }
-    }
-    unbind(eventName, callback) {
-        if (Array.isArray(this.listeners[eventName])) {
-            while (true) {
-                const index = this.listeners[eventName].indexOf(callback);
-                if (index > -1) {
-                    this.listeners[eventName].splice(index, 1);
-                }
-                else {
-                    break;
-                }
-            }
-        }
-    }
-}

package/build/system/request.d.ts

@@ -1 +0,0 @@
-export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';

package/build/system/request.js

@@ -1 +0,0 @@
-export {};

package/build/system/types/request.d.ts

@@ -1,57 +0,0 @@
-import { IncomingMessage, ServerResponse } from "http";
-import { LooseObject } from "../Types.js";
-import { symbolArrays } from "../Symbols.js";
-export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-export type RequestCallback<R extends any, Body extends LooseObject | undefined> = (ctx: RequestContext<Body>) => Promise<R>;
-export type RequestHandler = {
-    match: Array<URISegmentPattern> | RegExp;
-    methods: Array<RequestMethod>;
-    callback: RequestCallback<any, LooseObject | undefined>;
-    scope: any;
-    staticAsset: boolean;
-};
-export type RequestContext<Body extends LooseObject | undefined = LooseObject> = {
-    request: IncomingMessage;
-    response: ServerResponse;
-    args: URIArguments;
-    handler: null | RequestHandler;
-    cookies: Record<string, string>;
-    body: Body;
-    bodyRaw?: Buffer;
-    files?: Record<string, RequestBodyRecordValue>;
-    data: RequestContextData;
-    sessionId?: string;
-    isAjax: boolean;
-    getArgs: PostedDataDecoded;
-    respondWith: (data: any) => void;
-    redirect: (to: string, statusCode?: number) => void;
-    show404: () => Promise<void>;
-};
-export type PostedDataDecoded = Record<string, string | boolean | Array<string | boolean | PostedDataDecoded> | Record<string, string | boolean | Array<string | boolean | PostedDataDecoded>> | Record<string, string | boolean | Array<string | boolean>>>;
-export type RequestBodyRecordValue = string | Array<RequestBodyRecordValue> | {
-    [key: string]: RequestBodyRecordValue;
-} | {
-    [key: string]: RequestBodyFile;
-} | Array<RequestBodyFile> | RequestBodyFile;
-export interface RequestBodyArguments {
-    [key: string]: RequestBodyRecordValue;
-    [symbolArrays]?: {
-        [key: string]: Array<string>;
-    };
-}
-export type RequestBodyFile = {
-    fileName: string;
-    data: Buffer;
-    type: string;
-};
-export type RequestBodyFiles = {
-    [key: string]: RequestBodyFile;
-};
-export type URISegmentPattern = {
-    pattern: string | RegExp;
-    name?: string;
-    type?: 'string' | 'number';
-};
-export type URIArguments = {
-    [key: string]: string | number | RegExpExecArray;
-};

package/build/system/types/request.js

@@ -1 +0,0 @@
-import { symbolArrays } from "../Symbols.js";