ziko 0.0.17 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/README.md +91 -200
  2. package/package.json +17 -46
  3. package/src/__helpers__/index.js +61 -61
  4. package/src/app/json-style-sheet.js +64 -64
  5. package/src/app/spa-file-based-routing.js +0 -1
  6. package/src/app/ziko-app.js +38 -38
  7. package/src/data/api/fetchdom.js +13 -13
  8. package/src/data/api/index.js +3 -3
  9. package/src/data/api/preload.js +10 -10
  10. package/src/data/converter/adoc.js +130 -130
  11. package/src/data/converter/array.js +42 -42
  12. package/src/data/converter/canvas.js +24 -24
  13. package/src/data/converter/css.js +36 -36
  14. package/src/data/converter/csv.js +32 -32
  15. package/src/data/converter/idea.txt +9 -9
  16. package/src/data/converter/index.js +36 -36
  17. package/src/data/converter/json.js +80 -80
  18. package/src/data/converter/markdown.js +95 -95
  19. package/src/data/converter/object.js +69 -69
  20. package/src/data/converter/svg.js +10 -10
  21. package/src/data/datatypes/color.js +11 -0
  22. package/src/data/index.js +16 -16
  23. package/src/data/parser/xml.js +46 -46
  24. package/src/data/string/patterns.js +11 -11
  25. package/src/data/string/string.js +169 -169
  26. package/src/global/{themes → _themes}/dark.js +884 -884
  27. package/src/global/{themes → _themes}/index.js +10 -10
  28. package/src/global/{themes → _themes}/light.js +254 -254
  29. package/src/global/app/index.js +45 -45
  30. package/src/global/component/index.js +38 -38
  31. package/src/global/globals/index.js +20 -20
  32. package/src/global/index.js +3 -11
  33. package/src/global/params/index.js +39 -39
  34. package/src/global/router/index.js +66 -66
  35. package/src/global/seo/index.js +42 -42
  36. package/src/graphics/canvas/canvas.js +176 -189
  37. package/src/graphics/canvas/elements/Basic/arc.js +42 -42
  38. package/src/graphics/canvas/elements/Basic/line.js +25 -25
  39. package/src/graphics/canvas/elements/Basic/points.js +47 -47
  40. package/src/graphics/canvas/elements/Basic/polygon.js +6 -6
  41. package/src/graphics/canvas/elements/Basic/rect.js +45 -45
  42. package/src/graphics/canvas/elements/Chart/scatter.js +2 -2
  43. package/src/graphics/canvas/elements/Element.js +114 -114
  44. package/src/graphics/canvas/elements/index.js +13 -13
  45. package/src/graphics/canvas/index.js +2 -15
  46. package/src/graphics/canvas/utils/color.js +7 -7
  47. package/src/graphics/canvas/utils/floodFill.js +57 -57
  48. package/src/graphics/index.js +10 -69
  49. package/src/graphics/svg/Elements/Basic/circle.js +29 -26
  50. package/src/graphics/svg/Elements/Basic/ellipse.js +24 -21
  51. package/src/graphics/svg/Elements/Basic/{foreignObject.js → foreign-object.js} +36 -33
  52. package/src/graphics/svg/Elements/Basic/groupe.js +32 -29
  53. package/src/graphics/svg/Elements/Basic/image.js +36 -33
  54. package/src/graphics/svg/Elements/Basic/index.js +11 -0
  55. package/src/graphics/svg/Elements/Basic/line.js +32 -29
  56. package/src/graphics/svg/Elements/Basic/link.js +33 -30
  57. package/src/graphics/svg/Elements/Basic/path.js +62 -59
  58. package/src/graphics/svg/Elements/Basic/polygon.js +31 -31
  59. package/src/graphics/svg/Elements/Basic/polyline.js +7 -4
  60. package/src/graphics/svg/Elements/Basic/rect.js +46 -43
  61. package/src/graphics/svg/Elements/Basic/text.js +29 -26
  62. package/src/graphics/svg/Elements/Derived/grid.js +8 -8
  63. package/src/graphics/svg/Elements/Derived/index.js +1 -0
  64. package/src/graphics/svg/Elements/index.js +2 -14
  65. package/src/graphics/svg/Elements/{ZikoSvgElement.js → ziko-svg-element.js} +48 -46
  66. package/src/graphics/svg/index.js +2 -2
  67. package/src/graphics/svg/svg.js +68 -114
  68. package/src/index.js +85 -84
  69. package/src/math/calculus/index.js +2 -2
  70. package/src/math/calculus/special-functions/bessel.js +30 -30
  71. package/src/math/calculus/special-functions/beta.js +37 -37
  72. package/src/math/calculus/special-functions/gamma.js +29 -29
  73. package/src/math/calculus/special-functions/index.js +4 -4
  74. package/src/math/complex/index.js +202 -202
  75. package/src/math/const.js +2 -2
  76. package/src/math/discret/Combinaison/index.js +33 -33
  77. package/src/math/discret/Conversion/index.js +85 -85
  78. package/src/math/discret/Logic/index.js +45 -45
  79. package/src/math/discret/Permutation/index.js +30 -30
  80. package/src/math/discret/Set/index.js +1 -1
  81. package/src/math/discret/Set/power-set.js +14 -14
  82. package/src/math/discret/Set/sub-set.js +10 -10
  83. package/src/math/discret/index.js +11 -11
  84. package/src/math/functions/index.js +161 -161
  85. package/src/math/index.js +32 -32
  86. package/src/math/matrix/Decomposition.js +90 -90
  87. package/src/math/matrix/LinearSystem.js +9 -9
  88. package/src/math/matrix/Matrix.js +716 -716
  89. package/src/math/matrix/index.js +2 -2
  90. package/src/math/random/index.js +172 -172
  91. package/src/math/signal/__np.py.txt +39 -39
  92. package/src/math/signal/conv.js +174 -174
  93. package/src/math/signal/fft.js +54 -54
  94. package/src/math/signal/filter.js +38 -38
  95. package/src/math/signal/functions.js +145 -145
  96. package/src/math/signal/index.js +109 -109
  97. package/src/math/statistics/Functions/index.js +99 -99
  98. package/src/math/statistics/index.js +15 -15
  99. package/src/math/utils/arithmetic.js +138 -138
  100. package/src/math/utils/checkers.js +29 -29
  101. package/src/math/utils/conversions.js +19 -19
  102. package/src/math/utils/discret.js +51 -51
  103. package/src/math/utils/index.js +101 -101
  104. package/src/math/utils/mapfun.js +49 -49
  105. package/src/reactivity/events/Input.js +61 -61
  106. package/src/reactivity/events/Pointer.js +231 -231
  107. package/src/reactivity/events/ZikoEvent.js +90 -90
  108. package/src/reactivity/events/click.js +59 -59
  109. package/src/reactivity/events/clipboard.js +87 -87
  110. package/src/reactivity/events/custom-event.js +56 -56
  111. package/src/reactivity/events/drag.js +136 -136
  112. package/src/reactivity/events/focus.js +58 -58
  113. package/src/reactivity/events/hash.js +46 -46
  114. package/src/reactivity/events/index.js +12 -63
  115. package/src/reactivity/events/key.js +101 -101
  116. package/src/reactivity/events/mouse.js +232 -232
  117. package/src/reactivity/events/swipe.js +149 -149
  118. package/src/reactivity/events/wheel.js +46 -46
  119. package/src/reactivity/hooks/{contexte → Contexte}/useSuccesifKeys.js +13 -13
  120. package/src/reactivity/hooks/{decorators → Decorators}/index.js +6 -6
  121. package/src/reactivity/hooks/{decorators → Decorators}/time.js +16 -16
  122. package/src/reactivity/hooks/{decorators → Decorators}/type.js +87 -87
  123. package/src/reactivity/hooks/{head/useCssText.js → Head/_useCssText.js} +20 -20
  124. package/src/reactivity/hooks/{head → Head}/index.js +5 -5
  125. package/src/reactivity/hooks/{head → Head}/useFavIcon.js +37 -37
  126. package/src/reactivity/hooks/{head → Head}/useHead.js +27 -27
  127. package/src/reactivity/hooks/{head → Head}/useMeta.js +52 -52
  128. package/src/reactivity/hooks/{head → Head}/useTitle.js +29 -29
  129. package/src/reactivity/hooks/{interactions/useBluetooth.js → Interactions/_useBluetooth.js} +47 -47
  130. package/src/reactivity/hooks/{interactions → Interactions}/index.js +4 -4
  131. package/src/reactivity/hooks/{interactions → Interactions}/useChannel.js +49 -49
  132. package/src/reactivity/hooks/{interactions → Interactions}/useEventEmmiter.js +63 -63
  133. package/src/reactivity/hooks/{interactions → Interactions}/useThread.js +43 -43
  134. package/src/reactivity/hooks/Sensors/index.js +2 -0
  135. package/src/reactivity/hooks/{sensors → Sensors}/useBattery.js +35 -35
  136. package/src/reactivity/hooks/{sensors → Sensors}/useGeolocation.js +16 -16
  137. package/src/reactivity/hooks/{storage → Storage}/useStorage.js +72 -72
  138. package/src/reactivity/hooks/{ui → UI}/index.js +6 -5
  139. package/src/reactivity/hooks/{ui → UI}/useMediaQuery.js +43 -43
  140. package/src/reactivity/hooks/UI/useRoot.js +39 -0
  141. package/src/reactivity/hooks/{ui → UI}/useStyle.js +79 -79
  142. package/src/reactivity/hooks/{ui → UI}/useTheme.js +61 -61
  143. package/src/reactivity/hooks/index.js +8 -91
  144. package/src/reactivity/hooks/todo.md +26 -26
  145. package/src/reactivity/idea +1 -1
  146. package/src/reactivity/index.js +11 -11
  147. package/src/reactivity/observer/attributes.js +28 -28
  148. package/src/reactivity/observer/children.js +36 -36
  149. package/src/reactivity/observer/index.js +6 -6
  150. package/src/reactivity/observer/intersection.js +43 -43
  151. package/src/reactivity/observer/mutation.js +112 -112
  152. package/src/reactivity/observer/resize.js +46 -46
  153. package/src/reactivity/observer/screen.js +44 -44
  154. package/src/reactivity/observer/screen.js.txt +83 -83
  155. package/src/reactivity/observer/screen.txt +12 -12
  156. package/src/time/animation.js +75 -75
  157. package/src/time/index.js +11 -11
  158. package/src/time/loop.js +87 -87
  159. package/src/time/utils/decorators.js +16 -16
  160. package/src/time/utils/ease.js +143 -143
  161. package/src/time/utils/index.js +17 -17
  162. package/src/time/utils/performance.js +15 -15
  163. package/src/time/utils/ui.js +25 -25
  164. package/src/types.js +73 -73
  165. package/src/ui/elements/derived/accordion/accordion.js +42 -42
  166. package/src/ui/elements/derived/accordion/collapsible.js +82 -82
  167. package/src/ui/elements/derived/accordion/index.js +1 -1
  168. package/src/ui/elements/derived/alert/alert.js +80 -80
  169. package/src/ui/elements/derived/alert/palette.js +51 -51
  170. package/src/ui/elements/derived/carousel/index.js +50 -50
  171. package/src/ui/elements/derived/code-note/SubElements.js.txt +104 -104
  172. package/src/ui/elements/derived/code-note/code-cell.js +194 -194
  173. package/src/ui/elements/derived/code-note/code-note.js +71 -71
  174. package/src/ui/elements/derived/code-note/index.js +1 -1
  175. package/src/ui/elements/derived/code-note/sub-elements.js +66 -66
  176. package/src/ui/elements/derived/elements/Swipper.js +3 -3
  177. package/src/ui/elements/derived/elements/index.js +9 -9
  178. package/src/ui/elements/derived/flex/index.js +102 -102
  179. package/src/ui/elements/derived/grid/index.js +32 -32
  180. package/src/ui/elements/derived/index.js +11 -11
  181. package/src/ui/elements/derived/menu/menu3d.js +259 -259
  182. package/src/ui/elements/derived/modal/index.js +91 -91
  183. package/src/ui/elements/derived/pagination/breadcrumbs.js +53 -53
  184. package/src/ui/elements/derived/slider/__ZikoUISlider__.js +111 -111
  185. package/src/ui/elements/derived/slider/hSlider.js +33 -33
  186. package/src/ui/elements/derived/slider/index.js +11 -11
  187. package/src/ui/elements/derived/slider/vSlider.js +26 -26
  188. package/src/ui/elements/derived/splitter/__ZikoUISplitter__.js +61 -61
  189. package/src/ui/elements/derived/splitter/hsplitter.js +39 -39
  190. package/src/ui/elements/derived/splitter/index.js +11 -11
  191. package/src/ui/elements/derived/splitter/vsplitter.js +39 -39
  192. package/src/ui/elements/derived/tabs/index.js +179 -179
  193. package/src/ui/elements/primitives/ZikoUIContainerElement.js +163 -126
  194. package/src/ui/elements/primitives/ZikoUIElement.js +492 -492
  195. package/src/ui/elements/primitives/embaded/html.js +19 -19
  196. package/src/ui/elements/primitives/embaded/index.js +3 -3
  197. package/src/ui/elements/primitives/embaded/pdf.js +16 -16
  198. package/src/ui/elements/primitives/embaded/youtube.js +23 -23
  199. package/src/ui/elements/primitives/index.js +7 -7
  200. package/src/ui/elements/primitives/io/Form/index.js +41 -41
  201. package/src/ui/elements/primitives/io/Form/index.js.txt +104 -104
  202. package/src/ui/elements/primitives/io/Inputs/__helpers__.js +51 -51
  203. package/src/ui/elements/primitives/io/Inputs/index.js +12 -12
  204. package/src/ui/elements/primitives/io/Inputs/input/index.js +98 -98
  205. package/src/ui/elements/primitives/io/Inputs/input-camera/index.js +26 -26
  206. package/src/ui/elements/primitives/io/Inputs/input-checkbox/index.js +25 -25
  207. package/src/ui/elements/primitives/io/Inputs/input-color/index.js +15 -15
  208. package/src/ui/elements/primitives/io/Inputs/input-date-time/index.js +2 -2
  209. package/src/ui/elements/primitives/io/Inputs/input-date-time/input-date-time.js +13 -13
  210. package/src/ui/elements/primitives/io/Inputs/input-date-time/input-date.js +13 -13
  211. package/src/ui/elements/primitives/io/Inputs/input-date-time/input-time.js +13 -13
  212. package/src/ui/elements/primitives/io/Inputs/input-email-password/index.js +1 -1
  213. package/src/ui/elements/primitives/io/Inputs/input-email-password/input-email.js +14 -14
  214. package/src/ui/elements/primitives/io/Inputs/input-email-password/input-password.js +13 -13
  215. package/src/ui/elements/primitives/io/Inputs/input-file/input-image.js +42 -42
  216. package/src/ui/elements/primitives/io/Inputs/input-number/index.js +36 -36
  217. package/src/ui/elements/primitives/io/Inputs/input-radio/index.js +25 -25
  218. package/src/ui/elements/primitives/io/Inputs/input-search/index.js +45 -45
  219. package/src/ui/elements/primitives/io/Inputs/input-slider/index.js +34 -34
  220. package/src/ui/elements/primitives/io/Select/index.js +19 -19
  221. package/src/ui/elements/primitives/io/Textarea/index.js +17 -17
  222. package/src/ui/elements/primitives/io/index.js +3 -3
  223. package/src/ui/elements/primitives/list/index.js +138 -138
  224. package/src/ui/elements/primitives/media/Audio/index.js +16 -16
  225. package/src/ui/elements/primitives/media/Image/figure.js +18 -18
  226. package/src/ui/elements/primitives/media/Image/image.js +36 -36
  227. package/src/ui/elements/primitives/media/Image/index.js +1 -1
  228. package/src/ui/elements/primitives/media/Video/index.js +26 -26
  229. package/src/ui/elements/primitives/media/__ZikoUIDynamicMediaELement__.js +46 -46
  230. package/src/ui/elements/primitives/media/index.js +2 -2
  231. package/src/ui/elements/primitives/misc/index.js +101 -101
  232. package/src/ui/elements/primitives/misc/xml-wrapper.js +3 -2
  233. package/src/ui/elements/primitives/semantic/index.js +81 -81
  234. package/src/ui/elements/primitives/table/elements.js +93 -93
  235. package/src/ui/elements/primitives/table/index.js +2 -2
  236. package/src/ui/elements/primitives/table/table.js +115 -115
  237. package/src/ui/elements/primitives/table/utils.js +11 -11
  238. package/src/ui/elements/primitives/text/__ZikoUIText__.js +71 -71
  239. package/src/ui/elements/primitives/text/heading.js +35 -35
  240. package/src/ui/elements/primitives/text/index.js +2 -2
  241. package/src/ui/elements/primitives/text/p.js +26 -26
  242. package/src/ui/elements/primitives/text/text.js +80 -80
  243. package/src/ui/index.js +37 -37
  244. package/src/ui/style/index.js +504 -515
  245. package/src/ui/utils/index.js +69 -69
  246. package/starter/bin/index.js +11 -11
  247. package/dist/ziko.cjs +0 -14018
  248. package/dist/ziko.js +0 -14028
  249. package/dist/ziko.min.js +0 -9
  250. package/dist/ziko.mjs +0 -13688
  251. package/src/graphics/canvas/elements/Groupe.js +0 -0
  252. package/src/graphics/canvas/elements/grid.js +0 -0
  253. package/src/graphics/canvas/filter/index.js +0 -0
  254. package/src/graphics/canvas/paint/index.js +0 -0
  255. package/src/reactivity/hooks/sensors/index.js +0 -2
  256. /package/src/reactivity/hooks/{contexte → Contexte}/index.js +0 -0
  257. /package/src/reactivity/hooks/{interactions → Interactions}/useSerial.js +0 -0
  258. /package/src/reactivity/hooks/{interactions → Interactions}/useUsb.js +0 -0
  259. /package/src/reactivity/hooks/{sensors → Sensors}/useCamera.js +0 -0
  260. /package/src/reactivity/hooks/{sensors → Sensors}/useMicro.js +0 -0
  261. /package/src/reactivity/hooks/{sensors → Sensors}/useOrientation.js +0 -0
  262. /package/src/reactivity/hooks/{storage → Storage}/index.js +0 -0
  263. /package/src/reactivity/hooks/{storage → Storage}/useCookie.js +0 -0
  264. /package/src/reactivity/hooks/{storage → Storage}/useIndexedDb.js +0 -0
  265. /package/src/reactivity/hooks/{ui → UI}/useCssLink.js +0 -0
  266. /package/src/reactivity/hooks/{ui → UI}/useLinearGradient.js +0 -0
  267. /package/src/reactivity/hooks/{ui → UI}/useRadialGradient.js +0 -0
