Added CDN

CreateComponent/CustomComponents.js

@@ -0,0 +1,9 @@
+export default () => {
+     class HTMLContainer extends HTMLElement {
+          constructor() {
+               super();
+          }
+     }
+
+     customElements.define("html-container", HTMLContainer, { extends: "div" });
+};

CreateComponent/tools/ArrayDiffing.js

@@ -8,34 +8,42 @@ import HandleDOM from "./HandleDOM.js";
  * @param render component inside the DOM
  */
 export default (component, newComponent) => {
+     // indicates if therer are changes between children
      let didUpdate = false;
 
+     // iterate through component.children and comparing them with newComponent.children
      for (let i = 0; i < component.children.length; i++) {
+          // if both children are not Recursive components
+          // they are both of type string
           if (
                !Check.isComponent(component.children[i]) &&
                !Check.isComponent(newComponent.children[i])
           ) {
-               // case not equal strings
+               // check if both strings are equals
                if (component.children[i].toString() !== newComponent.children[i].toString()) {
+                    // different strings => replace child
                     HandleDOM.replaceIndexedChildInDOM(i, component, newComponent);
                     didUpdate = true;
                }
           }
-          // case children is string, new is child
+          // if children are not of the same type
           else if (
                (!Check.isComponent(component.children[i]) &&
                     Check.isComponent(newComponent.children[i])) ||
                (Check.isComponent(component.children[i]) &&
                     Check.isComponent(!newComponent.children[i]))
           ) {
+               // replace child
                HandleDOM.replaceIndexedChildInDOM(i, component, newComponent);
                didUpdate = true;
           }
-          // case children is child, new is child
+          // children are both Recursive components
           else {
+               // recursively update the dom instance
                didUpdate = component.children[i].update(newComponent.children[i]);
           }
      }
 
+     // return the result
      return didUpdate;
 };

CreateComponent/tools/HandleDOM.js

@@ -25,6 +25,7 @@ export default {
                     : newComponent.children[index]
           );
 
+          // execute onCreated hook
           if (newComponent.children[index].$$createcomponent)
                newComponent.children[index].$onCreated();
      },
