@unsetsoft/ryunixjs 0.2.28 → 0.2.29-nightly.0

package/dist/Ryunix.js

@@ -4,44 +4,29 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}));
 })(this, (function (exports) { 'use strict';
 
-  let containerRoot = null;
-  let nextUnitOfWork = null;
-  let currentRoot = null;
-  let wipRoot = null;
-  let deletions = null;
-  let wipFiber = null;
-  let hookIndex = null;
-
-  const RYUNIX_TYPES = {
+  const vars = {
+    containerRoot: null,
+    nextUnitOfWork: null,
+    currentRoot: null,
+    wipRoot: null,
+    deletions: null,
+    wipFiber: null,
+    hookIndex: null,
+  };
+
+  const RYUNIX_TYPES = Object.freeze({
     TEXT_ELEMENT: Symbol("text.element"),
     RYUNIX_EFFECT: Symbol("ryunix.effect"),
     RYUNIX_CONTEXT: Symbol("ryunix.context"),
-  };
+  });
 
-  const STRINGS = {
+  const STRINGS = Object.freeze({
     object: "object",
     function: "function",
     style: "style",
     className: "className",
     children: "children",
-  };
-
-  const EFFECT_TAGS = {
-    PLACEMENT: Symbol(),
-    UPDATE: Symbol(),
-    DELETION: Symbol(),
-  };
-
-  const isEvent = (key) => key.startsWith("on");
-  const isProperty = (key) => key !== STRINGS.children && !isEvent(key);
-  const isNew = (prev, next) => (key) => prev[key] !== next[key];
-  const isGone = (next) => (key) => !(key in next);
-  const reg = /[A-Z]/g;
-  const hasDepsChanged = (prevDeps, nextDeps) =>
-    !prevDeps ||
-    !nextDeps ||
-    prevDeps.length !== nextDeps.length ||
-    prevDeps.some((dep, index) => dep !== nextDeps[index]);
+  });
 
   /**
    * The function creates a new element with the given type, props, and children.
@@ -59,7 +44,8 @@
    * includes any additional properties passed in the `props` argument, as well as a `children` property
    * that is an array of any child elements passed in the `...children` argument
    */
-  function createElement(type, props, ...children) {
+
+  const createElement = (type, props, ...children) => {
     return {
       type,
       props: {
@@ -71,7 +57,7 @@
           ),
       },
     };
-  }
+  };
 
   /**
    * The function creates a text element with a given text value.
@@ -79,7 +65,8 @@
    * @returns A JavaScript object with a `type` property set to `"TEXT_ELEMENT"` and a `props` property
    * that contains a `nodeValue` property set to the `text` parameter and an empty `children` array.
    */
-  function createTextElement(text) {
+
+  const createTextElement = (text) => {
     return {
       type: RYUNIX_TYPES.TEXT_ELEMENT,
       props: {
@@ -87,211 +74,17 @@
         children: [],
       },
     };
-  }
-
-  /**
-   * The function creates a new DOM element based on the given fiber object and updates its properties.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the element type, props, and children of the node.
-   * @returns The `createDom` function returns a newly created DOM element based on the `fiber` object
-   * passed as an argument. If the `fiber` object represents a text element, a text node is created using
-   * `document.createTextNode("")`. Otherwise, a new element is created using
-   * `document.createElement(fiber.type)`. The function then calls the `updateDom` function to update the
-   * properties of the newly created
-   */
-  function createDom(fiber) {
-    const dom =
-      fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode("")
-        : document.createElement(fiber.type);
-
-    updateDom(dom, {}, fiber.props);
-
-    return dom;
-  }
-
-  /**
-   * The function updates the DOM by removing old event listeners and properties, and adding new ones
-   * based on the previous and next props.
-   * @param dom - The DOM element that needs to be updated with new props.
-   * @param prevProps - An object representing the previous props (properties) of a DOM element.
-   * @param nextProps - An object containing the new props that need to be updated in the DOM.
-   */
-  function updateDom(dom, prevProps, nextProps) {
-    Object.keys(prevProps)
-      .filter(isEvent)
-      .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2);
-        dom.removeEventListener(eventType, prevProps[name]);
-      });
-
-    Object.keys(prevProps)
-      .filter(isProperty)
-      .filter(isGone(nextProps))
-      .forEach((name) => {
-        dom[name] = "";
-      });
-
-    Object.keys(nextProps)
-      .filter(isProperty)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        if (name === STRINGS.style) {
-          DomStyle(dom, nextProps.style);
-        } else if (name === STRINGS.className) {
-          if (nextProps.className === "") {
-            throw new Error("className cannot be empty.");
-          }
-          prevProps.className &&
-            dom.classList.remove(...prevProps.className.split(/\s+/));
-          dom.classList.add(...nextProps.className.split(/\s+/));
-        } else {
-          dom[name] = nextProps[name];
-        }
-      });
-
-    Object.keys(nextProps)
-      .filter(isEvent)
-      .filter(isNew(prevProps, nextProps))
-      .forEach((name) => {
-        const eventType = name.toLowerCase().substring(2);
-        dom.addEventListener(eventType, nextProps[name]);
-      });
-  }
-
-  function DomStyle(dom, style) {
-    dom.style = Object.keys(style).reduce((acc, styleName) => {
-      const key = styleName.replace(reg, function (v) {
-        return "-" + v.toLowerCase();
-      });
-      acc += `${key}: ${style[styleName]};`;
-      return acc;
-    }, "");
-  }
-
-  /**
-   * The function commits changes made to the virtual DOM to the actual DOM.
-   */
-  function commitRoot() {
-    deletions.forEach(commitWork);
-    commitWork(wipRoot.child);
-    currentRoot = wipRoot;
-    wipRoot = null;
-  }
-
-  /**
-   * The function cancels all effect hooks in a given fiber.
-   * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
-   * represent a component and its state. It contains information about the component's props, state, and
-   * children, as well as metadata used by React to manage updates and rendering. The function
-   * "cancelEffects" is likely intended
-   */
-  function cancelEffects(fiber) {
-    if (fiber.hooks) {
-      fiber.hooks
-        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
-        .forEach((effectHook) => {
-          effectHook.cancel();
-        });
-    }
-  }
-
-  /**
-   * The function runs all effect hooks in a given fiber.
-   * @param fiber - The "fiber" parameter is likely referring to a data structure used in the
-   * implementation of a fiber-based reconciliation algorithm, such as the one used in React. A fiber
-   * represents a unit of work that needs to be performed by the reconciliation algorithm, and it
-   * contains information about a component and its children, as
-   */
-  function runEffects(fiber) {
-    if (fiber.hooks) {
-      fiber.hooks
-        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
-        .forEach((effectHook) => {
-          effectHook.cancel = effectHook.effect();
-        });
-    }
-  }
-
-  /**
-   * The function commits changes made to the DOM based on the effect tag of the fiber.
-   * @param fiber - A fiber is a unit of work in Ryunix's reconciliation process. It represents a
-   * component and its state at a particular point in time. The `commitWork` function takes a fiber as a
-   * parameter to commit the changes made during the reconciliation process to the actual DOM.
-   * @returns The function does not return anything, it performs side effects by manipulating the DOM.
-   */
-  function commitWork(fiber) {
-    if (!fiber) {
-      return;
-    }
+  };
 
