structured-fw 0.7.2

package/system/client/DataStore.ts

@@ -0,0 +1,101 @@
+import { AsteriskAny, StoreChangeCallback } from '../Types.js';
+import { equalDeep } from '../Util.js';
+import { ClientComponent } from './ClientComponent.js';
+
+
+export class DataStore {
+
+    protected data: {
+        [componentId: string]: {
+            [key: string]: any;
+        };
+    } = {};
+
+    protected changeListeners: {
+        [componentId: string]: {
+            [key: string]: Array<StoreChangeCallback>;
+        };
+    } = {};
+
+    // return self to allow chained calls to set
+    public set(component: ClientComponent, key: string, val: any, force: boolean = false, triggerListeners: boolean = true): DataStore {
+        const componentId = component.getData<string>('componentId');
+
+        const oldValue = this.get(componentId, key);
+
+        if (! force && equalDeep({ value: oldValue }, { value: val })) {
+            return this;
+        }
+
+        if (!this.data[componentId]) {
+            this.data[componentId] = {};
+        }
+
+        this.data[componentId][key] = val;
+
+        if (triggerListeners) {
+            if (this.changeListeners[componentId] && (this.changeListeners[componentId][key] || this.changeListeners[componentId]['*'])) {
+                // there are change listeners, call them
+                (this.changeListeners[componentId][key] || []).concat(this.changeListeners[componentId]['*'] || []).forEach((cb) => {
+                    cb.apply(component, [key, val, oldValue, componentId]);
+                });
+            }
+        }
+
+        return this;
+    }
+
+    public get(componentId: string, key?: string): any {
+        if (!this.data[componentId]) {
+            return undefined;
+        }
+        if (typeof key !== 'string') {
+            return this.data[componentId];
+        }
+        return this.data[componentId][key];
+    }
+
+    public hasKey(componentId: string, key: string): boolean {
+        if (! (componentId in this.data)) {
+            return false;
+        }
+
+        return key in this.data[componentId];
+    }
+
+    // clear data for given componentId
+    public clear(componentId: string): void {
+        this.data[componentId] = {};
+    }
+
+    // clear data and unbind onChange listeners for given componentId
+    public destroy(componentId: string): void {
+        this.unbindAll(componentId);
+        this.clear(componentId);
+    }
+
+    // add callback to be called when a given key's value is changed
+    // if key === '*' then it will be called when any of the key's values is changed
+    public onChange(componentId: string, key: string | AsteriskAny, callback: StoreChangeCallback): DataStore {
+        if (! (componentId in this.changeListeners)) {
+            this.changeListeners[componentId] = {};
+        }
+        if (! (key in this.changeListeners[componentId])) {
+            this.changeListeners[componentId][key] = [];
+        }
+
+        this.changeListeners[componentId][key].push(callback);
+
+        return this;
+    }
+
+    // return all on change callbacks for given component
+    public onChangeCallbacks(componentId: string): Record<string, Array<StoreChangeCallback>> {
+        return this.changeListeners[componentId];
+    }
+
+    // unbind all onChange listeners for given component id
+    private unbindAll(componentId: string): void {
+        delete this.changeListeners[componentId];
+    }
+}

package/system/client/DataStoreView.ts

