web-signature 0.0.1 → 0.0.3

package/bundle/index.js

@@ -0,0 +1 @@
+class e{components={};constructor(){}contact(e){let n=document.querySelector(e);if(!n)throw new Error(`Element not found for selector: ${e}`);let t=document.createElement("div");t.innerHTML=n.innerHTML,this.render(t),n.replaceChildren(...Array.from(t.childNodes))}add(e){this.components[e.name]&&console.warn(new Error(`Component with name ${e.name} already exists.`)),this.components[e.name]=e}render(e){for(const n of Object.keys(this.components)){let t=this.components[n];for(const r of Array.from(e.querySelectorAll(n))){let e=new t;e.onInit(),r instanceof HTMLElement&&(e.data=r.innerHTML.trim());let o=document.createElement("template");if(o.innerHTML=e.render().trim(),o.content.children.length>1)throw new Error(`Component '${n}' must render a single root element.`);this.render(o),e.onRender();let c=o.content.firstElementChild;r.replaceWith(o.content),e.onMount(c)}}}}class n{data}function t(){return new e}export{n as Component,e as Signature,t as default};

package/dist/Component.js

@@ -1,2 +1,3 @@
 export default class Component {
+    data;
 }

package/dist/Signature.js

@@ -2,6 +2,10 @@ export default class Signature {
     components = {};
     constructor() {
     }
+    /**
+     * Starts rendering in the specified area.
+     * @param {string} selector The selector of the element where the signature should be rendered.
+     */
     contact(selector) {
         let mainFrame = document.querySelector(selector);
         if (!mainFrame) {
@@ -12,6 +16,10 @@ export default class Signature {
         this.render(secondaryFrame);
         mainFrame.replaceChildren(...Array.from(secondaryFrame.childNodes));
     }
+    /**
+     * Adds a component to the signature.
+     * @param {ComponentConstructor} component The component to add.
+     */
     add(component) {
         if (this.components[component.name]) {
             console.warn(new Error(`Component with name ${component.name} already exists.`));
@@ -19,15 +27,25 @@ export default class Signature {
         this.components[component.name] = component;
     }
     render(frame) {
-        Object.keys(this.components).forEach((com) => {
+        for (const com of Object.keys(this.components)) {
             let component = this.components[com];
-            frame.querySelectorAll(com).forEach((el) => {
+            for (const el of Array.from(frame.querySelectorAll(com))) {
                 let renderer = new component();
+                renderer.onInit(); // lifecycle hook
+                if (el instanceof HTMLElement) {
+                    renderer.data = el.innerHTML.trim();
+                }
                 let body = document.createElement("template");
                 body.innerHTML = renderer.render().trim();
+                if (body.content.children.length > 1) {
+                    throw new Error(`Component '${com}' must render a single root element.`);
+                }
                 this.render(body);
+                renderer.onRender(); // lifecycle hook
+                let mountEl = body.content.firstElementChild;
                 el.replaceWith(body.content);
-            });
-        });
+                renderer.onMount(mountEl); // lifecycle hook
+            }
+        }
     }
 }

package/dist/d/Component.d.ts

@@ -1,6 +1,10 @@
 import component from "./types/Component.js";
 export default abstract class Component implements component {
     abstract readonly name: string;
+    data?: string;
     abstract render(): string;
+    abstract onInit(): void;
+    abstract onRender(): void;
+    abstract onMount(el: Element): void;
 }
 export type ComponentConstructor = new () => Component;

package/dist/d/Signature.d.ts

@@ -2,7 +2,15 @@ import { ComponentConstructor } from "./Component.js";
 export default class Signature {
     private components;
     constructor();
+    /**
+     * Starts rendering in the specified area.
+     * @param {string} selector The selector of the element where the signature should be rendered.
+     */
     contact(selector: string): void;
+    /**
+     * Adds a component to the signature.
+     * @param {ComponentConstructor} component The component to add.
+     */
     add(component: ComponentConstructor): void;
     private render;
 }

package/dist/d/index.d.ts

@@ -1,2 +1,4 @@
 import Signature from './Signature.js';
 export default function (): Signature;
+export { default as Signature } from './Signature.js';
+export { default as Component } from './Component.js';

package/dist/d/types/Component.d.ts

@@ -1,5 +1,26 @@
 interface Component {
     name: string;
+    /**
+     * Optional content that is specified in the component tag.
+     */
+    data?: string;
+    /**
+     * Returns the component as a string.
+     * @returns {string} The rendered component as a string.
+     */
     render(): string;
+    /**
+     * Lifecycle hook that is called when the component is initialized.
+     */
+    onInit(): void;
+    /**
+     * Lifecycle hook that is called when the component is rendered.
+     */
+    onRender(): void;
+    /**
+     * Lifecycle hook that is called when the component is mounted to the DOM.
+     * @param {Element} el The element to which the component is mounted.
+     */
+    onMount(el: Element): void;
 }
 export default Component;

package/dist/index.js

@@ -2,3 +2,5 @@ import Signature from './Signature.js';
 export default function () {
     return new Signature();
 }
+export { default as Signature } from './Signature.js';
+export { default as Component } from './Component.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-signature",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Primitive and fast framework for rendering web interfaces",
   "license": "ISC",
   "author": "PinBib",
@@ -9,15 +9,17 @@
   "types": "./dist/d/index.d.ts",
   "module": "./dist/index.js",
   "scripts": {
-	"build": "tsc -p tsconfig.json",
+	"build": "tsc -p tsconfig.json && rollup -c rollup.config.js",
 	"watch": "tsc -p tsconfig.json --watch"
   },
   "files": [
+	"bundle",
 	"dist",
 	"src",
 	"README.md",
 	"LICENSE",
-	"tsconfig.json"
+	"tsconfig.json",
+	"rollup.config.js"
   ],
   "keywords": [
 	"UI",
@@ -52,6 +54,16 @@
 	  "types": "./dist/d/Signature.d.ts",
 	  "browser": "./dist/Signature.js",
 	  "default": "./dist/Signature.js"
+	},
+	"./bundle": {
+	  "import": "./bundle/index.js",
+	  "browser": "./bundle/index.js",
+	  "default": "./bundle/index.js"
 	}
+  },
+  "devDependencies": {
+	"@rollup/plugin-node-resolve": "^16.0.1",
+	"@rollup/plugin-terser": "^0.4.4",
+	"rollup": "^4.44.2"
   }
 }

package/rollup.config.js

@@ -0,0 +1,12 @@
+import {nodeResolve} from '@rollup/plugin-node-resolve';
+import terser from "@rollup/plugin-terser";
+
+export default {
+	input: "dist/index.js",
+	output: {
+		file: "bundle/index.js",
+		plugins: [terser()]
+	},
+	external: [],
+	plugins: [nodeResolve()]
+};

package/src/Component.ts

@@ -2,8 +2,15 @@ import component from "./types/Component.js";
 
 export default abstract class Component implements component {
 	abstract readonly name: string;
+	data?: string;
 
 	abstract render(): string;
+
+	abstract onInit(): void;
+
+	abstract onRender(): void;
+
+	abstract onMount(el: Element): void;
 }
 
 export type ComponentConstructor = new () => Component;

package/src/Signature.ts

@@ -6,6 +6,10 @@ export default class Signature {
 	constructor() {
 	}
 
+	/**
+	 * Starts rendering in the specified area.
+	 * @param {string} selector The selector of the element where the signature should be rendered.
+	 */
 	public contact(selector: string): void {
 		let mainFrame = document.querySelector(selector);
 
@@ -21,6 +25,10 @@ export default class Signature {
 		mainFrame.replaceChildren(...Array.from(secondaryFrame.childNodes));
 	}
 
+	/**
+	 * Adds a component to the signature.
+	 * @param {ComponentConstructor} component The component to add.
+	 */
 	public add(component: ComponentConstructor): void {
 		if (this.components[component.name]) {
 			console.warn(new Error(`Component with name ${component.name} already exists.`));
@@ -30,19 +38,33 @@ export default class Signature {
 	}
 
 	private render(frame: Element): void {
-		Object.keys(this.components).forEach((com: string) => {
+		for (const com of Object.keys(this.components)) {
 			let component = this.components[com];
 
-			frame.querySelectorAll(com).forEach((el: Element) => {
+			for (const el of Array.from(frame.querySelectorAll(com))) {
 				let renderer: Component = new component();
+				renderer.onInit(); // lifecycle hook
+
+				if (el instanceof HTMLElement) {
+					renderer.data = el.innerHTML.trim();
+				}
 
 				let body = document.createElement("template");
 				body.innerHTML = renderer.render().trim();
 
+				if (body.content.children.length > 1) {
+					throw new Error(`Component '${com}' must render a single root element.`);
+				}
+
 				this.render(body);
+				renderer.onRender(); // lifecycle hook
+
+				let mountEl: Element = body.content.firstElementChild as Element;
 
 				el.replaceWith(body.content);
-			});
-		});
+
+				renderer.onMount(mountEl); // lifecycle hook
+			}
+		}
 	}
 }

package/src/index.ts

@@ -2,4 +2,7 @@ import Signature from './Signature.js';
 
 export default function (): Signature {
 	return new Signature();
-}
+}
+
+export {default as Signature} from './Signature.js';
+export {default as Component} from './Component.js';

package/src/types/Component.ts

@@ -1,7 +1,32 @@
 interface Component {
 	name: string;
 
+	/**
+	 * Optional content that is specified in the component tag.
+	 */
+	data?: string;
+
+	/**
+	 * Returns the component as a string.
+	 * @returns {string} The rendered component as a string.
+	 */
 	render(): string;
+
+	/**
+	 * Lifecycle hook that is called when the component is initialized.
+	 */
+	onInit(): void;
+
+	/**
+	 * Lifecycle hook that is called when the component is rendered.
+	 */
+	onRender(): void;
+
+	/**
+	 * Lifecycle hook that is called when the component is mounted to the DOM.
+	 * @param {Element} el The element to which the component is mounted.
+	 */
+	onMount(el: Element): void;
 }
 
 export default Component;