-    let domParentFiber = fiber.parent;
-    while (!domParentFiber.dom) {
-      domParentFiber = domParentFiber.parent;
-    }
-    const domParent = domParentFiber.dom;
-
-    if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
-      if (fiber.dom != null) {
-        domParent.appendChild(fiber.dom);
-      }
-      runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
-      cancelEffects(fiber);
-      if (fiber.dom != null) {
-        updateDom(fiber.dom, fiber.alternate.props, fiber.props);
-      }
-      runEffects(fiber);
-    } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-      cancelEffects(fiber);
-      commitDeletion(fiber, domParent);
-      return;
+  const Fragments = (props) => {
+    if (props.style) {
+      throw new Error("The style attribute is not supported");
     }
-
-    commitWork(fiber.child);
-    commitWork(fiber.sibling);
-  }
-
-  /**
-   * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
-   * its child's DOM node until it finds a node to remove.
-   * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
-   * application.
-   * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
-   */
-  function commitDeletion(fiber, domParent) {
-    if (fiber.dom) {
-      domParent.removeChild(fiber.dom);
-    } else {
-      commitDeletion(fiber.child, domParent);
+    if (props.className === "") {
+      throw new Error("className cannot be empty.");
     }
-  }
-
-  /**
-   * @deprecated use Ryunix.init(root) instead.
-   *
-   * @description The function creates a root container for a web application.
-   * @example Ryunix.createRoot(document.getElementById("root")) -> <div id="root" />
-   * @param root - The parameter `root` is likely referring to an HTML element that will serve as the
-   * root or container for a web application or component. The `createRoot` function takes this element
-   * as an argument and assigns it to a variable called `containerRoot`. This variable can then be used
-   * to manipulate the contents
-   *
-   */
-  function createRoot(root) {
-    containerRoot = root;
-  }
-
-  /**
-   * @description The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
-   * @example Ryunix.init("root") -> <div id="root" />
-   * @param root - The parameter "root" is the id of the HTML element that will serve as the container
-   * for the root element.
-   */
-  function init(root) {
-    containerRoot = document.getElementById(root);
-  }
+    return createElement("div", props, props.children);
+  };
 
   /**
    * The function renders an element into a container using a work-in-progress root.
@@ -300,206 +93,46 @@
    * @param container - The container parameter is the DOM element where the rendered element will be
    * appended to. this parameter is optional if you use createRoot().
    */
