structured-fw 0.8.44 → 0.9.0

package/README.md

@@ -5,9 +5,6 @@ Framework allows the developer to develop self-contained components which are re
 
 It works with Node.js and Deno runtimes. Other runtimes are not tested.
 
-> [!NOTE]
-> While Structured framework is in development for a couple of years and is production tested, the npm package is introduced recently and there were still issues that came up with it in the past few versions. Since version 0.8.3 all should be functional. Please update to latest version and check for updates regularly until the npm package is as stable as the framework itself. Feel free to open issues on the github page if you have any issues with the npm package or the framework. _Structured followed versioning x.y.z where z was a single digit 0-9, but since there were a couple of versions that introduced no changes to the framework and were just npm package tweaks, I decided to make an exception to the rule and allow myself to use 2 digits for such updates._
-
 - [Why Structured](#why-structured)
 - [Audience](#audience)
 - [Getting started](#getting-started)
@@ -691,6 +688,69 @@ then in ComponentName.html:
 <div data-if="showDiv()"></div>
 ```
 
+### Layout
+Prior to version 0.8.7:
+
+1) `/app/views/layout.html`
+    ```
+    ...
+    {{{layoutComponent component data attributes}}}
+    ...
+    ```
+2) `/app/routes/Test.ts`
+    ```
+    import Document from 'structured-fw/Document';
+
+    app.request.on('GET', '/test', async (ctx) => {
+        const doc = new Document(app, 'Title', ctx);
+        await doc.loadComponent('layout', {
+            component: 'ComponentName',
+            data: {
+                something: 123
+            }
+        });
+        return doc;
+    });
+    ```
+
+Version 0.8.7 introduced the `Layout` class, which allows accomplishing the above in a nicer way:
+1) `/app/views/layout.html`
+    ```
+    ...
+    <template></template>
+    ...
+    ```
+2) `/index.ts` (`app` is an instance of `Application`)
+    ```
+    export const layout = new Layout(app, 'layout');
+    ```
+3) `/app/routes/Test.ts`
+    ```
+    import { layout } from '../../index.js';
+
+    app.request.on('GET', '/test', async (ctx) => {
+        return await layout.document(ctx, 'Test', 'Conditionals', {
+            something: 123
+        });
+    });
+
+    ```
+
+While with the new approach there is an extra step where we create the instance(s) of `Layout`, it makes the route/template code cleaner (you will create your layout instance(s) only once, while you will likely use it in many routes, so adding an extra step is worth it).
+
+```
+Layout.document(
+    ctx: RequestContext,
+    title: string,
+    componentName: string,
+    data?: LooseObject
+): Promise<Document>
+```
+`Layout.document` the only method of Layout you will use, it creates an instance of Document, loads template component (provided as second argument to Layout constructor) into it and loads `componentName` component in place of `<template></template>` found within your template.
+
+> [!TIP]
+> You will often want to use a few different layouts in your web application. You can achieve that by creating and exporting multiple instances of Layout and use the appropriate one where you need it.
+
 **Basic animation/transitions**\
 If you use conditionals on any DOM node, you may also enable basic animations/transitions using following attributes:
 - Enable transition:

package/build/system/bin/structured.js

@@ -61,9 +61,9 @@ function createTsconfig() {
                 "strictNullChecks": true,
                 "strictPropertyInitialization": true,
                 "strictBindCallApply": true,
-                "moduleResolution": "bundler",
+                "moduleResolution": "node16",
                 "outDir": "./build",
-                "module": "ES2020",
+                "module": "Node16",
                 "target": "ES2021",
                 "allowSyntheticDefaultImports": true,
                 "preserveSymlinks": true,

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

@@ -4,6 +4,7 @@ export declare class Net {
     request(method: RequestMethod, url: string, headers?: IncomingHttpHeaders, body?: any, responseType?: XMLHttpRequestResponseType): Promise<string>;
     get(url: string, headers?: IncomingHttpHeaders): Promise<string>;
     delete(url: string, headers?: IncomingHttpHeaders): Promise<string>;
+    private serializeData;
     post(url: string, data: any, headers?: IncomingHttpHeaders): Promise<string>;
     put(url: string, data: any, headers?: IncomingHttpHeaders): Promise<string>;
     getJSON<T>(url: string, headers?: IncomingHttpHeaders): Promise<T>;

package/build/system/client/Net.js

@@ -10,18 +10,19 @@ export class Net {
     async delete(url, headers = {}) {
         return this.request('DELETE', url, headers);
     }
-    async post(url, data, headers = {}) {
+    serializeData(data, headers) {
         if (typeof data === 'object' && !headers['content-type'] && !(data instanceof FormData)) {
             headers['content-type'] = 'application/json';
-            data = JSON.stringify(data);
+            return JSON.stringify(data);
         }
+        return data;
+    }
+    async post(url, data, headers = {}) {
+        data = this.serializeData(data, headers);
         return await this.request('POST', url, headers, data);
     }
     async put(url, data, headers = {}) {
-        if (typeof data === 'object' && !headers['content-type']) {
-            headers['content-type'] = 'application/json';
-            data = JSON.stringify(data);
-        }
+        data = this.serializeData(data, headers);
         return this.request('PUT', url, headers, data);
     }
     async getJSON(url, headers) {

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

@@ -1,5 +1,5 @@
 import { Server } from 'node:http';
-import { ApplicationEvents, LooseObject, RequestContext, StructuredConfig } from '../Types';
+import { ApplicationEvents, LooseObject, RequestContext, StructuredConfig } from '../Types.js';
 import { Document } from './Document.js';
 import { Components } from './Components.js';
 import { Session } from './Session.js';
@@ -8,6 +8,7 @@ import { Handlebars } from './Handlebars.js';
 import { Cookies } from './Cookies.js';
 export declare class Application {
     readonly config: StructuredConfig;
+    initialized: boolean;
     server: null | Server;
     listening: boolean;
     private readonly eventEmitter;
@@ -25,6 +26,7 @@ export declare class Application {
     importEnv<T extends LooseObject>(smartPrimitives?: boolean): T;
     exportContextFields(...fields: Array<keyof RequestContextData>): void;
     contentType(extension: string): string | false;
+    registerPlugin<Opt extends Readonly<LooseObject>>(callback: (app: Application, options: Opt) => void | Promise<void>, opts: NoInfer<Opt>): Promise<void>;
     private respondWithComponent;
     memoryUsage(): NodeJS.MemoryUsage;
     printMemoryUsage(): void;

package/build/system/server/Application.js

@@ -12,6 +12,7 @@ import { Handlebars } from './Handlebars.js';
 import { Cookies } from './Cookies.js';
 export class Application {
     constructor(config) {
+        this.initialized = false;
         this.server = null;
         this.listening = false;
         this.eventEmitter = new EventEmitter();
@@ -28,6 +29,9 @@ export class Application {
         }
     }
     async init() {
+        if (this.initialized) {
+            return;
+        }
         this.eventEmitter.setMaxListeners(10);
         try {
             await this.handlebars.loadHelpers('../Helpers.js');
@@ -63,6 +67,7 @@ export class Application {
             return '';
         }, this, true);
         await this.start();
+        this.initialized = true;
     }
     start() {
         return new Promise((resolve, reject) => {
@@ -136,6 +141,12 @@ export class Application {
     contentType(extension) {
         return mime.contentType(extension);
     }
+    async registerPlugin(callback, opts) {
+        if (this.initialized) {
+            console.warn('Plugin registered after app is initialized, some plugin features may not work.');
+        }
+        await callback.apply(this, [this, opts]);
+    }
     async respondWithComponent(ctx, componentName, attributes, unwrap = true) {
         const component = this.components.getByName(componentName);
         if (component) {

package/build/system/server/Component.js

@@ -137,14 +137,13 @@ export class Component extends EventEmitter {
         }
     }
     async initChildren(passData) {
-        const componentTags = this.document.application.components.componentNames;
-        const childNodes = this.dom.queryByTagName(...componentTags);
-        for (let i = 0; i < childNodes.length; i++) {
-            const childNode = childNodes[i];
-            const component = this.document.application.components.getByName(childNode.tagName);
+        const potentialComponents = this.dom.components();
+        for (let i = 0; i < potentialComponents.length; i++) {
+            const potentialComponent = potentialComponents[i];
+            const component = this.document.application.components.getByName(potentialComponent.tagName);
             if (component) {
-                const child = new Component(component.name, childNode, this, false);
-                await child.init(childNode.outerHTML, passData);
+                const child = new Component(component.name, potentialComponent, this, false);
+                await child.init(potentialComponent.outerHTML, passData);
                 this.children.push(child);
             }
         }

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

@@ -1,4 +1,4 @@
-import { ComponentEntry, StructuredConfig } from '../Types';
+import { ComponentEntry, StructuredConfig } from '../Types.js';
 import { Application } from './Application.js';
 export declare class Components {
     config: StructuredConfig;

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

@@ -1,4 +1,4 @@
-import { DocumentResource } from '../Types';
+import { DocumentResource } from '../Types.js';
 export declare class DocumentHead {
     title: string;
     js: Array<DocumentResource>;

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

@@ -1,4 +1,4 @@
-import { FormValidationEntry, PostedDataDecoded, ValidationResult, ValidationRuleWithArguments, ValidatorErrorDecorator, ValidatorFunction } from '../Types';
+import { FormValidationEntry, PostedDataDecoded, ValidationResult, ValidationRuleWithArguments, ValidatorErrorDecorator, ValidatorFunction } from '../Types.js';
 export declare class FormValidation {
     fieldRules: Array<FormValidationEntry>;
     singleError: boolean;

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

@@ -0,0 +1,10 @@
+import { LooseObject, RequestContext } from "../Types.js";
+import { Application } from "./Application.js";
+import { Document } from "./Document.js";
+export declare class Layout {
+    layoutComponent: string;
+    app: Application;
+    constructor(app: Application, layoutComponent: string);
+    private layoutComponentExists;
+    document(ctx: RequestContext, title: string, componentName: string, data?: LooseObject): Promise<Document>;
+}

package/build/system/server/Layout.js

@@ -0,0 +1,30 @@
+import { Component } from "./Component.js";
+import { Document } from "./Document.js";
+export class Layout {
+    constructor(app, layoutComponent) {
+        this.app = app;
+        this.layoutComponent = layoutComponent;
+        if (this.app.initialized) {
+            this.layoutComponentExists();
+        }
+        else {
+            this.app.on('afterComponentsLoaded', () => { this.layoutComponentExists(); });
+        }
+    }
+    layoutComponentExists() {
+        if (this.app.components.getByName(this.layoutComponent) === null) {
+            throw new Error(`Layout component "${this.layoutComponent}" not found`);
+        }
+    }
+    async document(ctx, title, componentName, data) {
+        const doc = new Document(this.app, title, ctx);
+        await doc.loadComponent(this.layoutComponent, data);
+        const layoutComponent = doc.dom.queryByTagName('template');
+        if (layoutComponent.length === 0) {
+            throw new Error(`<template></template> not found in the layout component ${this.layoutComponent}`);
+        }
+        const component = new Component(componentName, layoutComponent[0], doc, false);
+        await component.init(`<${componentName}></${componentName}>`, data);
+        return doc;
+    }
+}

package/build/system/server/dom/DOMFragment.js

@@ -1,6 +1,6 @@
 import { DOMNode } from "./DOMNode.js";
 export class DOMFragment extends DOMNode {
     constructor() {
-        super('body');
+        super(null, null, 'body');
     }
 }

package/build/system/server/dom/DOMNode.d.ts

@@ -1,3 +1,4 @@
+import { DOMFragment } from "./DOMFragment.js";
 type DOMNodeAttribute = {
     name: string;
     value: string | true;
@@ -9,20 +10,27 @@ type JSONNode = {
     strings: Array<string>;
 };
 export declare const selfClosingTags: ReadonlyArray<string>;
+export declare const recognizedHTMLTags: ReadonlyArray<string>;
 export declare class DOMNode {
     tagName: string;
+    root: DOMFragment;
     parentNode: DOMNode | null;
     children: Array<DOMNode | string>;
+    isRoot: boolean;
     attributes: Array<DOMNodeAttribute>;
     attributeMap: Record<string, DOMNodeAttribute>;
     style: Partial<CSSStyleDeclaration>;
     selfClosing: boolean;
-    constructor(tagName: string);
+    potentialComponentChildren: Record<string, Array<DOMNode>>;
+    constructor(root: DOMFragment | null, parentNode: DOMNode | null, tagName: string);
     appendChild(node: DOMNode | string): void;
     setAttribute(attributeName: string, attributeValue: string | true): void;
     hasAttribute(attributeName: string): boolean;
     queryByTagName(...tagNames: Array<string>): Array<DOMNode>;
     queryByHasAttribute(...attributeNames: Array<string>): Array<DOMNode>;
+    isPotentialComponent(): boolean;
+    registerPotentialComponent(node: DOMNode): void;
+    components(): Array<DOMNode>;
     get innerHTML(): string;
     set innerHTML(html: string);
     get outerHTML(): string;

package/build/system/server/dom/DOMNode.js

@@ -1,14 +1,22 @@
 import { HTMLParser } from "./HTMLParser.js";
 export const selfClosingTags = ['br', 'hr', 'input', 'img', 'link', 'meta', 'source', 'embed', 'path', 'area'];
+export const recognizedHTMLTags = ['body', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'b', 'i', 'a', 'em', 'strong', 'br', 'hr', 'abbr', 'address', 'bdi', 'bdo', 'blockquote', 'cite', 'code', 'del', 'dfn', 'ins', 'kbd', 'mark', 'pre', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'small', 'span', 'sub', 'sup', 'time', 'u', 'var', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'img', 'area', 'map', 'object', 'param', 'picture', 'table', 'tr', 'td', 'th', 'caption', 'colgroup', 'col', 'form', 'input', 'label', 'select', 'option', 'textarea', 'button', 'fieldset', 'legend', 'datalist', 'output', 'iframe', 'audio', 'video', 'source', 'track', 'script', 'noscript', 'div', 'nav', 'aside', 'article', 'section', 'main', 'canvas', 'details', 'dialog', 'embed', 'figure', 'figcaption', 'hgroup', 'meter', 'progress', 'template'];
 export class DOMNode {
-    constructor(tagName) {
+    constructor(root, parentNode, tagName) {
         this.parentNode = null;
         this.children = [];
         this.attributes = [];
         this.attributeMap = {};
         this.style = {};
+        this.potentialComponentChildren = {};
+        this.root = root === null ? this : root;
+        this.isRoot = root === null;
+        this.parentNode = parentNode;
         this.tagName = tagName;
         this.selfClosing = selfClosingTags.includes(tagName);
+        if (this.isPotentialComponent()) {
+            this.registerPotentialComponent(this);
+        }
     }
     appendChild(node) {
         if (typeof node !== 'string') {
@@ -63,6 +71,27 @@ export class DOMNode {
         }
         return nodes;
     }
+    isPotentialComponent() {
+        return !recognizedHTMLTags.includes(this.tagName.toLowerCase());
+    }
+    registerPotentialComponent(node) {
+        if (this.parentNode !== null) {
+            if (this.parentNode.isRoot || this.parentNode.isPotentialComponent()) {
+                if (!(node.tagName in this.parentNode.potentialComponentChildren)) {
+                    this.parentNode.potentialComponentChildren[node.tagName] = [];
+                }
+                this.parentNode.potentialComponentChildren[node.tagName].push(node);
+            }
+            else {
+                this.parentNode.registerPotentialComponent(node);
+            }
+        }
+    }
+    components() {
+        return Object.values(this.potentialComponentChildren).reduce((prev, curr) => {
+            return prev.concat(curr);
+        }, []);
+    }
     get innerHTML() {
         return this.children.reduce((html, child) => {
             if (typeof child === 'string') {
@@ -76,6 +105,7 @@ export class DOMNode {
     set innerHTML(html) {
         const fragment = new HTMLParser(html).dom();
         this.children = fragment.children;
+        this.potentialComponentChildren = fragment.potentialComponentChildren;
     }
     get outerHTML() {
         const attributes = this.attributes.reduce((attributes, attribute) => {

package/build/system/server/dom/HTMLParser.js

@@ -64,7 +64,7 @@ export class HTMLParser {
                 if (this.tokenCurrent.length === 0) {
                     throw this.error(`Found an empty HTML tag <>`);
                 }
-                const node = new DOMNode(this.tokenCurrent);
+                const node = new DOMNode(this.fragment, this.context, this.tokenCurrent);
                 this.context.appendChild(node);
                 this.state = 'idle';
                 this.tokenCurrent = '';
@@ -79,7 +79,7 @@ export class HTMLParser {
                     return true;
                 }
                 this.state = 'attributeName';
-                const node = new DOMNode(this.tokenCurrent);
+                const node = new DOMNode(this.fragment, this.context, this.tokenCurrent);
                 this.context.appendChild(node);
                 this.tokenCurrent = '';
                 if (!node.selfClosing) {

package/index.ts

@@ -1,8 +1,15 @@
 import { Application } from "structured-fw/Application";
 import { config } from './Config.js';
+import { Layout } from "./system/server/Layout.js";
 
 const app = new Application(config);
 
+app.registerPlugin(async (app) => {
+    
+}, {
+    poop: 123
+});
+
 // app.on('afterComponentsLoaded', (components) => {
 //     components.componentNames.forEach((componentName) => {
 //         console.log(componentName)
@@ -18,4 +25,6 @@ app.on('documentCreated', (document) => {
     document.on('componentCreated', (component) => {
         document.head.add(`<script>console.log('${component.name}')</script>`);
     });
-})
+});
+
+export const layout: Layout = new Layout(app, 'layout');

package/package.json

@@ -14,7 +14,7 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "0.8.44",
+  "version": "0.9.0",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.js",
@@ -48,6 +48,8 @@
     "./Util": "./build/system/Util.js",
     "./Application": "./build/system/server/Application.js",
     "./Document": "./build/system/server/Document.js",
+    "./Component": "./build/system/server/Component.js",
+    "./Layout": "./build/system/server/Layout.js",
     "./FormValidation": "./build/system/server/FormValidation.js",
     "./ClientComponent": "./build/system/client/ClientComponent.js"
   }