@@ -0,0 +1,82 @@
+import { AsteriskAny, StoreChangeCallback } from '../Types.js';
+import { ClientComponent } from './ClientComponent.js';
+import { DataStore } from './DataStore.js';
+
+// Simplifies the use of data store
+// it is initialized with component ID and global store so that from component
+// one can set/get a value without having to pass in a component id
+
+export class DataStoreView {
+
+    private store: DataStore;
+    private component: ClientComponent;
+    private destroyed = false;
+
+    constructor(store: DataStore, component: ClientComponent) {
+        this.store = store;
+        this.component = component;
+    }
+
+    public set(key: string, val: any, force: boolean = false, triggerListeners: boolean = true): DataStoreView {
+        if (! this.destroyed) {
+            this.store.set(this.component, key, val, force, triggerListeners);
+        }
+        return this;
+    }
+
+    public get<T>(key: string): T|undefined {
+        if (this.destroyed) {return undefined;}
+        return this.store.get(this.componentId(), key);
+    }
+
+    public toggle(key: string): void {
+        this.set(key, !this.get(key));
+    }
+
+    public keys(): Array<string> {
+        if (this.destroyed) {return [];}
+        return Object.keys(this.store.get(this.componentId()));
+    }
+
+    // import this.component.data to store
+    // existing keys are skipped unless force = true
+    public import(fields?: Array<string>, force: boolean = false, triggerListeners: boolean = true): void {
+        const fieldsImported = Array.isArray(fields) ? fields : Object.keys(this.component.getData());
+        fieldsImported.forEach((field) => {
+            // skip existing key, unless force = true
+            if (force || ! this.store.hasKey(this.componentId(), field)) {
+                this.set(field, this.component.getData(field), force, triggerListeners);
+            }
+        });
+    }
+
+    // clear data for owner component
+    public clear(): void {
+        this.store.clear(this.componentId());
+    }
+
+    // clear data and unbind onChange listeners for owner component
+    // mark this instance as destroyed so it no longer accepts any input
+    public destroy(): void {
+        this.store.destroy(this.componentId());
+        this.destroyed = true;
+    }
+
+    // return owner component id
+    private componentId(): string {
+        return this.component.getData<string>('componentId');
+    }
+
+    // add callback to be called when a given key's value is changed
+    // if key === '*' then it will be called when any of the key's values is changed
+    public onChange(key: string | AsteriskAny, callback: StoreChangeCallback): DataStoreView {
+        if (this.destroyed) {return this;}
+        this.store.onChange(this.componentId(), key, callback);
+        return this;
+    }
+
+    // return all onChange listeners for the owner component
+    public onChangeCallbacks(): Record<string, Array<StoreChangeCallback>> {
+        return this.store.onChangeCallbacks(this.componentId());
+    }
+}

package/system/client/EventEmitter.ts

@@ -0,0 +1,38 @@
+import { EventEmitterCallback } from "../Types.js";
+
+export class EventEmitter {
+    protected listeners: Record<string, Array<EventEmitterCallback>> = {}
+
+    // add event listener
+    public on(eventName: string, callback: EventEmitterCallback): void {
+        if (! Array.isArray(this.listeners[eventName])) {
+            this.listeners[eventName] = [];
+        }
+
+        this.listeners[eventName].push(callback);
+    }
+
+    // emit event with given payload
+    public emit(eventName: string, payload?: any): void {
+        if (Array.isArray(this.listeners[eventName])) {
+            this.listeners[eventName].forEach((callback) => {
+                callback(payload);
+            });
+        }
+    }
+
+    // remove event listener
+    public unbind(eventName: string, callback: EventEmitterCallback): void {
+        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 {
+                    // callback not found, all removed
+                    break;
+                }
+            }
+        }
+    }
+}

package/system/client/Net.ts