@@ -34,12 +35,14 @@ export default {
       * @param {number} index - the index of the component's child to be removed
       */
      removeIndexedChildFromDOM: (index, component) => {
+          // execute beforeDestroyed hook
           if (component.children[index].$beforeDestroyed) {
                component.children[index].$beforeDestroyed();
           }
 
           component.domInstance.childNodes[index].remove();
 
+          // execute onDestroyed hook
           if (component.children[index].$onDestroyed) {
                component.children[index].$onDestroyed();
           }
@@ -51,6 +54,7 @@ export default {
       * @param {number} index - the index of new component's child to be replaced
       */
      replaceIndexedChildInDOM: (index, component, newComponent) => {
+          // execute beforeDestroyed hook
           if (component.children[index].$beforeDestroyed)
                component.children[index]?.$beforeDestroyed();
 
@@ -60,8 +64,10 @@ export default {
                     : newComponent.children[index]
           );
 
+          // execute onDestroyed hook
           if (component.children[index].$onDestroyed) component.children[index].$onDestroyed();
 
+          // execute onCreated hook
           if (newComponent.children[index].$onCreated) newComponent.children[index]?.$onCreated();
      },
      /**
@@ -71,14 +77,17 @@ export default {
       * @used {@link CreateComponent}
       */
      replaceComponentInDOM: (component, newComponent) => {
+          // execute beforeDestroyed hook
           if (component.$beforeDestroyed) component?.$beforeDestroyed();
 
           component.domInstance.replaceWith(
                newComponent.$$createcomponent ? newComponent.render() : newComponent
           );
 
+          // execute onDestroyed hook
           if (component.$onDestroyed) component?.$onDestroyed();
 
+          // execute onCreated hook
           if (newComponent.$onCreated) newComponent?.$onCreated();
      },
 };

CreateComponent/tools/Style.js

@@ -18,7 +18,7 @@ export default {
       * @param component this (can't be called outside CreateComponent)
       */
      applySheet: (component) => {
-          if (!vDOM) throw "Unable to find the VDOM";
+          if (!RecursiveDOM) throw "Unable to find the RecursiveDOM";
 
           if (component.style) {
                if (component.style.className) {
@@ -33,15 +33,15 @@ export default {
                          if (PropList.StyleSheet[selector]) {
                               if (PropList.StyleSheet[selector].type === "animation") {
                                    component.style.animations.forEach((animation) => {
-                                        vDOM.animations.push(animation);
+                                        RecursiveDOM.animations.push(animation);
                                    });
                               } else if (PropList.StyleSheet[selector].type === "media") {
-                                   vDOM.mediaQueries.push({
+                                   RecursiveDOM.mediaQueries.push({
                                         queries: component.style.mediaQueries,
                                         className: component.style.className,
                                    });
                               } else {
-                                   vDOM.style.push(
+                                   RecursiveDOM.style.push(
                                         styleObject(
                                              PropList.StyleSheet[selector].name,
                                              component.style[selector]

Recursive.cdn.js

@@ -0,0 +1,11 @@
+import { Init, Components, Route, Router } from "./Recursive.js";
+
+Init({
+     root: document.getElementById("app"),
+     styleRoot: document.getElementById("app-style"),
+     staticStyleRoot: document.getElementById("app-static-style"),
+     options: {},
+});
+
+window.Components = Components;
+window.Router = { Router, Route };

Recursive.js

@@ -4,4 +4,6 @@ import RecursiveDOM from "./RecursiveDOM/RecursiveDOM.js";
 import Router from "./RecursiveRouter/Router.js";
 import Route from "./RecursiveRouter/Route.js";
 
-export { Components, CreateComponent, RecursiveDOM, Route, Router };
+const Init = RecursiveDOM.Init;
+
+export { Components, CreateComponent, Init, Route, Router };

RecursiveDOM/PropList.js

@@ -33,6 +33,7 @@ export default {
           download: "download",
           decoding: "decoding",
           default: "default",
+          draggable: "draggable",
 
           encType: "enctype",
 
@@ -694,6 +695,11 @@ export default {
           placeholder: "::placeholder",
           selection: "::selection",
           marker: "::marker",
+          webkitScrollbar: "::-webkit-scrollbar",
+          webkitScrollbarTrack: "::-webkit-scrollbar-track",
+          webkitScrollbarThumb: "::-webkit-scrollbar-thumb",
+          webkitScrollbarThumbHover: "::-webkit-scrollbar-thumb:hover",
+          webkitScrollbarThumbActive: "::-webkit-scrollbar-thumb:active",
      },
      // Style Sheet keys
      StyleSheet: {

RecursiveDOM/RecursiveDOM.js

@@ -1,4 +1,5 @@
 import CreateComponent from "../CreateComponent/CreateComponent.js";
+import CustomComponents from "../CreateComponent/CustomComponents.js";
 
 import HandleStyle from "./HandleStyle.js";
 import HandleWindow from "./HandleWindow.js";
@@ -13,6 +14,9 @@ import SetState from "./SetState.js";
  * @see{@link CreateComponent}
  */
 class RecursiveDOM {
+     // private fields
+     #oldRender;
+
      /**
       * @constructor
       * @param {Object} params deconstructed paramaters
@@ -25,7 +29,7 @@ class RecursiveDOM {
           this.app = () => {
                return app();
           };
-          this.oldRender = app();
+          this.#oldRender = app();
 
           this.style = [];
           this.animations = [];
@@ -40,18 +44,9 @@ class RecursiveDOM {
           this.renderingIteration = 0;
 
           this.devMode = devMode;
-          this.multiThreading = true;
+          this.multiThreading = false;
      }
 
-     /**
-      * Initialize a stateful object
-      * @param {any} value initial value
-      * @returns stateful object
-      * @function
-      * @see {@link SetState}
-      */
-     static setState = (value) => new SetState(value);
-
      /**
       * init the Recursive DOM
       * @param {Object} params deconstructed paramaters
@@ -60,35 +55,31 @@ class RecursiveDOM {
       * @param {HTMLElement} params.staticStyleRoot style tag that will host the static app style.
       * @param {JSON} params.options initialize RecursiveDOM dev parameters
       */
-     static init(
+     static Init({
           root,
           styleRoot,
           staticStyleRoot,
-          options = { devMode: true, multiThreading: true }
-     ) {
-          window.vDOM = new RecursiveDOM({
+          options = { devMode: true, multiThreading: true },
+     }) {
+          window.RecursiveDOM = new RecursiveDOM({
                root,
                styleRoot,
                staticStyleRoot: staticStyleRoot,
                app: () => {},
           });
 
-          class HTMLContainer extends HTMLElement {
-               constructor() {
-                    super();
-               }
-          }
+          CustomComponents();
 
-          customElements.define("html-container", HTMLContainer, { extends: "div" });
-
-          window.vDOM.devMode = options.devMode;
-          window.vDOM.multiThreading = options.multiThreading;
+          if (options) {
+               window.RecursiveDOM.devMode = options.devMode;
+               window.RecursiveDOM.multiThreading = options.multiThreading;
+          }
 
-          window.setState = this.setState;
+          window.setState = (value) => new SetState(value);
           window.updateAfter = SetState.updateAfter;
      }
 
-     styleThread() {
+     #styleThread() {
           this.style = [];
           this.animations = [];
           this.mediaQueries = [];
@@ -131,15 +122,15 @@ class RecursiveDOM {
           const startTime = new Date().getTime();
 
           try {
-               this.styleThread();
+               this.#styleThread();
 
-               this.oldRender = this.app();
+               this.#oldRender = this.app();
                this.root.innerHTML = "";
                HandleWindow.events(this.events);
-               this.root.append(this.oldRender.render());
+               this.root.append(this.#oldRender.render());
 
                this.staticStyleRoot.innerHTML = HandleStyle.exportStatic(this.staticStyle);
-               this.oldRender.$onCreated();
+               this.#oldRender.$onCreated();
           } catch (e) {
                if (e.name === "RangeError") {
                     throw `VDOM : infinite Rerendering : Make sure to update state only when needed.`;
@@ -161,11 +152,11 @@ class RecursiveDOM {
           const startTime = new Date().getTime();
 
           try {
-               this.styleThread();
+               this.#styleThread();
 
                const newRender = this.app();
-               this.oldRender.update(newRender);
-               this.oldRender = newRender;
+               this.#oldRender.update(newRender);
+               this.#oldRender = newRender;
           } catch (e) {
                if (e.name === "RangeError") {
                     throw `VDOM : infinite Rerendering : Make sure to update state only when needed.`;

RecursiveDOM/SetState.js

@@ -20,15 +20,15 @@ class SetState {
       * @param {any} newVal new value
       */
      setValue(newVal) {
-          if (!vDOM) throw "[VDOM] no VirtualDOM in the current document.";
+          if (!window.RecursiveDOM) throw "[VDOM] no VirtualDOM in the current document.";
           this.value = newVal;
-          vDOM.update();
+          window.RecursiveDOM.update();
      }
 
      static updateAfter(actions) {
           try {
                actions();
-               vDOM.update();
+               window.RecursiveDOM.update();
           } catch (e) {}
      }
 }

RecursiveRouter/Router.js

@@ -49,7 +49,7 @@ class Router {
                this.current?.onExit();
                window.scrollTo({ top: 0, behavior: "smooth" });
                this.current = newRoute;
-               vDOM.update();
+               window.RecursiveDOM.update();
                this.current?.onLoad();
           });
      }
@@ -97,7 +97,7 @@ class Router {
                     if (this.current.title) {
                          document.title = this.current.title;
                     }
-                    vDOM.update();
+                    window.RecursiveDOM.update();
                     history.pushState({ route: this.current.name }, this.current.title, `${name}`);
                     window.scrollTo({ top: 0, behavior: "smooth" });
                     this.current?.onLoad();