@unsetsoft/ryunixjs 1.1.7-canary.63 → 1.1.7-canary.65

package/dist/Ryunix.js

@@ -51,35 +51,6 @@
     NO_EFFECT: Symbol('ryunix.reconciler.status.no_efect').toString(),
   });
 
-  const matchPath = (pattern, path) => {
-    const patternSegments = pattern.split('/').filter(Boolean);
-    const pathSegments = path.split('/').filter(Boolean);
-
-    if (pattern === '*') return {}
-
-    if (patternSegments.length !== pathSegments.length) return null
-
-    const params = {};
-
-    for (let i = 0; i < patternSegments.length; i++) {
-      const pSeg = patternSegments[i];
-      const pathSeg = pathSegments[i];
-
-      if (pSeg.startsWith(':')) {
-        params[pSeg.slice(1)] = decodeURIComponent(pathSeg);
-      } else if (pSeg !== pathSeg) {
-        return null
-      }
-    }
-
-    return params
-  };
-
-  const parseQuery = (search) => {
-    if (!search) return {}
-    return Object.fromEntries(new URLSearchParams(search))
-  };
-
   /**
    * The function creates a new element with the given type, props, and children.
    * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
@@ -128,7 +99,8 @@
     }
   };
 
-  const Fragments = (props) => props.children;
+  const Fragment = (props) =>
+    createElement(RYUNIX_TYPES.RYUNIX_FRAGMENT, {}, ...props.children);
 
   const isEvent = (key) => key.startsWith('on');
   const isProperty = (key) => key !== STRINGS.children && !isEvent(key);
@@ -385,6 +357,207 @@
     }
   };
 
+  /**
+   * This function updates a function component by setting up a work-in-progress fiber, resetting the
+   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
+   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
+   * contains information about the component, its props, state, and children. In this function, it is
+   * 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);
+  };
+
+  /**
+   * This function updates a host component's DOM element and reconciles its children.
+   * @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 other
+   * fibers in the tree.
+   */
+  const updateHostComponent = (fiber) => {
+    if (fiber.type === RYUNIX_TYPES.RYUNIX_FRAGMENT) {
+      reconcileChildren(fiber, fiber.props.children.flat());
+    } else {
+      if (!fiber.dom) {
+        fiber.dom = createDom(fiber);
+      }
+      reconcileChildren(fiber, fiber.props.children.flat());
+    }
+  };
+
+  /* Internal components*/
+
+  /**
+   * The function `optimizationImageApi` optimizes image URLs by adding query parameters for width,
+   * height, quality, and extension, and handles local and remote image sources.
+   * @returns The function `optimizationImageApi` returns either the original `src` if it is a local
+   * image and the page is being run on localhost, or it returns a modified image URL with optimization
+   * parameters added if the `src` is not local.
+   */
+  const optimizationImageApi = ({ src, props }) => {
+    const query = new URLSearchParams();
+    const apiEndpoint = 'https://image.unsetsoft.com';
+
+    const isLocal = !src.startsWith('http') || !src.startsWith('https');
+
+    if (props.width) query.set('width', props.width);
+    if (props.height) query.set('width', props.height);
+    if (props.quality) query.set('quality', props.quality);
+
+    const extension = props.extension ? `@${props.extension}` : '';
+
+    const localhost =
+      window.location.origin === 'http://localhost:3000' ||
+      window.location.origin === 'http://localhost:5173' ||
+      window.location.origin === 'http://localhost:4173';
+
+    if (isLocal) {
+      if (localhost) {
+        console.warn(
+          'Image optimizations only work with full links and must not contain localhost.',
+        );
+        return src
+      }
+
+      return `${window.location.origin}/${src}`
+    }
+
+    return `${apiEndpoint}/image/${src}${extension}?${query.toString()}`
+  };
+
+  /**
+   * The `Image` function in JavaScript optimizes image loading based on a specified optimization flag.
+   * @returns An `<img>` element is being returned with the specified `src` and other props passed to the
+   * `Image` component. The `src` is either the original `src` value or the result of calling
+   * `optimizationImageApi` function with `src` and `props` if `optimization` is set to 'true'.
+   */
+  const Image = ({ src, ...props }) => {
+    const optimization = props.optimization === 'true' ? true : false;
+
+    const url = optimization
+      ? optimizationImageApi({
+          src,
+          props,
+        })
+      : src;
+
+    const ImageProps = {
+      src: url,
+      props,
+    };
+
+    return createElement('img', ImageProps, null)
+  };
+
+  /**
+   * 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 `null` 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;
+    }
+  };
+
+  const scheduleWork = (root) => {
+    vars.nextUnitOfWork = root;
+    vars.wipRoot = root;
+    vars.deletions = [];
+
+    vars.hookIndex = 0;
+    vars.effects = [];
+    requestIdleCallback(workLoop);
+  };
+
+  /**
+   * 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: container,
+      props: {
+        children: [element],
+      },
+      alternate: vars.currentRoot,
+    };
+
+    vars.nextUnitOfWork = vars.wipRoot;
+    vars.deletions = [];
+    scheduleWork(vars.wipRoot);
+    return 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);
+
+    const renderProcess = render(MainElement, vars.containerRoot);
+
+    return renderProcess
+  };
+
   /**
    * @description The function creates a state.
    * @param initial - The initial value of the state for the hook.
@@ -725,279 +898,17 @@
     useStore: useStore
   });
 
-  /**
-   * This function updates a function component by setting up a work-in-progress fiber, resetting the
-   * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
-   * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
-   * contains information about the component, its props, state, and children. In this function, it is
-   * 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);
-  };
-
-  /**
-   * This function updates a host component's DOM element and reconciles its children.
-   * @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 other
-   * fibers in the tree.
-   */
-  const updateHostComponent = (fiber) => {
-    if (!fiber.dom) {
-      fiber.dom = createDom(fiber);
-    }
-    reconcileChildren(fiber, fiber.props.children.flat());
-  };
-
-  /* Built-in components */
-
-  /**
-   * The function `optimizationImageApi` optimizes image URLs by adding query parameters for width,
-   * height, quality, and extension, and handles local and remote image sources.
-   * @returns The function `optimizationImageApi` returns either the original `src` if it is a local
-   * image and the page is being run on localhost, or it returns a modified image URL with optimization
-   * parameters added if the `src` is not local.
-   */
-  const optimizationImageApi = ({ src, props }) => {
-    const query = new URLSearchParams();
-    const apiEndpoint = 'https://image.unsetsoft.com';
-
-    const isLocal = !src.startsWith('http') || !src.startsWith('https');
-
-    if (props.width) query.set('width', props.width);
-    if (props.height) query.set('width', props.height);
-    if (props.quality) query.set('quality', props.quality);
-
-    const extension = props.extension ? `@${props.extension}` : '';
-
-    const localhost =
-      window.location.origin === 'http://localhost:3000' ||
-      window.location.origin === 'http://localhost:5173' ||
-      window.location.origin === 'http://localhost:4173';
-
-    if (isLocal) {
-      if (localhost) {
-        console.warn(
-          'Image optimizations only work with full links and must not contain localhost.',
-        );
-        return src
-      }
-
-      return `${window.location.origin}/${src}`
-    }
-
-    return `${apiEndpoint}/image/${src}${extension}?${query.toString()}`
-  };
-
-  /**
-   * The `Image` function in JavaScript optimizes image loading based on a specified optimization flag.
-   * @returns An `<img>` element is being returned with the specified `src` and other props passed to the
-   * `Image` component. The `src` is either the original `src` value or the result of calling
-   * `optimizationImageApi` function with `src` and `props` if `optimization` is set to 'true'.
-   */
-  const Image = ({ src, ...props }) => {
-    const optimization = props.optimization === 'true' ? true : false;
-
-    const url = optimization
-      ? optimizationImageApi({
-          src,
-          props,
-        })
-      : src;
-
-    const ImageProps = {
-      src: url,
-      props,
-    };
-
-    return createElement('img', ImageProps, null)
-  };
-
-  const Router = ({ children }) => {
-    const [location, setLocation] = useStore({
-      pathname: window.location.pathname,
-      search: window.location.search,
-    });
-
-    const navigate = (to) => {
-      if (to === location.pathname + location.search) return
-      window.history.pushState({}, '', to);
-      setLocation({
-        pathname: window.location.pathname,
-        search: window.location.search,
-      });
-    };
-
-    useEffect(() => {
-      const onPopState = () => {
-        setLocation({
-          pathname: window.location.pathname,
-          search: window.location.search,
-        });
-      };
-      window.addEventListener('popstate', onPopState);
-      return () => window.removeEventListener('popstate', onPopState)
-    }, []);
-
-    return children({
-      pathname: location.pathname,
-      query: parseQuery(location.search),
-      navigate,
-    })
-  };
-
-  const Route = ({ path, element, pathname, query, navigate }) => {
-    const params = matchPath(path, pathname);
-    if (!params) return null
-    return createElement(element, { params, query, navigate })
-  };
-
-  const Routes = ({ routes, pathname, query, navigate }) => {
-    for (const route of routes) {
-      const params = matchPath(route.path, pathname);
-      if (params !== null) {
-        return createElement(route.element, { params, query, navigate })
-      }
-    }
-    return null
-  };
-
-  const Link = ({ to, children, navigate, ...props }) => {
-    const handleClick = (e) => {
-      e.preventDefault();
-      navigate(to);
-    };
-    return createElement(
-      'a',
-      { href: to, onClick: handleClick, ...props },
-      children,
-    )
-  };
-
-  /**
-   * 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 `null` 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;
-    }
-  };
-
-  const scheduleWork = (root) => {
-    vars.nextUnitOfWork = root;
-    vars.wipRoot = root;
-    vars.deletions = [];
-
-    vars.hookIndex = 0;
-    vars.effects = [];
-    requestIdleCallback(workLoop);
-  };
-
-  /**
-   * 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: container,
-      props: {
-        children: [element],
-      },
-      alternate: vars.currentRoot,
-    };
-
-    vars.nextUnitOfWork = vars.wipRoot;
-    vars.deletions = [];
-    scheduleWork(vars.wipRoot);
-    return 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);
-
-    const renderProcess = render(MainElement, vars.containerRoot);
-
-    return renderProcess
-  };
-
   var Ryunix = {
     createElement,
     render,
     init,
-    Fragments,
+    Fragment,
     Hooks,
   };
 
   window.Ryunix = Ryunix;
 
   exports.Image = Image;
-  exports.Link = Link;
-  exports.Route = Route;
-  exports.Router = Router;
-  exports.Routes = Routes;
   exports.default = Ryunix;
   exports.useCallback = useCallback;
   exports.useEffect = useEffect;

package/dist/Ryunix.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lodash")):"function"==typeof define&&define.amd?define(["exports","lodash"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={},e.lodash)}(this,(function(e,t){"use strict";let o={containerRoot:null,nextUnitOfWork:null,currentRoot:null,wipRoot:null,deletions:null,wipFiber:null,hookIndex:null,effects:null};const n=/[A-Z]/g,r=Object.freeze({TEXT_ELEMENT:Symbol("text.element").toString(),Ryunix_ELEMENT:Symbol("ryunix.element").toString(),RYUNIX_EFFECT:Symbol("ryunix.effect").toString(),RYUNIX_MEMO:Symbol("ryunix.memo").toString(),RYUNIX_URL_QUERY:Symbol("ryunix.urlQuery").toString(),RYUNIX_REF:Symbol("ryunix.ref").toString(),RYUNIX_STORE:Symbol("ryunix.store").toString(),RYUNIX_REDUCE:Symbol("ryunix.reduce").toString(),RYUNIX_FRAGMENT:Symbol("ryunix.fragment").toString()}),i=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean",string:"string"}),s=Object.freeze({style:"style",className:"className"}),a=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString(),NO_EFFECT:Symbol("ryunix.reconciler.status.no_efect").toString()}),l=(e,t)=>{const o=e.split("/").filter(Boolean),n=t.split("/").filter(Boolean);if("*"===e)return{};if(o.length!==n.length)return null;const r={};for(let e=0;e<o.length;e++){const t=o[e],i=n[e];if(t.startsWith(":"))r[t.slice(1)]=decodeURIComponent(i);else if(t!==i)return null}return r},c=(e,t,...o)=>({type:e,props:{...t,children:o.flat().map((e=>typeof e===i.object?e:u(e)))}}),u=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),p=e=>e.startsWith("on"),d=e=>e!==i.children&&!p(e),f=(e,t)=>o=>e[o]!==t[o],h=e=>t=>!(t in e),m=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},y=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},w=(e,t,o)=>{Object.keys(t).filter(p).filter((e=>h(o)(e)||f(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(d).filter(h(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(d).filter(f(t,o)).forEach((n=>{if(n===i.style)E(e,o["ryunix-style"]);else if(n===s.style)E(e,o.style);else if(n===i.className){if(""===o["ryunix-class"])throw new Error("data-class cannot be empty.");t["ryunix-class"]&&e.classList.remove(...t["ryunix-class"].split(/\s+/)),e.classList.add(...o["ryunix-class"].split(/\s+/))}else if(n===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/)),e.classList.add(...o.className.split(/\s+/))}else e[n]=o[n]})),Object.keys(o).filter(p).filter(f(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},E=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")},b=e=>{if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===a.PLACEMENT)null!=e.dom&&o.appendChild(e.dom),y(e);else if(e.effectTag===a.UPDATE)m(e),null!=e.dom&&w(e.dom,e.alternate.props,e.props),y(e);else if(e.effectTag===a.DELETION)return m(e),void g(e,o);b(e.child),b(e.sibling)},g=(e,t)=>{e.dom?t.removeChild(e.dom):g(e.child,t)},R=(e,t)=>{let n,r=0,i=e.alternate&&e.alternate.child;for(;r<t.length||null!=i;){const s=t[r];let l;const c=i&&s&&s.type==i.type;c&&(l={type:i.type,props:s.props,dom:i.dom,parent:e,alternate:i,effectTag:a.UPDATE}),s&&!c&&(l={type:s.type,props:s.props,dom:null,parent:e,alternate:null,effectTag:a.PLACEMENT}),i&&!c&&(i.effectTag=a.DELETION,o.deletions.push(i)),i&&(i=i.sibling),0===r?e.child=l:s&&(n.sibling=l),n=l,r++}},k=(e,t)=>x(((e,t)=>"function"==typeof t?t(e):t),e,t),x=(e,t,n)=>{const r=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],i={state:r?r.state:n?n(t):t,queue:r&&Array.isArray(r.queue)?r.queue.slice():[]};r&&Array.isArray(r.queue)&&r.queue.forEach((t=>{i.state=e(i.state,t)}));return i.queue.forEach((t=>{i.state=e(i.state,t)})),o.wipFiber.hooks[o.hookIndex]=i,o.hookIndex++,[i.state,e=>{i.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.deletions=[],o.hookIndex=0,C(o.wipRoot)}]},N=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_EFFECT,deps:n,cleanup:i?.cleanup};(!i||!t.isEqual(i.deps,n))&&o.effects.push((()=>{"function"==typeof s.cleanup&&s.cleanup();const t=e();"function"==typeof t&&(s.cleanup=t)})),o.wipFiber.hooks[o.hookIndex]=s,o.hookIndex++},F=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],n={type:r.RYUNIX_REF,value:t?t.value:{current:e}};return o.wipFiber.hooks[o.hookIndex]=n,o.hookIndex++,n.value},I=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_MEMO,value:null,deps:n};return i&&t.isEqual(i.deps,s.deps)?s.value=i.value:s.value=e(),o.wipFiber.hooks[o.hookIndex]=s,o.hookIndex++,s.value},v=(e,t)=>I((()=>e),t),S=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},T=e=>{const[t,n]=k(window.location.pathname),r=(e,t)=>{const o=t.split("?")[0],n=e.find((e=>e.NotFound)),i=n?{route:{component:n.NotFound},params:{}}:{route:{component:null},params:{}};for(const n of e){if(n.subRoutes){const e=r(n.subRoutes,t);if(e)return e}if("*"===n.path)return i;if(!n.path||"string"!=typeof n.path){console.warn("Invalid route detected:",n),console.info("if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }");continue}const e=[],s=new RegExp(`^${n.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),a=o.match(s);if(a){return{route:n,params:e.reduce(((e,t,o)=>(e[t]=a[o+1],e)),{})}}}return i},s=e=>{window.history.pushState({},"",e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],a(e)},a=e=>{const t=e.split("?")[0];n(t)};N((()=>{const e=()=>a(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const l=r(e,t)||{};return{Children:()=>{const e=S(),{route:o}=l;return o&&o.component&&typeof o.component===i.function?o.component({key:t,params:l.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",l),null)},NavLink:({to:e,...t})=>c("a",{href:e,onClick:t=>{t.preventDefault(),s(e)},...t},t.children),navigate:s}};var U=Object.freeze({__proto__:null,useCallback:v,useEffect:N,useMemo:I,useQuery:S,useRef:F,useRouter:T,useStore:k});const L=e=>{e.dom||(e.dom=(e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return w(t,{},e.props),t})(e)),R(e,e.props.children.flat())},O=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=_(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&(o.deletions.forEach(b),b(o.wipRoot.child),o.currentRoot=o.wipRoot,o.wipRoot=null),requestIdleCallback(O)};requestIdleCallback(O);const _=e=>{if(e.type instanceof Function?(e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=[e.type(e.props)];R(e,t)})(e):L(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}},C=e=>{o.nextUnitOfWork=e,o.wipRoot=e,o.deletions=[],o.hookIndex=0,o.effects=[],requestIdleCallback(O)},q=(e,t)=>(o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],C(o.wipRoot),o.wipRoot);var j={createElement:c,render:q,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return q(e,o.containerRoot)},Fragments:e=>e.children,Hooks:U};window.Ryunix=j,e.Image=({src:e,...t})=>{const o="true"===t.optimization?(({src:e,props:t})=>{const o=new URLSearchParams,n=!e.startsWith("http")||!e.startsWith("https");t.width&&o.set("width",t.width),t.height&&o.set("width",t.height),t.quality&&o.set("quality",t.quality);const r=t.extension?`@${t.extension}`:"",i="http://localhost:3000"===window.location.origin||"http://localhost:5173"===window.location.origin||"http://localhost:4173"===window.location.origin;return n?i?(console.warn("Image optimizations only work with full links and must not contain localhost."),e):`${window.location.origin}/${e}`:`https://image.unsetsoft.com/image/${e}${r}?${o.toString()}`})({src:e,props:t}):e;return c("img",{src:o,props:t},null)},e.Link=({to:e,children:t,navigate:o,...n})=>c("a",{href:e,onClick:t=>{t.preventDefault(),o(e)},...n},t),e.Route=({path:e,element:t,pathname:o,query:n,navigate:r})=>{const i=l(e,o);return i?c(t,{params:i,query:n,navigate:r}):null},e.Router=({children:e})=>{const[t,o]=k({pathname:window.location.pathname,search:window.location.search});return N((()=>{const e=()=>{o({pathname:window.location.pathname,search:window.location.search})};return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]),e({pathname:t.pathname,query:(n=t.search,n?Object.fromEntries(new URLSearchParams(n)):{}),navigate:e=>{e!==t.pathname+t.search&&(window.history.pushState({},"",e),o({pathname:window.location.pathname,search:window.location.search}))}});var n},e.Routes=({routes:e,pathname:t,query:o,navigate:n})=>{for(const r of e){const e=l(r.path,t);if(null!==e)return c(r.element,{params:e,query:o,navigate:n})}return null},e.default=j,e.useCallback=v,e.useEffect=N,e.useMemo=I,e.useQuery=S,e.useRef=F,e.useRouter=T,e.useStore=k,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("lodash")):"function"==typeof define&&define.amd?define(["exports","lodash"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Ryunix={},e.lodash)}(this,(function(e,t){"use strict";let o={containerRoot:null,nextUnitOfWork:null,currentRoot:null,wipRoot:null,deletions:null,wipFiber:null,hookIndex:null,effects:null};const n=/[A-Z]/g,r=Object.freeze({TEXT_ELEMENT:Symbol("text.element").toString(),Ryunix_ELEMENT:Symbol("ryunix.element").toString(),RYUNIX_EFFECT:Symbol("ryunix.effect").toString(),RYUNIX_MEMO:Symbol("ryunix.memo").toString(),RYUNIX_URL_QUERY:Symbol("ryunix.urlQuery").toString(),RYUNIX_REF:Symbol("ryunix.ref").toString(),RYUNIX_STORE:Symbol("ryunix.store").toString(),RYUNIX_REDUCE:Symbol("ryunix.reduce").toString(),RYUNIX_FRAGMENT:Symbol("ryunix.fragment").toString()}),i=Object.freeze({object:"object",function:"function",style:"ryunix-style",className:"ryunix-class",children:"children",boolean:"boolean",string:"string"}),s=Object.freeze({style:"style",className:"className"}),l=Object.freeze({PLACEMENT:Symbol("ryunix.reconciler.status.placement").toString(),UPDATE:Symbol("ryunix.reconciler.status.update").toString(),DELETION:Symbol("ryunix.reconciler.status.deletion").toString(),NO_EFFECT:Symbol("ryunix.reconciler.status.no_efect").toString()}),a=(e,t,...o)=>({type:e,props:{...t,children:o.flat().map((e=>typeof e===i.object?e:c(e)))}}),c=e=>({type:r.TEXT_ELEMENT,props:{nodeValue:e,children:[]}}),u=e=>e.startsWith("on"),p=e=>e!==i.children&&!u(e),d=(e,t)=>o=>e[o]!==t[o],f=e=>t=>!(t in e),h=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.cancel)).forEach((e=>{e.cancel()}))},y=e=>{e.hooks&&e.hooks.filter((e=>e.tag===r.RYUNIX_EFFECT&&e.effect)).forEach((e=>{e.cancel=e.effect()}))},m=(e,t,o)=>{Object.keys(t).filter(u).filter((e=>f(o)(e)||d(t,o)(e))).forEach((o=>{const n=o.toLowerCase().substring(2);e.removeEventListener(n,t[o])})),Object.keys(t).filter(p).filter(f(o)).forEach((t=>{e[t]=""})),Object.keys(o).filter(p).filter(d(t,o)).forEach((n=>{if(n===i.style)w(e,o["ryunix-style"]);else if(n===s.style)w(e,o.style);else if(n===i.className){if(""===o["ryunix-class"])throw new Error("data-class cannot be empty.");t["ryunix-class"]&&e.classList.remove(...t["ryunix-class"].split(/\s+/)),e.classList.add(...o["ryunix-class"].split(/\s+/))}else if(n===s.className){if(""===o.className)throw new Error("className cannot be empty.");t.className&&e.classList.remove(...t.className.split(/\s+/)),e.classList.add(...o.className.split(/\s+/))}else e[n]=o[n]})),Object.keys(o).filter(u).filter(d(t,o)).forEach((t=>{const n=t.toLowerCase().substring(2);e.addEventListener(n,o[t])}))},w=(e,t)=>{e.style=Object.keys(t).reduce(((e,o)=>e+=`${o.replace(n,(function(e){return"-"+e.toLowerCase()}))}: ${t[o]};`),"")},E=e=>{if(!e)return;let t=e.parent;for(;!t.dom;)t=t.parent;const o=t.dom;if(e.effectTag===l.PLACEMENT)null!=e.dom&&o.appendChild(e.dom),y(e);else if(e.effectTag===l.UPDATE)h(e),null!=e.dom&&m(e.dom,e.alternate.props,e.props),y(e);else if(e.effectTag===l.DELETION)return h(e),void b(e,o);E(e.child),E(e.sibling)},b=(e,t)=>{e.dom?t.removeChild(e.dom):b(e.child,t)},R=(e,t)=>{let n,r=0,i=e.alternate&&e.alternate.child;for(;r<t.length||null!=i;){const s=t[r];let a;const c=i&&s&&s.type==i.type;c&&(a={type:i.type,props:s.props,dom:i.dom,parent:e,alternate:i,effectTag:l.UPDATE}),s&&!c&&(a={type:s.type,props:s.props,dom:null,parent:e,alternate:null,effectTag:l.PLACEMENT}),i&&!c&&(i.effectTag=l.DELETION,o.deletions.push(i)),i&&(i=i.sibling),0===r?e.child=a:s&&(n.sibling=a),n=a,r++}},k=e=>{e.type===r.RYUNIX_FRAGMENT||e.dom||(e.dom=(e=>{const t=e.type==r.TEXT_ELEMENT?document.createTextNode(""):document.createElement(e.type);return m(t,{},e.props),t})(e)),R(e,e.props.children.flat())},g=e=>{let t=!1;for(;o.nextUnitOfWork&&!t;)o.nextUnitOfWork=x(o.nextUnitOfWork),t=e.timeRemaining()<1;!o.nextUnitOfWork&&o.wipRoot&&(o.deletions.forEach(E),E(o.wipRoot.child),o.currentRoot=o.wipRoot,o.wipRoot=null),requestIdleCallback(g)};requestIdleCallback(g);const x=e=>{if(e.type instanceof Function?(e=>{o.wipFiber=e,o.hookIndex=0,o.wipFiber.hooks=[];const t=[e.type(e.props)];R(e,t)})(e):k(e),e.child)return e.child;let t=e;for(;t;){if(t.sibling)return t.sibling;t=t.parent}},N=e=>{o.nextUnitOfWork=e,o.wipRoot=e,o.deletions=[],o.hookIndex=0,o.effects=[],requestIdleCallback(g)},F=(e,t)=>(o.wipRoot={dom:t,props:{children:[e]},alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],N(o.wipRoot),o.wipRoot),I=(e,t)=>T(((e,t)=>"function"==typeof t?t(e):t),e,t),T=(e,t,n)=>{const r=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],i={state:r?r.state:n?n(t):t,queue:r&&Array.isArray(r.queue)?r.queue.slice():[]};r&&Array.isArray(r.queue)&&r.queue.forEach((t=>{i.state=e(i.state,t)}));return i.queue.forEach((t=>{i.state=e(i.state,t)})),o.wipFiber.hooks[o.hookIndex]=i,o.hookIndex++,[i.state,e=>{i.queue.push(e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.deletions=[],o.hookIndex=0,N(o.wipRoot)}]},S=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_EFFECT,deps:n,cleanup:i?.cleanup};(!i||!t.isEqual(i.deps,n))&&o.effects.push((()=>{"function"==typeof s.cleanup&&s.cleanup();const t=e();"function"==typeof t&&(s.cleanup=t)})),o.wipFiber.hooks[o.hookIndex]=s,o.hookIndex++},U=e=>{const t=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],n={type:r.RYUNIX_REF,value:t?t.value:{current:e}};return o.wipFiber.hooks[o.hookIndex]=n,o.hookIndex++,n.value},_=(e,n)=>{const i=o.wipFiber.alternate&&o.wipFiber.alternate.hooks&&o.wipFiber.alternate.hooks[o.hookIndex],s={type:r.RYUNIX_MEMO,value:null,deps:n};return i&&t.isEqual(i.deps,s.deps)?s.value=i.value:s.value=e(),o.wipFiber.hooks[o.hookIndex]=s,o.hookIndex++,s.value},O=(e,t)=>_((()=>e),t),v=()=>{const e=new URLSearchParams(window.location.search),t={};for(let[o,n]of e.entries())t[o]=n;return t},L=e=>{const[t,n]=I(window.location.pathname),r=(e,t)=>{const o=t.split("?")[0],n=e.find((e=>e.NotFound)),i=n?{route:{component:n.NotFound},params:{}}:{route:{component:null},params:{}};for(const n of e){if(n.subRoutes){const e=r(n.subRoutes,t);if(e)return e}if("*"===n.path)return i;if(!n.path||"string"!=typeof n.path){console.warn("Invalid route detected:",n),console.info("if you are using { NotFound: NotFound } please add { path: '*', NotFound: NotFound }");continue}const e=[],s=new RegExp(`^${n.path.replace(/:\w+/g,(t=>(e.push(t.substring(1)),"([^/]+)")))}$`),l=o.match(s);if(l){return{route:n,params:e.reduce(((e,t,o)=>(e[t]=l[o+1],e)),{})}}}return i},s=e=>{window.history.pushState({},"",e),o.wipRoot={dom:o.currentRoot.dom,props:o.currentRoot.props,alternate:o.currentRoot},o.nextUnitOfWork=o.wipRoot,o.deletions=[],l(e)},l=e=>{const t=e.split("?")[0];n(t)};S((()=>{const e=()=>l(window.location.pathname);return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)}),[]);const c=r(e,t)||{};return{Children:()=>{const e=v(),{route:o}=c;return o&&o.component&&typeof o.component===i.function?o.component({key:t,params:c.params||{},query:e}):(console.error("Component not found for current path or the component is not a valid function:",c),null)},NavLink:({to:e,...t})=>a("a",{href:e,onClick:t=>{t.preventDefault(),s(e)},...t},t.children),navigate:s}};var C={createElement:a,render:F,init:(e,t="__ryunix")=>{o.containerRoot=document.getElementById(t);return F(e,o.containerRoot)},Fragment:e=>a(r.RYUNIX_FRAGMENT,{},...e.children),Hooks:Object.freeze({__proto__:null,useCallback:O,useEffect:S,useMemo:_,useQuery:v,useRef:U,useRouter:L,useStore:I})};window.Ryunix=C,e.Image=({src:e,...t})=>{const o="true"===t.optimization?(({src:e,props:t})=>{const o=new URLSearchParams,n=!e.startsWith("http")||!e.startsWith("https");t.width&&o.set("width",t.width),t.height&&o.set("width",t.height),t.quality&&o.set("quality",t.quality);const r=t.extension?`@${t.extension}`:"",i="http://localhost:3000"===window.location.origin||"http://localhost:5173"===window.location.origin||"http://localhost:4173"===window.location.origin;return n?i?(console.warn("Image optimizations only work with full links and must not contain localhost."),e):`${window.location.origin}/${e}`:`https://image.unsetsoft.com/image/${e}${r}?${o.toString()}`})({src:e,props:t}):e;return a("img",{src:o,props:t},null)},e.default=C,e.useCallback=O,e.useEffect=S,e.useMemo=_,e.useQuery=v,e.useRef=U,e.useRouter=L,e.useStore=I,Object.defineProperty(e,"__esModule",{value:!0})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "1.1.7-canary.63",
+  "version": "1.1.7-canary.65",
   "license": "MIT",
   "main": "./dist/Ryunix.min.js",
   "types": "./dist/Ryunix.d.ts",