package/README.md CHANGED
@@ -1,233 +1,131 @@
1
1
  <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
2
 
5
- <br>
3
+ *💡 **Zikojs** a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities*
6
4
 
7
- # Install
5
+ ## Install
8
6
  ```bash
9
7
  npm install ziko
10
8
  ```
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
9
  ## 🎬 Demos
54
10
  - ### [ Windows entanglement using zikojs and ziko-three ](https://www.linkedin.com/feed/update/urn:li:activity:7144023650394918913/)
55
11
 
56
- ## 📃 [wiki](https://github.com/zakarialaoui10/ziko.js/wiki)
12
+ ## Features :
57
13
 
58
- ## 💡 [Features]()
59
- ### 🔰 No Template Engines :
14
+ ### 🔰 Seamlessly operates in both browser and Node.js environments
60
15
 
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.
16
+ ### 🔰 Mathematical Utilities & Tips
17
+
18
+ - ***Flexible Math Functions*** :
63
19
 
64
- <details>
65
- <summary> See More </summary>
20
+ ZikoJS offers flexible math utilities, such as the `mapfun` function, which allows mapping standard mathematical operations to complex and nested data structures.
21
+ 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).
66
22
 
67
- For instance, consider the following JavaScript code using zikojs:
68
23
  ```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>
24
+ import { cos, PI } from "ziko";
25
+ const result = cos(PI, PI / 2, PI / 4, [PI / 6, PI / 3], {
26
+ x: PI / 2,
27
+ y: PI / 4,
28
+ z: [0, PI / 12],
29
+ }
30
+ );
31
+ /*
32
+ result =>
33
+ [
34
+ -1,
35
+ 0,
36
+ 0.707106781186548,
37
+ [0.866025403784439, 0.5],
38
+ {
39
+ x: 0,
40
+ y: 0.707106781186548,
41
+ z: [1, 0.965925826289068],
42
+ },
43
+ ];
44
+ */
45
+ // console.log(result)
46
+
102
47
  ```
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.
48
+ You can also built your own flexible Math function using this mapfun util :
49
+ ```js
50
+ import { mapfun } from "ziko";
51
+ const parabolic_func = (a, b, c, x) => a * x ** 2 + b * x + c;
52
+ const map_parabolic_func =
53
+ (a, b, c) =>
54
+ (...X) =>
55
+ mapfun((n) => parabolic_func(a, b, c, n), ...X);
56
+ const a = -1.5,
57
+ b = 2,
58
+ c = 3;
59
+ const X = [0, 1, 2, 3];
60
+ console.log(parabolic_func(a, b, c)(X));
61
+ // [3,3,1,3]
104
62
 
105
- </details>
63
+ ```
106
64
 