-  function render(element, container) {
-    wipRoot = {
-      dom: containerRoot || container,
+  const render = (element, container) => {
+    vars.wipRoot = {
+      dom: vars.containerRoot || container,
       props: {
         children: [element],
       },
-      alternate: currentRoot,
+      alternate: vars.currentRoot,
     };
-    deletions = [];
-    nextUnitOfWork = wipRoot;
-  }
-
-  /**
-   * This function uses requestIdleCallback to perform work on a fiber tree until it is complete or the
-   * browser needs to yield to other tasks.
-   * @param deadline - The `deadline` parameter is an object that represents the amount of time the
-   * browser has to perform work before it needs to handle other tasks. It has a `timeRemaining()` method
-   * that returns the amount of time remaining before the deadline is reached. The `shouldYield` variable
-   * is used to determine
-   */
-  function workLoop(deadline) {
-    let shouldYield = false;
-    while (nextUnitOfWork && !shouldYield) {
-      nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
-      shouldYield = deadline.timeRemaining() < 1;
-    }
-
-    if (!nextUnitOfWork && wipRoot) {
-      commitRoot();
-    }
-
-    requestIdleCallback(workLoop);
-  }
-
-  requestIdleCallback(workLoop);
-
-  /**
-   * The function performs a unit of work by updating either a function component or a host component and
-   * returns the next fiber to be processed.
-   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
-   * contains information about the component's type, props, and children, as well as pointers to its
-   * parent, child, and sibling fibers. The `performUnitOfWork` function takes a fiber as a parameter and
-   * performs work
-   * @returns The function `performUnitOfWork` returns the next fiber to be processed. If the current
-   * fiber has a child, it returns the child. Otherwise, it looks for the next sibling of the current
-   * fiber. If there are no more siblings, it goes up the tree to the parent and looks for the next
-   * sibling of the parent. The function returns `null` if there are no more fibers to process.
-   */
-  function performUnitOfWork(fiber) {
-    const isFunctionComponent = fiber.type instanceof Function;
-    if (isFunctionComponent) {
-      updateFunctionComponent(fiber);
-    } else {
-      updateHostComponent(fiber);
-    }
-    if (fiber.child) {
-      return fiber.child;
-    }
-    let nextFiber = fiber;
-    while (nextFiber) {
-      if (nextFiber.sibling) {
-        return nextFiber.sibling;
-      }
-      nextFiber = nextFiber.parent;
-    }
-  }
-
-  /**
-   * This function updates a function component by setting up a work-in-progress fiber, resetting the
-   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the component, its props, state, and children. In this function, it is
-   * used to update the state of the component and its children.
-   */
-  function updateFunctionComponent(fiber) {
-    wipFiber = fiber;
-    hookIndex = 0;
-    wipFiber.hooks = [];
-    const children = [fiber.type(fiber.props)];
-    reconcileChildren(fiber, children);
-  }
-
-  /**
-   * This function updates a host component's DOM element and reconciles its children.
-   * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
-   * contains information about the component's type, props, and children, as well as pointers to other
-   * fibers in the tree.
-   */
-  function updateHostComponent(fiber) {
-    if (!fiber.dom) {
-      fiber.dom = createDom(fiber);
-    }
-    reconcileChildren(fiber, fiber.props.children.flat());
-  }
-
-  /**
-   * This function reconciles the children of a fiber node with a new set of elements, creating new
-   * fibers for new elements, updating existing fibers for elements with the same type, and marking old
-   * fibers for deletion if they are not present in the new set of elements.
-   * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
-   * DOM tree.
-   * @param elements - an array of elements representing the new children to be rendered in the current
-   * fiber's subtree
-   */
-  function reconcileChildren(wipFiber, elements) {
-    let index = 0;
-    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-    let prevSibling = null;
-
-    while (index < elements.length || oldFiber != null) {
-      const element = elements[index];
-      let newFiber = null;
-
-      const sameType = oldFiber && element && element.type == oldFiber.type;
-
-      if (sameType) {
-        newFiber = {
-          type: oldFiber.type,
-          props: element.props,
-          dom: oldFiber.dom,
-          parent: wipFiber,
-          alternate: oldFiber,
-          effectTag: EFFECT_TAGS.UPDATE,
-        };
-      }
-      if (element && !sameType) {
-        newFiber = {
-          type: element.type,
-          props: element.props,
-          dom: null,
-          parent: wipFiber,
-          alternate: null,
-          effectTag: EFFECT_TAGS.PLACEMENT,
-        };
-      }
-      if (oldFiber && !sameType) {
-        oldFiber.effectTag = EFFECT_TAGS.DELETION;
-        deletions.push(oldFiber);
-      }
-
-      if (oldFiber) {
-        oldFiber = oldFiber.sibling;
-      }
-
-      if (index === 0) {
-        wipFiber.child = newFiber;
-      } else if (element) {
-        prevSibling.sibling = newFiber;
-      }
-
-      prevSibling = newFiber;
-      index++;
-    }
-  }
+    vars.deletions = [];
+    vars.nextUnitOfWork = vars.wipRoot;
+  };
 
   /**
-   * The function createContext creates a context object with a default value and methods to set and get
-   * the context value.
-   * @param defaultValue - The `defaultValue` parameter is the initial value that will be assigned to the
-   * `contextValue` variable if no value is provided when creating the context.
-   * @returns a context object.
+   * @description The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
+   * @example Ryunix.init("root") -> <div id="root" />
+   * @param root - The parameter "root" is the id of the HTML element that will serve as the container
+   * for the root element.
    */
-  function createContext(defaultValue) {
-    let contextValue = defaultValue || null;
-
-    const context = {
-      tag: RYUNIX_TYPES.RYUNIX_CONTEXT,
-      Value: contextValue,
-      Provider: null,
-    };
-
-    context.Provider = (value) => (context.Value = value);
-
-    return context;
-  }
-
-  function Fragments(props) {
-    if (props.style) {
-      throw new Error("The style attribute is not supported");
-    }
-    if (props.className === "") {
-      throw new Error("className cannot be empty.");
-    }
-    return createElement("div", props, props.children);
-  }
+  const init = (root) => {
+    vars.containerRoot = document.getElementById(root);
+  };
 
-  // Hooks
+  const hasDepsChanged = (prevDeps, nextDeps) =>
+    !prevDeps ||
+    !nextDeps ||
+    prevDeps.length !== nextDeps.length ||
+    prevDeps.some((dep, index) => dep !== nextDeps[index]);
 
   /**
    * The function `useContext` is used to read and subscribe to context from your component.
    * @param ref - The `ref` parameter is a reference to a context object.
    * @returns The `Value` property of the `hook` object is being returned.
    */
-  function useContext(ref) {
-    hookIndex++;
+  const useContext = (ref) => {
+    vars.hookIndex++;
 
     const oldHook =
-      wipFiber.alternate &&
-      wipFiber.alternate.hooks &&
-      wipFiber.alternate.hooks[hookIndex];
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
 
     const hasOld = oldHook ? oldHook : undefined;
     const Context = hasOld ? hasOld : ref;
@@ -507,10 +140,10 @@
       ...Context,
     };
 
-    wipFiber.hooks.push(hook);
+    vars.wipFiber.hooks.push(hook);
 
     return hook.Value;
-  }
+  };
 
   /**
    * @description The function creates a state.
@@ -518,11 +151,11 @@
    * @returns The `useStore` function returns an array with two elements: the current state value and a
    * `setState` function that can be used to update the state.
    */
