ziko 0.0.6 → 0.0.8

package/README.md

@@ -4,6 +4,81 @@
 
 <br>
 
+# Architecture
+
+```mermaid
+mindmap
+  root((Ziko))
+   Core
+    Math
+     Utils
+     Functions
+     Complex
+     Matrix 
+     Random
+     Calculus
+     Signal
+     Discret
+     Statistics
+    UI
+     Elements
+      Text
+       text
+       p 
+       h1...h6
+      List 
+       ol
+       ul
+      Table 
+      Inputs
+      Semantic
+       Main
+       Header
+       Footer
+       Section
+       Article
+       Nav
+       Aside
+      Custom Elements
+       Flex
+       Grid
+       Accordion
+       Carousel
+       Tabs
+       CodeCell
+       CodeNote
+    Time
+     Animation
+      Ease functions
+     Loop
+    Data
+     Api
+     Converter
+     Decorator
+     Parser
+    Reactivity
+     Events
+     Observer
+     Use
+    Graphics
+     Svg
+     Canvas
+    App
+     Router
+     Seo
+     Config
+     Themes
+   Addons
+    Zikogl
+    Ziko-lottie
+   Wrapper
+    React
+    Svelte
+    Vue
+    Lit
+    Solid
+    Preact
+```
 # Install 
 ```bash
 npm install ziko
@@ -55,205 +130,134 @@ npm install ziko
 
 ## 📃 [wiki](https://github.com/zakarialaoui10/ziko.js/wiki)
 
-## 💡 [Features]() 
-<details>
- <summary>
-  <strong> 🔰 Methodes Extracting  </strong>
- </summary>
- 
- ```js
- Ziko.ExtractAll()
- // if you want to extract only UI methodes you can use Ziko.UI.Extractll()
-```
-🏷️ This method simplifies syntax by extracting all UI, Math, Time, Graphics, and other methods within the Ziko framework. Instead of writing specific namespace prefixes like `Ziko.UI.text("Hi")` , `Ziko.Math.complex(1,2)` , `Ziko.Math.matrix([[1,2],[2,3]])`, you can directly use simplified syntax such as `text("Hi")` , `complex(1,1)` and `matrix([[1,2],[2,3]])`.
+## 💡 [Features]()
+### 🔰 No Template Engines :
 
-⚠️ Be careful with this method because it will overwrite any existing global or local variables and functions with the same names as the extracted methods. 
-</details>
+zikojs UI module adopts a distinctive approach to building and updating user interfaces. 
+It doesn't rely on predefined markup templates. Instead, it leverages a hyperscript-like syntax to dynamically create and update user interfaces.
 
 <details>
- <summary>
-  <strong> 🔰 Mathematical Utilities & Tips </strong>
- </summary>
+<summary> See More </summary>
 
- ### mapfun  
- 📝 Javascript provides a built-in Math module with various functions. 
+For instance, consider the following JavaScript code using zikojs:
+```js
+ para=p(
+    text("hello"),
+    text("world")
+    )
+    .style({
+        color:"darkblue"
+    })
+    .forEach(n=>n.onPtrEnter(e=>{
+        console.log(e.target.text)
+    }));
+```
+`p(...)` - This line creates a paragraph element (&lt;p&gt;) using zikojs. Inside the p() function, we pass in two text() function calls, which create text nodes containing "hello" and "world" respectively. These will be the contents of the paragraph.
 
-⚠️However, there is room for improvement in terms of efficiency. For instance, the Math.sqrt(x) function can calculate the square root of a number x, but it has limitations such as the inability to accept multiple parameters and the inability to map the function to different data types like Arrays and Objects.
+`.style({...})` - This method sets the style of the paragraph element. In this case, it sets the color to "darkblue".
 
-💡 In zikojs, I have addressed these limitations, providing a more versatile and efficient solution.
+`.forEach(...)` - This method iterates over the two items of the paragraph element. Inside the callback function, it sets up an event listener for the "pointerenter" event on each child element. When the pointer enters any child element, it logs the text content of that element to the console.
 
-📋 Example : 
-|zikojs|Vanilla js Equivalent|
-|-|-|
-|`sqrt(9)`|`sqrt(9)`|
-|`sqrt(4,9,16)`|`[Math.sqrt(4),Math.sqrt(9),Math.sqrt(16)]`|
-|`sqrt([4,9,16])`|`[Math.sqrt(4),Math.sqrt(9),Math.sqrt(16)]`|
-|`sqrt([4,9],16)`|`[[Math.sqrt(4),Math.sqrt(9)],Math.sqrt(16)]`|
-|`sqrt({x:4,y:9})`|`{x:sqrt(4),sqrt(9)}`|
+>[!TIP]
+To acces the para items you can use Array like syntaxe , `para[index]` or `para.at(index)` (index can positive or negative integer)
 
+This code snippet produces the equivalent HTML structure:
+```html
+ <p style="color:darkblue">
+    <span>hello</span>
+    <span>world</span>
+ </p>
+ <script>
+    para=document.querySelector(p);
+    [...a.children].forEach(
+        n=>n.addEventListener("pointerenter",e=>{
+            console.log(e.target.textContent)
+            }))
+ </script>
+```
+In summary, zikojs UI module enables dynamic creation and manipulation of user interfaces without relying on static markup templates, offering flexibility and control over UI elements.
 
-📢 Generally, zikojs allows you to input an infinite number of parameters, including deep arrays, objects, Maps, Sets, and more. The return value retains the input structure and calculates the result for each element accordingly.
+</details>
 
-📋 For Example : 
-```js
-sqrt({
-    a:1,
-    b:2,
-    c:[3,4],
-    d:[[
-        [5,6]
-        ]],
-    e:{
-        f:[
-            {g:7}
-            ]
-    },
-    h:new Map([["i",8],["j",9]]),
-    k:{
-        l:{
-            m:new Set([10,11])
-        },
-        n:[12]
-    }
-})
-```
-This would return : 
-```js
-{
-    a:sqrt(1),
-    b:sqrt(2),
-    c:[sqrt(3),sqrt(4)],
-    d:[[
-        [sqrt(5),sqrt(6)]
-        ]],
-    e:{
-        f:[
-            {g:sqrt(7)}
-            ]
-    },
-    h:new Map([["i",sqrt(8)],["j",sqrt(9)]]),
-    k:{
-        l:{
-            m:new Set([sqrt(10),sqrt(11)])
-        },
-        n:[sqrt(12)]
-    }
-}
-```
 
-💡 You can apply this approach to build your custom function ;
-```js
- import {mapfun} from "ziko";
- const parabolic_func=(a,b,c,x)=>a*(x**2)+b*x+c;
- const parabol=(a,b,c,...X)=>mapfun(n=>parabolic_func(a,b,c,n),...X)
- const a=-1.5,b=2,c=3;
- X0=[0,1,2,3];
- X1={x10:0,x11:1,x12:2,x13:3}
- console.log(parabol(a,b,c,X0));
- // [3,3,1,3]
- console.log(parabol(a,b,c,X1));
- // {x10: 3,x11: 3,x12: 1,x13: -3}
- console.log(parabol(a,b,c,X0,X1))
- /*
- [
-    [3,3,1,3],
-    {x10: 3,x11: 3,x12: 1,x13: -3}
-    ]
- */
-```
-Or you can use the currying syntaxe :
-```js
- import {mapfun} from "ziko";
- const parabolic_func=(a,b,c,x)=>a*(x**2)+b*x+c;
- const map_parabolic_func=(a,b,c)=>(...X)=>mapfun(n=>parabolic_func(a,b,c,n),...X);
- const a=-1.5,b=2,c=3;
- const X=[0,1,2,3];
- console.log(parabolic_func(a,b,c)(X));
- // [3,3,1,3]
-```
 
-You may not necessarily rely on the mapfun utility every time, as ZikoJS offers a variety of built-in mathematical functions that built on the top of `mapfun` and the Math module in javascript .
+### 🔰 Flexible Integration with Popular Frameworks/Libraries
 
-Here you will find the built in Mathematic functions in zikojs
+You can integrate it inside other frameworks/libraries like React , Vue , Svelte ... To do so, all you need to do is install the [ziko-wrapper](https://www.npmjs.com/package/ziko-wrapper) package.
 
-`abs(...x)`,`sqrt(...x)`,`pow(x,n)`,`sqrtn(x,n)`,`e(...x)`,`ln(...x)`,`cos(...x)`,`sin(...x)`,`tan(...x)`,`sinc(...x)`,`acos(...x)`,`asin(...x)`,`atan(...x)`,`cosh(...x)`,`sinh(...x)`,`acosh(...x)`,`asinh(...x)`,`atanh(...x)`,`cot(...x)`,`sec(...x)`,`csc(...x)`,`acot(...x)`,`coth(...x)`,`acosh(...x)`,`asinh(...x)`,`atanh(...x)`,`atan2(x,y,?rad)`,`hypot(...x)`,`min(...x)`,`max(...x)`,`sign(...x)`,`sig(...x)`,`fact(...x)`,`round(...x)`,`floor(...x)`,`ceil(...x)`
+### 🔰 Extensive Add-On Ecosystem
+
+|Addon|Purpose|Dependecy|Links|
+|-|-|-|-|
+|zikogl|-|Threejs|[NPM](https://www.npmjs.com/package/zikogl) [GITHUB](https://github.com/zakarialaoui10/zikogl/)|
+|ziko-lottie|render Lottie file within zikojs app|Lottie-web|[NPM](https://www.npmjs.com/package/ziko-lottie) [GITHUB](https://github.com/zakarialaoui10/ziko-lottie/)|
+### 🔰 The capability to function in both browser-based and Node.js environments
+### 🔰 Methodes Extracting
 
-### Matrix
-### Complex
-</details>
-<details>
- <summary>
-  <strong> 🔰 Rich UI elements </strong>
- </summary>
-</details>
 <details>
  <summary>
-  <strong> 🔰 Methodes Chaining </strong>
+  See More
  </summary>
  
-  ```js
-   text("hello world")
-  .style({ color: "red" })
-  .onPtrMove(useThrottle(() => console.log("hi")));
+ ```js
+ Ziko.ExtractAll()
+ // if you want to extract only UI methodes you can use Ziko.UI.Extractll()
 ```
