Skip to content

Commit 9ad871d

Browse files
zakarialaoui10zakarialaoui10
committed
fix HTMLWrapper box
1 parent aa6acc8 commit 9ad871d

5 files changed

Lines changed: 287 additions & 224 deletions

File tree

‎README.md‎

Lines changed: 39 additions & 223 deletions
Original file line numberDiff line numberDiff line change
@@ -1,246 +1,62 @@
11
<img src="docs/assets/zikojs.png" width="200" align="right" alt="zikojs logo">
2-
3-
*💡 **Zikojs** a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities*
4-
5-
<br>
62

7-
# Install
8-
```bash
9-
npm install ziko
10-
```
11-
# ⚡ Get started
12-
## Node
13-
```bash
14-
npx create-ziko-app [My_App]
15-
```
16-
```
17-
cd [My_App]
18-
npm run dev
19-
```
20-
## Browser
21-
```html
22-
<!DOCTYPE html>
23-
<html lang="en">
24-
<head>
25-
<meta charset="UTF-8">
26-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
27-
<title>zikojs</title>
28-
</head>
29-
<body>
30-
<script src="https://cdn.jsdelivr.net/npm/ziko@latest/dist/ziko.js"></script>
31-
<script>
32-
Ziko.ExtractAll()
33-
const hello = p("Hello World").style({
34-
color: "gold",
35-
fontSize: "30px",
36-
fontWeight: "bold"
37-
})
38-
.onPtrEnter(e=>e.target.st.color(Random.color()))
39-
.onPtrLeave(e=>e.target.st.color("gold"))
40-
Ziko.App(
41-
hello
42-
).style({
43-
width: "100vw",
44-
height: "100vh",
45-
background: "darkblue"
46-
}).vertical(0, "space-around")
47-
48-
</script>
49-
</body>
50-
</html>
51-
```
52-
## Documentation
53-
## 🎬 Demos
54-
- ### [ Windows entanglement using zikojs and ziko-three ](https://www.linkedin.com/feed/update/urn:li:activity:7144023650394918913/)
3+
*💡 **Zikojs** a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities*
554

56-
## 📃 [wiki](https://github.com/zakarialaoui10/ziko.js/wiki)
5+
## Features :
576

58-
## 💡 [Features]()
597
### 🔰 No Template Engines :
8+
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.
609

61-
zikojs UI module adopts a distinctive approach to building and updating user interfaces.
62-
It doesn't rely on predefined markup templates. Instead, it leverages a hyperscript-like syntax to dynamically create and update user interfaces.
10+
### 🔰 Built in File-Based Routing with Single Page Application
6311

64-
<details>
65-
<summary> See More </summary>
12+
ZikoJS provides an intuitive file-based routing mechanism that simplifies the development of single-page applications. By organizing your page components into a directory structure, you can automatically generate routes based on the file paths. This approach enhances the maintainability of your code by allowing you to easily manage and navigate between different views in your application.
13+
14+
To implement file-based routing, simply use the following code:
6615