65
+ - Built in Matrix, Complex, Random ... classes
107
66
 
67
+ ### 🔰 No Template Engines :
68
+ 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.
108
69
 
109
- ### 🔰 Flexible Integration with Popular Frameworks/Libraries
70
+ ### 🔰 Built in File-Based Routing with Single Page Application
110
71
 
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.
72
+ 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.
112
73
 
113
- ### 🔰 Extensive Add-On Ecosystem
74
+ To implement file-based routing, simply use the following code:
114
75
 
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()
76
+ ```js
77
+ import { FileBasedRouting } from "ziko";
78
+ FileBasedRouting(import.meta.glob("./src/pages/**/*.js"))
133
79
  ```
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]])`.
80
+ 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.
135
81
 
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>
82
+ ### 🔰 Flexible Integration with Popular Frameworks/Libraries
138
83
 
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>
84
+ **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.
146
85
 
147
- ### 🔰 Events Handling
86
+ Currently supported frameworks:
87
+ - ***REACT***
88
+ - ***Solid***
89
+ - ***Preact***
90
+ - ***Svelte***
91
+ - ***Vue***
148
92
 
149
- <details>
150
- <summary>
151
- See More
152
- </summary>
93
+ ### 🔰 Custom Markdown Parser
153
94
 
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
95
+ [Mdzjs](https://github.com/zakarialaoui10/mdzjs) allowing you to write markdown content alongside Zikojs Elements
176
96
 
177
- ```js
178
- const inp=input().onKeyDown(throttle(e=>console.log(e.kd),1000));
179
- ```
97
+ ```md
98
+ ---
99
+ module :
100
+ - import InteractiveBlock from "./InteractiveBlock"
101
+ title : Article 1
102
+ ---
180
103
 