- </details>
+🏷️ This method simplifies syntax by extracting all UI, Math, Time, Graphics, and other methods within the Ziko framework. Instead of writing specific namespace prefixes like `Ziko.UI.text("Hi")` , `Ziko.Math.complex(1,2)` , `Ziko.Math.matrix([[1,2],[2,3]])`, you can directly use simplified syntax such as `text("Hi")` , `complex(1,1)` and `matrix([[1,2],[2,3]])`.
 
+⚠️ Be careful with this method because it will overwrite any existing global or local variables and functions with the same names as the extracted methods. 
+</details>
+
+### 🔰 Mathematical Utilities & Tips
+### 🔰 Rich UI elements
+### 🔰 Methodes Chaining
+It allows multiple methods to be called sequentially on an object, enhancing code readability and conciseness.
 <details>
- <summary>
-  <strong> 🔰 Events Handling</strong>
- </summary>
+<summary> See More </summary>
+</details>
+
+### 🔰 Events Handling
 
- Example of creating simple Paint sketch using canvas and pointer events : 
+<details>
+<summary>
+See More
+</summary>
+
+Example of creating simple Paint sketch using canvas and pointer events : 
 ```js
-const Scene=Canvas().view(-10,-10,10,10).size(500,500).adjust()
-c.onPtrDown(e=>{
-    c.ctx.beginPath()
-    c.ctx.moveTo(
-        map(e.dx,0,c.element.offsetWidth,c.Xmin,c.Xmax),
-        map(e.dy,0,c.element.offseHeight,c.Ymin,c.Ymax)
+Scene=Canvas().size("500px","500px")
+Scene.onPtrDown(e=>{
+    e.target.ctx.beginPath()
+    e.target.ctx.moveTo(
+        map(e.dx,0,e.target.element.offsetWidth,e.target.Xmin,e.target.Xmax),
+        map(e.dy,0,e.target.element.offseHeight,e.target.Ymin,e.target.Ymax)
         )
 })
-c.onPtrMove(e=>{
+Scene.onPtrMove(e=>{
     if(e.isDown){
-        const x=map(e.mx,0,c.element.offsetWidth,c.axisMatrix[0][0],c.axisMatrix[1][0])
-        const y=map(e.my,0,c.element.offsetHeight,c.axisMatrix[1][1],c.axisMatrix[0][1])
-        c.append(canvasCircle(x,y,1).color({fill:"#5555AA"}).fill())
-   }
-c.onPtrUp(()=>{})
+        const x=map(e.mx,0,e.target.element.offsetWidth,e.target.axisMatrix[0][0],e.target.axisMatrix[1][0])
+        const y=map(e.my,0,e.target.element.offsetHeight,e.target.axisMatrix[1][1],e.target.axisMatrix[0][1])
+        e.target.append(canvasCircle(x,y,1).color({fill:"#5555AA"}).fill())
+   }})
+
+Scene.onPtrUp(()=>{})
   ```
 </details>
 
