@unsetsoft/ryunixjs 0.4.13-nightly.5 → 0.4.14

package/dist/Ryunix.js

@@ -24,9 +24,14 @@
   const STRINGS = Object.freeze({
     object: 'object',
     function: 'function',
+    style: 'ryunix-style',
+    className: 'ryunix-class',
+    children: 'children',
+  });
+
+  const OLD_STRINGS = Object.freeze({
     style: 'style',
     className: 'className',
-    children: 'children',
   });
 
   const EFFECT_TAGS = Object.freeze({
@@ -240,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++;
 
@@ -264,7 +274,7 @@
     return hook.query
   };
 
-  const Router = ({ path, component }) => {
+  const Router = ({ path, component, children }) => {
     const [currentPath, setCurrentPath] = useStore(window.location.pathname);
 
     useEffect(() => {
@@ -277,13 +287,15 @@
       window.addEventListener('popstate', onLocationChange);
 
       return () => {
-        window.removeEventListener('navigate', onLocationChange);
-        window.removeEventListener('pushsatate', onLocationChange);
-        window.removeEventListener('popstate', onLocationChange);
+        setTimeout(() => {
+          window.removeEventListener('navigate', onLocationChange);
+          window.removeEventListener('pushsatate', onLocationChange);
+          window.removeEventListener('popstate', onLocationChange);
+        }, 100);
       }
     }, [currentPath]);
 
-    return currentPath === path && component()
+    return currentPath === path ? component() : null
   };
 
   const Navigate = () => {
@@ -301,8 +313,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);
     };
 
@@ -329,6 +342,10 @@
       throw new Error("Missig 'to' param.")
     }
     const preventReload = (event) => {
+      if (event.metaKey || event.ctrlKey) {
+        return
+      }
+
       event.preventDefault();
       const { push } = Navigate();
       push(props.to);
@@ -394,11 +411,22 @@
       .filter(isNew(prevProps, nextProps))
       .forEach((name) => {
         if (name === STRINGS.style) {
+          DomStyle(dom, nextProps['ryunix-style']);
+        } else if (name === OLD_STRINGS.style) {
           DomStyle(dom, nextProps.style);
         } else if (name === STRINGS.className) {
+          if (nextProps['ryunix-class'] === '') {
+            throw new Error('data-class cannot be empty.')
+          }
+
+          prevProps['ryunix-class'] &&
+            dom.classList.remove(...prevProps['ryunix-class'].split(/\s+/));
+          dom.classList.add(...nextProps['ryunix-class'].split(/\s+/));
+        } else if (name === OLD_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+/));