@unsetsoft/ryunixjs 0.4.10-nightly.0 → 0.4.11-nightly.0

package/README.md

@@ -2,10 +2,9 @@
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FUnSetSoft%2FRyunixjs%2Ftree%2Fmaster%2Fvercel%2Fryunix-jsx&project-name=ryunix-jsx-project&repository-name=ryunix-jsx-project)
 
-
 ## What is RyunixJS?
 
-Is a ReactJS Clone! Even lighter, however, at a very early stage for production use. 
+Is a ReactJS Clone! Even lighter, however, at a very early stage for production use.
 
 ## Usage
 

package/dist/Ryunix.js

@@ -17,17 +17,17 @@
   const reg = /[A-Z]/g;
 
   const RYUNIX_TYPES = Object.freeze({
-    TEXT_ELEMENT: Symbol("text.element"),
-    RYUNIX_EFFECT: Symbol("ryunix.effect"),
-    RYUNIX_CONTEXT: Symbol("ryunix.context"),
+    TEXT_ELEMENT: Symbol('text.element'),
+    RYUNIX_EFFECT: Symbol('ryunix.effect'),
+    RYUNIX_CONTEXT: Symbol('ryunix.context'),
   });
 
   const STRINGS = Object.freeze({
-    object: "object",
-    function: "function",
-    style: "style",
-    className: "className",
-    children: "children",
+    object: 'object',
+    function: 'function',
+    style: 'style',
+    className: 'className',
+    children: 'children',
   });
 
   const EFFECT_TAGS = Object.freeze({
@@ -61,10 +61,10 @@
         children: children
           .flat()
           .map((child) =>
-            typeof child === STRINGS.object ? child : createTextElement(child)
+            typeof child === STRINGS.object ? child : createTextElement(child),
           ),
       },
-    };
+    }
   };
 
   /**
@@ -81,17 +81,17 @@
         nodeValue: text,
         children: [],
       },
-    };
+    }
   };
 
   const Fragments = (props) => {
     if (props.style) {
-      throw new Error("The style attribute is not supported");
+      throw new Error('The style attribute is not supported')
     }
-    if (props.className === "") {
-      throw new Error("className cannot be empty.");
+    if (props.className === '') {
+      throw new Error('className cannot be empty.')
     }
-    return createElement("div", props, props.children);
+    return createElement('div', props, props.children)
   };
 
   /**
@@ -120,11 +120,11 @@
    * for the root element.
    */
   const init = (root) => {
-    const rootElement = root || "__ryunix";
+    const rootElement = root || '__ryunix';
     vars.containerRoot = document.getElementById(rootElement);
   };
 
-  const isEvent = (key) => key.startsWith("on");
+  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);
@@ -210,7 +210,7 @@
 
     vars.wipFiber.hooks.push(hook);
     vars.hookIndex++;
