@unsetsoft/ryunixjs 1.0.0-alpha.0 → 1.0.2

package/src/lib/render.js

@@ -0,0 +1,34 @@
+import { vars } from '../utils/index'
+
+/**
+ * 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 Ryunix 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().
+ */
+const render = (element, container) => {
+  vars.wipRoot = {
+    dom: vars.containerRoot || container,
+    props: {
+      children: [element],
+    },
+    alternate: vars.currentRoot,
+  }
+  vars.deletions = []
+  vars.nextUnitOfWork = vars.wipRoot
+}
+
+/**
+ * @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.
+ */
+const init = (root) => {
+  const rootElement = root || '__ryunix'
+  vars.containerRoot = document.getElementById(rootElement)
+  return this
+}
+
+export { render, init }

package/src/lib/workers.js

@@ -0,0 +1,61 @@
+import { commitRoot } from './commits'
+import { updateFunctionComponent, updateHostComponent } from './components'
+import { vars } from '../utils/index'
+
+/**
+ * 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 `undefined` 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
+  }
+  return undefined
+}
+
+export { performUnitOfWork, workLoop }

package/src/main.js

@@ -0,0 +1,15 @@
+import Ryunix from './lib/index.js'
+export {
+  useStore,
+  useEffect,
+  useQuery,
+  useRef,
+  useMemo,
+  useCallback,
+  useRouter,
+  Fragment,
+} from './lib/index.js'
+
+window.Ryunix = Ryunix
+
+export default Ryunix

package/src/utils/index.js

@@ -0,0 +1,41 @@
+const vars = {
+  containerRoot: undefined,
+  nextUnitOfWork: undefined,
+  currentRoot: undefined,
+  wipRoot: undefined,
+  deletions: undefined,
+  wipFiber: undefined,
+  hookIndex: undefined,
+}
+
+const reg = /[A-Z]/g
+
+const RYUNIX_TYPES = Object.freeze({
+  TEXT_ELEMENT: Symbol('text.element'),
+  RYUNIX_EFFECT: Symbol('ryunix.effect'),
+  RYUNIX_MEMO: Symbol('ryunix.memo'),
+  RYUNIX_URL_QUERY: Symbol('ryunix.urlQuery'),
+  RYUNIX_REF: Symbol('ryunix.ref'),
+})
+
+const STRINGS = Object.freeze({
+  object: 'object',
+  function: 'function',
+  style: 'ryunix-style',
+  className: 'ryunix-class',
+  children: 'children',
+  boolean: 'boolean',
+})
+
+const OLD_STRINGS = Object.freeze({
+  style: 'style',
+  className: 'className',
+})
+
+const EFFECT_TAGS = Object.freeze({
+  PLACEMENT: Symbol(),
+  UPDATE: Symbol(),
+  DELETION: Symbol(),
+})
+
+export { vars, reg, RYUNIX_TYPES, EFFECT_TAGS, STRINGS, OLD_STRINGS }

package/lib/component.js

@@ -1,16 +0,0 @@
-import { reconcile } from "./reconciler";
-export class Component {
-  constructor(props) {
-    this.props = props;
-    this.state = this.state || {};
-  }
-  setState(partialState) {
-    this.state = Object.assign({}, this.state, partialState);
-    updateInstance(this.__internalInstance);
-  }
-}
-function updateInstance(internalInstance) {
-  const parentDom = internalInstance.dom.parentNode;
-  const element = internalInstance.element;
-  reconcile(parentDom, internalInstance, element);
-}

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/reconciler.js

@@ -1,89 +0,0 @@
-import { updateDomProperties } from "./dom-utils";
-import { TEXT_ELEMENT } from "./element";
-let rootInstance = null;
-export function render(element, parentDom) {
-  const prevInstance = rootInstance;
-  const nextInstance = reconcile(parentDom, prevInstance, element);
-  rootInstance = nextInstance;
-}
-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;
-  }
-}
-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;
-  }
-}
-function createPublicInstance(element, internalInstance) {
-  const { type, props } = element;
-  const publicInstance = new type(props);
-  publicInstance.__internalInstance = internalInstance;
-  return publicInstance;
-}
-function reconcileChildren(instance, element) {
-  const dom = instance.dom;
-  const childInstances = instance.childInstances;
-  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((instance) => instance != null);
-}

package/lib/ryunix.js

@@ -1,9 +0,0 @@
-import { render } from "./reconciler";
-import { createElement } from "./element";
-import { Component } from "./component";
-export { createElement, render, Component };
-export default {
-  render,
-  createElement,
-  Component,
-};