ziko 0.34.2 → 0.35.1

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 (34) hide show
  1. package/dist/ziko.cjs +162 -162
  2. package/dist/ziko.js +194 -248
  3. package/dist/ziko.min.js +2 -2
  4. package/dist/ziko.mjs +194 -248
  5. package/package.json +6 -4
  6. package/src/index.js +2 -2
  7. package/src/reactivity/hooks/UI/index.js +2 -2
  8. package/src/reactivity/hooks/index.js +1 -1
  9. package/src/ui/{elements/ZikoUIElement.js → constructors/ziko-ui-element.js} +12 -7
  10. package/src/ui/constructors/ziko-ui-node.js +15 -0
  11. package/src/ui/elements/flex/index.js +1 -1
  12. package/src/ui/elements/grid/index.js +1 -1
  13. package/src/ui/elements/io/Inputs/__helpers__.js +1 -1
  14. package/src/ui/elements/io/Inputs/input/index.js +1 -1
  15. package/src/ui/elements/io/Inputs/input-file/input-image.js +1 -1
  16. package/src/ui/elements/io/Select/index.js +1 -1
  17. package/src/ui/elements/io/Textarea/index.js +1 -1
  18. package/src/ui/elements/list/index.js +1 -1
  19. package/src/ui/elements/media/Image/figure.js +1 -1
  20. package/src/ui/elements/media/Image/image.js +1 -1
  21. package/src/ui/elements/media/__ZikoUIDynamicMediaELement__.js +1 -1
  22. package/src/ui/elements/misc/hyperscript.js +1 -1
  23. package/src/ui/elements/misc/index.js +1 -1
  24. package/src/ui/elements/misc/suspense.js +1 -1
  25. package/src/ui/elements/misc/xml-wrapper.js +1 -1
  26. package/src/ui/elements/semantic/index.js +1 -1
  27. package/src/ui/elements/table/elements.js +1 -1
  28. package/src/ui/elements/table/table.js +1 -1
  29. package/src/ui/elements/text/__ZikoUIText__.js +1 -1
  30. package/src/ui/elements/text/heading.js +1 -1
  31. package/src/ui/index.js +1 -1
  32. package/src/ui/tags/index.js +1 -1
  33. package/src/ui/utils/index.js +1 -1
  34. package/src/watch/dom-observer/ziko-observer.js +15 -0