-    return [hook.state, setState];
+    return [hook.state, setState]
   };
 
   /**
@@ -262,7 +262,7 @@
 
     vars.wipFiber.hooks.push(hook);
 
-    return hook.query;
+    return hook.query
   };
 
   const Router = ({ path, component }) => {
@@ -273,44 +273,44 @@
         setCurrentPath(() => window.location.pathname);
       };
 
-      window.addEventListener("navigate", onLocationChange);
-      window.addEventListener("pushsatate", onLocationChange);
-      window.addEventListener("popstate", onLocationChange);
+      window.addEventListener('navigate', onLocationChange);
+      window.addEventListener('pushsatate', onLocationChange);
+      window.addEventListener('popstate', onLocationChange);
 
       return () => {
-        window.removeEventListener("navigate", onLocationChange);
-        window.removeEventListener("pushsatate", onLocationChange);
-        window.removeEventListener("popstate", onLocationChange);
-      };
+        window.removeEventListener('navigate', onLocationChange);
+        window.removeEventListener('pushsatate', onLocationChange);
+        window.removeEventListener('popstate', onLocationChange);
+      }
     }, [currentPath]);
 
-    return currentPath === path ? component() : null;
+    return currentPath === path ? component() : null
   };
 
   const Navigate = (props) => {
     if (props.style) {
       throw new Error(
-        "The style attribute is not supported on internal components, use className."
-      );
+        'The style attribute is not supported on internal components, use className.',
+      )
     }
-    if (props.to === "") {
-      throw new Error("'to=' cannot be empty.");
+    if (props.to === '') {
+      throw new Error("'to=' cannot be empty.")
     }
-    if (props.className === "") {
-      throw new Error("className cannot be empty.");
+    if (props.className === '') {
+      throw new Error('className cannot be empty.')
     }
-    if (props.label === "" && !props.children) {
-      throw new Error("'label=' cannot be empty.");
+    if (props.label === '' && !props.children) {
+      throw new Error("'label=' cannot be empty.")
     }
 
     if (!props.to) {
-      throw new Error("Missig 'to' param.");
+      throw new Error("Missig 'to' param.")
     }
     const preventReload = (event) => {
       event.preventDefault();
       if (window.location.pathname !== props.to) {
-        window.history.pushState({}, "", props.to);
-        const navigationEvent = new Event("pushsatate");
+        window.history.pushState({}, '', props.to);
+        const navigationEvent = new Event('pushsatate');
         window.dispatchEvent(navigationEvent);
       }
     };
@@ -323,7 +323,7 @@
 
     const children = props.label ? props.label : props.children;
 
-    return createElement("a", anchor, children);
+    return createElement('a', anchor, children)
   };
 
   /**
@@ -339,12 +339,12 @@
   const createDom = (fiber) => {
     const dom =
       fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
-        ? document.createTextNode("")
+        ? document.createTextNode('')
         : document.createElement(fiber.type);
 
     updateDom(dom, {}, fiber.props);
 
-    return dom;
+    return dom
   };
 
   /**
@@ -367,7 +367,7 @@
       .filter(isProperty)
       .filter(isGone(nextProps))
       .forEach((name) => {
-        dom[name] = "";
+        dom[name] = '';
       });
 
     Object.keys(nextProps)
@@ -377,8 +377,8 @@
         if (name === STRINGS.style) {
           DomStyle(dom, nextProps.style);
         } else if (name === STRINGS.className) {
-          if (nextProps.className === "") {
-            throw new Error("className cannot be empty.");
+          if (nextProps.className === '') {
+            throw new Error('className cannot be empty.')
           }
           prevProps.className &&
             dom.classList.remove(...prevProps.className.split(/\s+/));
@@ -400,11 +400,11 @@
   const DomStyle = (dom, style) => {
     dom.style = Object.keys(style).reduce((acc, styleName) => {
       const key = styleName.replace(reg, function (v) {
-        return "-" + v.toLowerCase();
+        return '-' + v.toLowerCase()
       });
       acc += `${key}: ${style[styleName]};`;
-      return acc;
-    }, "");
+      return acc
+    }, '');
   };
 
   var Dom = /*#__PURE__*/Object.freeze({
@@ -433,7 +433,7 @@
    */
   const commitWork = (fiber) => {
     if (!fiber) {
-      return;
+      return
     }
 
     let domParentFiber = fiber.parent;
@@ -456,7 +456,7 @@
     } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
       cancelEffects(fiber);
       commitDeletion(fiber, domParent);
-      return;
+      return
     }
 
     commitWork(fiber.child);
@@ -628,12 +628,12 @@
       updateHostComponent(fiber);
     }
     if (fiber.child) {
-      return fiber.child;
+      return fiber.child
     }
     let nextFiber = fiber;
     while (nextFiber) {
       if (nextFiber.sibling) {
-        return nextFiber.sibling;
+        return nextFiber.sibling
       }
       nextFiber = nextFiber.parent;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.4.10-nightly.0",
+  "version": "0.4.11-nightly.0",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,
@@ -10,7 +10,7 @@
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
     "build": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
-    "prepublish": "npm run build",
+    "prepublishOnly": "npm run build",
     "postinstall": "npm run build",
     "nightly:release": "npm publish --tag nightly",
     "release": "npm publish"
@@ -27,4 +27,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   }
-}
+}