@@ -0,0 +1,58 @@
+import { IncomingHttpHeaders } from 'node:http';
+import { LooseObject, RequestMethod } from '../Types.js';
+import { NetRequest } from './NetRequest.js';
+
+
+export class Net {
+
+    // Make a HTTP request
+    public async request(method: RequestMethod, url: string, headers: IncomingHttpHeaders = {}, body?: any, responseType: XMLHttpRequestResponseType = 'text'): Promise<string> {
+        const request = new NetRequest(method, url, headers, responseType);
+        return request.send(body);
+    }
+
+    public async get(url: string, headers: IncomingHttpHeaders = {}): Promise<string> {
+        return this.request('GET', url, headers);
+    }
+
+    public async delete(url: string, headers: IncomingHttpHeaders = {}): Promise<string> {
+        return this.request('DELETE', url, headers);
+    }
+
+    public async post(url: string, data: any, headers: IncomingHttpHeaders = {}): Promise<string> {
+        if (typeof data === 'object' && !headers['content-type'] && !(data instanceof FormData)) {
+            // if data is object and no content/type header is specified default to application/json
+            headers['content-type'] = 'application/json';
+            // convert data to JSON
+            data = JSON.stringify(data);
+        }
+        return await this.request('POST', url, headers, data);
+    }
+
+    public async put(url: string, data: any, headers: IncomingHttpHeaders = {}): Promise<string> {
+        if (typeof data === 'object' && !headers['content-type']) {
+            // if data is object and no content/type header is specified default to application/json
+            headers['content-type'] = 'application/json';
+            // convert data to JSON
+            data = JSON.stringify(data);
+        }
+        return this.request('PUT', url, headers, data);
+    }
+
+    public async getJSON<T>(url: string, headers?: IncomingHttpHeaders): Promise<T> {
+        return JSON.parse(await this.get(url, headers));
+    }
+
+    public async postJSON<T>(url: string, data: LooseObject, headers?: IncomingHttpHeaders): Promise<T> {
+        return JSON.parse(await this.post(url, data, headers));
+    }
+
+    public async deleteJSON<T>(url: string, headers?: IncomingHttpHeaders): Promise<T> {
+        return JSON.parse(await this.delete(url, headers));
+    }
+
+    public async putJSON<T>(url: string, data: LooseObject, headers?: IncomingHttpHeaders): Promise<T> {
+        return JSON.parse(await this.put(url, data, headers));
+    }
+
+}

package/system/client/NetRequest.ts

@@ -0,0 +1,64 @@
+import { IncomingHttpHeaders } from 'node:http';
+import { RequestMethod } from '../Types.js';
+
+
+export class NetRequest {
+    xhr: XMLHttpRequest = new XMLHttpRequest();
+    method: RequestMethod;
+    url: string;
+    headers: IncomingHttpHeaders;
+    responseType: XMLHttpRequestResponseType;
+    body: any;
+    requestSent: boolean = false;
+
+    constructor(method: RequestMethod, url: string, headers: IncomingHttpHeaders = {}, responseType: XMLHttpRequestResponseType = 'text', body?: any) {
+        this.method = method;
+        this.url = url;
+        this.headers = headers;
+        this.responseType = responseType;
+        this.body = body;
+
+        this.xhr.open(this.method, this.url);
+        this.xhr.responseType = this.responseType;
+
+
+        // set the X-Requested-With: xmlhttprequest header if not set by user
+        if (!('x-requested-with' in headers)) {
+            headers['x-requested-with'] = 'xmlhttprequest';
+        }
+
+        // set request headers
+        for (const header in headers) {
+            const headerValue = headers[header];
+            if (typeof headerValue === 'string') {
+                this.xhr.setRequestHeader(header, headerValue);
+            } else {
+                console.warn('Only string header values are supported');
+            }
+        }
+    }
+
+    public async send(body?: any): Promise<string> {
+        if (this.requestSent) { return ''; }
+        this.requestSent = true;
+        if (typeof body !== 'undefined') {
+            this.body = body;
+        }
+
+        return new Promise((resolve, reject) => {
+            // listen for state change
+            this.xhr.onreadystatechange = () => {
+                if (this.xhr.readyState == 4) {
+                    // got the response
+                    resolve(this.xhr.responseText);
+                }
+            };
+            // reject on error
+            this.xhr.onerror = (err) => {
+                reject(err);
+            };
+
+            this.xhr.send(body);
+        });
+    }
+}

package/system/server/Application.ts

