@unsetsoft/ryunixjs 0.4.13-nightly.46 → 0.4.13-nightly.48

package/dist/Ryunix.js

@@ -245,6 +245,11 @@
     vars.hookIndex++;
   };
 
+  /**
+   * The `useQuery` function is a custom hook in JavaScript that retrieves query parameters from the URL
+   * and stores them in a hook for easy access.
+   * @returns The `useQuery` function returns the `query` property of the `hook` object.
+   */
   const useQuery = () => {
     vars.hookIndex++;
 
@@ -269,7 +274,7 @@
     return hook.query
   };
 
-  const Router = ({ path, component }) => {
+  const Router = ({ path, component, children }) => {
     const [currentPath, setCurrentPath] = useStore(window.location.pathname);
 
     useEffect(() => {
@@ -277,18 +282,16 @@
         setCurrentPath(() => window.location.pathname);
       };
 
-      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]);
 
-    return currentPath === path ? component() : null
+    const Children = children ? children : component();
+
+    return currentPath === path ? Children : null
   };
 
   const Navigate = () => {
@@ -306,8 +309,9 @@
      */
     const push = (to, state = {}) => {
       if (window.location.pathname === to) return
+
       window.history.pushState(state, '', to);
-      const navigationEvent = new Event('pushsatate');
+      const navigationEvent = new PopStateEvent('popstate');
       window.dispatchEvent(navigationEvent);
     };
 
@@ -334,6 +338,10 @@
       throw new Error("Missig 'to' param.")
     }
     const preventReload = (event) => {
+      if (event.metaKey || event.ctrlKey) {
+        return
+      }
+
       event.preventDefault();
       const { push } = Navigate();
       push(props.to);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.4.13-nightly.46",
+  "version": "0.4.13-nightly.48",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "types": "./dist/Ryunix.d.ts",

package/src/lib/hooks.js

@@ -74,6 +74,11 @@ const useEffect = (effect, deps) => {
   vars.hookIndex++
 }
 
+/**
+ * The `useQuery` function is a custom hook in JavaScript that retrieves query parameters from the URL
+ * and stores them in a hook for easy access.
+ * @returns The `useQuery` function returns the `query` property of the `hook` object.
+ */
 const useQuery = () => {
   vars.hookIndex++
 

package/src/lib/navigation.js

@@ -1,6 +1,6 @@
 import { useStore, useEffect } from './hooks'
 import { createElement } from './createElement'
-const Router = ({ path, component }) => {
+const Router = ({ path, component, children }) => {
   const [currentPath, setCurrentPath] = useStore(window.location.pathname)
 
   useEffect(() => {
@@ -8,18 +8,16 @@ const Router = ({ path, component }) => {
       setCurrentPath(() => window.location.pathname)
     }
 
-    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])
 
-  return currentPath === path ? component() : null
+  const Children = children ? children : component()
+
+  return currentPath === path ? Children : null
 }
 
 const Navigate = () => {
@@ -37,8 +35,9 @@ const Navigate = () => {
    */
   const push = (to, state = {}) => {
     if (window.location.pathname === to) return
+
     window.history.pushState(state, '', to)
-    const navigationEvent = new Event('pushsatate')
+    const navigationEvent = new PopStateEvent('popstate')
     window.dispatchEvent(navigationEvent)
   }
 
@@ -65,6 +64,10 @@ const Link = (props) => {
     throw new Error("Missig 'to' param.")
   }
   const preventReload = (event) => {
+    if (event.metaKey || event.ctrlKey) {
+      return
+    }
+
     event.preventDefault()
     const { push } = Navigate()
     push(props.to)