package/src/lib/commits.js

@@ -1,16 +1,16 @@
-import { updateDom } from "./dom";
-import { cancelEffects, runEffects } from "./effects";
-import { EFFECT_TAGS, vars } from "../utils/index";
+import { updateDom } from './dom'
+import { cancelEffects, runEffects } from './effects'
+import { EFFECT_TAGS, vars } from '../utils/index'
 
 /**
  * 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;
-};
+  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.
@@ -21,35 +21,35 @@ const commitRoot = () => {
  */
 const commitWork = (fiber) => {
   if (!fiber) {
-    return;
+    return
   }
 
-  let domParentFiber = fiber.parent;
+  let domParentFiber = fiber.parent
   while (!domParentFiber.dom) {
-    domParentFiber = domParentFiber.parent;
+    domParentFiber = domParentFiber.parent
   }
-  const domParent = domParentFiber.dom;
+  const domParent = domParentFiber.dom
 
   if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
     if (fiber.dom != null) {
-      domParent.appendChild(fiber.dom);
+      domParent.appendChild(fiber.dom)
     }
-    runEffects(fiber);
+    runEffects(fiber)
   } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
-    cancelEffects(fiber);
+    cancelEffects(fiber)
     if (fiber.dom != null) {
-      updateDom(fiber.dom, fiber.alternate.props, fiber.props);
+      updateDom(fiber.dom, fiber.alternate.props, fiber.props)
     }
-    runEffects(fiber);
+    runEffects(fiber)
   } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
-    cancelEffects(fiber);
-    commitDeletion(fiber, domParent);
-    return;
+    cancelEffects(fiber)
+    commitDeletion(fiber, domParent)
+    return
   }
 
-  commitWork(fiber.child);
-  commitWork(fiber.sibling);
-};
+  commitWork(fiber.child)
+  commitWork(fiber.sibling)
+}
 
 /**
  * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
@@ -60,10 +60,10 @@ const commitWork = (fiber) => {
  */
 const commitDeletion = (fiber, domParent) => {
   if (fiber.dom) {
-    domParent.removeChild(fiber.dom);
+    domParent.removeChild(fiber.dom)
   } else {
-    commitDeletion(fiber.child, domParent);
+    commitDeletion(fiber.child, domParent)
   }
-};
+}
 
-export { commitDeletion, commitWork, commitRoot };
+export { commitDeletion, commitWork, commitRoot }

package/src/lib/components.js

@@ -1,6 +1,6 @@
-import { createDom } from "./dom";
-import { reconcileChildren } from "./reconciler";
-import { vars } from "../utils/index";
+import { createDom } from './dom'
+import { reconcileChildren } from './reconciler'
+import { vars } from '../utils/index'
 
 /**
  * This function updates a function component by setting up a work-in-progress fiber, resetting the
@@ -10,12 +10,12 @@ import { vars } from "../utils/index";
  * 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);
-};
+  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.
@@ -25,9 +25,9 @@ const updateFunctionComponent = (fiber) => {
  */
 const updateHostComponent = (fiber) => {
   if (!fiber.dom) {
-    fiber.dom = createDom(fiber);
+    fiber.dom = createDom(fiber)
   }
-  reconcileChildren(fiber, fiber.props.children.flat());
-};
+  reconcileChildren(fiber, fiber.props.children.flat())
+}
 
-export { updateFunctionComponent, updateHostComponent };
+export { updateFunctionComponent, updateHostComponent }

package/src/lib/createElement.js

