@unsetsoft/ryunixjs 1.0.2 → 1.0.3-nightly.4

package/src/lib/hooks.js

@@ -1,35 +1,18 @@
-import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
+import { vars } from '../utils/index'
 import { isEqual } from 'lodash'
-import { Fragment, createElement, cloneElement } from './createElement'
+
 /**
- * @description The function creates a state.
- * @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.
+ * useStore is similar to useState in React, managing local state within a functional component.
  */
 const useStore = (initial) => {
-  const oldHook =
-    vars.wipFiber.alternate &&
-    vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex]
-  const hook = {
-    state: oldHook ? oldHook.state : initial,
-    queue: [],
-  }
+  const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex]
+  const hook = { state: oldHook ? oldHook.state : initial, queue: [] }
 
   const actions = oldHook ? oldHook.queue : []
   actions.forEach((action) => {
-    hook.state =
-      typeof action === STRINGS.function ? action(hook.state) : action
+    hook.state = typeof action === 'function' ? action(hook.state) : action
   })
 
-  /**
-   * The function `setState` updates the state of a component in Ryunix 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)
     vars.wipRoot = {
@@ -41,162 +24,58 @@ const useStore = (initial) => {
     vars.deletions = []
   }
 
-  if (vars.wipFiber && vars.wipFiber.hooks) {
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-  }
+  vars.workInProgressFiber.hooks.push(hook)
+  vars.hookIndex++
   return [hook.state, setState]
 }
 
 /**
- * This is a function that creates a hook for managing side effects in Ryunix components.
- * @param effect - The effect function that will be executed after the component has rendered or when
- * the dependencies have changed. It can perform side effects such as fetching data, updating the DOM,
- * or subscribing to events.
- * @param deps - An array of dependencies that the effect depends on. If any of the dependencies change
- * between renders, the effect will be re-run. If the array is empty, the effect will only run once on
- * mount and never again.
+ * useEffect runs side effects after rendering based on dependencies.
  */
-
 const useEffect = (callback, deps) => {
-  const oldHook =
-    vars.wipFiber.alternate &&
-    vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex]
-
-  const hook = {
-    type: RYUNIX_TYPES.RYUNIX_EFFECT,
-    deps,
-  }
+  const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex]
+  const hook = { type: 'effect', deps }
 
-  if (!oldHook) {
-    // invoke callback if this is the first time
-    callback()
-  } else {
-    if (!isEqual(oldHook.deps, hook.deps)) {
-      callback()
-    }
+  const hasChanged = !oldHook || !isEqual(oldHook.deps, deps)
+  if (hasChanged) {
+    const cleanup = callback()
+    hook.cleanup = cleanup
   }
 
-  if (vars.wipFiber.hooks) {
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-  }
+  vars.workInProgressFiber.hooks.push(hook)
+  vars.hookIndex++
 }
 
 /**
- * The `useQuery` function is a custom hook in JavaScript that retrieves query parameters from the URL
- * and stores them in a hook for easy access.
- * @returns The `useQuery` function returns the `query` property of the `hook` object.
+ * useRef creates a mutable ref object to store values across renders.
  */
-const useQuery = () => {
-  const oldHook =
-    vars.wipFiber.alternate &&
-    vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex]
-
-  const hasOld = oldHook ? oldHook : undefined
-
-  const urlSearchParams = new URLSearchParams(window.location.search)
-  const params = Object.fromEntries(urlSearchParams.entries())
-  const Query = hasOld ? hasOld : params
-
-  const hook = {
-    type: RYUNIX_TYPES.RYUNIX_URL_QUERY,
-    query: Query,
-  }
-
-  if (vars.wipFiber.hooks) {
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-  }
-
-  return hook.query
-}
-
-const useRef = (initial) => {
-  const oldHook =
-    vars.wipFiber.alternate &&
-    vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex]
-
-  const hook = {
-    type: RYUNIX_TYPES.RYUNIX_REF,
-    value: oldHook ? oldHook.value : { current: initial },
-  }
-
-  if (vars.wipFiber.hooks) {
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-  }
+const useRef = (initialValue) => {
+  const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex]
+  const hook = { value: oldHook ? oldHook.value : { current: initialValue } }
 
+  vars.workInProgressFiber.hooks.push(hook)
+  vars.hookIndex++
   return hook.value
 }
 
