structured-fw 0.8.6 → 0.8.7

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/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

@@ -8,7 +8,7 @@ import { Handlebars } from './Handlebars.js';
 import { Cookies } from './Cookies.js';
 export declare class Application {
     readonly config: StructuredConfig;
-    private initialized;
+    initialized: boolean;
     server: null | Server;
     listening: boolean;
     private readonly eventEmitter;
@@ -26,7 +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(callback: (app: Application, ...args: Array<any>) => void | Promise<void>, ...args: Array<any>): Promise<void>;
+    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

@@ -141,11 +141,11 @@ export class Application {
     contentType(extension) {
         return mime.contentType(extension);
     }
-    async registerPlugin(callback, ...args) {
+    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, ...args]);
+        await callback.apply(this, [this, opts]);
     }
     async respondWithComponent(ctx, componentName, attributes, unwrap = true) {
         const component = this.components.getByName(componentName);

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/index.ts

@@ -1,11 +1,14 @@
 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((app, a, b) => {
-    console.log(a, b)
-}, 'a', 'b');
+app.registerPlugin(async (app) => {
+    
+}, {
+    poop: 123
+});
 
 // app.on('afterComponentsLoaded', (components) => {
 //     components.componentNames.forEach((componentName) => {
@@ -22,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.6",
+  "version": "0.8.7",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.js",
@@ -48,6 +48,7 @@
     "./Util": "./build/system/Util.js",
     "./Application": "./build/system/server/Application.js",
     "./Document": "./build/system/server/Document.js",
+    "./Layout": "./build/system/server/Layout.js",
     "./FormValidation": "./build/system/server/FormValidation.js",
     "./ClientComponent": "./build/system/client/ClientComponent.js"
   }