@@ -0,0 +1,230 @@
+import { EventEmitter } from 'node:events';
+import { existsSync, readFileSync } from 'node:fs';
+import { createServer, Server } from 'node:http';
+import * as path from 'node:path';
+import * as mime from 'mime-types';
+import { ApplicationEvents, LooseObject, RequestBodyArguments, RequestCallback, RequestContext, StructuredConfig } from '../Types';
+import { Document } from './Document.js';
+import { Components } from './Components.js';
+import { Session } from './Session.js';
+import { toSnakeCase } from '../Util.js';
+import { Request } from './Request.js';
+import { Handlebars } from './Handlebars.js';
+import { Cookies } from './Cookies.js';
+import { RequestContextData } from '../../app/Types.js';
+
+export class Application {
+    readonly config: StructuredConfig;
+
+    server: null|Server = null;
+    listening: boolean = false;
+
+    private readonly eventEmitter: EventEmitter = new EventEmitter();
+
+    readonly cookies: Cookies;
+    readonly session: Session;
+    readonly request: Request;
+    readonly components: Components;
+
+    // handlebars helpers manager
+    readonly handlebars: Handlebars = new Handlebars();
+
+    // fields from RequestContext.data to be exported for all components
+    readonly exportedRequestContextData: Array<keyof RequestContextData> = [];
+
+    constructor(config: StructuredConfig) {
+        this.config = config;
+
+        this.cookies = new Cookies();
+        this.session = new Session(this);
+        this.request = new Request(this);
+        this.components = new Components(this);
+
+        // enable sessions
+        this.session.start();
+
+        if (this.config.autoInit) {
+            this.init();
+        }
+    }
+
+    public async init(): Promise<void> {
+
+        // max listeners per event
+        this.eventEmitter.setMaxListeners(10);
+
+        // load handlebars helpers
+        try {
+            await this.handlebars.loadHelpers('../Helpers.js');
+        } catch(e) {
+            console.error(e.message);
+        }
+
+        await this.emit('beforeComponentLoad');
+        this.components.loadComponents();
+        await this.emit('afterComponentLoad');
+
+
+        await this.emit('beforeRoutes');
+        await this.request.loadHandlers();
+        await this.emit('afterRoutes');
+
+        if (this.config.url.componentRender !== false) {
+            // special request handler, executed when ClientComponent.redraw is called
+            this.request.on('POST', `${this.config.url.componentRender}`, async (ctx) => {
+                const input = ctx.body as unknown as {
+                    component: string,
+                    attributes: RequestBodyArguments,
+                    unwrap?: boolean
+                };
+    
+                await this.respondWithComponent(ctx, input.component, input.attributes || undefined, typeof input.unwrap === 'boolean' ? input.unwrap : true);
+            });
+        }
+
+        // special request handler, serve the client side JS
+        this.request.on('GET', /^\/assets\/client-js/, async ({ request, response }) => {
+            const uri = request.url?.substring(18) as string;
+            const filePath = path.resolve('./system/', uri);
+            if (existsSync(filePath)) {
+                response.setHeader('Content-Type', 'application/javascript');
+                response.write(readFileSync(filePath));
+                response.end();
+            } else {
+                response.statusCode = 404;
+            }
+            return;
+        }, this, true);
+
+        await this.start();
+    }
+
+    // start the http server
+    public start(): Promise<void> {
+        return new Promise((resolve, reject) => {
+            this.server = createServer((req, res) => {
+                this.request.handle(req, res);
+            });
+            this.server.listen(this.config.http.port, this.config.http.host || '127.0.0.1', async () => {
+                const address = (this.config.http.host !== undefined ? this.config.http.host : '') + ':' + this.config.http.port;
+                await this.emit('serverStarted');
+                console.log(`Server started on ${address}`);
+                resolve();
+            });
+        });
+    }
+
+    // add event listener
+    public on(evt: ApplicationEvents, callback: RequestCallback|((payload?: any) => void)): void {
+        this.eventEmitter.on(evt, callback);
+    }
+
+    // emit an event on Application
+    // this will run all event listeners attached to given eventName
+    // providing the payload as the first argument
+    // returns an array of all resolved values, any rejected promise values are discarded
+    public async emit(eventName: ApplicationEvents, payload?: any): Promise<Array<any>> {
+        const promises: Array<Promise<any>> = [];
+        const listeners = this.eventEmitter.rawListeners(eventName);
+        for (let i = 0; i < listeners.length; i++) {
+            promises.push(listeners[i](payload));
+        }
+        const results = await Promise.allSettled(promises);
+        return results.filter((res) => {
+            return res.status === 'fulfilled';
+        }).map((res) => {
+            return res.value;
+        });
+    }
+
+    // load envirnment variables
+    // if this.config.envPrefix is a string, load all ENV variables starting with [envPrefix]_
+    // the method is generic, so user can define the expected return type
+    public importEnv<T extends LooseObject>(smartPrimitives: boolean = true): T {
+        const values: LooseObject = {}
+        const usePrefix = typeof this.config.envPrefix === 'string';
+        const prefixLength = usePrefix ? this.config.envPrefix.length : 0;
+        for (const key in process.env) {
+            if (! usePrefix || key.startsWith(this.config.envPrefix)) {
+                // import
+                let value: any = process.env[key];
+                const keyWithoutPrefix = key.substring(prefixLength + 1);
+    
+                if (smartPrimitives) {
+                    if (value === 'undefined') {
+                        value = undefined;
+                    } else if (value === 'null') {
+                        value = null;
+                    } else if (value === 'true') {
+                        value = true;
+                    } else if (value === 'false') {
+                        value = false;
+                    } else if (/^-?\d+$/.test(value)) {
+                        value = parseInt(value);
+                    } else if (/^\d+\.\d+$/.test(value)) {
+                        value = parseFloat(value);
+                    }
+                }
+    
+                values[keyWithoutPrefix] = value;
+            }
+        }
+        return values as T;
+    }
+
+    // export given fields to all components
+    public exportContextFields(...fields: Array<keyof RequestContextData>): void {
+        fields.forEach((field) => {
+            if (! this.exportedRequestContextData.includes(field)) {
+                this.exportedRequestContextData.push(field);
+            }
+        });
+    }
+
+    // given file extension (or file name), returns the appropriate content-type
+    public contentType(extension: string): string|false {
+        return mime.contentType(extension);
+    }
+
+    // renders a component with give data and sends it as a response
+    private async respondWithComponent(ctx: RequestContext, componentName: string, attributes: RequestBodyArguments, unwrap: boolean = true): Promise<boolean> {
+        const component = this.components.getByName(componentName);
+        if (component) {
+            const document = new Document(this, '', ctx);
+            const data: LooseObject = attributes;
+            await document.loadComponent(component.name, data);
+
+            const exportedData = component.exportData ? document.data : (component.exportFields ? component.exportFields.reduce((prev, curr) => {
+                prev[curr] = document.children[0].data[curr];
+                return prev;
+            }, {} as LooseObject) : {});
+
+            ctx.respondWith({
+                html: document.children[0].dom[unwrap ? 'innerHTML' : 'outerHTML'],
+                initializers: document.initInitializers(),
+                data: exportedData
+            });
+
+            return true;
+        }
+        return false;
+    }
+
+    public memoryUsage(): NodeJS.MemoryUsage {
+        return process.memoryUsage();
+    }
+
+    public printMemoryUsage(): void {
+        const usage = this.memoryUsage();
+        let total = 0;
+        const totals = Object.keys(usage).reduce((prev, key: keyof NodeJS.MemoryUsage) => {
+            const usedMb = usage[key] / 1000000;
+            prev[toSnakeCase(key).replaceAll('_', ' ')] = [parseFloat(usedMb.toFixed(1)), 'Mb'];
+            total += usedMb;
+            return prev;
+        }, {} as LooseObject);
+        totals.total = [parseFloat(total.toFixed(1)), 'Mb'];
+        console.table(totals);
+    }
+
+}