@@ -1,4 +1,4 @@
-import { RYUNIX_TYPES, STRINGS } from "../utils/index";
+import { RYUNIX_TYPES, STRINGS } from '../utils/index'
 
 /**
  * The function creates a new element with the given type, props, and children.
@@ -25,11 +25,11 @@ const createElement = (type, props, ...children) => {
       children: children
         .flat()
         .map((child) =>
-          typeof child === STRINGS.object ? child : createTextElement(child)
+          typeof child === STRINGS.object ? child : createTextElement(child),
         ),
     },
-  };
-};
+  }
+}
 
 /**
  * The function creates a text element with a given text value.
@@ -45,19 +45,17 @@ const createTextElement = (text) => {
       nodeValue: text,
       children: [],
     },
-  };
-};
+  }
+}
 
 const Fragments = (props) => {
   if (props.style) {
-    throw new Error("The style attribute is not supported");
+    throw new Error('The style attribute is not supported')
   }
-  if (props.className === "") {
-    throw new Error("className cannot be empty.");
+  if (props.className === '') {
+    throw new Error('className cannot be empty.')
   }
-  return createElement("div", props, props.children);
-};
-
-
+  return createElement('div', props, props.children)
+}
 
-export { createElement, createTextElement, Fragments };
+export { createElement, createTextElement, Fragments }

package/src/lib/dom.js

@@ -1,5 +1,5 @@
-import { isEvent, isGone, isNew, isProperty } from "./effects";
-import { RYUNIX_TYPES, STRINGS, reg } from "../utils/index";
+import { isEvent, isGone, isNew, isProperty } from './effects'
+import { RYUNIX_TYPES, STRINGS, reg } from '../utils/index'
 
 /**
  * The function creates a new DOM element based on the given fiber object and updates its properties.
@@ -14,13 +14,13 @@ import { RYUNIX_TYPES, STRINGS, reg } from "../utils/index";
 const createDom = (fiber) => {
   const dom =
     fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
-      ? document.createTextNode("")
-      : document.createElement(fiber.type);
+      ? document.createTextNode('')
+      : document.createElement(fiber.type)
 
-  updateDom(dom, {}, fiber.props);
+  updateDom(dom, {}, fiber.props)
 
-  return dom;
-};
+  return dom
+}
 
 /**
  * The function updates the DOM by removing old event listeners and properties, and adding new ones
@@ -34,52 +34,52 @@ const updateDom = (dom, prevProps, nextProps) => {
     .filter(isEvent)
     .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
     .forEach((name) => {
-      const eventType = name.toLowerCase().substring(2);
-      dom.removeEventListener(eventType, prevProps[name]);
-    });
+      const eventType = name.toLowerCase().substring(2)
+      dom.removeEventListener(eventType, prevProps[name])
+    })
 
   Object.keys(prevProps)
     .filter(isProperty)
     .filter(isGone(nextProps))
     .forEach((name) => {
-      dom[name] = "";
-    });
+      dom[name] = ''
+    })
 
   Object.keys(nextProps)
     .filter(isProperty)
     .filter(isNew(prevProps, nextProps))
     .forEach((name) => {
       if (name === STRINGS.style) {
-        DomStyle(dom, nextProps.style);
+        DomStyle(dom, nextProps.style)
       } else if (name === STRINGS.className) {
-        if (nextProps.className === "") {
-          throw new Error("className cannot be empty.");
+        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+/));
+          dom.classList.remove(...prevProps.className.split(/\s+/))
+        dom.classList.add(...nextProps.className.split(/\s+/))
       } else {
-        dom[name] = nextProps[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]);
-    });
-};
+      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;
-  }, "");
-};
+      return '-' + v.toLowerCase()
+    })
+    acc += `${key}: ${style[styleName]};`
+    return acc
+  }, '')
+}
 
-export { DomStyle, createDom, updateDom };
+export { DomStyle, createDom, updateDom }

package/src/lib/effects.js

@@ -1,14 +1,14 @@
-import { RYUNIX_TYPES, STRINGS } from "../utils/index";
+import { RYUNIX_TYPES, STRINGS } from '../utils/index'
 
-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 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]);
+  prevDeps.some((dep, index) => dep !== nextDeps[index])
 
 /**
  * The function cancels all effect hooks in a given fiber.
@@ -22,10 +22,10 @@ const cancelEffects = (fiber) => {
     fiber.hooks
       .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
       .forEach((effectHook) => {
-        effectHook.cancel();
-      });
+        effectHook.cancel()
+      })
   }
-};
+}
 
 /**
  * The function runs all effect hooks in a given fiber.
@@ -39,10 +39,10 @@ const runEffects = (fiber) => {
     fiber.hooks
       .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
       .forEach((effectHook) => {
-        effectHook.cancel = effectHook.effect();
-      });
+        effectHook.cancel = effectHook.effect()
+      })
   }
-};
+}
 
 export {
   runEffects,
@@ -52,4 +52,4 @@ export {
   isNew,
   isGone,
   hasDepsChanged,
-};
+}

package/src/lib/hooks.js

@@ -1,6 +1,5 @@
-import { hasDepsChanged } from "./effects";
-import { RYUNIX_TYPES, STRINGS, vars } from "../utils/index";
-
+import { hasDepsChanged } from './effects'
+import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
 
 /**
  * @description The function creates a state.
@@ -12,17 +11,17 @@ const useStore = (initial) => {
   const oldHook =
     vars.wipFiber.alternate &&
     vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex];
+    vars.wipFiber.alternate.hooks[vars.hookIndex]
   const hook = {
     state: oldHook ? oldHook.state : initial,
     queue: [],
-  };
+  }
 
-  const actions = oldHook ? oldHook.queue : [];
+  const actions = oldHook ? oldHook.queue : []
   actions.forEach((action) => {
     hook.state =
-      typeof action === STRINGS.function ? action(hook.state) : action;
-  });
+      typeof action === STRINGS.function ? action(hook.state) : action
+  })
 
   /**
    * The function `setState` updates the state of a component in Ryunix by adding an action to a queue
@@ -32,20 +31,20 @@ const useStore = (initial) => {
    * that needs to be applied to the component's state.
    */
   const setState = (action) => {
-    hook.queue.push(action);
+    hook.queue.push(action)
     vars.wipRoot = {
       dom: vars.currentRoot.dom,
       props: vars.currentRoot.props,
       alternate: vars.currentRoot,
-    };
-    vars.nextUnitOfWork = vars.wipRoot;
-    vars.deletions = [];
-  };
+    }
+    vars.nextUnitOfWork = vars.wipRoot
+    vars.deletions = []
+  }
 
