npm - structured-fw - Versions diffs - 1.1.0 → 1.2.0 - Mend

structured-fw 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/README.md +40 -19
package/build/system/EventEmitter.d.ts +4 -1
package/build/system/EventEmitter.js +30 -12
package/build/system/client/Client.d.ts +1 -6
package/build/system/client/Client.js +2 -9
package/build/system/client/ClientApplication.d.ts +13 -0
package/build/system/client/ClientApplication.js +43 -0
package/build/system/client/ClientComponent.d.ts +10 -6
package/build/system/client/ClientComponent.js +106 -85
package/build/system/client/DataStoreView.d.ts +1 -0
package/build/system/client/DataStoreView.js +4 -1
package/build/system/server/Component.js +1 -0
package/build/system/server/Components.js +3 -0
package/build/system/server/Document.d.ts +1 -1
package/build/system/server/Request.d.ts +2 -1
package/build/system/server/Request.js +4 -1
package/build/system/types/component.types.d.ts +11 -10
package/build/system/types/eventEmitter.types.d.ts +1 -1
package/build/system/types/general.types.d.ts +1 -0
package/package.json +2 -2
package/build/system/client/App.d.ts +0 -7
package/build/system/client/App.js +0 -8

package/README.md CHANGED Viewed

@@ -51,7 +51,7 @@ export default function(app: Application) {
 ### Compile
 `tsc`\
-This will create a directory `build` (or whatever you have in tsconfig.json as compilerOptions.outputDir)
+This will create a directory `build` (which can be changed in tsconfig.json, compilerOptions.outputDir)
 ### Run
 ```
@@ -115,11 +115,11 @@ new Application(config);
 ```
 ### Properties
-- `cookies` - Instance of Cookies, allows you to set a cookie
-- [`session`](#session) - Instance of Session, utilities to manage sessions and data
-- `request` - Instance of Request, you will use this to add routes, but usually not directly by accessing Application.request, more on that in [routes](#route) section
-- `handlebars` - Instance of Handlebars (wrapper around Handlebars templating engine)
-- `components` - Instance of Components, this is the components registry, you should never need to use this directly
+- `cookies` - Instance of `Cookies`, allows you to set a cookie
+- [`session`](#session) - Instance of `Session`, utilities to manage sessions and data
+- `request` - Instance of `Request`, you will use this to add routes, which is usually done in routes files, more on that in [routes](#route) section
+- `handlebars` - Instance of `Handlebars` (wrapper around Handlebars templating engine)
+- `components` - Instance of `Components`, this is the components registry, you should never need to use this directly
 ### Methods
 - `init(): Promise<void>` - initializes application, you only need to run this if you set `autoInit = false` in config, otherwise this will be ran when you create the Application instance
@@ -188,7 +188,7 @@ app.exportContextFields('user');
 ### Session
 Session allows you to store temporary data for the users of your web application. You don't need to create an instance of Session, you will always use the instance `Application.session`.
-Session data is tied to a visitor via sessionId, which is always available on `RequestContext`, which means you can interact with session data from routes and server side code of your components.
+Session data is tied to a visitor via sessionId, which is always available on `RequestContext`, which means you can interact with session data from routes and server side part of your components.
 **Configuration**\
 `StructuredConfig`.`session`:
@@ -247,8 +247,16 @@ export default function(app: Application) {
 Route file name has no effect on how the route (request handler) behaves, the only purpose of splitting your routes in separate files is making your code more maintainable.
+> [!TIP]
+> You can, and should, define the output/input types for your routes.
+> ```
+> app.request.on<OutputType, InputType>(...)
+> ```
+> This allows TypeScript to validate that you are returning the desired type in all return paths and makes interaction with received (POST, PUT) data easier.
 ### RequestContext
-All request handlers receive a `RequestContext` as the first argument.
+RequestContext is created for every received request. It contains all the data related to the request, as well as data you include in `RequestContextData`.
+All request handlers receive a `RequestContext` as the first argument. Your component server side part also receives `RequestContext` as the second argument.
 ```
 type RequestContext<Body extends LooseObject | undefined = LooseObject> = {
     request: IncomingMessage,
@@ -306,12 +314,13 @@ Capture group in URL pattern is (name) in above example. It makes data available
 ```
 app.request.on('GET', '/greet/(userId:num)', async (ctx) => {
     const userId = ctx.args.userId as number;
     // fetch user from DB
     const user = await userModel.get(userId);
     return `Hello, ${user.name}!`;
 });
 ```
-It is safe to cast `ctx.args.userId` as `number` in above example because the route would not get executed if the second segment of the URL is not a numeric value, and in case :num modifier is used, URL-provided value is parsed to a number and you don't need to parseInt manually.
+It is safe to cast `ctx.args.userId` as `number` in above example because the route would not get executed if the second segment of the URL is not a numeric value, and in case :num modifier is used, URL-provided value is parsed to a number.
 **Doing more with less code**\
@@ -346,13 +355,15 @@ In some edge cases you may need more control of when a route is executed, in whi
 > ```
 ## Document
-Document does not differ much from a component, in fact, it extends Component. It has a more user-friendly API than Component. Each Document represents a web page. It has a head and body. Structured intentionally does not differentiate between a page and a Component - page is just a component that loads many other components in a desired layout. DocumentHead (each document has one at Document.head) allows adding content to `<head>` section of the output HTML page.
+Document does not differ much from a component, in fact, it extends Component. It has a more user-friendly API than Component. Each Document represents a web page. It has a head and body. Structured intentionally does not differentiate between a page and a Component - page is just a component that loads many other components in a desired layout. `DocumentHead` (each document has one at Document.head) allows adding content to `<head>` section of the output HTML page.
 Creating a document:
 `const doc = new Document(app, 'HelloWorld page', ctx);`
 Send document as a response:
 ```
+import { Document } from 'structured-fw/Document';
 app.request.on('GET', '/home', async (ctx) => {
     const doc = new Document(app, 'Home', ctx);
     await doc.loadComponent('Home');
@@ -373,7 +384,7 @@ app.request.on('GET', '/home', async (ctx) => {
 ## Component
 A component is comprised of [1-3 files](#component-parts). It always must include one HTML file, while server side and client side files are optional.
-* HTML file probably requires no explanation
+* HTML file requires no explanation
 * server side file, code that runs on the server and makes data available to HTML and client side code
 * client side file, code that runs on the client (in the browser)
@@ -404,11 +415,13 @@ It is recommended, but not necessary, that you contain each component in it's ow
 - [Component client-side code](#component-client-side-code) (_ComponentName.client.ts_)
 ### Component HTML
-Let's create a HelloWorld Component `/app/views/HelloWorld/HelloWorld.html`:\
+Let's create a HelloWorld Component `/app/views/HelloWorld/HelloWorld.html` with contents:\
 `Hello, World!`
 Let's load this Component into a Document and send it as a response `/app/routes/HelloWorld.ts`:
 ```
+import { Document } from 'structured-fw/Document';
 export default function(app: Application) {
     app.request.on('GET', '/hello/world', async (ctx) => {
         const doc = new Document(app, 'Hello, World! From a Component', ctx);
@@ -466,7 +479,7 @@ We just generated a random number, but the data could be anything and will more
 > Server side `getData` will receive the following arguments:
 > - `data: LooseObject` any data passed in (either by attributes, ClientComponent.add or ClientComponent.redraw)
 > - `ctx: RequestContext` - current `RequestContext`, you will often use this to access for example ctx.data (`RequestContextData`) or ctx.sessionId to interact with session
-> - `app: Application` - your Application instance. You can use it to, for example, access the session in combination with ctx.sessionId
+> - `app: Application` - `Application` instance. You can use it to, for example, access the session in combination with ctx.sessionId
 Let's make it even more interesting by adding some client side code to it.
@@ -551,7 +564,7 @@ which is now available in `AnotherComponent` HTML, we assigned the received numb
 What about client side? **By default, data returned by server side code is not available in client side code** for obvious reasons, let's assume your server side code returns sensitive data such as user's password, you would not like that exposed on the client side, hence exporting data needs to be explicitly requested in the server side code. There are two ways to achieve this, setting `exportData = true` (exports all data), or `exportFields: Array<string> = [...keysToExport]` (export only given fields).
 > [!NOTE]
-> Whenever a component with server-side code is rendered, `getData` is automatically called and anything it returns is available in HTML. You can export all returned data to client-side code by setting `exportData = true` or you can export some of the fields by setting `exportFields = ["field1", "field2", ...]` as a direct property of the class. To access the exported data from client-side use `ClientComponent`.`getData(key: string)` which will be `this.getData(key:string)` within client side code.
+> Whenever a component with server-side code is rendered, `getData` is automatically called and anything it returns is available in HTML. You can export all returned data to client-side code by setting `exportData = true` or you can export some of the fields by setting `exportFields = ["field1", "field2", ...] as const` as a direct property of the class. To access the exported data from client-side use `ClientComponent`.`getData(key: string)` which will be `this.getData(key:string)` within client side part.
 Let's create a client side code for `AnotherComponent` and export the `betterNumber` to it, create `/app/views/AnotherComponent/AnotherComponent.client.ts`:
 ```
@@ -567,7 +580,7 @@ And let's update `AnotherComponent.ts` to export `betterNumber`:
 ```
 import { ComponentScaffold } from 'structured-fw/Types';
 export default class AnotherComponent implements ComponentScaffold {
-    exportFields = ['betterNumber'];
+    exportFields = ['betterNumber'] as const;
     async getData(data: { number: number }): Promise<{
         parentSuggests: number,
         betterNumber: number
@@ -580,7 +593,7 @@ export default class AnotherComponent implements ComponentScaffold {
 }
 ```
-The only change is we added `exportFields = ['betterNumber'];`, that's all there is to it, better number is now available to component's client side code, again, any type of data can be exported and type of data is preserved in the process.
+The only change is we added `exportFields = ['betterNumber'] as const;`, that's all there is to it, better number is now available to component's client side part, again, any type of data can be exported and type of data is preserved in the process.
 **What about passing data from children to parent?**\
 This concept is wrong to start with, if we want a component to be independent, it should not assume it's parent to exist, or behave in any specific way. That being said, components can access each other, and communicate, even from child to parent (only in client side code).
@@ -628,7 +641,11 @@ export const init: InitializerFunction = async function() {
 That's it. If there is `AnotherComponent` found within `HelloWorld` (which there is in our case) we are subscribing to "truth" event and capturing the payload. Payload is optional, sometimes we just want to inform anyone interested that a certain event has occurred, without the need to pass any extra data with it. We used `this.find(componentName: string)`, this will recursively find the first instance of a component with `componentName`, optionally you can make it non-recursive by passing `false` as the second argument to `find` method in which case it will look for a direct child with given name.
-We have only scratched the surface of what client-side code of a component is capable of. Which brings us to `this`. In client-side code of a component, `this` is the instance of a `ClientComponent`.
+> [!IMPORTANT]
+> To bind an event listener, in example above, we used `child.on`, while this works, direct use of `child.on` is discouraged, it is highly recommended to use `this.bind<PayloadType>(child, eventName, callback)` _(possible since v1.1.5)_. Using `.bind` makes sure event listener is re-bound on component redraw, using `.on` will bind the same event listener every time the listener component is redrawn.
+We have only scratched the surface of what client-side part of a component is capable of. Which brings us to `this`. In client-side code of a component, `this` is the instance of a `ClientComponent`.
 I won't list all of it's properties here, but a few notable mentions are:
@@ -647,7 +664,11 @@ Methods:
 - `find(componentName: string, recursive: boolean = true): ClientComponent | null` - find a child component
 - `findParent(componentName: string): ClientComponent | null` - find the first parent with given name
 - `query(componentName: string, recursive: boolean = true): Array<ClientComponent>` - return all components with given name found within this component, if `recursive = false`, only direct children are considered
-- `bind<T extends LooseObject | undefined = undefined>(element: HTMLElement | Window | Array<HTMLElement | Window>, eventName: string | Array<string>, callback: (e: Event, data: T) => void): void` - adds event listener(s) to given element(s). This is preferred over addEventListener because when the component is redrawn/removed, the event listeners added using bind method are automatically restored/removed. Callback receives event as the first argument. Any "data-" prefixed attributes found on `element` are parsed into an object and provided as second argument to callback (you can specify data using attr helper if you want to pass in something other than a string). Third argument provided to callback is the `element`. The method is generic, allowing you to specify expected data type received as the second argument.
+- `bind<T extends LooseObject | undefined = undefined>`(\
+	`element: HTMLElement | Window | Array<HTMLElement | Window> | ClientComponent`,\
+    `event: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap> | string`,\
+    `callback: ClientComponentEventCallback<T> | EventEmitterCallback<T>`\
+    ): `void` - adds event listener(s) to given HTML element(s) / components. This is preferred over `HTMLElement`.`.addEventListener` / `ClientComponent`.`on` because when the component is redrawn/removed, the event listeners added using bind method are automatically restored/removed. Callback receives event as the first argument. Any "data-" prefixed attributes found on `element` are parsed into an object and provided as second argument to callback (you can specify data using attr helper if you want to pass in something other than a string). Third argument provided to callback is the `element`. The method is generic, allowing you to specify expected data type received as the second argument.
 - `ref<T>(refName: string): T` - get a HTMLElement or ClientComponent that has attribute `ref="[refName]"`
 - `arrayRef<T>(refName: string): Array<T>` - get an array of HTMLElement or ClientComponent that have attribute `array:ref="[refName]"`
 - `add(appendTo: HTMLElement, componentName: string, data?: LooseObject): Promise<ClientComponent | null>` - add `componentName` component to `appendTo` element, optionally passing `data` to the component when it's being rendered. Returns a promise that resolves with added ClientComponent or null if something went wrong
@@ -730,7 +751,7 @@ You can use two modifier attributes with `data-model`:
 - `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 number: if input is empty or value casts to `NaN` then `0` (unless `data-nullable` in which case `null`), otherwise 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.

package/build/system/EventEmitter.d.ts CHANGED Viewed

@@ -2,9 +2,12 @@ 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;
+    protected ready: boolean;
+    private eventQueue;
     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;
+    emitterReady(): Promise<void>;
     unbindAllListeners(): void;
     emitterDestroy(): void;
 }

package/build/system/EventEmitter.js CHANGED Viewed

@@ -2,6 +2,8 @@ export class EventEmitter {
     constructor() {
         this.listeners = {};
         this.destroyed = false;
+        this.ready = false;
+        this.eventQueue = [];
     }
     on(eventName, callback) {
         if (this.destroyed) {
@@ -10,31 +12,47 @@ 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);
+        if (!this.ready) {
+            this.eventQueue.push({
+                event: eventName,
+                payload
             });
+            return;
+        }
+        if (Array.isArray(this.listeners[eventName]) || Array.isArray(this.listeners['*'])) {
+            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);
             }
         }
     }
+    async emitterReady() {
+        if (this.ready) {
+            return;
+        }
+        this.ready = true;
+        for (let i = 0; i < this.eventQueue.length; i++) {
+            await this.emit(this.eventQueue[i].event, this.eventQueue[i].payload);
+        }
+        this.eventQueue.length = 0;
+    }
     unbindAllListeners() {
         this.listeners = {};
     }

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

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

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

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

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

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

@@ -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 = {}, isRedrawRoot = false) {
+        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,12 +68,8 @@ 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);
         this.store.onChange('*', () => {
             this.updateConditionals(true);
         });
@@ -62,6 +78,9 @@ export class ClientComponent extends EventEmitter {
             this.redraw();
         }
         this.isReady = true;
+        if (this.isRoot || isRedrawRoot) {
+            await this.runInitializer(isRedraw);
+        }
         this.emit('ready');
     }
     reset() {
@@ -69,45 +88,32 @@ export class ClientComponent extends EventEmitter {
         this.isReady = false;
         this.refs = {};
         this.refsArray = {};
-        this.conditionalClassNames = [];
+        this.conditionalClassNames.length = 0;
         this.conditionalCallbacks = {};
-        this.conditionals = [];
+        this.conditionals.length = 0;
         this.redrawRequest = null;
         this.initializerExecuted = false;
-        this.bound = [];
-        this.children = [];
+        this.bound.length = 0;
+        this.children.length = 0;
     }
     async runInitializer(isRedraw = false) {
-        const initializer = window.initializers[this.name];
-        if (!initializer) {
+        if (this.destroyed || this.initializerExecuted) {
             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) {
+            await initializer.apply(this, [{
+                    net: this.net,
+                    isRedraw
+                }]);
+            this.updateConditionals(false);
+        }
+        await this.emitterReady();
+        for (let i = 0; i < this.children.length; i++) {
+            await this.children[i].runInitializer(isRedraw);
         }
         this.initializerExecuted = true;
+        this.emit('initializerExecuted');
     }
     initData() {
         objectEach(this.attributeData(this.domNode), (key, val) => {
@@ -159,7 +165,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 +185,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 +211,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, true);
         for (let i = 0; i < this.children.length; i++) {
             const childNew = this.children[i];
             const childNewId = childNew.getData('componentId');
@@ -229,7 +231,7 @@ export class ClientComponent extends EventEmitter {
                 });
             }
         }
-        this.emit('afterRedraw');
+        await this.emit('afterRedraw');
     }
     initConditionals(node) {
         const isSelf = node === undefined;
@@ -274,6 +276,7 @@ export class ClientComponent extends EventEmitter {
                 this.initRefs(child);
             }
         });
+        this.promoteRefs();
     }
     initModels(node, modelNodes = []) {
         const isSelf = node === undefined;
@@ -503,19 +506,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 +568,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, true);
         container.appendChild(componentNode);
         return component;
     }
@@ -775,19 +763,26 @@ export class ClientComponent extends EventEmitter {
             this.redrawRequest.abort();
             this.redrawRequest = null;
         }
-        this.emit('beforeDestroy');
+        await this.emit('beforeDestroy');
+        const children = Array.from(this.children);
+        for (let i = 0; i < children.length; i++) {
+            await children[i].destroy();
+        }
+        this.domNode.parentElement?.removeChild(this.domNode);
+        this.domNode.innerHTML = '';
+        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 +796,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 +836,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 CHANGED Viewed

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

@@ -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/Component.js CHANGED Viewed

@@ -12,6 +12,7 @@ export class Component extends EventEmitter {
         this.data = {};
         const isDocument = this instanceof Document;
         this.name = name;
+        this.emitterReady();
         if (name === 'root') {
             this.dom = new DOMFragment();
             this.path.push('');

package/build/system/server/Components.js CHANGED Viewed

@@ -63,6 +63,9 @@ export class Components {
                         entry.attributes = entry.serverPart?.attributes;
                         entry.static = typeof entry.serverPart?.static === 'boolean' ? entry.serverPart.static : false;
                     }
+                    else {
+                        entry.exportData = true;
+                    }
                     this.components[componentName.toUpperCase()] = entry;
                     this.componentNames.push(entry.name);
                 }

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

@@ -18,7 +18,7 @@ export declare class Document extends Component<{
     componentIds: Array<string>;
     ctx: undefined | RequestContext;
     appendHTML: string;
-    constructor(app: Application, title: string, ctx?: RequestContext);
+    constructor(app: Application, title: string, ctx?: RequestContext<any>);
     push(response: ServerResponse): void;
     body(): string;
     initInitializers(): Record<string, string>;

package/build/system/server/Request.d.ts CHANGED Viewed

@@ -2,10 +2,11 @@ import { IncomingMessage, ServerResponse } from "node:http";
 import { LooseObject } from '../types/general.types.js';
 import { RequestMethod, PostedDataDecoded, RequestBodyFile, RequestCallback } from "../types/request.types.js";
 import { Application } from "./Application.js";
+import { Document } from "./Document.js";
 export declare class Request {
     private app;
     constructor(app: Application);
-    pageNotFoundCallback: RequestCallback<void, PostedDataDecoded | undefined>;
+    pageNotFoundCallback: RequestCallback<void | Document, LooseObject>;
     private readonly handlers;
     on<R extends any, Body extends LooseObject | undefined = LooseObject>(methods: RequestMethod | Array<RequestMethod>, pattern: string | RegExp | Array<string | RegExp>, callback: RequestCallback<R, Body>, scope?: any, isStaticAsset?: boolean): void;
     private getHandler;

package/build/system/server/Request.js CHANGED Viewed

@@ -130,8 +130,11 @@ export class Request {
                 this.redirect(response, to, statusCode);
             },
             show404: async () => {
-                await this.pageNotFoundCallback.apply(this.app, [context]);
                 this.app.emit('pageNotFound', context);
+                const res = await this.pageNotFoundCallback.apply(this.app, [context]);
+                if (res instanceof Document) {
+                    context.respondWith(res);
+                }
             }
         };
         if (handler !== null) {

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

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

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

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

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

package/package.json CHANGED Viewed

@@ -19,13 +19,13 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "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 DELETED Viewed

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

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