-<details>
- <summary>
-  <strong> 🔰 Functions decorators </strong>
- </summary>
+### 🔰 Functions decorators
 
- ```js
+```js
    const inp=input().onKeyDown(throttle(e=>console.log(e.kd),1000));
-   ```
-</details>
-
-<details>
- <summary>
-  <strong> 🔰 Reactivity </strong>
- </summary>
-
- ### Events
- ### Observers
- ### Use
+```
 
-</details>
+### 🔰 Reactivity
+### 🔰 Routing for Single Page Applications (SPA)
 
-<details>
- <summary>
-  <strong> 🔰 Rich UI Elements Based on Math modules </strong>
- </summary>
-     for example in `Table` you can use methodes like `hsatck` `vstack` `transpose` ...
-</details>
+Zikojs has a built-in Single page application router based on history browser api
 
 <details>
  <summary>
-  <strong> 🔰 Routing for Single Page Applications (SPA) </strong>
+  <strong> See More </strong>
  </summary>
 
 ```js
@@ -283,10 +287,8 @@ S.get(
 ```
 </details>
 
-<details>
- <summary>
-  <strong>🔰 Multithreading supports</strong>
- </summary>
+
+### 🔰 Multithreading supports
 
  ```js
 useThread(() => {
@@ -295,21 +297,9 @@ useThread(() => {
   return s;
 }, console.log);
  ```