-  vars.wipFiber.hooks.push(hook);
-  vars.hookIndex++;
-  return [hook.state, setState];
-};
+  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.
@@ -60,43 +59,43 @@ const useEffect = (effect, deps) => {
   const oldHook =
     vars.wipFiber.alternate &&
     vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex];
+    vars.wipFiber.alternate.hooks[vars.hookIndex]
 
-  const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps);
+  const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps)
 
   const hook = {
     tag: RYUNIX_TYPES.RYUNIX_EFFECT,
     effect: hasChanged ? effect : null,
     cancel: hasChanged && oldHook && oldHook.cancel,
     deps,
-  };
+  }
 
-  vars.wipFiber.hooks.push(hook);
-  vars.hookIndex++;
-};
+  vars.wipFiber.hooks.push(hook)
+  vars.hookIndex++
+}
 
 const useQuery = () => {
-  vars.hookIndex++;
+  vars.hookIndex++
 
   const oldHook =
     vars.wipFiber.alternate &&
     vars.wipFiber.alternate.hooks &&
-    vars.wipFiber.alternate.hooks[vars.hookIndex];
+    vars.wipFiber.alternate.hooks[vars.hookIndex]
 
-  const hasOld = oldHook ? oldHook : undefined;
+  const hasOld = oldHook ? oldHook : undefined
 
-  const urlSearchParams = new URLSearchParams(window.location.search);
-  const params = Object.fromEntries(urlSearchParams.entries());
-  const Query = hasOld ? hasOld : params;
+  const urlSearchParams = new URLSearchParams(window.location.search)
+  const params = Object.fromEntries(urlSearchParams.entries())
+  const Query = hasOld ? hasOld : params
 
   const hook = {
     tag: RYUNIX_TYPES.RYUNIX_EFFECT,
     query: Query,
-  };
+  }
 