67-
For instance, consider the following JavaScript code using zikojs:
6816
```js
69-
para=p(
70-
text("hello"),
71-
text("world")
72-
)
73-
.style({
74-
color:"darkblue"
75-
})
76-
.forEach(n=>n.onPtrEnter(e=>{
77-
console.log(e.target.text)
78-
}));
79-
```
80-
`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.
81-
82-
`.style({...})` - This method sets the style of the paragraph element. In this case, it sets the color to "darkblue".
83-
84-
`.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.
85-
86-
>[!TIP]
87-
To acces the para items you can use Array like syntaxe , `para[index]` or `para.at(index)` (index can positive or negative integer)
88-
89-
This code snippet produces the equivalent HTML structure:
90-
```html
91-
<p style="color:darkblue">
92-
<span>hello</span>
93-
<span>world</span>
94-
</p>
95-
<script>
96-
para=document.querySelector(p);
97-
[...a.children].forEach(
98-
n=>n.addEventListener("pointerenter",e=>{
99-
console.log(e.target.textContent)
100-
}))
101-
</script>
17+
import { FileBasedRouting } from "ziko";
18+
FileBasedRouting(import.meta.glob("./src/pages/**/*.js"))
10219
```
103-
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.
104-
105-
</details>
106-
107-
20+
In this example, the import.meta.glob function dynamically imports all JavaScript files from the specified directory (./src/pages/**). Each file represents a separate route in your application, allowing you to create a clean and organized routing structure without the need for manual route configuration.
10821
10922
### 🔰 Flexible Integration with Popular Frameworks/Libraries
11023
111-
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.
112-
113-
### 🔰 Extensive Add-On Ecosystem
114-
115-
|Addon|Purpose|Dependecy|Links|
116-
|-|-|-|-|
117-
|ziko-gl|-|`Three.js`|[NPM](https://www.npmjs.com/package/zikogl) [GITHUB](https://github.com/zakarialaoui10/zikogl/)|
118-
|ziko-chart|-|`Chart.js`<br>`D3.js`|[NPM](https://www.npmjs.com/package/ziko-chart) [GITHUB](https://github.com/zakarialaoui10/ziko-chart/)|
119-
|ziko-xls|-|`Xls.js`<br>`Hansontable.js`<br>|[NPM](https://www.npmjs.com/package/ziko-xls) [GITHUB](https://github.com/zakarialaoui10/ziko-xls/)|
120-
|ziko-pdf|-|`jsPdf.js`<br>`Pdf.js`<br>|[NPM](https://www.npmjs.com/package/ziko-pdf) [GITHUB](https://github.com/zakarialaoui10/ziko-pdf/)|
121-
|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/)|
122-
### 🔰 The capability to function in both browser-based and Node.js environments
123-
### 🔰 Methodes Extracting
124-
125-
<details>
126-
<summary>
127-
See More
128-
</summary>
129-
130-
```js
131-
Ziko.ExtractAll()
132-
// if you want to extract only UI methodes you can use Ziko.UI.Extractll()
133-
```
134-
🏷️ 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]])`.
24+
**ZikoJS** is designed to seamlessly integrate into other frameworks and libraries. By installing the [ziko-wrapper](https://github.com/zakarialaoui10/ziko-wrapper) package, you can easily use ZikoJS within your favorite frontend ecosystems.
13525
136-
⚠️ 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.
137-
</details>
26+
Currently supported frameworks:
27+
- ***REACT***
28+
- ***Solid***
29+
- ***Preact***
30+
- ***Svelte***
31+
- ***Vue***
13832
139-
### 🔰 Mathematical Utilities & Tips
140-
### 🔰 Rich UI elements
141-
### 🔰 Methodes Chaining
142-
It allows multiple methods to be called sequentially on an object, enhancing code readability and conciseness.
143-
<details>
144-
<summary> See More </summary>
145-
</details>
33+
### 🔰 Custom Markdown Parser
14634
147-
### 🔰 Events Handling
35+
[Mdzjs](https://github.com/zakarialaoui10/mdzjs) allowing you to write markdown content alongside Zikojs Elements
14836
149-
<details>
150-
<summary>
151-
See More
152-
</summary>
37+
```md
38+
---
39+
module :
40+
- import InteractiveBlock from "./InteractiveBlock"
41+
title : Article 1
42+
---
15343

154-
Example of creating simple Paint sketch using canvas and pointer events :
155-
```js
156-
Scene=Canvas().size("500px","500px")
157-
Scene.onPtrDown(e=>{
158-
e.target.ctx.beginPath()
159-
e.target.ctx.moveTo(
160-
map(e.dx,0,e.target.element.offsetWidth,e.target.Xmin,e.target.Xmax),
161-
map(e.dy,0,e.target.element.offseHeight,e.target.Ymin,e.target.Ymax)
162-
)
163-
})
164-
Scene.onPtrMove(e=>{
165-
if(e.isDown){
166-
const x=map(e.mx,0,e.target.element.offsetWidth,e.target.axisMatrix[0][0],e.target.axisMatrix[1][0])
167-
const y=map(e.my,0,e.target.element.offsetHeight,e.target.axisMatrix[1][1],e.target.axisMatrix[0][1])
168-
e.target.append(canvasCircle(x,y,1).color({fill:"#5555AA"}).fill())
169-
}})
170-
171-
Scene.onPtrUp(()=>{})
172-
```
173-
</details>
174-
175-
### 🔰 Functions decorators
44+
# Hello World this is markdown heading
17645

177-
```js
178-
const inp=input().onKeyDown(throttle(e=>console.log(e.kd),1000));
46+
<InteractiveBlock data = "Hello" />
17947
```
18048
181-
### 🔰 Reactivity
182-
### 🔰 Routing for Single Page Applications (SPA)
183-
184-
Zikojs has a built-in Single page application router based on history browser api
185-
186-
<details>
187-
<summary>
188-
<strong> See More </strong>
189-
</summary>
190-
191-
```js
192-
const main= Ziko.App()
193-
const p1=Section()
194-
const p2=Section()
195-
S=Ziko.SPA(
196-
main,{
197-
"/page1":p1,
198-
"/page2":p2
199-
})
200-
// You can use regex to define routes
201-
S.get(
202-
pattern,
203-
path=>handler(path)
204-
)
205-
```
206-
207-
***⚠️ Ensure that your server serves only the index page for all incoming requests.***
208-
209-
***💡 Example using expressjs :***
210-
211-
```js
212-
app.get('*', (req , res) => {
213-
res.sendFile(path.join(__dirname, 'public', 'index.html'));
214-
});
215-
```
216-
</details>
217-
218-
219-
### 🔰 Multithreading supports
220-
221-
```js
222-
useThread(() => {
223-
s = 0;
224-
for (i = 0; i < 10000000000; i++) s += i;
225-
return s;
226-
}, console.log);
227-
```
228-
229-
### 🔰 Responsive Design based on Flex element and resize observer
230-
### 🔰 Loop and animations support
231-
232-
## ⭐️ Show your support <a name="support"></a>
233-
234-
If you appreciate the library, kindly demonstrate your support by giving it a star!<br>
235-
[![Star](https://img.shields.io/github/stars/zakarialaoui10/ziko.js?style=social)](https://github.com/zakarialaoui10/ziko.js)
236-
<!--## Financial support-->
237-
# License
238-
This projet is licensed under the terms of MIT License
239-
<img src="https://img.shields.io/github/license/zakarialaoui10/zikojs?color=rgb%2820%2C21%2C169%29" width="100" align="right">
240-
241-
242-
243-
244-
49+
### 🔰 Growing Add-On Ecosystem
24550
51+
|Addon|Purpose|Dependencies|Repository|
52+
|-|-|-|-|
53+
|ziko-gl||`threejs`|
54+
|ziko-code||`codeMirror`||
55+
|ziko-chart||`chartjs`||
56+
|ziko-pdf||`jsPdf.js`||
57+
|ziko-xls||`xls.js`||
58+
|ziko-lottie||`Lottie-web`|
59+
|ziko-rough||`rough.js`|
60+
|ziko-icons||`fontawesome`|
61+
|ziko-tippy||`tippy.js`|
24662

OLD_README.md renamed to _OLD_README.md

File renamed without changes.

0 commit comments

Comments
 (0)