@unsetsoft/ryunixjs 0.5.8 → 0.5.9-nightly.10

package/dist/Ryunix.js

@@ -303,6 +303,31 @@
     return useMemo(() => callback, deps)
   };
 
+  const useRouter = (routes) => {
+    const [location, setLocation] = useStore(window.location.pathname);
+
+    const navigate = (path) => {
+      window.history.pushState({}, '', path);
+      setLocation(path);
+    };
+
+    useEffect(() => {
+      const onPopState = () => {
+        setLocation(window.location.pathname);
+      };
+
+      window.addEventListener('popstate', onPopState);
+      return () => {
+        window.removeEventListener('popstate', onPopState);
+      }
+    }, []);
+
+    const currentRoute = routes.find((route) => route.path === location);
+    const Children = () => (currentRoute ? currentRoute.component : null);
+
+    return { Children, navigate }
+  };
+
   const isEvent = (key) => key.startsWith('on');
   const isProperty = (key) => key !== STRINGS.children && !isEvent(key);
   const isNew = (prev, next) => (key) => prev[key] !== next[key];
@@ -704,6 +729,7 @@
   exports.useMemo = useMemo;
   exports.useQuery = useQuery;
   exports.useRef = useRef;
+  exports.useRouter = useRouter;
   exports.useStore = useStore;
 
   Object.defineProperty(exports, '__esModule', { value: true });

package/package.json

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

package/src/lib/hooks.js

@@ -166,4 +166,37 @@ const useCallback = (callback, deps) => {
   return useMemo(() => callback, deps)
 }
 
-export { useStore, useEffect, useQuery, useRef, useMemo, useCallback }
+const useRouter = (routes) => {
+  const [location, setLocation] = useStore(window.location.pathname)
+
+  const navigate = (path) => {
+    window.history.pushState({}, '', path)
+    setLocation(path)
+  }
+
+  useEffect(() => {
+    const onPopState = () => {
+      setLocation(window.location.pathname)
+    }
+
+    window.addEventListener('popstate', onPopState)
+    return () => {
+      window.removeEventListener('popstate', onPopState)
+    }
+  }, [])
+
+  const currentRoute = routes.find((route) => route.path === location)
+  const Children = () => (currentRoute ? currentRoute.component : null)
+
+  return { Children, navigate }
+}
+
+export {
+  useStore,
+  useEffect,
+  useQuery,
+  useRef,
+  useMemo,
+  useCallback,
+  useRouter,
+}

package/src/lib/index.js

@@ -7,6 +7,7 @@ import {
   useRef,
   useMemo,
   useCallback,
+  useRouter,
 } from './hooks'
 import * as Dom from './dom'
 import * as Workers from './workers'
@@ -14,7 +15,16 @@ import * as Reconciler from './reconciler'
 import * as Components from './components'
 import * as Commits from './commits'
 
-export { useStore, useEffect, useQuery, useRef, useMemo, useCallback, Fragment }
+export {
+  useStore,
+  useEffect,
+  useQuery,
+  useRef,
+  useMemo,
+  useCallback,
+  useRouter,
+  Fragment,
+}
 
 export default {
   createElement,

package/src/main.js

@@ -6,6 +6,7 @@ export {
   useRef,
   useMemo,
   useCallback,
+  useRouter,
   Fragment,
 } from './lib/index.js'