181
- ### 🔰 Reactivity
182
- ### 🔰 Routing for Single Page Applications (SPA)
104
+ # Hello World this is markdown heading
183
105
 
184
- Zikojs has a built-in Single page application router based on history browser api
106
+ <InteractiveBlock data = "Hello" />
107
+ ```
185
108
 
186
- <details>
187
- <summary>
188
- <strong> See More </strong>
189
- </summary>
109
+ ### 🔰 Growing Add-On Ecosystem
190
110
 
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 :***
111
+ |Addon|Purpose|Dependencies|Repository|
112
+ |-|-|-|-|
113
+ |ziko-gl||`threejs`|
114
+ |ziko-code||`codeMirror`||
115
+ |ziko-chart||`chartjs`||
116
+ |ziko-pdf||`jsPdf.js`||
117
+ |ziko-xls||`xls.js`||
118
+ |ziko-lottie||`Lottie-web`|
119
+ |ziko-rough||`rough.js`|
120
+ |ziko-icons||`fontawesome`|
121
+ |ziko-tippy||`tippy.js`|
210
122
 
211
- ```js
212
- app.get('*', (req , res) => {
213
- res.sendFile(path.join(__dirname, 'public', 'index.html'));
214
- });
215
- ```
216
- </details>
217
123
 
124
+ ### 🔰 Rich UI elements
218
125
 
219
- ### 🔰 Multithreading supports
126
+ ### 🔰 Reactivity
220
127
 
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
128
+ ### 🔰 Time loop and animations support
231
129
 
232
130
  ## ⭐️ Show your support <a name="support"></a>
233
131
 
@@ -237,10 +135,3 @@ If you appreciate the library, kindly demonstrate your support by giving it a st
237
135
  # License
238
136
  This projet is licensed under the terms of MIT License
239
137
  <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
-
245
-
246
-
package/package.json CHANGED
@@ -1,18 +1,22 @@
1
1
  {
2
2
  "name": "ziko",
3
- "version": "0.0.17",
4
- "description": "a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities",
3
+ "version": "0.0.19",
4
+ "description": "a versatile javaScript framework offering a rich set of UI components, advanced mathematical utilities, reactivity, animations, client side routing and graphics capabilities",
5
5
  "keywords": [
6
- "Zikojs",
7
- "Math",
8
- "User Interface",
9
- "Time",
10
- "Data",
11
- "Svg",
12
- "Canvas",
13
- "Reactivity",
14
- "Dom",
15
- "Single Page Application"
6
+ "front-end",
7
+ "framework",
8
+ "zikojs",
9
+ "ziko",
10
+ "math",
11
+ "user-interface",
12
+ "time",
13
+ "data",
14
+ "svg",
15
+ "canvas",
16
+ "reactivity",
17
+ "dom",
18
+ "single page application",
19
+ "file based routing"
16
20
  ],
17
21
  "type": "module",
18
22
  "main": "dist/ziko.mjs",
@@ -25,41 +29,8 @@
25
29
  ],
26
30
  "exports": {
27
31
  ".": {
28
- "import": "./src/index.js",
32
+ "import": "./dist/ziko.mjs",
29
33
  "require": "./dist/ziko.cjs"
30
- },
31
- "./type": {
32
- "import": "./src/type.js"
33
- },
34
- "./math": {
35
- "import": "./src/math/index.js"
36
- },
37
- "./math/functions": {
38
- "import": "./src/math/functions/index.js"
39
- },
40
- "./math/matrix": {
41
- "import": "./src/math/matrix/index.js"
42
- },
43
- "./math/complex": {
44
- "import": "./src/math/complex/index.js"
45
- },
46
- "./math/signal": {
47
- "import": "./src/math/signal/index.js"
48
- },
49
- "./ui": {
50
- "import": "./src/ui/index.js"
51
- },
52
- "./time": {
53
- "import": "./src/time/index.js"
54
- },
55
- "./reactivity": {
56
- "import": "./src/reactivity/index.js"
57
- },
58
- "./data": {
59
- "import": "./src/data/index.js"
60
- },
61
- "./graphics": {
62
- "import": "./src/data/graphics.js"
63
34
  }
64
35
  },
65
36
  "bin": {
package/src/__helpers__/index.js CHANGED
@@ -1,61 +1,61 @@
1
- const __ExtractAll__ =(obj)=> {
2
- const keys = Object.keys(obj);
3
- for (let i = 0; i < keys.length; i++) {
4
- const key = keys[i];
5
- if (!["__ExtractAll__","__RemoveAll__","ExtractAll","RemoveAll"].includes(key)) {
6
- globalThis[key] = obj[key];
7
- }
8
- }
9
- }
10
- const __RemoveAll__ =(obj)=> {
11
- const keys = Object.keys(obj);
12
- for (let i = 0; i < keys.length; i++) {
13
- const key = keys[i];
14
- if (key !== '__RemoveAll__') {
15
- delete globalThis[key];
16
- }
17
- }
18
- }
19
- const mixin = (target, ...sources) => {
20
- sources.forEach(source => {
21
- Object.getOwnPropertyNames(source.prototype).forEach(name => {
22
- if (name !== 'constructor') {
23
- target[name] = source.prototype[name];
24
- }
25
- });
26
- });
27
- }
28
-
29
- class A {
30
- constructor(){
31
- this.msg="from A";
32
- }
33
- a() {
34
- console.log(this.msg);
35
- return this;
36
- }
37
- }
38
-
39
- class B{
40
- constructor(){
41
- this.msg="from B";
42
- }
43
- b() {
44
- console.log(this.msg);
45
- return this;
46
- }
47
- }
48
-
49
- class AB {
50
- constructor() {
51
- this.msg="from AB"
52
- mixin(this.__proto__, A, B);
53
- }
54
- }
55
-
56
- // ab=new AB()
57
- export{
58
- mixin,
59
- __ExtractAll__,
60
- __RemoveAll__
61
- }
1
+ const __ExtractAll__ =(obj)=> {
2
+ const keys = Object.keys(obj);
3
+ for (let i = 0; i < keys.length; i++) {
4
+ const key = keys[i];
5
+ if (!["__ExtractAll__","__RemoveAll__","ExtractAll","RemoveAll"].includes(key)) {
6
+ globalThis[key] = obj[key];
7
+ }
8
+ }
9
+ }
10
+ const __RemoveAll__ =(obj)=> {
11
+ const keys = Object.keys(obj);
12
+ for (let i = 0; i < keys.length; i++) {
13
+ const key = keys[i];
14
+ if (key !== '__RemoveAll__') {
15
+ delete globalThis[key];
16
+ }
17
+ }
18
+ }
19
+ const mixin = (target, ...sources) => {
20
+ sources.forEach(source => {
21
+ Object.getOwnPropertyNames(source.prototype).forEach(name => {
22
+ if (name !== 'constructor') {
23
+ target[name] = source.prototype[name];
24
+ }
25
+ });
26
+ });
27
+ }
28
+
29
+ class A {
30
+ constructor(){
31
+ this.msg="from A";
32
+ }
33
+ a() {
34
+ console.log(this.msg);
35
+ return this;
36
+ }
37
+ }
38
+
39
+ class B{
40
+ constructor(){
41
+ this.msg="from B";
42
+ }
43
+ b() {
44
+ console.log(this.msg);
45
+ return this;
46
+ }
47
+ }
48
+
49
+ class AB {
50
+ constructor() {
51
+ this.msg="from AB"
52
+ mixin(this.__proto__, A, B);
53
+ }
54
+ }
55
+
56
+ // ab=new AB()
57
+ export{
58
+ mixin,
59
+ __ExtractAll__,
60
+ __RemoveAll__
61
+ }
package/src/app/json-style-sheet.js CHANGED
@@ -1,64 +1,64 @@
1
- import { json2css } from "../data";
2
- class ZikoJsonStyleSheet{
3
- constructor(JsonStyle={}){
4
- this.cache={
5
- JsonStyle,
6
- isRenderd : false
7
- }
8
- this.target = globalThis?.document?.head;
9
- this.element = document.createElement("style");
10
- this.element.setAttribute("data-generator","zikojs");
11
- this.write();
12
- this.render()
13
- }
14
- get CssText(){
15
- return json2css(this.cache.JsonStyle);
16
- }
17
- render(){
18
- this.target.append(this.element);
19
- this.cache.isRenderd = true;
20
- return this;
21
- }
22
- unrender(){
23
- if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
24
- this.cache.isRenderd = false;
25
- return this;
26
- }
27
- write(){
28
- this.element.textContent = this.CssText;
29
- return this;
30
- }
31
- style(styles, overwrite = false){
32
- if(overwrite) this.clear();
33
- Object.assign(this.cache.JsonStyle,styles);
34
- this.write();
35
- return this;
36
- }
37
- clear(){
38
- this.cache.JsonStyle = {}
39
- this.write();
40
- return this;
41
- }
42
- // overrideGlobal(style){
43
- // if(this.cache.JsonStyle["*"]){
44
- // Object.assign(this.cache.JsonStyle["*"],style);
45
- // }
46
- // else Object.assign();
47
- // this.write();
48
- // return this;
49
- // }
50
- }
51
-
52
- const jsonStyleSheet = JsonStyle =>new ZikoJsonStyleSheet(JsonStyle);
53
- export {
54
- jsonStyleSheet,
55
- ZikoJsonStyleSheet
56
- }
57
-
58
-
59
- // p().style({color:"red"})
60
- // jsonStyleSheet({
61
- // p:{
62
- // color : "green !important"
63
- // }
64
- // })
1
+ import { json2css } from "../data";
2
+ class ZikoJsonStyleSheet{
3
+ constructor(JsonStyle={}){
4
+ this.cache={
5
+ JsonStyle,
6
+ isRenderd : false
7
+ }
8
+ this.target = globalThis?.document?.head;
9
+ this.element = document.createElement("style");
10
+ this.element.setAttribute("data-generator","zikojs");
11
+ this.write();
12
+ this.render()
13
+ }
14
+ get CssText(){
15
+ return json2css(this.cache.JsonStyle);
16
+ }
17
+ render(){
18
+ this.target.append(this.element);
19
+ this.cache.isRenderd = true;
20
+ return this;
21
+ }
22
+ unrender(){
23
+ if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
24
+ this.cache.isRenderd = false;
25
+ return this;
26
+ }
27
+ write(){
28
+ this.element.textContent = this.CssText;
29
+ return this;
30
+ }
31
+ style(styles, overwrite = false){
32
+ if(overwrite) this.clear();
33
+ Object.assign(this.cache.JsonStyle,styles);
34
+ this.write();
35
+ return this;
36
+ }
37
+ clear(){
38
+ this.cache.JsonStyle = {}
39
+ this.write();
40
+ return this;
41
+ }
42
+ // overrideGlobal(style){
43
+ // if(this.cache.JsonStyle["*"]){
44
+ // Object.assign(this.cache.JsonStyle["*"],style);
45
+ // }
46
+ // else Object.assign();
47
+ // this.write();
48
+ // return this;
49
+ // }
50
+ }
51
+
52
+ const jsonStyleSheet = JsonStyle =>new ZikoJsonStyleSheet(JsonStyle);
53
+ export {
54
+ jsonStyleSheet,
55
+ ZikoJsonStyleSheet
56
+ }
57
+
58
+
59
+ // p().style({color:"red"})
60
+ // jsonStyleSheet({
61
+ // p:{
62
+ // color : "green !important"
63
+ // }
64
+ // })
package/src/app/spa-file-based-routing.js CHANGED
@@ -4,7 +4,6 @@ import { Section } from "../ui";
4
4
  async function FileBasedRouting(pages /* use import.meta.glob */){
5
5
  const routes = Object.keys(pages)
6
6
  const root = findCommonPath(routes)
7
- // console.log({root})
8
7
  const pairs = {}
9
8
  for(let i=0; i<routes.length; i++){
10
9
  const module = await pages[routes[i]]()