Skip to content

zikojs/ziko

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

1,213 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Zikojs

A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...

license npm latest package npm downloads

Demos

πŸ”₯ Features

πŸ’Ž Core

  • 🚫 Zero Dependency
  • 🌳 Partial Tree Shaking
  • πŸ”’ Rich Math Functions and Utilities
    • Flexible Math Functions ZikoJS offers flexible math utilities, such as the `mapfun` function, which allows mapping standard mathematical operations to complex and nested data structures. For example, the `cos` function in ZikoJS is built on top of mapfun, enabling it to handle multiple arguments with diverse types (numbers, arrays, objects).
      import { cos, PI } from "ziko"; const result = cos(PI, PI / 2, PI / 4, [PI / 6, PI / 3], { x: PI / 2, y: PI / 4, z: [0, PI / 12], } ); /* result => [  -1,  0,  0.707106781186548,  [0.866025403784439, 0.5],  {  x: 0,  y: 0.707106781186548,  z: [1, 0.965925826289068],  }, ]; */ // console.log(result)

      You can also built your own flexible Math function using this mapfun util :

      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]
  • ✨ Hyperscript-Based Declarative UI (No Template Engines needed)
import {p, text, Random} from 'ziko' const Hello = name => p( text("Hello ", name) ).onClick(e => e.target.style({color : Random.color()}))
  • πŸ”„ Built in State Mangement :
import { tags } from 'ziko/dom' import {useState, useDerived} from 'ziko/hooks' const [timer, setTimer] = useState(0); const converToHMS = seconds => `${Math.floor(seconds / 3600)} : ${Math.floor((seconds % 3600) / 60)} : ${seconds % 60} ` const [time] = useDerived(t => converToHMS(t) , [timer] ) tags.p('Elapsed Time : ', time) let i = 1; setInterval(()=>{ setTimer(i); i++ }, 1000)
  • πŸ“± Single Page Application With File Based Routing
import { FileBasedRouting } from "ziko"; FileBasedRouting(import.meta.glob("./pages/**/*.js"))
  • 🀝 One Way Interleaving With Vanjs
  • ⏰ Time loop and animations support

πŸš€ External :

  • 🧩 Extra UI Components : Zextra
  • πŸ–₯️ Server Side Rendering With File Based Routing and Client Side Hydration : ziko-server
  • πŸ“ Mdx-Like Markdown Preprocessor : Mdz
  • πŸ”Œ Flexible Integration with Popular Frameworks/Libraries : Ziko-wrapper
    • πŸ”„ Bi-directional : React, Preact, Solid, Svelte, Vue , Vanjs
    • ➑️ Uni-directional (ZikoJS β†’ X) :
      • Astro : (SSR + Client Hydration)
  • πŸ“¦ Growing Add-On Ecosystem :
    • Ziko-Tgl : WebGL/3D Graphics, Built on Top of Threejs
    • Ziko-Chart
    • Ziko-Code
    • Ziko-Lottie
    • ...

Install :

npm i ziko

Quick Start :

npx create-ziko-app [app-title]

⭐️ Show your support

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

To do add component middlware/wrapper

About

zikojs is a javascript library with a focus on making coding effortless .

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Sponsor this project

Packages

 
 
 

Contributors