@unsetsoft/ryunixjs 1.1.5 → 1.1.6

package/src/lib/hooks.js

@@ -1,288 +0,0 @@
-import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
-import { isEqual } from 'lodash'
-import { createElement } 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.
- */
-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: oldHook ? [...oldHook.queue] : [],
-  }
-
-  hook.queue.forEach((action) => {
-    hook.state =
-      typeof action === STRINGS.function ? action(hook.state) : action
-  })
-
-  hook.queue = []
-
-  const setState = (action) => {
-    hook.queue.push(action)
-
-    vars.wipRoot = {
-      dom: vars.currentRoot.dom,
-      props: vars.currentRoot.props,
-      alternate: vars.currentRoot,
-    }
-    vars.nextUnitOfWork = vars.wipRoot
-    vars.deletions = []
-  }
-
-  if (vars.wipFiber && vars.wipFiber.hooks) {
-    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.
- * @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.
- */
-
-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,
-  }
-
-  if (!oldHook) {
-    // invoke callback if this is the first time
-    callback()
-  } else {
-    if (!isEqual(oldHook.deps, hook.deps)) {
-      callback()
-    }
-  }
-
-  if (vars.wipFiber.hooks) {
-    vars.wipFiber.hooks.push(hook)
-    vars.hookIndex++
-  }
-}
-
-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++
-  }
-
-  return hook.value
-}
-
-const useMemo = (comp, deps) => {
-  const oldHook =
-    vars.wipFiber.alternate &&
-    vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex]
-
-  const hook = {
-    type: RYUNIX_TYPES.RYUNIX_MEMO,
-    value: null,
-    deps,
-  }
-
-  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++
-  }
-
-  return hook.value
-}
-
-const useCallback = (callback, deps) => {
-  return useMemo(() => callback, deps)
-}
-
-/**
- * The `useQuery` function parses the query parameters from the URL and returns them as an object.
- * @returns An object containing key-value pairs of the query parameters from the URLSearchParams in
- * the current window's URL is being returned.
- */
-const useQuery = () => {
-  const searchParams = new URLSearchParams(window.location.search)
-  const query = {}
-  for (let [key, value] of searchParams.entries()) {
-    query[key] = value
-  }
-  return query
-}
-
-/**
- * useRouter is a routing function to manage navigation and route matching.
- *
- * This function handles client-side routing, URL updates, and component rendering based on defined routes.
- * It supports dynamic routes (e.g., "/user/:id") and allows navigation using links.
- *
- * @param {Array} routes - An array of route objects, each containing:
- *    - `path` (string): The URL path to match (supports dynamic segments like "/user/:id").
- *    - `component` (function): The component to render when the route matches.
- *    - `NotFound` (optional function): Component to render for unmatched routes (default 404 behavior).
- *
- * @returns {Object} - An object with:
- *    - `Children` (function): Returns the component that matches the current route, passing route parameters and query parameters as props.
- *    - `NavLink` (component): A link component to navigate within the application without refreshing the page.
- *
- * @example
- * // Define routes
- * const routes = [
- *   {
- *     path: "/",
- *     component: HomePage,
- *   },
- *   {
- *     path: "/user/:id",
- *     component: UserProfile,
- *   },
- *   {
- *     path: "*",
- *     NotFound: NotFoundPage,
- *   },
- * ];
- *
- * // Use the routing function
- * const { Children, NavLink } = useRouter(routes);
- *
- * // Render the matched component
- * const App = () => (
- *   <div>
- *     <NavLink to="/">Home</NavLink>
- *     <NavLink to="/user/123">User Profile</NavLink>
- *     <Children />
- *   </div>
- * );
- *
- * // Example: UserProfile Component that receives route parameters
- * const UserProfile = ({ params, query }) => {
- *   return (
- *     <div>
- *       <h1>User ID: {params.id}</h1>
- *       <p>Query Parameters: {JSON.stringify(query)}</p>
- *     </div>
- *   );
- * };
- */
-
-const useRouter = (routes) => {
-  const [location, setLocation] = useStore(window.location.pathname)
-
-  const navigate = (path) => {
-    window.history.pushState({}, '', path)
-    updateRoute(path)
-  }
-
-  const updateRoute = (path) => {
-    setLocation(path.split('?')[0])
-  }
-
-  useEffect(() => {
-    const onPopState = () => updateRoute(window.location.pathname)
-    window.addEventListener('popstate', onPopState)
-    return () => window.removeEventListener('popstate', onPopState)
-  }, [])
-
-  const findCurrentRoute = (routes, path) => {
-    const pathname = path.split('?')[0]
-
-    for (const { path: routePath, component } of routes) {
-      if (!routePath) continue
-
-      const keys = []
-      const pattern = new RegExp(
-        `^${routePath.replace(/:\w+/g, (match) => {
-          keys.push(match.substring(1)) // Extract only the name without ":" and add to keys
-          return '([^/]+)'
-        })}$`,
-      )
-
-      const match = pathname.match(pattern)
-      if (match) {
-        const params = keys.reduce((acc, key, index) => {
-          acc[key] = match[index + 1] // Match and assign the correct parameter value
-          return acc
-        }, {})
-        return { route: { component }, params }
-      }
-    }
-
-    // Return NotFound component if no match is found
-    const notFoundRoute = routes.find((route) => route.NotFound)
-    return notFoundRoute
-      ? { route: { component: notFoundRoute.NotFound }, params: {} }
-      : { route: { component: null }, params: {} }
-  }
-
-  const currentRouteData = findCurrentRoute(routes, location)
-  const Children = () => {
-    const query = useQuery()
-    return currentRouteData.route.component
-      ? currentRouteData.route.component({
-          params: currentRouteData.params,
-          query,
-        })
-      : null
-  }
-
-  const NavLink = ({ to, ...props }) => {
-    const handleClick = (e) => {
-      e.preventDefault()
-      navigate(to)
-    }
-    return createElement(
-      'a',
-      { href: to, onClick: handleClick, ...props },
-      props.children,
-    )
-  }
-
-  return { Children, NavLink, navigate }
-}
-
-export {
-  useStore,
-  useEffect,
-  useQuery,
-  useRef,
-  useMemo,
-  useCallback,
-  useRouter,
-}

