@unsetsoft/ryunixjs 0.4.10 → 0.4.11-nightly.0

package/dist/Ryunix.js

@@ -1,13 +1,8 @@
-;(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined'
-    ? factory(exports)
-    : typeof define === 'function' && define.amd
-      ? define(['exports'], factory)
-      : ((global =
-          typeof globalThis !== 'undefined' ? globalThis : global || self),
-        factory((global.Ryunix = {})))
-})(this, function (exports) {
-  'use strict'
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}));
+})(this, (function (exports) { 'use strict';
 
   const vars = {
     containerRoot: null,
@@ -17,15 +12,15 @@
     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'),
-  })
+  });
 
   const STRINGS = Object.freeze({
     object: 'object',
@@ -33,13 +28,13 @@
     style: 'style',
     className: 'className',
     children: 'children',
-  })
+  });
 
   const EFFECT_TAGS = Object.freeze({
     PLACEMENT: Symbol(),
     UPDATE: Symbol(),
     DELETION: Symbol(),
-  })
+  });
 
   /**
    * The function creates a new element with the given type, props, and children.
@@ -70,7 +65,7 @@
           ),
       },
     }
-  }
+  };
 
   /**
    * The function creates a text element with a given text value.
@@ -87,7 +82,7 @@
         children: [],
       },
     }
-  }
+  };
 
   const Fragments = (props) => {
     if (props.style) {
@@ -97,7 +92,7 @@
       throw new Error('className cannot be empty.')
     }
     return createElement('div', props, props.children)
-  }
+  };
 
   /**
    * The function renders an element into a container using a work-in-progress root.
@@ -113,10 +108,10 @@
         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.
@@ -125,19 +120,19 @@
    * for the root element.
    */
   const init = (root) => {
-    const rootElement = root || '__ryunix'
-    vars.containerRoot = document.getElementById(rootElement)
-  }
-
-  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 rootElement = root || '__ryunix';
+    vars.containerRoot = document.getElementById(rootElement);
+  };
+
+  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.
@@ -149,14 +144,12 @@
   const cancelEffects = (fiber) => {
     if (fiber.hooks) {
       fiber.hooks
-        .filter(
-          (hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel,
-        )
+        .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.
@@ -168,14 +161,12 @@
   const runEffects = (fiber) => {
     if (fiber.hooks) {
       fiber.hooks
-        .filter(
-          (hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect,
-        )
+        .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
         .forEach((effectHook) => {
-          effectHook.cancel = effectHook.effect()
-        })
+          effectHook.cancel = effectHook.effect();
+        });
     }
-  }
+  };
 
   /**
    * @description The function creates a state.
@@ -187,17 +178,17 @@
     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
@@ -207,20 +198,20 @@
      * 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++
+    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.
@@ -235,66 +226,66 @@
     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
-  }
+  };
 
   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)
+        window.removeEventListener('navigate', onLocationChange);
+        window.removeEventListener('pushsatate', onLocationChange);
+        window.removeEventListener('popstate', onLocationChange);
       }
-    }, [currentPath])
+    }, [currentPath]);
 
     return currentPath === path ? component() : null
-  }
+  };
 
   const Navigate = (props) => {
     if (props.style) {
@@ -316,24 +307,24 @@
       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)
-  }
+  };
 
   /**
    * The function creates a new DOM element based on the given fiber object and updates its properties.
@@ -349,12 +340,12 @@
     const dom =
       fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
         ? document.createTextNode('')
-        : document.createElement(fiber.type)
+        : document.createElement(fiber.type);
 
-    updateDom(dom, {}, fiber.props)
+    updateDom(dom, {}, fiber.props);
 
     return dom
-  }
+  };
 
   /**
    * The function updates the DOM by removing old event listeners and properties, and adding new ones
@@ -366,74 +357,72 @@
   const updateDom = (dom, prevProps, nextProps) => {
     Object.keys(prevProps)
       .filter(isEvent)
-      .filter(
-        (key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key),
-      )
+      .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.')
           }
           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]};`
+      });
+      acc += `${key}: ${style[styleName]};`;
       return acc
-    }, '')
-  }
+    }, '');
+  };
 
-  var Dom = /*#__PURE__*/ Object.freeze({
+  var Dom = /*#__PURE__*/Object.freeze({
     __proto__: null,
     DomStyle: DomStyle,
     createDom: createDom,
-    updateDom: updateDom,
-  })
+    updateDom: updateDom
+  });
 
   /**
    * 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.
@@ -447,32 +436,32 @@
       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)
+      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
@@ -483,18 +472,18 @@
    */
   const commitDeletion = (fiber, domParent) => {
     if (fiber.dom) {
-      domParent.removeChild(fiber.dom)
+      domParent.removeChild(fiber.dom);
     } else {
-      commitDeletion(fiber.child, domParent)
+      commitDeletion(fiber.child, domParent);
     }
-  }
+  };
 
