ui-skyjs - npm Package Compare versions

Comparing version 2.0.9 to 2.1.0

functions/Condition.js

+import { Ref, Refs } from "./Ref.js";
+
+const Conditions = new Set();
+
+function Condition(callback) {
+    if (typeof callback !== "function") return;
+    let [ref, onRef] = Ref();
+    let refId = ref();
+    let condition = callback();
+    onRef((element) => {
+        let parent = element.parentElement;
+        parent.innerHTML = condition ?? "";
+        Conditions.add([parent, callback]);
+        Refs.delete(refId);
+    });
+    return `<holder ref="${ref()}"></holder>`;
+};
+
+export { Condition, Conditions };

functions/EventHandler.js

+const EventHandlers = new Map();
+
+function EventHandler(callback) {
+    let eventHandlerId = `SkyEventHandler-${Date.now() * Math.floor(Math.random() * 10000000)}`;
+    EventHandlers.set(eventHandlerId, callback);
+    return eventHandlerId;
+};
+
+export { EventHandler, EventHandlers };

functions/ForEach.js

+import { Ref, Refs } from "./Ref.js";
+import { States } from "./State.js";
+
+const Lists = new Set();
+
+function ForEach(list, callback) {
+    let listId = null;
+    if (typeof list === "string" && (list.match(/SkyState\-\d+/g)[0] && list === list.match(/SkyState\-\d+/g)[0])) {
+        listId = list.match(/SkyState\-\d+/g)[0];
+        list = States.get(listId);
+    };
+    if (!(list instanceof Array)) {
+        // Maybe adding Object
+        throw Error("List is not an array");
+    };
+    if (typeof callback !== "function") {
+        throw Error("Callback is not a function");
+    };
+    let [ref, onRef] = Ref();
+    let refId = ref();
+    let doc = "";
+    onRef((element) => {
+        let parent = element.parentElement;
+        parent.innerHTML = doc;
+        if (listId) Lists.add([parent, listId, callback]);
+        else {
+            Render(allChildren(parent));
+        };
+        Refs.delete(refId);
+    });
+    list.forEach((ele) => doc += callback(ele));
+    return `<holder ref="${ref()}"></holder>`;
+};
+
+export { ForEach, Lists };

functions/Ref.js

+const Refs = new Map();
+
+function Ref() {
+    let refId = `SkyRef-${Date.now() * Math.floor(Math.random() * 10000000)}`;
+    Refs.set(refId, [null]);
+
+    function onReference(func) {
+        if (typeof func !== "function") return;
+        Refs.set(refId, [null, func]);
+    }
+    return [() => Refs.get(refId)[0] || refId, onReference]
+};
+
+export { Ref, Refs };

functions/Renderer.js

