structured-fw 1.1.0 → 1.1.5

package/build/system/EventEmitter.d.ts

@@ -3,7 +3,7 @@ export declare class EventEmitter<T extends Record<string, any> = Record<string,
     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;
+    emit(eventName: Extract<keyof T, string>, payload?: any): Promise<void>;
     off(eventName: keyof T, callback: EventEmitterCallback<any>): void;
     unbindAllListeners(): void;
     emitterDestroy(): void;

package/build/system/EventEmitter.js

@@ -10,28 +10,27 @@ export class EventEmitter {
         if (!Array.isArray(this.listeners[eventName])) {
             this.listeners[eventName] = [];
         }
+        if (this.listeners[eventName].indexOf(callback) > -1) {
+            return;
+        }
         this.listeners[eventName].push(callback);
     }
-    emit(eventName, payload) {
+    async 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);
-            });
+            const listeners = (this.listeners[eventName] || []).concat(this.listeners['*'] || []);
+            for (let i = 0; i < listeners.length; i++) {
+                await listeners[i](payload, eventName);
+            }
         }
     }
     off(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;
-                }
+            const index = this.listeners[eventName].indexOf(callback);
+            if (index > -1) {
+                this.listeners[eventName].splice(index, 1);
             }
         }
     }

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

@@ -1,6 +1 @@
-import { App } from './App.js';
-import { Net } from './Net.js';
-export declare class Client {
-    Components: App;
-    Net: Net;
-}
+export {};

package/build/system/client/Client.js

@@ -1,9 +1,2 @@
-import { App } from './App.js';
-import { Net } from './Net.js';
-export class Client {
-    constructor() {
-        this.Components = new App();
-        this.Net = new Net();
-    }
-}
-new App();
+import { ClientApplication } from './ClientApplication.js';
+new ClientApplication();

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

@@ -0,0 +1,13 @@
+import { DataStore } from './DataStore.js';
+import { ClientComponent } from './ClientComponent.js';
+import { InitializerFunction } from '../types/component.types.js';
+export declare class ClientApplication {
+    root: ClientComponent;
+    store: DataStore;
+    initializers: Record<string, InitializerFunction>;
+    constructor();
+    getInitializer(componentName: string): InitializerFunction | null;
+    private loadInitializers;
+    hasInitializer(componentName: string): boolean;
+    registerInitializer(componentName: string, initializerFunctionString: string): void;
+}

package/build/system/client/ClientApplication.js

@@ -0,0 +1,43 @@
+import { DataStore } from './DataStore.js';
+import { ClientComponent } from './ClientComponent.js';
+export class ClientApplication {
+    constructor() {
+        this.store = new DataStore();
+        this.initializers = {};
+        this.loadInitializers();
+        this.root = new ClientComponent(null, 'root', document.body, this);
+    }
+    getInitializer(componentName) {
+        if (!this.hasInitializer(componentName)) {
+            return null;
+        }
+        return this.initializers[componentName];
+    }
+    loadInitializers() {
+        if (!!window.initializers) {
+            for (const componentName in window.initializers) {
+                this.registerInitializer(componentName, window.initializers[componentName]);
+            }
+        }
+    }
+    hasInitializer(componentName) {
+        return componentName in this.initializers;
+    }
+    registerInitializer(componentName, initializerFunctionString) {
+        if (this.hasInitializer(componentName)) {
+            return;
+        }
+        const AsyncFunction = async function () { }.constructor;
+        const initializerFunction = new AsyncFunction(`
+            if (!this.destroyed) {
+                const init = ${initializerFunctionString};
+                try {
+                    await init.apply(this, [...arguments]);
+                } catch(e) {
+                    console.error('Error in component ${componentName}: ' + e.message, this);
+                }
+            }
+        `);
+        this.initializers[componentName] = initializerFunction;
+    }
+}

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

@@ -1,9 +1,10 @@
 import { LooseObject } from '../types/general.types.js';
 import { ClientComponentEventCallback } from '../types/component.types.js';
 import { DataStoreView } from './DataStoreView.js';
-import { DataStore } from './DataStore.js';
 import { Net } from './Net.js';
 import { EventEmitter } from '../EventEmitter.js';
