ziko 2.0.0-beta.0 → 2.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",

package/src/app/Layout/index.d.ts

@@ -0,0 +1,38 @@
+import type { UIElement } from "../../dom/UIElement";
+export interface UILayoutOptions {
+  title?: string;
+  icon?: string;
+  description?: string;
+  lang?: string;
+  links?: Record<string, any>[];
+  script?: Record<string, any>[];
+  meta?: Record<string, any>[];
+}
+
+export class UILayout {
+  options: UILayoutOptions;
+  ui: UIElement[];
+
+  constructor(
+    options?: UILayoutOptions,
+    ...ui: UIElement[]
+  );
+
+  render(): void | {
+    title?: string;
+    icon?: string;
+    description?: string;
+    lang?: string;
+    links: Record<string, any>[];
+    meta: Record<string, any>[];
+    script: Record<string, any>[];
+    body: UIElement[];
+  };
+
+  mount(target: Element): this;
+}
+
+export function Layout(
+  options?: UILayoutOptions,
+  ...ui: UIElement[]
+): UILayout;

package/src/app/Layout/index.js

@@ -0,0 +1,98 @@
+import { tags } from '../../dom/tags/index.js'
+import { call_with_optional_props } from '../../dom/internal-utils'
+
+const { meta, link, script } = tags;
+
+export class UILayout {
+
+  constructor(
+    {
+      title,
+      icon,
+      description,
+      lang,
+      links = [],
+      script: scripts = [],
+      meta: metas = [],
+    } = {},
+    ...ui
+  ) {
+    this.options = {
+      title,
+      icon,
+      description,
+      lang,
+      links,
+      meta: metas,
+      script: scripts,
+    };
+
+    this.ui = ui;
+    this.render()
+  }
+
+  render() {
+    if (typeof document === "undefined") {
+      return {
+        ...this.options,
+        body: this.ui,
+      };
+    }
+
+    const {
+      title,
+      icon,
+      description,
+      lang,
+      links,
+      meta: metas,
+      script: scripts,
+    } = this.options;
+
+    if (title) {
+      document.title = title;
+    }
+
+    if (lang) {
+      document.documentElement.lang = lang;
+    }
+
+    if (icon) {
+      document.head.appendChild(
+        link({
+          rel: "icon",
+          href: icon,
+        })
+      );
+    }
+
+    if (description) {
+      document.head.appendChild(
+        meta({
+          name: "description",
+          content: description,
+        })
+      );
+    }
+
+    for (const attrs of links) {
+      document.head.appendChild(link(attrs));
+    }
+
+    for (const attrs of metas) {
+      document.head.appendChild(meta(attrs));
+    }
+
+    for (const attrs of scripts) {
+      document.head.appendChild(script(attrs));
+    }
+  }
+
+  mount(target){
+    this.ui.forEach(el => el.mount(target));
+    return this
+  }
+
+}
+
+export const Layout = call_with_optional_props(UILayout)

package/src/app/Page/index.d.ts

@@ -0,0 +1,7 @@
+import type { UIElement } from "../../dom/UIElement";
+import type { UILayout, UILayoutOptions } from "../Layout/index.d.ts";
+
+export function Page(
+  options?: UILayoutOptions,
+  ...ui: UIElement[]
+): () => UILayout;

package/src/app/Page/index.js

@@ -0,0 +1,5 @@
+import { UILayout } from '../Layout/index.js';
+
+export function Page(options, ...ui){
+    return () => new UILayout(options, ...ui)
+}

package/src/app/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './Layout/index.d.ts'
+export type * from './Page/index.d.ts'

package/src/app/index.js

@@ -0,0 +1,2 @@
+export * from './Layout/index.js'
+export * from './Page/index.js'

package/src/dom/internal-utils/checkers.js

@@ -1,5 +1,5 @@
 import { isStateGetter } from '../../hooks/use-state.js'
-import { UIElement } from '../constructors/UIElement.js'
+import { UIElement } from '../UIElement/index.js'
 
 export const is_ui_item = item => {
     return (

package/src/internal-utils/symbols/index.d.ts

@@ -36,4 +36,7 @@ export declare const UIELEMENT: unique symbol;
  * Used by hooks and UI components to recognize state getters without
  * importing the state implementation.
  */
-export declare const STATE_GETTER: unique symbol;
+export declare const STATE_GETTER: unique symbol;
+
+export declare const LAYOUT: unique symbol;
+export declare const PAGE: unique symbol;

package/src/internal-utils/symbols/index.js

@@ -3,3 +3,5 @@ export const COMPLEX      = Symbol.for('ziko/math/COMPLEX');
 export const MATRIX       = Symbol.for('ziko/math/MATRIX');
 export const UIELEMENT    = Symbol.for('ziko/dom/UIELEMENT');
 export const STATE_GETTER = Symbol.for("ziko/hooks/STATE_GETTER");
+export const LAYOUT       = Symbol.for("ziko/app/LAYOUT");
+export const PAGE         = Symbol.for("ziko/app/Page");

package/src/router/internal-utils/renderer.js

@@ -1,7 +1,13 @@
+import { UILayout } from "../../app";
+
 export const renderer = async (target, component, props, wrapper) =>{
     if(!component) return;
     let mounted = await component(props);
     if(wrapper) mounted = wrapper(mounted);
+
+    if(mounted instanceof UILayout) 
+        return mounted.ui.forEach(el => el.mount(target))
+    
     mounted instanceof Array 
         ? mounted.forEach(el => el.mount(target)) 
         : mounted.mount(target);