+import { EventHandlers } from "./EventHandler.js";
+import { Refs } from "./Ref.js";
+import { States } from "./State.js";
+
+const Parts = new Set();
+
+function Document(htmlString, parentElement) {
+    if (htmlString instanceof Array) htmlString = htmlString[0];
+    if (typeof htmlString !== "string") throw new Error("Invalid HTML string");
+    const Parser = new DOMParser();
+    const doc = Parser.parseFromString(htmlString.replaceAll(/\<\#(\s+[^>]*?)?>/g, "<SkyWraper$1>").replaceAll("</#>", "</SkyWraper>"), "text/html");
+    let root = [...doc.documentElement.querySelector("body").children].length === 1 ? [doc.documentElement.querySelector("body").children[0], ...doc.documentElement.querySelector("body").children[0].children] : null;
+    if (root === null) throw Error("Document elements must be grouped by a wrapper element or use \"<#></#>\"");
+    let children = allChildren({ children: root });
+    let newRoot = doc.documentElement.querySelector("body").children[0];
+    if(parentElement) {
+        if(typeof parentElement === "string" && document.querySelector(parentElement) instanceof HTMLElement) {
+            Render(children);
+            document.querySelector(parentElement).appendChild(newRoot);
+        };
+        if(parentElement instanceof HTMLElement) {
+            Render(children);
+            parentElement.appendChild(newRoot);
+        };
+        if(parentElement instanceof HTMLCollection) {
+            [...parentElement].forEach((element) => {
+                let root = newRoot.cloneNode(true);
+                let children = allChildren({ children: [root, ...root.children]});
+                Render(children);
+                element.appendChild(root);
+            });
+        };
+        if(parentElement instanceof NodeList) {
+            [...parentElement].forEach((element) => {
+            let root = newRoot.cloneNode(true);
+            let children = allChildren({ children: [root, ...root.children]});
+            Render(children);
+            element.appendChild(root);
+        });
+    };
+    } else Render(children);
+    if (newRoot === null) throw Error("Document elements must be grouped by a wrapper element or use \"<#></#>\"")
+    return newRoot;
+};
+
+function allChildren(element) {
+    let elements = [...element.children];
+    for (let i = 0; i < element.children.length; i++) {
+        if (element.children[i].children) elements = [...elements, ...allChildren({ children: element.children[i].children })]
+    };
+    return elements;
+};
+
+function Render(elements) {
+    for (let element of elements) {
+        for (let node of element.childNodes) {
+            if (node.nodeType === 3 && node.textContent.match(/Sky(List)?State\-\d+/g)) {
+                Parts.add([node, node.textContent.replaceAll("SkyListState-", "SkyState-")]);
+                if (node.textContent.match(/Sky(List)?State\-\d+/g)) node.textContent.match(/Sky(List)?State\-\d+/g).forEach((match) => {
+                    node.textContent = node.textContent.replaceAll(match, States.get(match.replaceAll("SkyListState", "SkyState")));
+                });
+            };
+        };
+    };
+    for (let i = 0; i < elements.length; i++) {
+        [...elements[i].attributes].forEach(attr => {
+            if (attr.name === "ref") {
+                if (!Refs.has(elements[i].getAttribute("ref"))) return;
+                let func = Refs.get(elements[i].getAttribute("ref"))[1];
+                Refs.set(elements[i].getAttribute("ref"), [elements[i]]);
+                if (func) func(elements[i]);
+                elements[i].removeAttribute("ref");
+            } else if (attr.name.startsWith("on-") && attr.name.split("-")[1] !== "") {
+                if (EventHandlers.has(attr.value)) {
+                    elements[i].addEventListener(attr.name.split("-")[1].toLowerCase(), EventHandlers.get(attr.value));
+                } else elements[i].addEventListener(attr.name.split("-")[1].toLowerCase(), new Function(`return ${attr.value}`)());
+                elements[i].removeAttribute(attr.name);
+            } else {
+                if (attr.value.match(/SkyState\-\d+/g)) {
+                    Parts.add([attr, attr.value]);
+                    if (attr.value.match(/SkyState\-\d+/g)) attr.value.match(/SkyState\-\d+/g).forEach((match) => {
+                        attr.value = attr.value.replaceAll(match, States.get(match));
+                    });
+                };
+            }
+        });
+    };
+};
+
+export { Document, Parts };

functions/State.js

+import { Conditions } from "./Condition.js";
+import { Lists } from "./ForEach.js";
+import { Parts } from "./Renderer.js";
+
+const States = new Map();
+const Functions = new Map();
+
+function State(initialValue) {
+    let stateValue = initialValue;
+    let stateId = `SkyState-${Date.now() * Math.floor(Math.random() * 10000000)}`;
+    States.set(stateId, stateValue);
+
+    function updateState(value) {
+        stateValue = typeof value === "function" ? value(stateValue) : value;
+        if (Functions.has(stateId)) Functions.get(stateId)(stateValue);
+        States.set(stateId, stateValue);
+
+        /* Conditional Rendering */
+        [...Conditions.values()].forEach((Part) => {
+            if (!(Part[0] instanceof HTMLElement)) return;
+            let Replaces = Part[1]();
+            if (Replaces === Part[0].textContent) return;
+            Part[0].innerHTML = Replaces;
+        });
+
+        /* Reactive Parts */
+        [...Parts.values()].forEach((Part) => {
+            if (!Part[1].includes(stateId)) return;
+            let Replaces = Part[1].replaceAll(stateId, stateValue);
+            if (Part[0].nodeType === 2) {
+                Part[1].match(/SkyState\-\d+/g).forEach((match) => {
+                    Replaces = Replaces.replaceAll(match, States.get(match));
+                });
+                Part[0].value = Replaces;
+                return;
+            };
+            Part[1].match(/SkyState\-\d+/g).forEach((match) => {
+                Replaces = Replaces.replaceAll(match, States.get(match));
+            });
+
+            Part[0].textContent = Replaces;
+        });
+
+        /* List Rendering */
+        if (stateValue instanceof Array) [...Lists.values()].forEach((List) => {
+            if (!(List instanceof Array) || List[1] !== stateId) return;
+            [...List[0].children].forEach(child => child.remove())
+            let doc = "";
+            stateValue.forEach((ele) => doc += List[2](ele));
+            List[0].innerHTML = doc;
+        });
+    };
+
+    function onStateUpdate(func) {
+        if (typeof func !== "function") return;
+        Functions.set(stateId, func);
+    };
+    return [(id) => id?.toLowerCase().trim() === "id" ? stateId : stateValue, updateState, onStateUpdate];
+};
+
+export { State, States };

functions/While.js

+import { Ref, Refs } from "./Ref.js";
+
+export default function While(condition, callback, delay) {
+    if (typeof condition !== "function") {
+        throw Error("Condition is not a function");
+    };
+    if (typeof callback !== "function") {
+        throw Error("Callback is not a function");
+    };
+    let [ref, onRef] = Ref();
+    let refId = ref();
+    let doc = "";
+    let parent;
+    onRef((element) => {
+        parent = element.parentElement;
+        if(typeof delay !== "number" || delay < 0) parent.innerHTML = doc;
+        Refs.delete(refId);
+    });
+    if (typeof delay === "number" && delay > 0) {
+        let Loop = setInterval(() => {
+            if(!condition()) return clearInterval(Loop);
+            doc += callback();
+            parent.innerHTML = doc;
+        }, delay);
+    } else while (condition()) {
+            doc += callback();
+        };
+    return `<holder ref="${ref()}"></holder>`;
+};

cdn.js

 const States = new Map();
 const Refs = new Map();
 const Functions = new Map();
-const Merges = new Map();
 const EventHandlers = new Map();
-const Elements = new Set();
+const Parts = new Set();
 const Conditions = new Set();
 const Lists = new Set();
 
-const parser = new DOMParser();
-
 function State(initialValue) {
     let stateValue = initialValue;
-    let stateId = `({({SkyState-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
+    let stateId = `SkyState-${Date.now() * Math.floor(Math.random() * 10000000)}`;
     States.set(stateId, stateValue);
 
     function updateState(value) {
-        if (!value) return;
-        if (typeof value !== "function") throw new Error("The updateState method must have a function to update the state");
-        stateValue = value(stateValue);
+        stateValue = typeof value === "function" ? value(stateValue) : value;
         if (Functions.has(stateId)) Functions.get(stateId)(stateValue);
         States.set(stateId, stateValue);
-        Merges.forEach((Merge, MergeId) => {
-            if (!(Merge[1] instanceof Array) || !Merge[1].includes(stateId)) return;
-            if (Merge[0].nodeType === 2) return Merge[0].value = Merge[3].replaceAll(MergeId, Merge[2](Merge[1].map((state) => state === stateId ? stateValue : States.get(state))));
-            Merge[0].textContent = Merge[3].replaceAll(MergeId, Merge[2](Merge[1].map((state) => States.has(state) ? States.get(state) : state)));
+
+        /* Conditional Rendering */
+        [...Conditions.values()].forEach((Part) => {
+            if (!(Part[0] instanceof HTMLElement)) return;
+            let Replaces = Part[1]();
+            if (Replaces === Part[0].textContent) return;
+            Part[0].innerHTML = Replaces;
         });
-        [...Conditions.values()].forEach((Element) => {
-            if (Element[2](Element[1].map((state) => States.has(state) ? States.get(state) : state)))
-                if (!(Element[1] instanceof Array) || !Element[1].includes(stateId)) return;
-            let Replaces = Element[2](Element[1].map((state) => States.has(state) ? States.get(state) : state));
-            if (!Replaces) return Element[0].innerHTML = "";
-            if (Replaces.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) Replaces.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
-                Replaces = Replaces.replaceAll(match, States.get(match));
-            });
-            const doc = parser.parseFromString(Replaces.replaceAll("<#>", "<SkyWraper>").replaceAll("</#>", "</SkyWraper>"), "text/html");
-            let root = [...doc.documentElement.querySelector("body").children].length === 1 ? [doc.documentElement.querySelector("body").children[0], ...doc.documentElement.querySelector("body").children[0].children] : [...doc.documentElement.querySelector("body").children];
-            if (root.length === 0) return "";
-            let elements = allChildren({ children: root });
-            Render(elements);
-            Element[0].innerHTML = "";
-            [...doc.documentElement.querySelector("body").children].forEach((element) => Element[0].appendChild(element));
-        });
-        [...Elements.values()].forEach((Element) => {
-            if (!Element[1].includes(stateId)) return;
-            let Replaces = Element[1].replaceAll(stateId, stateValue);
-            if (Element[0].nodeType === 2) {
-                Element[1].match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
+
+        /* Reactive Parts */
+        [...Parts.values()].forEach((Part) => {
+            if (!Part[1].includes(stateId)) return;
+            let Replaces = Part[1].replaceAll(stateId, stateValue);
+            if (Part[0].nodeType === 2) {
+                Part[1].match(/SkyState\-\d+/g).forEach((match) => {
                     Replaces = Replaces.replaceAll(match, States.get(match));
                 });
-                if (Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g)) Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g).forEach((match) => {
-                    Merges.forEach((Merge, MergeId) => {
-                        if (MergeId !== match) return;
-                        Replaces = Replaces.replaceAll(MergeId, Merge[2](Merge[1].map((state) => States.has(state) ? States.get(state) : state)));
-                    });
-                });
-                Element[0].value = Replaces;
+                Part[0].value = Replaces;
                 return;
             };
-            Element[1].match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
+            Part[1].match(/SkyState\-\d+/g).forEach((match) => {
                 Replaces = Replaces.replaceAll(match, States.get(match));
             });
-            if (Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g)) Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g).forEach((match) => {
-                Merges.forEach((Merge, MergeId) => {
-                    if (MergeId !== match) return;
-                    Replaces = Replaces.replaceAll(MergeId, Merge[2](Merge[1].map((state) => States.has(state) ? States.get(state) : state)));
-                });
-            });
-            Element[0].textContent = Replaces;
+
+            Part[0].textContent = Replaces;
         });
-        if (stateValue instanceof Array)[...Lists.values()].forEach((List) => {
+
+        /* List Rendering */
+        if (stateValue instanceof Array) [...Lists.values()].forEach((List) => {
             if (!(List instanceof Array) || List[1] !== stateId) return;
@@ -84,7 +59,7 @@ [...List[0].children].forEach(child => child.remove())
     };
-    return [() => stateId, updateState, onStateUpdate];
+    return [(id) => id?.toLowerCase().trim() === "id" ? stateId : stateValue, updateState, onStateUpdate];
 };
 
 function Ref() {
-    let refId = `({({SkyRef-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
+    let refId = `SkyRef-${Date.now() * Math.floor(Math.random() * 10000000)}`;
     Refs.set(refId, [null]);
@@ -99,12 +74,39 @@
 
-function Document(htmlString) {
+function Document(htmlString, parentElement) {
     if (htmlString instanceof Array) htmlString = htmlString[0];
     if (typeof htmlString !== "string") throw new Error("Invalid HTML string");
-    const doc = parser.parseFromString(htmlString.replaceAll(/\<\#(\s+[^>]*?)?>/g, "<SkyWraper$1>").replaceAll("</#>", "</SkyWraper>"), "text/html");
-    let root = [...doc.documentElement.querySelector("body").children].length === 1 ? [doc.documentElement.querySelector("body").children[0], ...doc.documentElement.querySelector("body").children[0].children] : [...doc.documentElement.querySelector("body").children];
-    if (root.length === 0) return "";
-    let elements = allChildren({ children: root });
-    Render(elements);
-    if ([...doc.documentElement.querySelector("body").children].length !== 1) console.error("Document elements must be grouped by a wrapper element or use \"<#></#>\"")
-    return [...doc.documentElement.querySelector("body").children].length === 1 ? doc.documentElement.querySelector("body").children[0] : "";
+    const Parser = new DOMParser();
+    const doc = Parser.parseFromString(htmlString.replaceAll(/\<\#(\s+[^>]*?)?>/g, "<SkyWraper$1>").replaceAll("</#>", "</SkyWraper>"), "text/html");
+    let root = [...doc.documentElement.querySelector("body").children].length === 1 ? [doc.documentElement.querySelector("body").children[0], ...doc.documentElement.querySelector("body").children[0].children] : null;
+    if (root === null) throw Error("Document elements must be grouped by a wrapper element or use \"<#></#>\"");
+    let children = allChildren({ children: root });
+    let newRoot = doc.documentElement.querySelector("body").children[0];
+    if (parentElement) {
+        if (typeof parentElement === "string" && document.querySelector(parentElement) instanceof HTMLElement) {
+            Render(children);
+            document.querySelector(parentElement).appendChild(newRoot);
+        };
+        if (parentElement instanceof HTMLElement) {
+            Render(children);
+            parentElement.appendChild(newRoot);
+        };
+        if (parentElement instanceof HTMLCollection) {
+            [...parentElement].forEach((element) => {
+                let root = newRoot.cloneNode(true);
+                let children = allChildren({ children: [root, ...root.children] });
+                Render(children);
+                element.appendChild(root);
+            });
+        };
+        if (parentElement instanceof NodeList) {
+            [...parentElement].forEach((element) => {
+                let root = newRoot.cloneNode(true);
+                let children = allChildren({ children: [root, ...root.children] });
+                Render(children);
+                element.appendChild(root);
+            });
+        };
+    } else Render(elements);
+    if (newRoot === null) throw Error("Document elements must be grouped by a wrapper element or use \"<#></#>\"")
+    return newRoot;
 };
@@ -123,20 +125,8 @@
         for (let node of element.childNodes) {
-            if (node.nodeType === 3 && node.textContent.match(/\(\{\(\{Sky(List)?State\-\d+\}\)\}\)/g)) {
-                Elements.add([node, node.textContent.replaceAll("({({SkyListState-", "({({SkyState-")]);
-                if (node.textContent.match(/\(\{\(\{Sky(List)?State\-\d+\}\)\}\)/g)) node.textContent.match(/\(\{\(\{Sky(List)?State\-\d+\}\)\}\)/g).forEach((match) => {
+            if (node.nodeType === 3 && node.textContent.match(/Sky(List)?State\-\d+/g)) {
+                Parts.add([node, node.textContent.replaceAll("SkyListState-", "SkyState-")]);
+                if (node.textContent.match(/Sky(List)?State\-\d+/g)) node.textContent.match(/Sky(List)?State\-\d+/g).forEach((match) => {
                     node.textContent = node.textContent.replaceAll(match, States.get(match.replaceAll("SkyListState", "SkyState")));
                 });
             };
-            if (node.textContent.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g)) {
-                if(node.textContent.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g).length > 1) {
-                    node.textContent = node.textContent.replaceAll(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g, "");
-                } else {
-                    let match = node.textContent.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g)[0];
-                    if (!Merges.has(match) || typeof Merges.get(match)[1] !== "function") return;
-                    let Merge = Merges.get(match);
-                    if (Merge.length === 4) Merge = [Merge[1], Merge[2]];
-                    Merges.set(match, [node, ...Merge, node.textContent]);
-                    node.textContent = node.textContent.replace(match, Merge[1](Merge[0].map((state) => States.has(state) ? States.get(state) : state)));
-                };
-            };
         };
@@ -158,17 +148,8 @@ };
             } else {
-                if (attr.value.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) {
-                    Elements.add([attr, attr.value]);
-                    if (attr.value.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) attr.value.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
+                if (attr.value.match(/SkyState\-\d+/g)) {
+                    Parts.add([attr, attr.value]);
+                    if (attr.value.match(/SkyState\-\d+/g)) attr.value.match(/SkyState\-\d+/g).forEach((match) => {
                         attr.value = attr.value.replaceAll(match, States.get(match));
                     });
                 };
-                if (attr.value.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g)) {
-                    attr.value.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g).forEach((match) => {
-                        if (!Merges.has(match)) return;
-                        let Merge = Merges.get(match);
-                        if (Merge.length === 4) Merge = [Merge[1], Merge[2]];
-                        Merges.set(match, [attr, ...Merge, attr.value]);
-                        attr.value = attr.value.replaceAll(match, Merge[1](Merge[0].map((state) => States.has(state) ? States.get(state) : state)));
-                    });
-                };
             }
@@ -179,63 +160,77 @@ });
 
-function ForList(list, callback) {
+function ForEach(list, callback) {
+    let listId = null;
+    if (typeof list === "string" && (list.match(/SkyState\-\d+/g)[0] && list === list.match(/SkyState\-\d+/g)[0])) {
+        listId = list.match(/SkyState\-\d+/g)[0];
+        list = States.get(listId);
+    };
+    if (!(list instanceof Array)) {
+        // Maybe adding Object
+        throw Error("List is not an array");
+    };
+    if (typeof callback !== "function") {
+        throw Error("Callback is not a function");
+    };
     let [ref, onRef] = Ref();
     let refId = ref();
-    let listId = null;
     let doc = "";
     onRef((element) => {
-        if (listId) Lists.add([element, listId, callback]);
+        let parent = element.parentElement;
+        parent.innerHTML = doc;
+        if (listId) Lists.add([parent, listId, callback]);
         else {
-            Render(allChildren(element));
+            Render(allChildren(parent));
         };
         Refs.delete(refId);
     });
-    if (typeof list === "string" && (list.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)[0] && list === list.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)[0])) {
-        listId = list.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)[0];
-        list = States.get(listId);
+    list.forEach((ele) => doc += callback(ele));
+    return `<holder ref="${ref()}"></holder>`;
+};
+
+function While(condition, callback, delay) {
+    if (typeof condition !== "function") {
+        throw Error("Condition is not a function");
     };
-    if (!(list instanceof Array)) {
-        // Maybe adding Object
-        console.error("List is not an array");
-        return "";
-    };
     if (typeof callback !== "function") {
-        console.error("Callback is not a function");
-        return;
+        throw Error("Callback is not a function");
     };
-    list.forEach((ele) => {
-        if (typeof ele === "string" && ele.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) {
-            ele.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
-                ele = ele.replaceAll(match, match.replaceAll("SkyState", "SkyListState"));
-            });
-        };
-        doc += callback(ele);
+    let [ref, onRef] = Ref();
+    let refId = ref();
+    let doc = "";
+    let parent;
+    onRef((element) => {
+        parent = element.parentElement;
+        if (typeof delay !== "number" || delay < 0) parent.innerHTML = doc;
+        Refs.delete(refId);
     });
-    return `<SkyList ref="${ref()}">${doc}</SkyList>`;
+    if (typeof delay === "number" && delay > 0) {
+        let Loop = setInterval(() => {
+            if (!condition()) return clearInterval(Loop);
+            doc += callback();
+            parent.innerHTML = doc;
+        }, delay);
+    } else while (condition()) {
+        doc += callback();
+    };
+    return `<holder ref="${ref()}"></holder>`;
 };
 
-function Merge(states, callback) {
+function Condition(callback) {
     if (typeof callback !== "function") return;
-    if (!(states instanceof Array)) return;
-    let mergeId = `({({SkyMerge-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
-    Merges.set(mergeId, [states, callback]);
-    return mergeId;
-};
-
-function Conditional(states, callback) {
-    if (typeof callback !== "function") return;
-    if (!(states instanceof Array)) return;
     let [ref, onRef] = Ref();
     let refId = ref();
+    let condition = callback();
     onRef((element) => {
-        Conditions.add([element, states, callback]);
+        let parent = element.parentElement;
+        parent.innerHTML = condition ?? "";
+        Conditions.add([parent, callback]);
         Refs.delete(refId);
     });
-    let condition = callback(states.map(state => States.has(state) ? States.get(state) : state));
-    return `<SkyCondition ref="${ref()}">${condition ?? ""}</SkyCondition>`;
+    return `<holder ref="${ref()}"></holder>`;
 };
 
 function EventHandler(callback) {
-    let eventHandlerId = `({({SkyEventHandler-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
+    let eventHandlerId = `SkyEventHandler-${Date.now() * Math.floor(Math.random() * 10000000)}`;
     EventHandlers.set(eventHandlerId, callback);
     return eventHandlerId;
-}
+};

module.js

@@ -1,236 +0,17 @@
-const States = new Map();
-const Refs = new Map();
-const Functions = new Map();
-const Merges = new Map();
-const EventHandlers = new Map();
-const Elements = new Set();
-const Conditions = new Set();
-const Lists = new Set();
+import { Condition } from "./functions/Condition.js";
+import { EventHandler } from "./functions/EventHandler.js";
+import { ForEach } from "./functions/ForEach.js";
+import { Ref } from "./functions/Ref.js";
+import { Document } from "./functions/Renderer.js";
+import { State } from "./functions/State.js";
+import While from "./functions/While.js";
 
-const parser = new DOMParser();
-
-export function State(initialValue) {
-    let stateValue = initialValue;
-    let stateId = `({({SkyState-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
-    States.set(stateId, stateValue);
-
-    function updateState(value) {
-        if (!value) return;
-        if (typeof value !== "function") throw new Error("The updateState method must have a function to update the state");
-        stateValue = value(stateValue);
-        if (Functions.has(stateId)) Functions.get(stateId)(stateValue);
-        States.set(stateId, stateValue);
-        Merges.forEach((Merge, MergeId) => {
-            if (!(Merge[1] instanceof Array) || !Merge[1].includes(stateId)) return;
-            if (Merge[0].nodeType === 2) return Merge[0].value = Merge[3].replaceAll(MergeId, Merge[2](Merge[1].map((state) => state === stateId ? stateValue : States.get(state))));
-            Merge[0].textContent = Merge[3].replaceAll(MergeId, Merge[2](Merge[1].map((state) => States.has(state) ? States.get(state) : state)));
-        });
-        [...Conditions.values()].forEach((Element) => {
-            if (Element[2](Element[1].map((state) => States.has(state) ? States.get(state) : state)))
-                if (!(Element[1] instanceof Array) || !Element[1].includes(stateId)) return;
-            let Replaces = Element[2](Element[1].map((state) => States.has(state) ? States.get(state) : state));
-            if (!Replaces) return Element[0].innerHTML = "";
-            if (Replaces.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) Replaces.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
-                Replaces = Replaces.replaceAll(match, States.get(match));
-            });
-            const doc = parser.parseFromString(Replaces.replaceAll("<#>", "<SkyWraper>").replaceAll("</#>", "</SkyWraper>"), "text/html");
-            let root = [...doc.documentElement.querySelector("body").children].length === 1 ? [doc.documentElement.querySelector("body").children[0], ...doc.documentElement.querySelector("body").children[0].children] : [...doc.documentElement.querySelector("body").children];
-            if (root.length === 0) return "";
-            let elements = allChildren({ children: root });
-            Render(elements);
-            Element[0].innerHTML = "";
-            [...doc.documentElement.querySelector("body").children].forEach((element) => Element[0].appendChild(element));
-        });
-        [...Elements.values()].forEach((Element) => {
-            if (!Element[1].includes(stateId)) return;
-            let Replaces = Element[1].replaceAll(stateId, stateValue);
-            if (Element[0].nodeType === 2) {
-                Element[1].match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
-                    Replaces = Replaces.replaceAll(match, States.get(match));
-                });
-                if (Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g)) Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g).forEach((match) => {
-                    Merges.forEach((Merge, MergeId) => {
-                        if (MergeId !== match) return;
-                        Replaces = Replaces.replaceAll(MergeId, Merge[2](Merge[1].map((state) => States.has(state) ? States.get(state) : state)));
-                    });
-                });
-                Element[0].value = Replaces;
-                return;
-            };
-            Element[1].match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
-                Replaces = Replaces.replaceAll(match, States.get(match));
-            });
-            if (Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g)) Element[1].match(/\(\{\(\{SkyMerge-\d+\}\)\}\)/g).forEach((match) => {
-                Merges.forEach((Merge, MergeId) => {
-                    if (MergeId !== match) return;
-                    Replaces = Replaces.replaceAll(MergeId, Merge[2](Merge[1].map((state) => States.has(state) ? States.get(state) : state)));
-                });
-            });
-            Element[0].textContent = Replaces;
-        });
-        if (stateValue instanceof Array)[...Lists.values()].forEach((List) => {
-            if (!(List instanceof Array) || List[1] !== stateId) return;
-            [...List[0].children].forEach(child => child.remove())
-            let doc = "";
-            stateValue.forEach((ele) => doc += List[2](ele));
-            List[0].innerHTML = doc;
-        });
-    };
-
-    function onStateUpdate(func) {
-        if (typeof func !== "function") return;
-        Functions.set(stateId, func);
-    };
-    return [() => stateId, updateState, onStateUpdate];
-};
-
-export function Ref() {
-    let refId = `({({SkyRef-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
-    Refs.set(refId, [null]);
-
-    function onReference(func) {
-        if (typeof func !== "function") return;
-        Refs.set(refId, [null, func]);
-    }
-    return [() => Refs.get(refId)[0] || refId, onReference]
-}
-
-export function Document(htmlString) {
-    if (htmlString instanceof Array) htmlString = htmlString[0];
-    if (typeof htmlString !== "string") throw new Error("Invalid HTML string");
-    const doc = parser.parseFromString(htmlString.replaceAll(/\<\#(\s+[^>]*?)?>/g, "<SkyWraper$1>").replaceAll("</#>", "</SkyWraper>"), "text/html");
-    let root = [...doc.documentElement.querySelector("body").children].length === 1 ? [doc.documentElement.querySelector("body").children[0], ...doc.documentElement.querySelector("body").children[0].children] : [...doc.documentElement.querySelector("body").children];
-    if (root.length === 0) return "";
-    let elements = allChildren({ children: root });
-    Render(elements);
-    if ([...doc.documentElement.querySelector("body").children].length !== 1) console.error("Document elements must be grouped by a wrapper element or use \"<#></#>\"")
-    return [...doc.documentElement.querySelector("body").children].length === 1 ? doc.documentElement.querySelector("body").children[0] : "";
-};
-
-function allChildren(element) {
-    let elements = [...element.children];
-    for (let i = 0; i < element.children.length; i++) {
-        if (element.children[i].children) elements = [...elements, ...allChildren({ children: element.children[i].children })]
-    };
-    return elements;
-};
-
-function Render(elements) {
-    for (let element of elements) {
-        for (let node of element.childNodes) {
-            if (node.nodeType === 3 && node.textContent.match(/\(\{\(\{Sky(List)?State\-\d+\}\)\}\)/g)) {
-                Elements.add([node, node.textContent.replaceAll("({({SkyListState-", "({({SkyState-")]);
-                if (node.textContent.match(/\(\{\(\{Sky(List)?State\-\d+\}\)\}\)/g)) node.textContent.match(/\(\{\(\{Sky(List)?State\-\d+\}\)\}\)/g).forEach((match) => {
-                    node.textContent = node.textContent.replaceAll(match, States.get(match.replaceAll("SkyListState", "SkyState")));
-                });
-            };
-            if (node.textContent.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g)) {
-                if(node.textContent.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g).length > 1) {
-                    node.textContent = node.textContent.replaceAll(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g, "");
-                } else {
-                    let match = node.textContent.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g)[0];
-                    if (!Merges.has(match) || typeof Merges.get(match)[1] !== "function") return;
-                    let Merge = Merges.get(match);
-                    if (Merge.length === 4) Merge = [Merge[1], Merge[2]];
-                    Merges.set(match, [node, ...Merge, node.textContent]);
-                    node.textContent = node.textContent.replace(match, Merge[1](Merge[0].map((state) => States.has(state) ? States.get(state) : state)));
-                };
-            };
-        };
-    };
-    for (let i = 0; i < elements.length; i++) {
-        [...elements[i].attributes].forEach(attr => {
-            if (attr.name === "ref") {
-                if (!Refs.has(elements[i].getAttribute("ref"))) return;
-                let func = Refs.get(elements[i].getAttribute("ref"))[1];
-                Refs.set(elements[i].getAttribute("ref"), [elements[i]]);
-                if (func) func(elements[i]);
-                elements[i].removeAttribute("ref");
-            } else if (attr.name.startsWith("on-") && attr.name.split("-")[1] !== "") {
-                if (EventHandlers.has(attr.value)) {
-                    elements[i].addEventListener(attr.name.split("-")[1].toLowerCase(), EventHandlers.get(attr.value));
-                } else elements[i].addEventListener(attr.name.split("-")[1].toLowerCase(), new Function(`return ${attr.value}`)());
-                elements[i].removeAttribute(attr.name);
-            } else {
-                if (attr.value.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) {
-                    Elements.add([attr, attr.value]);
-                    if (attr.value.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) attr.value.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
-                        attr.value = attr.value.replaceAll(match, States.get(match));
-                    });
-                };
-                if (attr.value.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g)) {
-                    attr.value.match(/\(\{\(\{SkyMerge\-\d+\}\)\}\)/g).forEach((match) => {
-                        if (!Merges.has(match)) return;
-                        let Merge = Merges.get(match);
-                        if (Merge.length === 4) Merge = [Merge[1], Merge[2]];
-                        Merges.set(match, [attr, ...Merge, attr.value]);
-                        attr.value = attr.value.replaceAll(match, Merge[1](Merge[0].map((state) => States.has(state) ? States.get(state) : state)));
-                    });
-                };
-            }
-        });
-    };
-};
-
-export function ForList(list, callback) {
-    let [ref, onRef] = Ref();
-    let refId = ref();
-    let listId = null;
-    let doc = "";
-    onRef((element) => {
-        if (listId) Lists.add([element, listId, callback]);
-        else {
-            Render(allChildren(element));
-        };
-        Refs.delete(refId);
-    });
-    if (typeof list === "string" && (list.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)[0] && list === list.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)[0])) {
-        listId = list.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)[0];
-        list = States.get(listId);
-    };
-    if (!(list instanceof Array)) {
-        // Maybe adding Object
-        console.error("List is not an array");
-        return "";
-    };
-    if (typeof callback !== "function") {
-        console.error("Callback is not a function");
-        return;
-    };
-    list.forEach((ele) => {
-        if (typeof ele === "string" && ele.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g)) {
-            ele.match(/\(\{\(\{SkyState\-\d+\}\)\}\)/g).forEach((match) => {
-                ele = ele.replaceAll(match, match.replaceAll("SkyState", "SkyListState"));
-            });
-        };
-        doc += callback(ele);
-    });
-    return `<SkyList ref="${ref()}">${doc}</SkyList>`;
-};
-
-export function Merge(states, callback) {
-    if (typeof callback !== "function") return;
-    if (!(states instanceof Array)) return;
-    let mergeId = `({({SkyMerge-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
-    Merges.set(mergeId, [states, callback]);
-    return mergeId;
-};
-
-export function Conditional(states, callback) {
-    if (typeof callback !== "function") return;
-    if (!(states instanceof Array)) return;
-    let [ref, onRef] = Ref();
-    let refId = ref();
-    onRef((element) => {
-        Conditions.add([element, states, callback]);
-        Refs.delete(refId);
-    });
-    let condition = callback(states.map(state => States.has(state) ? States.get(state) : state));
-    return `<SkyCondition ref="${ref()}">${condition ?? ""}</SkyCondition>`;
-};
-
-export function EventHandler(callback) {
-    let eventHandlerId = `({({SkyEventHandler-${Date.now() * Math.floor(Math.random() * 10000000)}})})`;
-    EventHandlers.set(eventHandlerId, callback);
-    return eventHandlerId;
-}
+export {
+    Condition,
+    EventHandler,
+    ForEach,
+    Ref,
+    Document,
+    State,
+    While
+};

package.json

 {
   "name": "ui-skyjs",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "main": "cdn.js",
@@ -16,2 +16,2 @@ "scripts": {},
   "description": "SkyJS is a JavaScript Library For Building Interactive High-Performance Web UIs"
-}
+}

New alerts

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Fixed alerts

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Improved metrics

Number of package files

11

175%

Lines of code

455

2.48%

Worsened metrics

Total package byte prevSize

20506

-19.1%

No dependency changes