-  function useStore(initial) {
+  const useStore = (initial) => {
     const oldHook =
-      wipFiber.alternate &&
-      wipFiber.alternate.hooks &&
-      wipFiber.alternate.hooks[hookIndex];
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
     const hook = {
       state: oldHook ? oldHook.state : initial,
       queue: [],
@@ -543,19 +176,19 @@
      */
     const setState = (action) => {
       hook.queue.push(action);
-      wipRoot = {
-        dom: currentRoot.dom,
-        props: currentRoot.props,
-        alternate: currentRoot,
+      vars.wipRoot = {
+        dom: vars.currentRoot.dom,
+        props: vars.currentRoot.props,
+        alternate: vars.currentRoot,
       };
-      nextUnitOfWork = wipRoot;
-      deletions = [];
+      vars.nextUnitOfWork = vars.wipRoot;
+      vars.deletions = [];
     };
 
-    wipFiber.hooks.push(hook);
-    hookIndex++;
+    vars.wipFiber.hooks.push(hook);
+    vars.hookIndex++;
     return [hook.state, setState];
-  }
+  };
 
   /**
    * This is a function that creates a hook for managing side effects in Ryunix components.
@@ -566,11 +199,11 @@
    * between renders, the effect will be re-run. If the array is empty, the effect will only run once on
    * mount and never again.
    */
-  function useEffect(effect, deps) {
+  const useEffect = (effect, deps) => {
     const oldHook =
-      wipFiber.alternate &&
-      wipFiber.alternate.hooks &&
-      wipFiber.alternate.hooks[hookIndex];
+      vars.wipFiber.alternate &&
+      vars.wipFiber.alternate.hooks &&
+      vars.wipFiber.alternate.hooks[vars.hookIndex];
 
     const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps);
 
@@ -581,14 +214,35 @@
       deps,
     };
 
-    wipFiber.hooks.push(hook);
-    hookIndex++;
-  }
+    vars.wipFiber.hooks.push(hook);
+    vars.hookIndex++;
+  };
+
+  /**
+   * The function createContext creates a context object with a default value and methods to set and get
+   * the context value.
+   * @param defaultValue - The `defaultValue` parameter is the initial value that will be assigned to the
+   * `contextValue` variable if no value is provided when creating the context.
+   * @returns a context object.
+   */
+  const createContext = (defaultValue) => {
+    let contextValue = defaultValue || null;
+
+    const context = {
+      tag: RYUNIX_TYPES.RYUNIX_CONTEXT,
+      Value: contextValue,
+      Provider: null,
+    };
+
+    context.Provider = (value) => (context.Value = value);
+
+    return context;
+  };
 
   var Ryunix = {
     createElement,
     render,
-    createRoot,
+
     init,
     Fragments,
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.2.28",
+  "version": "0.2.29-nightly.0",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,
@@ -9,7 +9,7 @@
   },
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
-    "build": "rollup ./lib/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
+    "build": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
     "prepublish": "npm run build",
     "postinstall": "npm run build",
     "cli": "node ./bin/index.js",