structured-fw 1.0.9 → 1.1.5

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;
+    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

@@ -1,31 +1,44 @@
 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] = [];
         }
+        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);
             }
         }
     }
+    unbindAllListeners() {
+        this.listeners = {};
+    }
+    emitterDestroy() {
+        this.unbindAllListeners();
+        this.destroyed = true;
+    }
 }

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;
@@ -23,11 +25,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);
+    constructor(parent: ClientComponent | null, name: string, domNode: HTMLElement, app: ClientApplication);
     private init;
+    private reset;
     private runInitializer;
     private initData;
     private attributeData;
@@ -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,7 +58,13 @@ 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;
+    error(err: 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();
@@ -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;
@@ -32,60 +31,80 @@ 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(runInitializer);
+            this.init(false);
         }
     }
-    async init(runInitializer) {
-        const initializerExists = window.initializers !== undefined && this.name in window.initializers;
-        this.initRefs();
+    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);
+        }));
+        if (!initializerExists && this.conditionals.length > 0) {
+            this.store.import(undefined, false, false);
+        }
+        this.initRefs();
         this.initModels();
         this.initConditionals();
-        await this.initChildren();
-        this.promoteRefs();
+        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) {
-            return;
-        }
         if (!this.initializerExecuted && !this.destroyed) {
-            let initializerFunction = null;
-            if (typeof initializer === 'string') {
-                const AsyncFunction = async function () { }.constructor;
-                initializerFunction = new AsyncFunction('const init = ' + initializer + '; await init.apply(this, [...arguments]);');
-            }
-            else {
-                initializerFunction = initializer;
-            }
-            if (initializerFunction) {
-                this.initializer = initializerFunction;
-                await this.initializer.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;
     }
@@ -133,76 +152,68 @@ 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.app);
                     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);
-            });
-        }
+        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'
         });
         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.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.initChildren(this.domNode, (childNew) => {
+        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');
             const existingChild = childNewId in childStoreChangeCallbacks;
             if (existingChild) {
@@ -212,21 +223,8 @@ 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');
+        await this.emit('afterRedraw');
     }
     initConditionals(node) {
         const isSelf = node === undefined;
@@ -271,6 +269,7 @@ export class ClientComponent extends EventEmitter {
                 this.initRefs(child);
             }
         });
+        this.promoteRefs();
     }
     initModels(node, modelNodes = []) {
         const isSelf = node === undefined;
@@ -337,7 +336,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 +389,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 +408,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];
@@ -500,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) {
@@ -559,7 +545,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;
@@ -575,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(true);
+        await component.init(false, res.data);
         container.appendChild(componentNode);
         return component;
     }
@@ -772,18 +756,24 @@ 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.initializer = null;
-        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)) {
@@ -798,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)) {
@@ -824,14 +828,35 @@ 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 = [];
     }
+    log(msg) {
+        console.log(this.name, msg);
+    }
+    warn(msg) {
+        console.warn(this.name, msg);
+    }
+    error(err) {
+        console.error(this.name, err);
+    }
 }

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/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/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.0.9",
+  "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/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/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);
-    }
-}

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";