@unsetsoft/ryunixjs 0.1.14-beta.0 → 0.2.0-beta.1

package/lib/dom.js

@@ -0,0 +1,409 @@
+/**
+ * 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.
+ * @param props - The `props` parameter is an object that contains the properties or attributes of the
+ * element being created. These properties can include things like `className`, `id`, `style`, and any
+ * other custom attributes that the user wants to add to the element. The `props` object is spread
+ * using the spread
+ * @param children - The `children` parameter is a rest parameter that allows the function to accept
+ * any number of arguments after the `props` parameter. These arguments will be treated as children
+ * elements of the created element. The `map` function is used to iterate over each child and create a
+ * new element if it is not
+ * @returns A JavaScript object with a `type` property and a `props` property. The `type` property is
+ * set to the `type` argument passed into the function, and the `props` property is an object that
+ * 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) {
+  return {
+    type,
+    props: {
+      ...props,
+      children: children.map((child) =>
+        typeof child === "object" ? child : createTextElement(child)
+      ),
+    },
+  };
+}
+
+/**
+ * The function creates a text element with a given text value.
+ * @param text - The text content that will be used to create a new text element.
+ * @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) {
+  return {
+    type: "TEXT_ELEMENT",
+    props: {
+      nodeValue: text,
+      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 == "TEXT_ELEMENT"
+      ? document.createTextNode("")
+      : document.createElement(fiber.type);
+
+  updateDom(dom, {}, fiber.props);
+
+  return dom;
+}
+
+const isEvent = (key) => key.startsWith("on");
+const isProperty = (key) => key !== "children" && !isEvent(key);
+const isNew = (prev, next) => (key) => prev[key] !== next[key];
+const isGone = (prev, next) => (key) => !(key in next);
+
+/**
+ * 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) => !(key in nextProps) || isNew(prevProps, nextProps)(key))
+    .forEach((name) => {
+      const eventType = name.toLowerCase().substring(2);
+      dom.removeEventListener(eventType, prevProps[name]);
+    });
+
+  Object.keys(prevProps)
+    .filter(isProperty)
+    .filter(isGone(prevProps, nextProps))
+    .forEach((name) => {
+      dom[name] = "";
+    });
+
+  Object.keys(nextProps)
+    .filter(isProperty)
+    .filter(isNew(prevProps, nextProps))
+    .forEach((name) => {
+      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]);
+    });
+}
+
+/**
+ * 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 commits changes made to the DOM based on the effect tag of the fiber.
+ * @param fiber - A fiber is a unit of work in React'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 === "PLACEMENT" && fiber.dom != null) {
+    domParent.appendChild(fiber.dom);
+  } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
+    updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+  } else if (fiber.effectTag === "DELETION") {
+    commitDeletion(fiber, domParent);
+  }
+
+  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 React
+ * 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);
+  }
+}
+
+let containerRoot = null;
+
+/**
+ * The function creates a root container for a web application.
+ * @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;
+}
+
+/**
+ * The function renders an element into a container using a work-in-progress root.
+ * @param element - The element parameter is the component or element that needs to be rendered in the
+ * container. It could be a React component or a DOM element.
+ * @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,
+    props: {
+      children: [element],
+    },
+    alternate: currentRoot,
+  };
+  deletions = [];
+  nextUnitOfWork = wipRoot;
+}
+
+let nextUnitOfWork = null;
+let currentRoot = null;
+let wipRoot = null;
+let deletions = null;
+
+/**
+ * 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 React 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;
+  }
+}
+
+let wipFiber = null;
+let hookIndex = null;
+
+/**
+ * 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 React 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);
+}
+
+/**
+ * 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: "UPDATE",
+      };
+    }
+    if (element && !sameType) {
+      newFiber = {
+        type: element.type,
+        props: element.props,
+        dom: null,
+        parent: wipFiber,
+        alternate: null,
+        effectTag: "PLACEMENT",
+      };
+    }
+    if (oldFiber && !sameType) {
+      oldFiber.effectTag = "DELETION";
+      deletions.push(oldFiber);
+    }
+
+    if (oldFiber) {
+      oldFiber = oldFiber.sibling;
+    }
+
+    if (index === 0) {
+      wipFiber.child = newFiber;
+    } else if (element) {
+      prevSibling.sibling = newFiber;
+    }
+
+    prevSibling = newFiber;
+    index++;
+  }
+}
+
+// Hooks
+
+/**
+ * The function creates a state hook for a React-like framework.
+ * @param initial - The initial value of the state for the hook.
+ * @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 oldHook =
+    wipFiber.alternate &&
+    wipFiber.alternate.hooks &&
+    wipFiber.alternate.hooks[hookIndex];
+  const hook = {
+    state: oldHook ? oldHook.state : initial,
+    queue: [],
+  };
+
+  const actions = oldHook ? oldHook.queue : [];
+  actions.forEach((action) => {
+    console.log(action);
+    hook.state = action(hook.state);
+  });
+
+  /**
+   * The function `setState` updates the state of a component in React by adding an action to a queue
+   * and setting up a new work-in-progress root.
+   * @param action - The `action` parameter is an object that represents a state update to be performed
+   * on a component. It contains information about the type of update to be performed and any new data
+   * that needs to be applied to the component's state.
+   */
+  const setState = (action) => {
+    hook.queue.push(action);
+    wipRoot = {
+      dom: currentRoot.dom,
+      props: currentRoot.props,
+      alternate: currentRoot,
+    };
+    nextUnitOfWork = wipRoot;
+    deletions = [];
+  };
+
+  wipFiber.hooks.push(hook);
+  hookIndex++;
+  return [hook.state, setState];
+}
+
+function Fragment() {
+  return null;
+}
+
+// export
+
+export {
+  // Main functions
+  createElement,
+  render,
+  createRoot,
+  // Hooks
+  useStore,
+  Fragment,
+};