-  vars.wipFiber.hooks.push(hook);
+  vars.wipFiber.hooks.push(hook)
 
-  return hook.query;
-};
+  return hook.query
+}
 
-export { useStore, useEffect, useQuery };
+export { useStore, useEffect, useQuery }

package/src/lib/index.js

@@ -1,14 +1,14 @@
-import { createElement, Fragments } from "./createElement";
-import { render, init } from "./render";
-import { useStore, useEffect, useQuery } from "./hooks";
-import { Router, Navigate } from "./navigation";
-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";
+import { createElement, Fragments } from './createElement'
+import { render, init } from './render'
+import { useStore, useEffect, useQuery } from './hooks'
+import { Router, Navigate } from './navigation'
+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, Fragments, Router, Navigate };
+export { useStore, useEffect, useQuery, Fragments, Router, Navigate }
 
 export default {
   createElement,
@@ -20,4 +20,4 @@ export default {
   Reconciler,
   Components,
   Commits,
-};
+}

package/src/lib/navigation.js

@@ -1,64 +1,64 @@
-import { useStore, useEffect } from "./hooks";
-import { createElement } from "./createElement";
+import { useStore, useEffect } from './hooks'
+import { createElement } from './createElement'
 const Router = ({ path, component }) => {
-  const [currentPath, setCurrentPath] = useStore(window.location.pathname);
+  const [currentPath, setCurrentPath] = useStore(window.location.pathname)
 
   useEffect(() => {
     const onLocationChange = () => {
-      setCurrentPath(() => window.location.pathname);
-    };
+      setCurrentPath(() => window.location.pathname)
+    }
 
-    window.addEventListener("navigate", onLocationChange);
-    window.addEventListener("pushsatate", onLocationChange);
-    window.addEventListener("popstate", onLocationChange);
+    window.addEventListener('navigate', onLocationChange)
+    window.addEventListener('pushsatate', onLocationChange)
+    window.addEventListener('popstate', onLocationChange)
 
     return () => {
-      window.removeEventListener("navigate", onLocationChange);
-      window.removeEventListener("pushsatate", onLocationChange);
-      window.removeEventListener("popstate", onLocationChange);
-    };
-  }, [currentPath]);
+      window.removeEventListener('navigate', onLocationChange)
+      window.removeEventListener('pushsatate', onLocationChange)
+      window.removeEventListener('popstate', onLocationChange)
+    }
+  }, [currentPath])
 
-  return currentPath === path ? component() : null;
-};
+  return currentPath === path ? component() : null
+}
 
 const Navigate = (props) => {
   if (props.style) {
     throw new Error(
-      "The style attribute is not supported on internal components, use className."
-    );
+      'The style attribute is not supported on internal components, use className.',
+    )
   }