-  var Commits = /*#__PURE__*/ Object.freeze({
+  var Commits = /*#__PURE__*/Object.freeze({
     __proto__: null,
     commitDeletion: commitDeletion,
     commitRoot: commitRoot,
-    commitWork: commitWork,
-  })
+    commitWork: commitWork
+  });
 
   /**
    * This function reconciles the children of a fiber node with a new set of elements, creating new
@@ -506,15 +495,15 @@
    * 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 = {
@@ -524,7 +513,7 @@
           parent: wipFiber,
           alternate: oldFiber,
           effectTag: EFFECT_TAGS.UPDATE,
-        }
+        };
       }
       if (element && !sameType) {
         newFiber = {
@@ -534,32 +523,32 @@
           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++;
     }
-  }
+  };
 
-  var Reconciler = /*#__PURE__*/ Object.freeze({
+  var Reconciler = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    reconcileChildren: reconcileChildren,
-  })
+    reconcileChildren: reconcileChildren
+  });
 
   /**
    * This function updates a function component by setting up a work-in-progress fiber, resetting the
@@ -569,12 +558,12 @@
    * 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.
@@ -584,16 +573,16 @@
    */
   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());
+  };
 
-  var Components = /*#__PURE__*/ Object.freeze({
+  var Components = /*#__PURE__*/Object.freeze({
     __proto__: null,
     updateFunctionComponent: updateFunctionComponent,
-    updateHostComponent: updateHostComponent,
-  })
+    updateHostComponent: updateHostComponent
+  });
 
   /**
    * This function uses requestIdleCallback to perform work on a fiber tree until it is complete or the
@@ -604,20 +593,20 @@
    * 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
@@ -632,29 +621,29 @@
    * 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
     }
-    let nextFiber = fiber
+    let nextFiber = fiber;
     while (nextFiber) {
       if (nextFiber.sibling) {
         return nextFiber.sibling
       }
-      nextFiber = nextFiber.parent
+      nextFiber = nextFiber.parent;
     }
-  }
+  };
 
-  var Workers = /*#__PURE__*/ Object.freeze({
+  var Workers = /*#__PURE__*/Object.freeze({
     __proto__: null,
     performUnitOfWork: performUnitOfWork,
-    workLoop: workLoop,
-  })
+    workLoop: workLoop
+  });
 
   var Ryunix = {
     createElement,
@@ -666,17 +655,18 @@
     Reconciler,
     Components,
     Commits,
-  }
+  };
+
+  window.Ryunix = Ryunix;
 
-  window.Ryunix = Ryunix
+  exports.Fragments = Fragments;
+  exports.Navigate = Navigate;
+  exports.Router = Router;
+  exports.default = Ryunix;
+  exports.useEffect = useEffect;
+  exports.useQuery = useQuery;
+  exports.useStore = useStore;
 
-  exports.Fragments = Fragments
-  exports.Navigate = Navigate
-  exports.Router = Router
-  exports.default = Ryunix
-  exports.useEffect = useEffect
-  exports.useQuery = useQuery
-  exports.useStore = useStore
+  Object.defineProperty(exports, '__esModule', { value: true });
 
-  Object.defineProperty(exports, '__esModule', { value: true })
-})
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.4.10",
+  "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"
   }
-}
+}