package/lib/main.js

@@ -0,0 +1,13 @@
+import { createElement, render, createRoot } from "./dom";
+import { Fragment, useStore } from "./dom";
+
+// Hooks
+export { useStore, Fragment };
+
+// General
+
+export default {
+  createElement,
+  render,
+  createRoot,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.1.14-beta.0",
+  "version": "0.2.0-beta.1",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,
@@ -9,7 +9,7 @@
   },
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
-    "build": "rollup ./lib/ryunix.js --file ./dist/Ryunix.js --format umd --name Ryunix",
+    "build": "rollup ./lib/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
     "postinstall": "yarn build"
   },
   "dependencies": {

package/lib/component.js

@@ -1,25 +0,0 @@
-import { scheduleUpdate } from "./reconciler";
-
-export class Component {
-  constructor(props) {
-    this.props = props;
-    this.state = this.state || {};
-  }
-  setState(partialState) {
-    // this.state = Object.assign({}, this.state, partialState);
-    // scheduleUpdate(this.__internalInstance, partialState);
-    throw Error(
-      "This function is not implemented yet, has a lot of bugs. You can check https://github.com/UnSetSoft/Ryunixjs/issues/10 for more information."
-    );
-  }
-}
-
-export class Fragment {
-  constructor(props) {
-    this.props = props;
-  }
-
-  render() {
-    return this.props.children;
-  }
-}

package/lib/dom-utils.js

@@ -1,25 +0,0 @@
-/**
- * This function updates the properties and event listeners of a DOM element based on the previous and
- * next props passed as arguments.
- * @param dom - The DOM element that needs to be updated with new properties.
- * @param prevProps - An object representing the previous properties of a DOM element.
- * @param nextProps - An object containing the new props that need to be updated on the DOM element.
- */
-export function updateDomProperties(dom, prevProps, nextProps) {
-  const isEvent = name => name.startsWith("on");
-  const isAttribute = name => !isEvent(name) && name != "children";
-  Object.keys(prevProps).filter(isEvent).forEach(name => {
-    const eventType = name.toLowerCase().substring(2);
-    dom.removeEventListener(eventType, prevProps[name]);
-  });
-  Object.keys(prevProps).filter(isAttribute).forEach(name => {
-    dom[name] = null;
-  });
-  Object.keys(nextProps).filter(isAttribute).forEach(name => {
-    dom[name] = nextProps[name];
-  });
-  Object.keys(nextProps).filter(isEvent).forEach(name => {
-    const eventType = name.toLowerCase().substring(2);
-    dom.addEventListener(eventType, nextProps[name]);
-  });
-}

package/lib/element.js

@@ -1,37 +0,0 @@
-const TEXT_ELEMENT = "TEXT";
-
-/**
- * This function creates a new element with the given type, configuration object, and children.
- * @param type - The type of the element being created (e.g. "div", "span", "h1", etc.).
- * @param configObject - The `configObject` parameter is an object that contains the properties and
- * values for the element's attributes. These attributes can include things like `className`, `id`,
- * `style`, and any other custom attributes that the user wants to add to the element.
- * @param args - The `args` parameter is a rest parameter that allows the function to accept any number
- * of additional arguments after the `configObject` parameter. These additional arguments are used as
- * children elements for the created element.
- * @returns An object with two properties: "type" and "props".
- */
-export function createElement(type, configObject, ...args) {
-  const props = Object.assign({}, configObject);
-  const hasChildren = args.length > 0;
-  const nodeChildren = hasChildren ? [...args] : [];
-  props.children = nodeChildren.filter(Boolean).map(c => c instanceof Object ? c : createTextElement(c));
-  return {
-    type,
-    props
-  };
-}
-
-/**
- * The function creates a text element with a given node value and an empty array of children.
- * @param nodeValue - The value of the text node that will be created.
- * @returns The function `createTextElement` is returning an element object with a `nodeValue` property
- * and an empty `children` array. This element object represents a text node in the virtual DOM.
- */
-function createTextElement(nodeValue) {
-  return createElement(TEXT_ELEMENT, {
-    nodeValue,
-    children: []
-  });
-}
-export { TEXT_ELEMENT };

package/lib/hooks.js

@@ -1,5 +0,0 @@
-const useLoaded = (fn) => {
-  return document.addEventListener("DOMContentLoaded", fn);
-};
-
-export { useLoaded };

package/lib/reconciler.js

@@ -1,612 +0,0 @@
-import { updateDomProperties } from "./dom-utils";
-import { TEXT_ELEMENT } from "./element";
-
-let rootInstance = null;
-const ENOUGH_TIME = 1;
-let workQueue = [];
-let nextUnitOfWork = null;
-const CLASS_COMPONENT = "class";
-const HOST_ROOT = "root";
-const HOST_COMPONENT = "host";
-const PLACEMENT = "PLACEMENT"; // this is for a child that needs to be added
-const DELETION = "DELETION"; //for a child that needs to be deleted.
-const UPDATE = "UPDATE"; // for a child that needs to be updated. refresh the props
-let pendingCommit = null;
-
-/**
- * The function adds a task to a work queue and requests idle callback to perform the work.
- * @param task - The task parameter is a function that represents the work that needs to be done. It
- * will be added to the workQueue array, which is a queue of tasks waiting to be executed. The
- * requestIdleCallback function will be used to schedule the execution of the performWork function,
- * which will process the tasks
- */
-function schedule(task) {
-  workQueue.push(task);
-  requestIdleCallback(performWork);
-}
-
-/**
- * This function performs work in a loop using requestIdleCallback and commits any pending changes.
- * @param deadline - The `deadline` parameter is a time value representing the deadline by which the
- * `performWork` function should finish its work. It is used to ensure that the function does not
- * exceed a certain amount of time and cause the browser to become unresponsive. The function will stop
- * working on the current task when
- */
-function performWork(deadline) {
-  if (!nextUnitOfWork) {
-    initialUnitOfWork();
-  }
-  loopThroughWork(deadline);
-  if (nextUnitOfWork || workQueue.length > 0) {
-    requestIdleCallback(performWork);
-  }
-
-  if (pendingCommit) {
-    commitAllWork(pendingCommit);
-  }
-}
-
-/**
- * The function commits all the effects of a fiber and updates the root container fiber.
- * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
- * contains information about the component, its state, props, and children. The fiber also has a
- * reference to its parent, child, and sibling fibers.
- */
-function commitAllWork(fiber) {
-  fiber.effects.forEach((f) => {
-    commitWork(f);
-  });
-
-  fiber.stateNode._rootContainerFiber = fiber;
-  nextUnitOfWork = null;
-  pendingCommit = null;
-}
-
-/**
- * The function commits changes to the DOM based on the effect tag of the fiber.
- * @param fiber - A fiber is a lightweight unit of work that represents a component and its state
- * during the reconciliation process in React's virtual DOM. It contains information about the
- * component's type, props, state, and children, as well as pointers to its parent, child, and sibling
- * fibers.
- * @returns If the fiber tag is HOST_ROOT, nothing is being returned.
- */
-function commitWork(fiber) {
-  if (fiber.tag == HOST_ROOT) {
-    return;
-  }
-  let domParentFiber = fiber.parent;
-  while (domParentFiber.tag == CLASS_COMPONENT) {
-    domParentFiber = domParentFiber.parent;
-  }
-  const domParent = domParentFiber.stateNode;
-  if (fiber.effectTag == PLACEMENT && fiber.tag == HOST_COMPONENT) {
-    domParent.appendChild(fiber.stateNode);
-  } else if (fiber.effectTag == UPDATE) {
-    updateDomProperties(fiber.stateNode, fiber.alternate.props, fiber.props);
-  } else if (fiber.effectTag == DELETION) {
-    commitDeletion(fiber, domParent);
-  }
-}
-
-/**
- * The function removes a fiber and its corresponding DOM node from the parent DOM node.
- * @param fiber - The fiber is a data structure used by React to represent a component and its state
- * during the rendering process. It contains information about the component's type, props, children,
- * and other metadata.
- * @param domParent - The DOM element that is the parent of the component being deleted.
- * @returns The function does not explicitly return anything, but it will exit the function and return
- * control to the calling function when the condition `if (node == fiber)` is met.
- */
-function commitDeletion(fiber, domParent) {
-  let node = fiber;
-  while (true) {
-    if (node.tag == CLASS_COMPONENT) {
-      node = node.child;
-      continue;
-    }
-    domParent.removeChild(node.stateNode);
-    while (node != fiber && !node.sibling) {
-      node = node.parent;
-    }
-    if (node == fiber) {
-      return;
-    }
-    node = node.sibling;
-  }
-}
-
-/**
- * The function begins the work of updating a fiber either for a class component or a host component.
- * @param wipFiber - wipFiber is a fiber object that represents the work-in-progress (WIP) component
- * being worked on by the reconciler in a React application. It contains information about the
- * component's type, props, state, and children, as well as pointers to its parent, sibling, and child
- * fibers
- */
-function beginWork(wipFiber) {
-  if (wipFiber.tag == CLASS_COMPONENT) {
-    updateClassFiber(wipFiber);
-  } else {
-    updateHostFiber(wipFiber);
-  }
-}
-
-/**
- * This function updates the host fiber by creating a new DOM element and reconciling its children.
- * @param wipFiber - wipFiber is a work-in-progress fiber object that represents a component or element
- * in the virtual DOM tree. It contains information about the component's type, props, state, and
- * children. The function `updateHostFiber` uses this wipFiber object to update the corresponding DOM
- * element
- */
-function updateHostFiber(wipFiber) {
-  if (!wipFiber.stateNode) {
-    wipFiber.stateNode = createDomElement(wipFiber);
-  }
-  const newChildElements = wipFiber.props.children;
-  reconcileChildrenArray(wipFiber, newChildElements);
-}
-
-/**
- * This function updates the state and props of a fiber node and reconciles its child elements.
- * @param wipFiber - wipFiber is a work-in-progress fiber that represents a component in the fiber
- * tree. It contains information about the component's type, props, state, and children. The function
- * `updateClassFiber` updates the state and props of the component represented by the wipFiber.
- * @returns Nothing is being returned explicitly in this function. It either updates the instance and
- * child fibers or clones the child fibers and returns nothing.
- */
-function updateClassFiber(wipFiber) {
-  let instance = wipFiber.stateNode;
-  if (instance == null) {
-    instance = wipFiber.stateNode = createInstance(wipFiber);
-  } else if (wipFiber.props == instance.props && !wipFiber.partialState) {
-    cloneChildFibers(wipFiber);
-    return;
-  }
-
-  instance.props = wipFiber.props;
-  instance.state = Object.assign({}, instance.state, wipFiber.partialState);
-  wipFiber.partialState = null;
-
-  const newChildElements = wipFiber.stateNode.render();
-  reconcileChildrenArray(wipFiber, newChildElements);
-}
-
-/**
- * The function creates an instance of a component using the given fiber.
- * @param fiber - The "fiber" parameter is an object that represents a node in the fiber tree. It
- * contains information about the component type, props, children, and other metadata needed for
- * rendering and updating the component.
- * @returns The function `createInstance` returns an instance of the component class specified in the
- * `fiber` argument, with the props passed to it. The instance also has a reference to the `fiber`
- * object.
- */
-function createInstance(fiber) {
-  const instance = new fiber.type(fiber.props);
-  instance.__fiber = fiber;
-  return instance;
-}
-
-/**
- * This function creates a new DOM element based on the given fiber object.
- * @param fiber - The "fiber" parameter is an object that represents a node in the virtual DOM tree. It
- * contains information about the element's type, props, and children.
- * @returns The function `createDomElement` returns a DOM element created using the
- * `document.createElement` method. If the `fiber` object represents a text element, then a text node
- * is created using `document.createTextNode` method. The properties of the element are updated using
- * the `updateDomProperties` function.
- */
-function createDomElement(fiber) {
-  const isTextElement = fiber.type === TEXT_ELEMENT;
-  const dom = isTextElement
-    ? document.createTextNode("")
-    : document.createElement(fiber.type);
-  updateDomProperties(dom, [], fiber.props);
-  return dom;
-}
-
-/**
- * This function performs work on a fiber and its children, completing each unit of work before moving
- * on to the next.
- * @param wipFiber - wipFiber stands for "work-in-progress fiber". In React, a fiber is a lightweight
- * representation of a component or element in the component tree. The wipFiber parameter represents
- * the current fiber that is being worked on by the reconciler during the rendering process. The
- * performUnitOfWork function performs
- * @returns the next unit of work to be performed, which is either the first child of the current fiber
- * (if it has one), or the next sibling of the current fiber (if it has one), or the parent of the
- * current fiber (if it has no more siblings).
- */
-function performUnitOfWork(wipFiber) {
-  beginWork(wipFiber);
-  if (wipFiber.child) {
-    return wipFiber.child;
-  }
-
-  let uow = wipFiber;
-  while (uow) {
-    completeWork(uow);
-
-    if (uow.sibling) {
-      return uow.sibling;
-    }
-
-    uow = uow.parent;
-  }
-}
-
-/**
- * The function initializes a unit of work by dequeuing an update from a work queue and setting the
- * next unit of work based on the update's properties.
- * @returns The function does not have a return statement, so it returns undefined.
- */
-function initialUnitOfWork() {
-  const update = workQueue.shift();
-
-  if (!update) {
-    return;
-  }
-
-  if (update.partialState) {
-    update.instance.__fiber.partialState = update.partialState;
-  }
-
-  const root =
-    update.from === HOST_ROOT
-      ? update.dom._rootContainerFiber
-      : getRootNode(update.instance.__fiber);
-
-  nextUnitOfWork = {
-    tag: HOST_ROOT,
-    stateNode: update.dom || root.stateNode,
-    props: update.newProps || root.props,
-    alternate: root,
-  };
-}
-
-/**
- * The function returns the root node of a given fiber by traversing up the parent chain.
- * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
- * represent a component and its state. It is used in the function to traverse the component tree and
- * find the root node of the tree.
- * @returns The function `getRootNode` returns the root node of a given fiber by traversing up the
- * fiber tree until it reaches the topmost parent node.
- */
-function getRootNode(fiber) {
-  let node = fiber;
-  while (node.parent) {
-    node = node.parent;
-  }
-  return node;
-}
-
-/**
- * This function loops through work while there is still time remaining before the deadline.
- * @param deadline - The `deadline` parameter is an object that represents a deadline by which the
- * current task should be completed. It has a `timeRemaining()` method that returns the amount of time
- * left until the deadline, in milliseconds. The `loopThroughWork()` function uses this `deadline`
- * object to check if there
- */
-function loopThroughWork(deadline) {
-  while (nextUnitOfWork && deadline.timeRemaining() > ENOUGH_TIME) {
-    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
-  }
-}
-
-/**
- * The function creates an array of children elements, either from an array or a single element.
- * @param children - The parameter `children` is expected to be a value that represents the children of
- * a parent element in a web page. It can be an array of child elements or a single child element. If
- * `children` is not provided or is falsy, an empty array is returned.
- * @returns The function `createArrayOfChildren` is returning an array. If the `children` parameter is
- * falsy (e.g. `null`, `undefined`, `false`, `0`, `NaN`, or an empty string), it returns an empty
- * array. If `children` is already an array, it returns that array. Otherwise, it returns an array with
- * `children` as its only element.
- */
-function createArrayOfChildren(children) {
-  return !children ? [] : Array.isArray(children) ? children : [children];
-}
-
-/**
- * This function reconciles the children of a fiber node with a new array of child elements.
- * @param wipFiber - The work-in-progress fiber, which represents the current state of the component
- * being rendered or updated.
- * @param newChildElements - an array of new child elements to be reconciled with the existing children
- * of the current fiber (wipFiber).
- */
-function reconcileChildrenArray(wipFiber, newChildElements) {
-  const elements = createArrayOfChildren(newChildElements);
-
-  let index = 0;
-
-  let oldFiber = wipFiber.alternate ? wipFiber.alternate.child : null;
-  let newFiber = null;
-  while (index < elements.length || oldFiber != null) {
-    const prevFiber = newFiber;
-
-    const element = index < elements.length && elements[index];
-
-    const sameType = oldFiber && element && element.type == oldFiber.type;
-
-    if (sameType) {
-      newFiber = {
-        type: oldFiber.type,
-        tag: oldFiber.tag,
-        stateNode: oldFiber.stateNode,
-        props: element.props,
-        parent: wipFiber,
-        alternate: oldFiber,
-        partialState: oldFiber.partialState,
-        effectTag: UPDATE,
-      };
-    }
-
-    if (element && !sameType) {
-      newFiber = {
-        type: element.type,
-        tag:
-          typeof element.type === "string" ? HOST_COMPONENT : CLASS_COMPONENT,
-        props: element.props,
-        parent: wipFiber,
-        effectTag: PLACEMENT,
-      };
-    }
-
-    if (oldFiber && !sameType) {
-      oldFiber.effectTag = DELETION;
-      wipFiber.effects = wipFiber.effects || [];
-
-      wipFiber.effects.push(oldFiber);
-    }
-
-    if (oldFiber) {
-      oldFiber = oldFiber.sibling;
-    }
-
-    if (index == 0) {
-      wipFiber.child = newFiber;
-    } else if (prevFiber && element) {
-      prevFiber.sibling = newFiber;
-    }
-
-    index++;
-  }
-}
-
-/**
- * The function clones child fibers from a parent fiber.
- * @param parentFiber - The parent fiber is an object that represents a component or element in the
- * React tree. It contains information about the component or element, such as its type, props, and
- * children. The function `cloneChildFibers` is used to clone the child fibers of the parent fiber.
- * @returns If the `oldFiber` does not have a child, then nothing is returned. Otherwise, a new set of
- * child fibers is created based on the `oldFiber` and attached to the `parentFiber`. No value is
- * explicitly returned from the function.
- */
-function cloneChildFibers(parentFiber) {
-  const oldFiber = parentFiber.alternate;
-
-  if (!oldFiber.child) {
-    return;
-  }
-
-  let oldChild = oldFiber.child;
-
-  let prevChild = null;
-
-  while (oldChild) {
-    const newChild = {
-      type: oldChild.type,
-      tag: oldChild.tag,
-      stateNode: oldChild.stateNode,
-      props: oldChild.props,
-      partialState: oldChild.partialState,
-      alternate: oldChild,
-      parent: parentFiber,
-    };
-    if (prevChild) {
-      prevChild.sibling = newChild;
-    } else {
-      parentFiber.child = newChild;
-    }
-    prevChild = newChild;
-    oldChild = oldChild.sibling;
-  }
-}
-
-/**
- * The function completes work on a fiber and adds its effects to its parent's effects list or sets it
- * as the pending commit.
- * @param fiber - a fiber object representing a component or element in the React tree
- */
-function completeWork(fiber) {
-  if (fiber.tag == CLASS_COMPONENT) {
-    fiber.stateNode.__fiber = fiber;
-  }
-
-  if (fiber.parent) {
-    const childEffects = fiber.effects || [];
-
-    const thisEffect = fiber.effectTag != null ? [fiber] : [];
-    const parentEffects = fiber.parent.effects || [];
-
-    fiber.parent.effects = parentEffects.concat(childEffects, thisEffect);
-  } else {
-    pendingCommit = fiber;
-  }
-}
-
-/**
- * This function schedules an update for a class component with the given instance and partial state.
- * @param instance - The instance parameter refers to an instance of a class component in React. It is
- * used to identify which component needs to be updated with the new state.
- * @param partialState - partialState is an object that contains the updated state values for a
- * component. When a component's state changes, the partialState object is passed to the scheduleUpdate
- * function to schedule a re-render of the component with the updated state values.
- */
-export function scheduleUpdate(instance, partialState) {
-  schedule({
-    from: CLASS_COMPONENT,
-    instance: instance,
-    partialState: partialState,
-  });
-}
-
-let rootElement;
-
-export const createRoot = (parentDom) => {
-  rootElement = parentDom;
-};
-
-/**
- * The `render` function takes in elements and a parent DOM node, and schedules a reconciliation
- * process to update the DOM with the new elements.
- * @param elements - an array of elements to be rendered in the parent DOM.
- * @param parentDom - parentDom is a reference to the DOM element where the rendered elements will be
- * appended as children. It is the container element for the rendered components.
- */
-
-export function rootClient(elements) {
-  workQueue.push({
-    from: "root",
-    dom: rootElement,
-    newProps: { children: elements },
-  });
-  requestIdleCallback(performWork);
-}
-
-export function render(elements, parentDom) {
-  workQueue.push({
-    from: HOST_ROOT, 
-    dom: parentDom, 
-    newProps: { children: elements },
-  });
-  requestIdleCallback(performWork);
-}
-
-/**
- * The function reconciles the differences between the previous and current instances of a component
- * and updates the DOM accordingly.
- * @param parentDom - The DOM element that serves as the parent container for the rendered component
- * tree.
- * @param instance - An object representing the current state of the component instance being
- * reconciled. It contains information about the component's rendered DOM node, its element type, and
- * its child instances. If this is the first time the component is being rendered, this parameter will
- * be null.
- * @param element - The element parameter represents the new element that needs to be rendered or
- * updated in the DOM. It contains information about the type of element (e.g. div, span, custom
- * component), its props (e.g. className, onClick), and its children (if any).
- * @returns an instance object that represents the updated state of the component after reconciling the
- * changes made to the virtual DOM.
- */
-export function reconcile(parentDom, instance, element) {
-  if (instance === null) {
-    const newInstance = instantiate(element);
-    parentDom.appendChild(newInstance.dom);
-    return newInstance;
-  } else if (element == null) {
-    parentDom.removeChild(instance.dom);
-    return null;
-  } else if (instance.element.type !== element.type) {
-    const newInstance = instantiate(element);
-    parentDom.replaceChild(newInstance.dom, instance.dom);
-    return newInstance;
-  } else if (typeof element.type === "string") {
-    instance.childInstances = reconcileChildren(instance, element);
-    instance.element = element;
-    return instance;
-  } else {
-    instance.publicInstance.props = element.props;
-    const childElement = instance.publicInstance.render();
-    const oldChildInstance = instance.childInstance;
-    const childInstance = reconcile(parentDom, oldChildInstance, childElement);
-    instance.dom = childInstance.dom;
-    instance.childInstance = childInstance;
-    instance.element = element;
-    return instance;
-  }
-}
-
-/**
- * The function creates an instance of a DOM element or a custom component element and returns it.
- * @param element - The element to be instantiated, which can be a DOM element or a custom component.
- * It contains information about the type of the element (string for DOM elements, function for custom
- * components) and its props (attributes and children).
- * @returns The function `instantiate` returns an instance object that contains a reference to the
- * corresponding DOM node, the element that was passed in, and an array of child instances. The exact
- * properties of the instance object depend on whether the element is a DOM element or a custom
- * component.
- */ function instantiate(element) {
-  const { type, props } = element;
-  const isDomElement = typeof type === "string";
-  if (isDomElement) {
-    const isTextElement = type === TEXT_ELEMENT;
-    const dom = isTextElement
-      ? document.createTextNode("")
-      : document.createElement(type);
-    updateDomProperties(dom, [], props);
-    const childElements = props.children || [];
-    const childInstances = childElements.map(instantiate);
-    const childDoms = childInstances.map((childInstance) => childInstance.dom);
-    childDoms.forEach((childDom) => dom.appendChild(childDom));
-    const instance = {
-      dom,
-      element,
-      childInstances,
-    };
-    return instance;
-  } else {
-    const instance = {};
-    const publicInstance = createPublicInstance(element, instance);
-    const childElement = publicInstance.render();
-    const childInstance = instantiate(childElement);
-    const dom = childInstance.dom;
-    Object.assign(instance, {
-      dom,
-      element,
-      childInstance,
-      publicInstance,
-    });
-    return instance;
-  }
-}
-/**
- * The function creates a public instance of a given element with its corresponding props and internal
- * instance.
- * @param element - An object that represents a React element, typically created using JSX syntax or
- * React.createElement() function.
- * @param internalInstance - The internalInstance parameter is an object that represents the internal
- * instance of a component. It may contain information such as the component's state, context, and
- * lifecycle methods. This parameter is used to associate the public instance of a component with its
- * internal instance.
- * @returns a newly created public instance of a given element type with its props.
- */
-function createPublicInstance(element, internalInstance) {
-  const { type, props } = element;
-  const publicInstance = new type(props);
-  publicInstance.__internalInstance = internalInstance;
-  return publicInstance;
-}
-
-/**
- * This function reconciles the child instances of a component with its new child elements.
- * @param instance - an object representing the current instance of a component
- * @param element - The element is a React element that represents the new version of the component
- * being rendered. It contains information about the component's props and children.
- * @returns an array of new child instances that have been reconciled with the given parent instance
- * and child elements. The filter method is used to remove any falsy values from the array, such as
- * null or undefined.
- */
-function reconcileChildren(instance, element) {
-  const { dom, childInstances } = instance;
-  const nextChildElements = element.props.children || [];
-
-  const newChildInstances = [];
-
-  const count = Math.max(childInstances.length, nextChildElements.length);
-
-  for (let i = 0; i < count; i++) {
-    const childInstance = childInstances[i];
-    const childElement = nextChildElements[i];
-    const newChildInstance = reconcile(dom, childInstance, childElement);
-    newChildInstances.push(newChildInstance);
-  }
-
-  return newChildInstances.filter(Boolean);
-}

package/lib/ryunix.js

@@ -1,13 +0,0 @@
-import { render, rootClient, createRoot } from "./reconciler";
-import { createElement } from "./element";
-import { Component, Fragment } from "./component";
-import { useLoaded } from "./hooks";
-export { createElement, render, Component, useLoaded, Fragment };
-export default {
-  render,
-  createElement,
-  Component,
-  Fragment,
-  rootClient,
-  createRoot,
-};