-const useMemo = (comp, deps) => {
-  const oldHook =
-    vars.wipFiber.alternate &&
-    vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex]
-
+/**
+ * useMemo memoizes a value to avoid recomputations.
+ */
+const useMemo = (computeFn, deps) => {
+  const oldHook = vars.workInProgressFiber.alternate?.hooks?.[vars.hookIndex]
   const hook = {
-    type: RYUNIX_TYPES.RYUNIX_MEMO,
-    value: null,
     deps,
+    value: oldHook && isEqual(deps, oldHook.deps) ? oldHook.value : computeFn(),
   }
 
-  if (oldHook) {
-    if (isEqual(oldHook.deps, hook.deps)) {
-      hook.value = oldHook.value
-    } else {
-      hook.value = comp()
-    }
-  } else {
-    hook.value = comp()
-  }
-
-  if (vars.wipFiber.hooks) {
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-  }
-
+  vars.workInProgressFiber.hooks.push(hook)
+  vars.hookIndex++
   return hook.value
 }
-const useCallback = (callback, deps) => {
-  return useMemo(() => callback, deps)
-}
-
-const useRouter = (routes) => {
-  const [location, setLocation] = useStore(window.location.pathname)
 
-  const navigate = (path) => {
-    window.history.pushState({}, '', path)
-    setLocation(path)
-  }
-
-  useEffect(() => {
-    const onPopState = () => {
-      setLocation(window.location.pathname)
-    }
-
-    window.addEventListener('popstate', onPopState)
-    return () => {
-      window.removeEventListener('popstate', onPopState)
-    }
-  }, [])
-
-  const currentRoute = routes.find((route) => route.path === location)
-  const Children = () => (currentRoute ? currentRoute.component : null)
-
-  return { Children, navigate }
-}
+/**
+ * useCallback memoizes a callback function to avoid unnecessary recreations.
+ */
+const useCallback = (callback, deps) => useMemo(() => callback, deps)
 
-export {
-  useStore,
-  useEffect,
-  useQuery,
-  useRef,
-  useMemo,
-  useCallback,
-  useRouter,
-}
+export { useStore, useEffect, useRef, useMemo, useCallback }

package/src/lib/index.js

@@ -1,30 +1,13 @@
 import { createElement, cloneElement, Fragment } from './createElement'
 import { render, init } from './render'
-import {
-  useStore,
-  useEffect,
-  useQuery,
-  useRef,
-  useMemo,
-  useCallback,
-  useRouter,
-} from './hooks'
+import { useStore, useEffect, useRef, useMemo, useCallback } from './hooks'
 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,