-  if (props.to === "") {
-    throw new Error("'to=' cannot be empty.");
+  if (props.to === '') {
+    throw new Error("'to=' cannot be empty.")
   }
-  if (props.className === "") {
-    throw new Error("className cannot be empty.");
+  if (props.className === '') {
+    throw new Error('className cannot be empty.')
   }
-  if (props.label === "" && !props.children) {
-    throw new Error("'label=' cannot be empty.");
+  if (props.label === '' && !props.children) {
+    throw new Error("'label=' cannot be empty.")
   }
 
   if (!props.to) {
-    throw new Error("Missig 'to' param.");
+    throw new Error("Missig 'to' param.")
   }
   const preventReload = (event) => {
-    event.preventDefault();
+    event.preventDefault()
     if (window.location.pathname !== props.to) {
-      window.history.pushState({}, "", props.to);
-      const navigationEvent = new Event("pushsatate");
-      window.dispatchEvent(navigationEvent);
+      window.history.pushState({}, '', props.to)
+      const navigationEvent = new Event('pushsatate')
+      window.dispatchEvent(navigationEvent)
     }
-  };
+  }
 
   const anchor = {
     href: props.to,
     onClick: preventReload,
     ...props,
-  };
+  }
 
-  const children = props.label ? props.label : props.children;
+  const children = props.label ? props.label : props.children
 
-  return createElement("a", anchor, children);
-};
+  return createElement('a', anchor, children)
+}
 
-export { Router, Navigate };
+export { Router, Navigate }

package/src/lib/reconciler.js

@@ -1,4 +1,4 @@
-import { EFFECT_TAGS, vars } from "../utils/index";
+import { EFFECT_TAGS, vars } from '../utils/index'
 
 /**
  * This function reconciles the children of a fiber node with a new set of elements, creating new
@@ -10,15 +10,15 @@ import { EFFECT_TAGS, vars } from "../utils/index";
  * fiber's subtree
  */
 const reconcileChildren = (wipFiber, elements) => {
-  let index = 0;
-  let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
-  let prevSibling;
+  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 element = elements[index]
+    let newFiber
 
-    const sameType = oldFiber && element && element.type == oldFiber.type;
+    const sameType = oldFiber && element && element.type == oldFiber.type
 
     if (sameType) {
       newFiber = {
@@ -28,7 +28,7 @@ const reconcileChildren = (wipFiber, elements) => {
         parent: wipFiber,
         alternate: oldFiber,
         effectTag: EFFECT_TAGS.UPDATE,
-      };
+      }
     }
     if (element && !sameType) {
       newFiber = {
@@ -38,25 +38,25 @@ const reconcileChildren = (wipFiber, elements) => {
         parent: wipFiber,
         alternate: null,
         effectTag: EFFECT_TAGS.PLACEMENT,
-      };
+      }
     }
     if (oldFiber && !sameType) {
-      oldFiber.effectTag = EFFECT_TAGS.DELETION;
-      vars.deletions.push(oldFiber);
+      oldFiber.effectTag = EFFECT_TAGS.DELETION
+      vars.deletions.push(oldFiber)
     }
 
     if (oldFiber) {
-      oldFiber = oldFiber.sibling;
+      oldFiber = oldFiber.sibling
     }
 
     if (index === 0) {
-      wipFiber.child = newFiber;
+      wipFiber.child = newFiber
     } else if (element) {
-      prevSibling.sibling = newFiber;
+      prevSibling.sibling = newFiber
     }
 
-    prevSibling = newFiber;
-    index++;
+    prevSibling = newFiber
+    index++
   }
-};
-export { reconcileChildren };
+}
+export { reconcileChildren }

package/src/lib/render.js

@@ -1,4 +1,4 @@
-import { vars } from "../utils/index";
+import { vars } from '../utils/index'
 
 /**
  * The function renders an element into a container using a work-in-progress root.
@@ -14,10 +14,10 @@ const render = (element, container) => {
       children: [element],
     },
     alternate: vars.currentRoot,
-  };
-  vars.deletions = [];
-  vars.nextUnitOfWork = vars.wipRoot;
-};
+  }
+  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.
@@ -26,8 +26,8 @@ const render = (element, container) => {
  * for the root element.
  */
 const init = (root) => {
-  const rootElement = root || "__ryunix";
-  vars.containerRoot = document.getElementById(rootElement);
-};
+  const rootElement = root || '__ryunix'
+  vars.containerRoot = document.getElementById(rootElement)
+}
 