-</details>
-
-<details>
- <summary>
-  <strong> 🔰 Responsive Design using Flex element and resize observer </strong>
- </summary>
-</details>
-
-<details>
- <summary>
-  <strong> 🔰 Loop and animations support </strong>
- </summary>
-</details>
-
-
+ 
+### 🔰 Responsive Design based on Flex element and resize observer
+### 🔰 Loop and animations support
 
 ## ⭐️ Show your support <a name="support"></a>
 
@@ -326,4 +316,3 @@ This projet is licensed under the terms of MIT License
 
 
 
-

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Apr 13 2024 14:35:44 GMT+0000 (UTC)
+  Date : Mon May 20 2024 20:27:08 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -14,10 +14,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 class ZikoMath {}
 
-/** @module Math */
- /**
- * @class
- */
 class Complex extends ZikoMath{
     constructor(a = 0, b = 0) {
         super();
@@ -181,13 +177,6 @@ class Complex extends ZikoMath{
         return "<span>" + this.a + " + i * " + this.b + "</span>";
     }
 }
- /**
- * Performs complex number operations on numbers, arrays, ArrayBuffers, or Matrices.
- * @param {number|number[]|ArrayBuffer|Matrix} a 
- * @param {number|number[]|ArrayBuffer|Matrix} b
- * @param {number|number[]|ArrayBuffer|Matrix} b
- * @returns {Complex|Complex[]}
- */
 const complex=(a,b)=>{
     if((a instanceof Array||ArrayBuffer.isView(a)) && (b instanceof Array||ArrayBuffer.isView(a)))return a.map((n,i)=>complex(a[i],b[i]));
     if(a instanceof Matrix && b instanceof Matrix){
@@ -7201,8 +7190,8 @@ class ZikoUITextArea extends ZikoUIElement {
 //import { debounce,throttle} from "../../Data/decorators.js";
 
 class ZikoUIInput extends ZikoUIElement {
-  constructor(value = "",datalist) {
-    super();
+  constructor(name , value = "",datalist) {
+    super("input",name);
     this.element = document.createElement("input");
     Object.assign(this.events,{input:null});
     this.setValue(value);
@@ -7277,7 +7266,7 @@ class ZikoUIInput extends ZikoUIElement {
 }
 class ZikoUIInputSearch extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputSearch");
     this._setType("search");
     this.Length = 0;
   }
@@ -7314,7 +7303,7 @@ class ZikoUIInputSearch extends ZikoUIInput {
 }
 class ZikoUIInputNumber extends ZikoUIInput {
   constructor(min, max ,step = 1) {
-    super();
+    super("inpuNumber");
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
   }
@@ -7336,14 +7325,14 @@ class ZikoUIInputNumber extends ZikoUIInput {
 }
 class ZikoUIInputSlider extends ZikoUIInputNumber {
   constructor(val = 0, min = 0, max = 10, step = 1) {
-    super();
+    super("inputSlider");
     this._setType("range");
     this.setMin(min).setMax(max).setValue(val).setStep(step);
   }
 }
 class ZikoUIInputColor extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputColor");
     this._setType("color");
     this.background(this.value);
     this.onInput(() => this.background(this.value));
@@ -7351,37 +7340,37 @@ class ZikoUIInputColor extends ZikoUIInput {
 }
 class ZikoUIInputPassword extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputPassword");
     this._setType("password");
   }
 }
 class ZikoUIInputEmail extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputEmail");
     this._setType("email");
   }
 }
 class ZikoUIInputTime extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputTime");
     this._setType("time");
   }
 }
 class ZikoUIInputDate extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputDate");
     this._setType("date");
   }
 }
 class ZikoUIInputDateTime extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputDateTime");
     this._setType("datetime-local");
   }
 }
 class ZikoUIInputCheckbox extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputCheckbox");
     this._setType("checkbox");
     this.cursor("pointer");
   }