package/src/lib/index.js

@@ -1,39 +0,0 @@
-import { createElement, cloneElement, Fragment } from './createElement'
-import { render, init } from './render'
-import {
-  useStore,
-  useEffect,
-  useQuery,
-  useRef,
-  useMemo,
-  useCallback,
-  useRouter,
-} 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 default {
-  createElement,
-  render,
-  init,
-  Fragment,
-  Dom,
-  Workers,
-  Reconciler,
-  Components,
-  Commits,
-}

package/src/lib/reconciler.js

@@ -1,69 +0,0 @@
-import { EFFECT_TAGS, vars } from '../utils/index'
-
-/**
- * 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 = null
-
-  const oldFibersMap = new Map()
-  while (oldFiber) {
-    const oldKey = oldFiber.props.key || oldFiber.type
-    oldFibersMap.set(oldKey, oldFiber)
-    oldFiber = oldFiber.sibling
-  }
-
-  while (index < elements.length) {
-    const element = elements[index]
-    const key = element.props.key || element.type
-    const oldFiber = oldFibersMap.get(key)
-
-    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,
-      }
-      oldFibersMap.delete(key)
-    } else if (element) {
-      newFiber = {
-        type: element.type,
-        props: element.props,
-        dom: undefined,
-        parent: wipFiber,
-        alternate: undefined,
-        effectTag: EFFECT_TAGS.PLACEMENT,
-      }
-    }
-
-    oldFibersMap.forEach((oldFiber) => {
-      oldFiber.effectTag = EFFECT_TAGS.DELETION
-      vars.deletions.push(oldFiber)
-    })
-
-    if (index === 0) {
-      wipFiber.child = newFiber
-    } else if (prevSibling) {
-      prevSibling.sibling = newFiber
-    }
-
-    prevSibling = newFiber
-    index++
-  }
-}
-
-export { reconcileChildren }

package/src/lib/render.js

@@ -1,45 +0,0 @@
-import { vars } from '../utils/index'
-
-const clearContainer = (container) => {
-  while (container.firstChild) {
-    container.removeChild(container.firstChild)
-  }
-}
-
-/**
- * Renders an element into a container using a work-in-progress (WIP) root.
- * @function render
- * @param {Object|HTMLElement} element - The element to be rendered in the container. It can be a Ryunix component (custom element) or a standard DOM element.
- * @param {HTMLElement} container - The container where the element will be rendered. This parameter is optional if `createRoot()` is used beforehand to set up the container.
- * @description The function assigns the `container` to a work-in-progress root and sets up properties for reconciliation, including children and the reference to the current root.
- * It also clears any scheduled deletions and establishes the next unit of work for incremental rendering.
- */
-const render = (element, container) => {
-  vars.wipRoot = {
-    dom: vars.containerRoot || container,
-    props: {
-      children: [element],
-    },
-    alternate: vars.currentRoot,
-  }
-
-  vars.deletions = []
-  vars.nextUnitOfWork = vars.wipRoot
-}
-
-/**
- * Initializes the application by creating a reference to a DOM element with the specified ID and rendering the main component.
- * @function init
- * @param {Object} MainElement - The main component to render, typically the root component of the application.
- * @param {string} [root='__ryunix'] - The ID of the HTML element that serves as the container for the root element. Defaults to `'__ryunix'` if not provided.
- * @example
- * Ryunix.init(App, "__ryunix"); // Initializes and renders the App component into the <div id="__ryunix"></div> element.
- * @description This function retrieves the container element by its ID and invokes the `render` function to render the main component into it.
- */
-const init = (MainElement, root = '__ryunix') => {
-  vars.containerRoot = document.getElementById(root)
-
-  render(MainElement, vars.containerRoot)
-}
-
-export { render, init }

package/src/lib/workers.js

@@ -1,61 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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_ELEMENT: Symbol('ryunix.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 }