-export { render, init };
+export { render, init }

package/src/lib/workers.js

@@ -1,6 +1,6 @@
-import { commitRoot } from "./commits";
-import { updateFunctionComponent, updateHostComponent } from "./components";
-import { vars } from "../utils/index";
+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
@@ -11,20 +11,20 @@ import { vars } from "../utils/index";
  * is used to determine
  */
 const workLoop = (deadline) => {
-  let shouldYield = false;
+  let shouldYield = false
   while (vars.nextUnitOfWork && !shouldYield) {
-    vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork);
-    shouldYield = deadline.timeRemaining() < 1;
+    vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork)
+    shouldYield = deadline.timeRemaining() < 1
   }
 
   if (!vars.nextUnitOfWork && vars.wipRoot) {
-    commitRoot();
+    commitRoot()
   }
 
-  requestIdleCallback(workLoop);
-};
+  requestIdleCallback(workLoop)
+}
 
-requestIdleCallback(workLoop);
+requestIdleCallback(workLoop)
 
 /**
  * The function performs a unit of work by updating either a function component or a host component and
@@ -39,22 +39,22 @@ requestIdleCallback(workLoop);
  * 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;
+  const isFunctionComponent = fiber.type instanceof Function
   if (isFunctionComponent) {
-    updateFunctionComponent(fiber);
+    updateFunctionComponent(fiber)
   } else {
-    updateHostComponent(fiber);
+    updateHostComponent(fiber)
   }
   if (fiber.child) {
-    return fiber.child;
+    return fiber.child
   }
-  let nextFiber = fiber;
+  let nextFiber = fiber
   while (nextFiber) {
     if (nextFiber.sibling) {
-      return nextFiber.sibling;
+      return nextFiber.sibling
     }
-    nextFiber = nextFiber.parent;
+    nextFiber = nextFiber.parent
   }
-};
+}
 
-export { performUnitOfWork, workLoop };
+export { performUnitOfWork, workLoop }

package/src/main.js

@@ -1,4 +1,4 @@
-import Ryunix from "./lib/index.js";
+import Ryunix from './lib/index.js'
 export {
   useStore,
   useEffect,
@@ -6,8 +6,8 @@ export {
   Fragments,
   Navigate,
   Router,
-} from "./lib/index.js";
+} from './lib/index.js'
 
-window.Ryunix = Ryunix;
+window.Ryunix = Ryunix
 
-export default Ryunix;
+export default Ryunix

package/src/utils/index.js

@@ -6,28 +6,28 @@ const vars = {
   deletions: null,
   wipFiber: null,
   hookIndex: null,
-};
+}
 
-const reg = /[A-Z]/g;
+const reg = /[A-Z]/g
 
 const RYUNIX_TYPES = Object.freeze({
-  TEXT_ELEMENT: Symbol("text.element"),
-  RYUNIX_EFFECT: Symbol("ryunix.effect"),
-  RYUNIX_CONTEXT: Symbol("ryunix.context"),
-});
+  TEXT_ELEMENT: Symbol('text.element'),
+  RYUNIX_EFFECT: Symbol('ryunix.effect'),
+  RYUNIX_CONTEXT: Symbol('ryunix.context'),
+})
 
 const STRINGS = Object.freeze({
-  object: "object",
-  function: "function",
-  style: "style",
-  className: "className",
-  children: "children",
-});
+  object: 'object',
+  function: 'function',
+  style: 'style',
+  className: 'className',
+  children: 'children',
+})
 
 const EFFECT_TAGS = Object.freeze({
   PLACEMENT: Symbol(),
   UPDATE: Symbol(),
   DELETION: Symbol(),
-});
+})
 
-export { vars, reg, RYUNIX_TYPES, EFFECT_TAGS, STRINGS };
+export { vars, reg, RYUNIX_TYPES, EFFECT_TAGS, STRINGS }