+import { ClientApplication } from './ClientApplication.js';
+import { EventEmitterCallback } from '../types/eventEmitter.types.js';
 export declare class ClientComponent extends EventEmitter {
     readonly name: string;
     children: Array<ClientComponent>;
@@ -12,9 +13,10 @@ export declare class ClientComponent extends EventEmitter {
     readonly isRoot: boolean;
     readonly root: ClientComponent;
     store: DataStoreView;
-    private storeGlobal;
+    private app;
     readonly net: Net;
     private initializerExecuted;
+    readonly fn: Record<string, (...args: Array<any>) => any | undefined>;
     destroyed: boolean;
     private redrawRequest;
     private bound;
@@ -25,7 +27,7 @@ export declare class ClientComponent extends EventEmitter {
     private refsArray;
     isReady: boolean;
     private data;
-    constructor(parent: ClientComponent | null, name: string, domNode: HTMLElement, store: DataStore, runInitializer?: boolean);
+    constructor(parent: ClientComponent | null, name: string, domNode: HTMLElement, app: ClientApplication);
     private init;
     private reset;
     private runInitializer;
@@ -46,7 +48,6 @@ export declare class ClientComponent extends EventEmitter {
     private execCondition;
     conditionalCallback(name: string, callback: (args?: any) => boolean, updateConditionals?: boolean): void;
     private updateConditionals;
-    remove(): Promise<void>;
     parentFind(parentName: string): ClientComponent | null;
     find(componentName: string, recursive?: boolean): null | ClientComponent;
     query(componentName: string, recursive?: boolean, results?: Array<ClientComponent>): Array<ClientComponent>;
@@ -57,8 +58,11 @@ export declare class ClientComponent extends EventEmitter {
     private transitionAttributes;
     private transitionAxis;
     private destroy;
-    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;
+    remove(): Promise<void>;
+    bind<T extends any>(element: ClientComponent, event: string, callback: EventEmitterCallback<T>): void;
+    bind<T extends LooseObject | 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 | Window | ClientComponent, event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap>, callback: ClientComponentEventCallback<T> | EventEmitterCallback<T>): void;
+    private unbindOwn;
     private unbindAll;
     log(msg: any): void;
     warn(msg: any): void;

package/build/system/client/ClientComponent.js

@@ -4,7 +4,7 @@ import { Net } from './Net.js';
 import { NetRequest } from './NetRequest.js';
 import { EventEmitter } from '../EventEmitter.js';
 export class ClientComponent extends EventEmitter {
-    constructor(parent, name, domNode, store, runInitializer = true) {
+    constructor(parent, name, domNode, app) {
         super();
         this.children = [];
         this.net = new Net();
@@ -31,15 +31,35 @@ export class ClientComponent extends EventEmitter {
             this.root = parent.root;
             this.parent = parent;
         }
-        this.storeGlobal = store;
-        this.store = new DataStoreView(this.storeGlobal, this);
+        this.app = app;
+        this.store = new DataStoreView(this.app.store, this);
+        const self = this;
+        this.fn = new Proxy(this.store, {
+            set(target, key, val) {
+                const fnKey = `fn_${key}`;
+                if (target.has(fnKey)) {
+                    return true;
+                }
+                target.set(fnKey, val);
+                return true;
+            },
+            get(target, key) {
+                return target.get(`fn_${key}`) || (() => {
+                    self.warn(`Function ${key} not defined`);
+                });
+            },
+        });
         if (this.isRoot) {
             this.init(false);
         }
     }
-    async init(isRedraw) {
-        const initializerExists = window.initializers !== undefined && this.name in window.initializers;
+    async init(isRedraw, data = {}) {
+        const initializerExists = this.app.hasInitializer(this.name);
         this.reset();
+        this.initData();
+        objectEach(data, (key, val) => {
+            this.setData(key, val, false);
+        });
         this.initChildren();
         await Promise.all(this.children.map(async (child) => {
             await child.init(isRedraw);
@@ -48,9 +68,7 @@ export class ClientComponent extends EventEmitter {
             this.store.import(undefined, false, false);
         }
         this.initRefs();
-        this.initData();
         this.initModels();
-        this.promoteRefs();
         this.initConditionals();
         await this.runInitializer(isRedraw);
         this.updateConditionals(false);
@@ -78,34 +96,15 @@ export class ClientComponent extends EventEmitter {
         this.children = [];
     }
     async runInitializer(isRedraw = false) {
-        const initializer = window.initializers[this.name];
-        if (!initializer) {
-            return;
-        }
         if (!this.initializerExecuted && !this.destroyed) {
-            let initializerFunction = null;
-            if (typeof initializer === 'string') {
-                const AsyncFunction = async function () { }.constructor;
-                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) {
-                await initializerFunction.apply(this, [{
-                        net: this.net,
-                        isRedraw
-                    }]);
+            const initializer = this.app.getInitializer(this.name);
+            if (initializer === null) {
+                return;
             }
+            await initializer.apply(this, [{
+                    net: this.net,
+                    isRedraw
+                }]);
         }
         this.initializerExecuted = true;
     }
@@ -159,7 +158,7 @@ export class ClientComponent extends EventEmitter {
             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, false);
+                    const component = new ClientComponent(this, childNode.getAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`) || '', childNode, this.app);
                     this.children.push(component);
                     if (typeof callback === 'function') {
                         callback(component);
@@ -179,11 +178,12 @@ export class ClientComponent extends EventEmitter {
         if (this.destroyed) {
             return;
         }
-        this.emit('beforeRedraw');
+        await this.emit('beforeRedraw');
         if (this.redrawRequest !== null) {
             this.redrawRequest.abort();
             this.redrawRequest = null;
         }
+        this.unbindOwn();
         const redrawRequest = new NetRequest('POST', window.structuredClientConfig.componentRender, {
             'content-type': 'application/json'
         });
@@ -204,19 +204,14 @@ export class ClientComponent extends EventEmitter {
         for (let i = 0; i < childrenOld.length; i++) {
             const child = childrenOld[i];
             childStoreChangeCallbacks[child.getData('componentId')] = child.store.onChangeCallbacks();
-            await child.remove();
+            await child.destroy();
         }
         const componentData = JSON.parse(componentDataJSON);
         this.domNode.innerHTML = componentData.html;
-        objectEach(componentData.data, (key, val) => {
-            this.setData(key, val, false);
-        });
-        for (const key in componentData.initializers) {
-            if (!window.initializers[key]) {
-                window.initializers[key] = componentData.initializers[key];
-            }
+        for (const componentName in componentData.initializers) {
+            this.app.registerInitializer(componentName, componentData.initializers[componentName]);
         }
-        await this.init(true);
+        await this.init(true, componentData.data);
         for (let i = 0; i < this.children.length; i++) {
             const childNew = this.children[i];
             const childNewId = childNew.getData('componentId');
@@ -229,7 +224,7 @@ export class ClientComponent extends EventEmitter {
                 });
             }
         }
-        this.emit('afterRedraw');
+        await this.emit('afterRedraw');
     }
     initConditionals(node) {
         const isSelf = node === undefined;
@@ -274,6 +269,7 @@ export class ClientComponent extends EventEmitter {
                 this.initRefs(child);
             }
         });
+        this.promoteRefs();
     }
     initModels(node, modelNodes = []) {
         const isSelf = node === undefined;
@@ -503,19 +499,6 @@ export class ClientComponent extends EventEmitter {
             }
         });
     }
-    async remove() {
-        if (!this.isRoot) {
-            const children = Array.from(this.children);
-            for (let i = 0; i < children.length; i++) {
-                await children[i].remove();
-            }
-            if (this.parent) {
-                this.parent.children.splice(this.parent.children.indexOf(this), 1);
-            }
-            this.domNode.parentElement?.removeChild(this.domNode);
-            await this.destroy();
-        }
-    }
     parentFind(parentName) {
         let parent = this.parent;
         while (true) {
@@ -578,17 +561,15 @@ export class ClientComponent extends EventEmitter {
             unwrap: false
         }));
         const res = JSON.parse(componentDataJSON);
-        for (let key in res.initializers) {
-            if (!window.initializers[key]) {
-                window.initializers[key] = res.initializers[key];
-            }
+        for (let componentName in res.initializers) {
+            this.app.registerInitializer(componentName, res.initializers[componentName]);
         }
         const tmpContainer = document.createElement('div');
         tmpContainer.innerHTML = res.html;
         const componentNode = tmpContainer.firstChild;
-        const component = new ClientComponent(this, componentName, componentNode, this.storeGlobal);
+        const component = new ClientComponent(this, componentName, componentNode, this.app);
         this.children.push(component);
-        await component.init(false);
+        await component.init(false, res.data);
         container.appendChild(componentNode);
         return component;
     }
@@ -775,19 +756,25 @@ export class ClientComponent extends EventEmitter {
             this.redrawRequest.abort();
             this.redrawRequest = null;
         }
-        this.emit('beforeDestroy');
+        await this.emit('beforeDestroy');
+        this.domNode.parentElement?.removeChild(this.domNode);
+        const children = Array.from(this.children);
+        for (let i = 0; i < children.length; i++) {
+            await children[i].destroy();
+        }
+        if (this.parent) {
+            this.parent.children.splice(this.parent.children.indexOf(this), 1);
+        }
         this.store.destroy();
         this.unbindAll();
-        this.conditionals = [];
-        this.conditionalClassNames = [];
-        this.conditionalCallbacks = {};
-        this.refs = {};
-        this.refsArray = {};
-        this.data = {};
+        this.reset();
         this.destroyed = true;
-        this.emit('afterDestroy');
+        await this.emit('afterDestroy');
         this.emitterDestroy();
     }
+    async remove() {
+        await this.destroy();
+    }
     bind(element, event, callback) {
         if (Array.isArray(element)) {
             element.forEach((el) => {
@@ -801,19 +788,33 @@ export class ClientComponent extends EventEmitter {
             });
             return;
         }
-        const isWindow = element instanceof Window;
-        if (element instanceof HTMLElement || isWindow) {
+        if (element instanceof HTMLElement || element instanceof Window) {
+            const cb = callback;
             const callbackWrapper = (e) => {
-                callback.apply(this, [e, isWindow ? undefined : this.attributeData(element), element]);
+                cb.apply(this, [
+                    e,
+                    element instanceof Window ? undefined : this.attributeData(element),
+                    element
+                ]);
             };
             this.bound.push({
                 element,
-                event,
+                event: event,
                 callback: callbackWrapper,
                 callbackOriginal: callback
             });
             element.addEventListener(event, callbackWrapper);
         }
+        else if (element instanceof ClientComponent) {
+            const cb = callback;
+            this.bound.push({
+                element,
+                event: event,
+                callback: cb,
+                callbackOriginal: cb
+            });
+            element.on(event, cb);
+        }
     }
     unbind(element, event, callback) {
         if (Array.isArray(event)) {
@@ -827,13 +828,25 @@ export class ClientComponent extends EventEmitter {
         });
         if (boundIndex > -1) {
             const bound = this.bound[boundIndex];
-            bound.element.removeEventListener(bound.event, bound.callback);
-            this.bound.splice(boundIndex, 1);
+            if (bound.element instanceof ClientComponent) {
+                bound.element.off(bound.event, bound.callback);
+            }
+            else {
+                bound.element.removeEventListener(bound.event, bound.callback);
+                this.bound.splice(boundIndex, 1);
+            }
         }
     }
+    unbindOwn() {
+        this.bound.forEach((bound) => {
+            if (bound.element === this) {
+                this.unbind(bound.element, bound.event, bound.callback);
+            }
+        });
+    }
     unbindAll() {
         this.bound.forEach((bound) => {
-            bound.element.removeEventListener(bound.event, bound.callback);
+            this.unbind(bound.element, bound.event, bound.callbackOriginal);
         });
         this.bound = [];
     }

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

@@ -10,6 +10,7 @@ export declare class DataStoreView {
     get<T>(key: string): T | undefined;
     toggle(key: string): void;
     keys(): Array<string>;
+    has(key: string): boolean;
     import(fields?: Array<string>, force?: boolean, triggerListeners?: boolean): void;
     clear(): void;
     destroy(): void;

package/build/system/client/DataStoreView.js

@@ -23,7 +23,10 @@ export class DataStoreView {
         if (this.destroyed) {
             return [];
         }
-        return Object.keys(this.store.get(this.componentId()));
+        return Object.keys(this.store.get(this.componentId()) || {});
+    }
+    has(key) {
+        return this.keys().includes(key);
     }
     import(fields, force = false, triggerListeners = true) {
         const fieldsImported = Array.isArray(fields) ? fields : Object.keys(this.component.getData());

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

@@ -2,8 +2,9 @@ import { ClientComponent } from "../client/ClientComponent.js";
 import { Net } from "../client/Net.js";
 import { Application } from "../server/Application.js";
 import { Component } from "../server/Component.js";
-import { LooseObject } from './general.types.js';
-import { RequestContext, RequestBodyArguments } from "./request.types.js";
+import { EventEmitterCallback } from "./eventEmitter.types.js";
+import { KeysOfUnion, LooseObject } from './general.types.js';
+import { RequestContext } from "./request.types.js";
 export type ComponentEntry = {
     name: string;
     path: {
@@ -21,18 +22,18 @@ export type ComponentEntry = {
     static: boolean;
     renderTagName?: string;
     exportData: boolean;
-    exportFields?: Array<string>;
+    exportFields?: ReadonlyArray<string>;
     attributes?: Record<string, string>;
     initializer?: InitializerFunction;
 };
-export interface ComponentScaffold {
+export interface ComponentScaffold<T extends LooseObject = LooseObject, K extends KeysOfUnion<T> = KeysOfUnion<T>> {
     tagName?: string;
     exportData?: boolean;
-    exportFields?: Array<string>;
+    exportFields?: ReadonlyArray<K>;
     static?: boolean;
     deferred?: (data: Record<string, any>, ctx: RequestContext | undefined, app: Application) => boolean;
     attributes?: Record<string, string>;
-    getData: (this: ComponentScaffold, data: RequestBodyArguments | LooseObject, ctx: undefined | RequestContext, app: Application, component: Component) => Promise<LooseObject | null>;
+    getData: (this: ComponentScaffold, data: LooseObject, ctx: undefined | RequestContext, app: Application, component: Component) => Promise<T | void>;
     [key: string]: any;
 }
 export type ClientComponentTransition = {
@@ -42,11 +43,11 @@ export type ClientComponentTransition = {
 };
 export type ClientComponentTransitionEvent = 'show' | 'hide';
 export type ClientComponentTransitions = Record<ClientComponentTransitionEvent, ClientComponentTransition>;
-export type ClientComponentBoundEvent<T extends LooseObject | undefined = undefined> = {
-    element: HTMLElement | Window;
+export type ClientComponentBoundEvent<T extends LooseObject | undefined, E extends HTMLElement | Window | ClientComponent> = {
+    element: E;
     event: keyof HTMLElementEventMap;
-    callback: (e: Event) => void;
-    callbackOriginal: ClientComponentEventCallback<T>;
+    callback: E extends ClientComponent ? EventEmitterCallback<T> : (e: Event) => void;
+    callbackOriginal: E extends ClientComponent ? EventEmitterCallback<T> : ClientComponentEventCallback<T>;
 };
 export type ClientComponentEventCallback<T> = (e: Event, data: T, element: HTMLElement | Window) => void;
 export type InitializerFunction = (this: ClientComponent, ctx: InitializerFunctionContext) => Promise<void>;

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

@@ -1 +1 @@
-export type EventEmitterCallback<T> = (payload: T, eventName: string) => void;
+export type EventEmitterCallback<T> = (payload: T, eventName: string) => void | Promise<void>;

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

@@ -1 +1,2 @@
 export type LooseObject = Record<string, any>;
+export type KeysOfUnion<T> = T extends T ? keyof T : never;

package/package.json

@@ -19,13 +19,13 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "1.1.0",
+  "version": "1.1.5",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,hbs,css index.js",
     "start": "cd build && node index.js",
     "compileAndPack": "tsc && npm pack",
-    "compileAndPublish": "tsc && npm publish"
+    "compileAndPublish": "rm -r build && tsc && npm publish"
   },
   "bin": {
     "structured": "./build/system/bin/structured.js"

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

@@ -1,7 +0,0 @@
-import { DataStore } from './DataStore.js';
-import { ClientComponent } from './ClientComponent.js';
-export declare class App {
-    root: ClientComponent;
-    store: DataStore;
-    constructor();
-}

package/build/system/client/App.js

@@ -1,8 +0,0 @@
-import { DataStore } from './DataStore.js';
-import { ClientComponent } from './ClientComponent.js';
-export class App {
-    constructor() {
-        this.store = new DataStore();
-        this.root = new ClientComponent(null, 'root', document.body, this.store);
-    }
-}