ziko

v0.0.8

Published

8 hours ago

a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities

Downloads

108

0High
0Medium
0Low

zakarialaoui10

Zikojs Math User Interface Time Data Svg Canvas Reactivity Dom Single Page Application

💡 Zikojs a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities

Architecture

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

npm install ziko

⚡ Get started

Node

 npx create-ziko-app [My_App]

cd [My_App]
npm run dev

Browser

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zikojs</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/ziko@latest/dist/ziko.js"></script>
    <script>
        Ziko.ExtractAll()
        const hello = p("Hello World").style({
            color: "gold",
            fontSize: "30px",
            fontWeight: "bold"
            })
            .onPtrEnter(e=>e.target.st.color(Random.color()))
            .onPtrLeave(e=>e.target.st.color("gold"))
        Ziko.App(
            hello
        ).style({
            width: "100vw",
            height: "100vh",
            background: "darkblue"
            }).vertical(0, "space-around")
        
    </script>
</body>
</html>

Documentation

🎬 Demos

Windows entanglement using zikojs and ziko-three

📃 wiki

💡 Features

🔰 No Template Engines :

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.

For instance, consider the following JavaScript code using zikojs:

 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 (<p>) 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.

.style({...}) - This method sets the style of the paragraph element. In this case, it sets the color to "darkblue".

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

[!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:

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

🔰 Flexible Integration with Popular Frameworks/Libraries

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 package.

🔰 Extensive Add-On Ecosystem

🔰 The capability to function in both browser-based and Node.js environments

🔰 Methodes Extracting

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]]).

⚠️ 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.

🔰 Mathematical Utilities & Tips

🔰 Rich UI elements

🔰 Methodes Chaining

It allows multiple methods to be called sequentially on an object, enhancing code readability and conciseness.

🔰 Events Handling

Example of creating simple Paint sketch using canvas and pointer events :

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)
        )
})
Scene.onPtrMove(e=>{
    if(e.isDown){
        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(()=>{})

🔰 Functions decorators

   const inp=input().onKeyDown(throttle(e=>console.log(e.kd),1000));

🔰 Reactivity

🔰 Routing for Single Page Applications (SPA)

Zikojs has a built-in Single page application router based on history browser api

const main= Ziko.App()
const p1=Section()
const p2=Section()
S=Ziko.SPA(
   main,{
     "/page1":p1,
     "/page2":p2
 })
// You can use regex to define routes
S.get(
 pattern,
 path=>handler(path)
)

⚠️ Ensure that your server serves only the index page for all incoming requests.

💡 Example using expressjs :

 app.get('*', (req , res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

🔰 Multithreading supports

useThread(() => {
 s = 0;
 for (i = 0; i < 10000000000; i++) s += i;
 return s;
}, console.log);

🔰 Responsive Design based on Flex element and resize observer

🔰 Loop and animations support

⭐️ Show your support

If you appreciate the library, kindly demonstrate your support by giving it a star!

License

This projet is licensed under the terms of MIT License