@@ -7399,7 +7388,7 @@ class ZikoUIInputCheckbox extends ZikoUIInput {
 }
 class ZikoUIInputRadio extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputRadio");
     this._setType("radio");
     this.cursor("pointer");
   }
@@ -7419,7 +7408,7 @@ class ZikoUIInputRadio extends ZikoUIInput {
 
 class ZikoUIInputImage extends ZikoUIElement {
   constructor(text = "File") {
-    super();
+    super("inputImage");
     this._aux_element = btn(text).setTarget(this.Target);
     this.element = document.createElement("input");
     this.element.setAttribute("type", "file");
@@ -9938,6 +9927,39 @@ const __Config__={
     init:()=>document.documentElement.setAttribute("data-engine","zikojs")
 };
 
+class ZikoUIComponent extends HTMLElement{
+    constructor(){
+        super();
+        this.shadowDOM = this.attachShadow({ mode: 'open' });
+        this.wrapper=document.createElement("div");
+    }
+    connectedCallback() {
+        this.setAttribute('role', 'region');
+        this.setAttribute('data-engine',"zikojs");
+        this.shadowDOM.append(this.wrapper);
+        this.observeContentChanges();
+    }
+    observeContentChanges() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' || mutation.type === 'characterData') {
+                    this.wrapper.innerHTML="";
+                    __Ziko__.__Config__.setDefault({ target: this.wrapper });
+                    globalThis.eval(this.innerHTML);
+                }
+            });
+        });
+        observer.observe(this, { childList: true, subtree: true, characterData: true });
+    }
+
+    disconnectedCallback() {
+        console.log('ZikoUIComponent removed from page.');
+    }
+}
+if(globalThis.document){
+    globalThis.customElements.define('ziko-ui', ZikoUIComponent);
+}
+
 class ZikoSeo{
     constructor(app){
         this.app=app;
@@ -10121,6 +10143,7 @@ exports.ZikoUIAudio = ZikoUIAudio;
 exports.ZikoUIBr = ZikoUIBr;
 exports.ZikoUICanvas = ZikoUICanvas;
 exports.ZikoUICodeNote = ZikoUICodeNote;
+exports.ZikoUIComponent = ZikoUIComponent;
 exports.ZikoUIElement = ZikoUIElement;
 exports.ZikoUIFigure = ZikoUIFigure;
 exports.ZikoUIFooter = ZikoUIFooter;