-  useQuery,
-  useRef,
-  useMemo,
-  useCallback,
-  useRouter,
-  Fragment,
-}
+export { useStore, useEffect, useRef, useMemo, useCallback, Fragment }
 
 export default {
   createElement,

package/src/lib/reconciler.js

@@ -22,9 +22,9 @@ const reconcileChildren = (wipFiber, elements) => {
 
     if (sameType) {
       newFiber = {
-        type: oldFiber ? oldFiber.type : undefined,
+        type: oldFiber.type,
         props: element.props,
-        dom: oldFiber ? oldFiber.dom : undefined,
+        dom: oldFiber.dom,
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: EFFECT_TAGS.UPDATE,
@@ -40,7 +40,7 @@ const reconcileChildren = (wipFiber, elements) => {
         effectTag: EFFECT_TAGS.PLACEMENT,
       }
     }
-    if (oldFiber && !sameType) {
+    if (!element && oldFiber) {
       oldFiber.effectTag = EFFECT_TAGS.DELETION
       vars.deletions.push(oldFiber)
     }

package/src/lib/render.js

@@ -1,33 +1,32 @@
 import { vars } from '../utils/index'
+import { workLoop } from './workers'
 
 /**
- * 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().
+ * Renders an element into the specified container or the default root element.
  */
 const render = (element, container) => {
   vars.wipRoot = {
     dom: vars.containerRoot || container,
-    props: {
-      children: [element],
-    },
+    props: { children: [element] },
     alternate: vars.currentRoot,
   }
+
   vars.deletions = []
   vars.nextUnitOfWork = vars.wipRoot
+  requestIdleCallback(workLoop)
 }
 
 /**
- * @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.
+ * Initializes the app with a root container.
  */
-const init = (root) => {
-  const rootElement = root || '__ryunix'
-  vars.containerRoot = document.getElementById(rootElement)
+const init = (rootId = '__ryunix') => {
+  const rootElement = document.getElementById(rootId)
+  if (!rootElement) {
+    console.error(`Root element with ID '${rootId}' not found.`)
+    return null
+  }
+
+  vars.containerRoot = rootElement
   return this
 }
 

package/src/lib/workers.js

@@ -3,15 +3,13 @@ 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
+ * Main work loop that processes the fiber tree using requestIdleCallback.
+ * It continues processing until all units of work are completed or the browser needs to yield.
+ * @param {IdleDeadline} deadline - Represents the time remaining for the browser to execute tasks before yielding.
  */
 const workLoop = (deadline) => {
   let shouldYield = false
+
   while (vars.nextUnitOfWork && !shouldYield) {
     vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork)
     shouldYield = deadline.timeRemaining() < 1
@@ -24,38 +22,28 @@ const workLoop = (deadline) => {
   requestIdleCallback(workLoop)
 }
 
+// Start the work loop for the first time
 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.
+ * Processes a unit of work in the fiber tree.
+ * Decides whether to update a function component or a host component (DOM element).
+ * @param {Object} fiber - The current fiber representing a component and its state in the virtual DOM tree.
+ * @returns {null} The next fiber to process, or undefined if there are no more.
  */
 const performUnitOfWork = (fiber) => {
   const isFunctionComponent = fiber.type instanceof Function
-  if (isFunctionComponent) {
-    updateFunctionComponent(fiber)
-  } else {
-    updateHostComponent(fiber)
-  }
-  if (fiber.child) {
-    return fiber.child
-  }
+  isFunctionComponent
+    ? updateFunctionComponent(fiber)
+    : updateHostComponent(fiber)
+
+  if (fiber.child) return fiber.child
   let nextFiber = fiber
   while (nextFiber) {
-    if (nextFiber.sibling) {
-      return nextFiber.sibling
-    }
+    if (nextFiber.sibling) return nextFiber.sibling
     nextFiber = nextFiber.parent
   }
-  return undefined
+  return null
 }
 
 export { performUnitOfWork, workLoop }

package/src/main.js

@@ -2,11 +2,9 @@ import Ryunix from './lib/index.js'
 export {
   useStore,
   useEffect,
-  useQuery,
   useRef,
   useMemo,
   useCallback,
-  useRouter,
   Fragment,
 } from './lib/index.js'
 

package/src/utils/index.js

@@ -3,12 +3,13 @@ const vars = {
   nextUnitOfWork: undefined,
   currentRoot: undefined,
   wipRoot: undefined,
-  deletions: undefined,
-  wipFiber: undefined,
-  hookIndex: undefined,
+  deletions: [],
+  workInProgressFiber: undefined,
+  hookIndex: 0,
+  errorBoundary: null, // New property to hold error boundary references
 }
 
-const reg = /[A-Z]/g
+const capitalLetterRegex = /[A-Z]/g
 
 const RYUNIX_TYPES = Object.freeze({
   TEXT_ELEMENT: Symbol('text.element'),
@@ -16,6 +17,7 @@ const RYUNIX_TYPES = Object.freeze({
   RYUNIX_MEMO: Symbol('ryunix.memo'),
   RYUNIX_URL_QUERY: Symbol('ryunix.urlQuery'),
   RYUNIX_REF: Symbol('ryunix.ref'),
+  RYUNIX_ERROR_BOUNDARY: Symbol('ryunix.errorBoundary'), // New Error Boundary Type
 })
 
 const STRINGS = Object.freeze({
@@ -33,9 +35,16 @@ const OLD_STRINGS = Object.freeze({
 })
 
 const EFFECT_TAGS = Object.freeze({
-  PLACEMENT: Symbol(),
-  UPDATE: Symbol(),
-  DELETION: Symbol(),
+  PLACEMENT: Symbol('placement'),
+  UPDATE: Symbol('update'),
+  DELETION: Symbol('deletion'),
 })
 
-export { vars, reg, RYUNIX_TYPES, EFFECT_TAGS, STRINGS, OLD_STRINGS }
+export {
+  vars,
+  capitalLetterRegex,
+  RYUNIX_TYPES,
+  EFFECT_TAGS,
+  STRINGS,
+  OLD_STRINGS,
+}