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.
- package/dist/ziko.cjs +162 -162
- package/dist/ziko.js +194 -248
- package/dist/ziko.min.js +2 -2
- package/dist/ziko.mjs +194 -248
- package/package.json +6 -4
- package/src/index.js +2 -2
- package/src/reactivity/hooks/UI/index.js +2 -2
- package/src/reactivity/hooks/index.js +1 -1
- package/src/ui/{elements/ZikoUIElement.js → constructors/ziko-ui-element.js} +12 -7
- package/src/ui/constructors/ziko-ui-node.js +15 -0
- package/src/ui/elements/flex/index.js +1 -1
- package/src/ui/elements/grid/index.js +1 -1
- package/src/ui/elements/io/Inputs/__helpers__.js +1 -1
- package/src/ui/elements/io/Inputs/input/index.js +1 -1
- package/src/ui/elements/io/Inputs/input-file/input-image.js +1 -1
- package/src/ui/elements/io/Select/index.js +1 -1
- package/src/ui/elements/io/Textarea/index.js +1 -1
- package/src/ui/elements/list/index.js +1 -1
- package/src/ui/elements/media/Image/figure.js +1 -1
- package/src/ui/elements/media/Image/image.js +1 -1
- package/src/ui/elements/media/__ZikoUIDynamicMediaELement__.js +1 -1
- package/src/ui/elements/misc/hyperscript.js +1 -1
- package/src/ui/elements/misc/index.js +1 -1
- package/src/ui/elements/misc/suspense.js +1 -1
- package/src/ui/elements/misc/xml-wrapper.js +1 -1
- package/src/ui/elements/semantic/index.js +1 -1
- package/src/ui/elements/table/elements.js +1 -1
- package/src/ui/elements/table/table.js +1 -1
- package/src/ui/elements/text/__ZikoUIText__.js +1 -1
- package/src/ui/elements/text/heading.js +1 -1
- package/src/ui/index.js +1 -1
- package/src/ui/tags/index.js +1 -1
- package/src/ui/utils/index.js +1 -1
- 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 :
|
|
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,
|