@unsetsoft/ryunixjs 0.2.29-nightly.0 → 0.2.29

package/dist/Ryunix.js

@@ -14,6 +14,8 @@
     hookIndex: null,
   };
 
+  const reg = /[A-Z]/g;
+
   const RYUNIX_TYPES = Object.freeze({
     TEXT_ELEMENT: Symbol("text.element"),
     RYUNIX_EFFECT: Symbol("ryunix.effect"),
@@ -28,6 +30,12 @@
     children: "children",
   });
 
+  const EFFECT_TAGS = Object.freeze({
+    PLACEMENT: Symbol(),
+    UPDATE: Symbol(),
+    DELETION: Symbol(),
+  });
+
   /**
    * The function creates a new element with the given type, props, and children.
    * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
@@ -115,12 +123,50 @@
     vars.containerRoot = document.getElementById(root);
   };
 
+  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 hasDepsChanged = (prevDeps, nextDeps) =>
     !prevDeps ||
     !nextDeps ||
     prevDeps.length !== nextDeps.length ||
     prevDeps.some((dep, index) => dep !== nextDeps[index]);
 
+  /**
+   * 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
+   */
+  const 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
+   */
+  const 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 `useContext` is used to read and subscribe to context from your component.
    * @param ref - The `ref` parameter is a reference to a context object.
@@ -239,12 +285,335 @@
     return context;
   };
 
+  /**
+   * 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
+   */
+  const 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.
+   */
+  const 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]);
+      });
+  };
+
+  const 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;
+    }, "");
+  };
+
+  var Dom = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DomStyle: DomStyle,
+    createDom: createDom,
+    updateDom: updateDom
+  });
+
+  /**
+   * The function commits changes made to the virtual DOM to the actual DOM.
+   */
+  const commitRoot = () => {
+    vars.deletions.forEach(commitWork);
+    commitWork(vars.wipRoot.child);
+    vars.currentRoot = vars.wipRoot;
+    vars.wipRoot = null;
+  };
+
+  /**
+   * 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.
+   */
+  const 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;
+    }
+
+    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.
+   */
+  const commitDeletion = (fiber, domParent) => {
+    if (fiber.dom) {
+      domParent.removeChild(fiber.dom);
+    } else {
+      commitDeletion(fiber.child, domParent);
+    }
+  };
+
+  var Commits = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    commitDeletion: commitDeletion,
+    commitRoot: commitRoot,
+    commitWork: commitWork
+  });
+
+  /**
+   * 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
+   */
+  const reconcileChildren = (wipFiber, elements) => {
+    let index = 0;
+    let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
+    let prevSibling;
+
+    while (index < elements.length || oldFiber != null) {
+      const element = elements[index];
+      let newFiber;
+
+      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;
+        vars.deletions.push(oldFiber);
+      }
+
+      if (oldFiber) {
+        oldFiber = oldFiber.sibling;
+      }
+
+      if (index === 0) {
+        wipFiber.child = newFiber;
+      } else if (element) {
+        prevSibling.sibling = newFiber;
+      }
+
+      prevSibling = newFiber;
+      index++;
+    }
+  };
+
+  var Reconciler = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    reconcileChildren: reconcileChildren
+  });
+
+  /**
+   * 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.
+   */
+  const updateFunctionComponent = (fiber) => {
+    vars.wipFiber = fiber;
+    vars.hookIndex = 0;
+    vars.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.
+   */
+  const updateHostComponent = (fiber) => {
+    if (!fiber.dom) {
+      fiber.dom = createDom(fiber);
+    }
+    reconcileChildren(fiber, fiber.props.children.flat());
+  };
+
+  var Components = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    updateFunctionComponent: updateFunctionComponent,
+    updateHostComponent: updateHostComponent
+  });
+
+  /**
+   * 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
+   */
+  const workLoop = (deadline) => {
+    let shouldYield = false;
+    while (vars.nextUnitOfWork && !shouldYield) {
+      vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork);
+      shouldYield = deadline.timeRemaining() < 1;
+    }
+
+    if (!vars.nextUnitOfWork && vars.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.
+   */
+  const 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;
+    }
+  };
+
+  var Workers = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    performUnitOfWork: performUnitOfWork,
+    workLoop: workLoop
+  });
+
   var Ryunix = {
     createElement,
     render,
-
     init,
     Fragments,
+    Dom,
+    Workers,
+    Reconciler,
+    Components,
+    Commits,
   };
 
   window.Ryunix = Ryunix;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.2.29-nightly.0",
+  "version": "0.2.29",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,

package/src/lib/index.js

@@ -2,13 +2,22 @@ import { createElement, Fragments } from "./createElement";
 import { render, init } from "./render";
 import { useContext, useStore, useEffect } from "./hooks";
 import { createContext } from "./createContext";
+import * as Dom from "./dom";
+import * as Workers from "./workers";
+import * as Reconciler from "./reconciler";
+import * as Components from "./components";
+import * as Commits from "./commits";
 
 export { useStore, useEffect, createContext, useContext, Fragments };
 
 export default {
   createElement,
   render,
-
   init,
   Fragments,
+  Dom,
+  Workers,
+  Reconciler,
+  Components,
+  Commits,
 };