package/dist/ziko.cjs CHANGED
@@ -2,7 +2,7 @@
2
2
  /*
3
3
  Project: ziko.js
4
4
  Author: Zakaria Elalaoui
5
- Date : Mon Aug 04 2025 13:51:44 GMT+0100 (UTC+01:00)
5
+ Date : Thu Aug 07 2025 10:32:14 GMT+0100 (UTC+01:00)
6
6
  Git-Repo : https://github.com/zakarialaoui10/ziko.js
7
7
  Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
8
8
  Released under MIT License
@@ -7668,167 +7668,6 @@ const Graphics = {
7668
7668
  ...CANVAS
7669
7669
  };
7670
7670
 
7671
- class ZikoUseChannel{
7672
- constructor(name = ""){
7673
- this.channel = new BroadcastChannel(name);
7674
- this.EVENTS_DATAS_PAIRS = new Map();
7675
- this.EVENTS_HANDLERS_PAIRS = new Map();
7676
- this.LAST_RECEIVED_EVENT = "";
7677
- this.UUID="ziko-channel"+Random.string(10);
7678
- this.SUBSCRIBERS = new Set([this.UUID]);
7679
- }
7680
- get broadcast(){
7681
- // update receiver
7682
- return this;
7683
- }
7684
- emit(event, data){
7685
- this.EVENTS_DATAS_PAIRS.set(event,data);
7686
- this.#maintainEmit(event);
7687
- return this;
7688
- }
7689
- on(event,handler=console.log){
7690
- this.EVENTS_HANDLERS_PAIRS.set(event,handler);
7691
- this.#maintainOn();
7692
- return this;
7693
- }
7694
- #maintainOn(){
7695
- this.channel.onmessage = (e) => {
7696
- this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
7697
- const USER_ID=e.data.userId;
7698
- this.SUBSCRIBERS.add(USER_ID);
7699
- const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
7700
- const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
7701
- if(Data && Handler)Handler(Data);
7702
- };
7703
- return this;
7704
- }
7705
- #maintainEmit(event){
7706
- this.channel.postMessage({
7707
- EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
7708
- last_sended_event:event,
7709
- userId:this.UUID
7710
- });
7711
- return this;
7712
- }
7713
- close(){
7714
- this.channel.close();
7715
- return this;
7716
- }
7717
- }
7718
- const useChannel = name => new ZikoUseChannel(name);
7719
-
7720
- // To do : remove old items
7721
- class ZikoUseStorage{
7722
- constructor(storage, globalKey, initialValue){
7723
- this.cache={
7724
- storage,
7725
- globalKey,
7726
- channel:useChannel(`Ziko:useStorage-${globalKey}`),
7727
- oldItemKeys:new Set()
7728
- };
7729
- this.#init(initialValue);
7730
- this.#maintain();
7731
- }
7732
- get items(){
7733
- return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
7734
- }
7735
- #maintain() {
7736
- for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
7737
- }
7738
- #init(initialValue){
7739
- this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
7740
- this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
7741
- if(!initialValue)return;
7742
- if(this.cache.storage[this.cache.globalKey]){
7743
- Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
7744
- console.group("Ziko:useStorage");
7745
- console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
7746
- console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
7747
- console.group("");
7748
- }
7749
- else this.set(initialValue);
7750
- }
7751
- set(data){
7752
- this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
7753
- this.cache.channel.emit("Ziko-Storage-Updated",{});
7754
- Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
7755
- this.#maintain();
7756
- return this
7757
- }
7758
- add(data){
7759
- const db={
7760
- ...this.items,
7761
- ...data
7762
- };
7763
- this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
7764
- this.#maintain();
7765
- return this;
7766
- }
7767
- remove(...keys){
7768
- const db={...this.items};
7769
- for(let i=0;i<keys.length;i++){
7770
- delete db[keys[i]];
7771
- delete this[keys[i]];
7772
- }
7773
- this.set(db);
7774
- return this;
7775
- }
7776
- get(key){
7777
- return this.items[key];
7778
- }
7779
- clear(){
7780
- this.cache.storage.removeItem(this.cache.globalKey);
7781
- this.#maintain();
7782
- return this;
7783
- }
7784
-
7785
- }
7786
- const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
7787
- const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
7788
-
7789
- class ZikoUseThreed {
7790
- #workerContent;
7791
- constructor() {
7792
- this.#workerContent = (
7793
- function (msg) {
7794
- try {
7795
- const func = new Function("return " + msg.data.fun)();
7796
- let result = func();
7797
- postMessage({ result });
7798
- } catch (error) {
7799
- postMessage({ error: error.message });
7800
- } finally {
7801
- if (msg.data.close) self.close();
7802
- }
7803
- }
7804
- ).toString();
7805
- this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
7806
- this.worker = new Worker(window.URL.createObjectURL(this.blob));
7807
- }
7808
- call(func, callback, close = true) {
7809
- this.worker.postMessage({
7810
- fun: func.toString(),
7811
- close
7812
- });
7813
- this.worker.onmessage = function (e) {
7814
- if (e.data.error) {
7815
- console.error(e.data.error);
7816
- } else {
7817
- callback(e.data.result);
7818
- }
7819
- };
7820
- return this;
7821
- }
7822
- }
7823
-
7824
- const useThread = (func, callback , close) => {
7825
- const T = new ZikoUseThreed();
7826
- if (func) {
7827
- T.call(func, callback , close);
7828
- }
7829
- return T;
7830
- };
7831
-
7832
7671
  class ZikoUseFavIcon{
7833
7672
  constructor(FavIcon,useEventEmitter=true){
7834
7673
  this.#init();
@@ -8269,6 +8108,167 @@ const App={
8269
8108
  // ...Params
8270
8109
  };
8271
8110
 
8111
+ class ZikoUseChannel{
8112
+ constructor(name = ""){
8113
+ this.channel = new BroadcastChannel(name);
8114
+ this.EVENTS_DATAS_PAIRS = new Map();
8115
+ this.EVENTS_HANDLERS_PAIRS = new Map();
8116
+ this.LAST_RECEIVED_EVENT = "";
8117
+ this.UUID="ziko-channel"+Random.string(10);
8118
+ this.SUBSCRIBERS = new Set([this.UUID]);
8119
+ }
8120
+ get broadcast(){
8121
+ // update receiver
8122
+ return this;
8123
+ }
8124
+ emit(event, data){
8125
+ this.EVENTS_DATAS_PAIRS.set(event,data);
8126
+ this.#maintainEmit(event);
8127
+ return this;
8128
+ }
8129
+ on(event,handler=console.log){
8130
+ this.EVENTS_HANDLERS_PAIRS.set(event,handler);
8131
+ this.#maintainOn();
8132
+ return this;
8133
+ }
8134
+ #maintainOn(){
8135
+ this.channel.onmessage = (e) => {
8136
+ this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
8137
+ const USER_ID=e.data.userId;
8138
+ this.SUBSCRIBERS.add(USER_ID);
8139
+ const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
8140
+ const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
8141
+ if(Data && Handler)Handler(Data);
8142
+ };
8143
+ return this;
8144
+ }
8145
+ #maintainEmit(event){
8146
+ this.channel.postMessage({
8147
+ EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
8148
+ last_sended_event:event,
8149
+ userId:this.UUID
8150
+ });
8151
+ return this;
8152
+ }
8153
+ close(){
8154
+ this.channel.close();
8155
+ return this;
8156
+ }
8157
+ }
8158
+ const useChannel = name => new ZikoUseChannel(name);
8159
+
8160
+ // To do : remove old items
8161
+ class ZikoUseStorage{
8162
+ constructor(storage, globalKey, initialValue){
8163
+ this.cache={
8164
+ storage,
8165
+ globalKey,
8166
+ channel:useChannel(`Ziko:useStorage-${globalKey}`),
8167
+ oldItemKeys:new Set()
8168
+ };
8169
+ this.#init(initialValue);
8170
+ this.#maintain();
8171
+ }
8172
+ get items(){
8173
+ return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
8174
+ }
8175
+ #maintain() {
8176
+ for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
8177
+ }
8178
+ #init(initialValue){
8179
+ this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
8180
+ this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
8181
+ if(!initialValue)return;
8182
+ if(this.cache.storage[this.cache.globalKey]){
8183
+ Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
8184
+ console.group("Ziko:useStorage");
8185
+ console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
8186
+ console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
8187
+ console.group("");
8188
+ }
8189
+ else this.set(initialValue);
8190
+ }
8191
+ set(data){
8192
+ this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
8193
+ this.cache.channel.emit("Ziko-Storage-Updated",{});
8194
+ Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
8195
+ this.#maintain();
8196
+ return this
8197
+ }
8198
+ add(data){
8199
+ const db={
8200
+ ...this.items,
8201
+ ...data
8202
+ };
8203
+ this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
8204
+ this.#maintain();
8205
+ return this;
8206
+ }
8207
+ remove(...keys){
8208
+ const db={...this.items};
8209
+ for(let i=0;i<keys.length;i++){
8210
+ delete db[keys[i]];
8211
+ delete this[keys[i]];
8212
+ }
8213
+ this.set(db);
8214
+ return this;
8215
+ }
8216
+ get(key){
8217
+ return this.items[key];
8218
+ }
8219
+ clear(){
8220
+ this.cache.storage.removeItem(this.cache.globalKey);
8221
+ this.#maintain();
8222
+ return this;
8223
+ }
8224
+
8225
+ }
8226
+ const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
8227
+ const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
8228
+
8229
+ class ZikoUseThreed {
8230
+ #workerContent;
8231
+ constructor() {
8232
+ this.#workerContent = (
8233
+ function (msg) {
8234
+ try {
8235
+ const func = new Function("return " + msg.data.fun)();
8236
+ let result = func();
8237
+ postMessage({ result });
8238
+ } catch (error) {
8239
+ postMessage({ error: error.message });
8240
+ } finally {
8241
+ if (msg.data.close) self.close();
8242
+ }
8243
+ }
8244
+ ).toString();
8245
+ this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
8246
+ this.worker = new Worker(window.URL.createObjectURL(this.blob));
8247
+ }
8248
+ call(func, callback, close = true) {
8249
+ this.worker.postMessage({
8250
+ fun: func.toString(),
8251
+ close
8252
+ });
8253
+ this.worker.onmessage = function (e) {
8254
+ if (e.data.error) {
8255
+ console.error(e.data.error);
8256
+ } else {
8257
+ callback(e.data.result);
8258
+ }
8259
+ };
8260
+ return this;
8261
+ }
8262
+ }
8263
+
8264
+ const useThread = (func, callback , close) => {
8265
+ const T = new ZikoUseThreed();
8266
+ if (func) {
8267
+ T.call(func, callback , close);
8268
+ }
8269
+ return T;
8270
+ };
8271
+
8272
8272
  [
8273
8273
  App,
8274
8274
  Math$1,