diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index eb164b4..7f756a7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -7,7 +7,7 @@ concurrency:
cancel-in-progress: true
env:
- COMMIT_COUNT: 1
+ COMMIT_COUNT: ${{ vars.MAX_PR_COMMIT_COUNT }}
jobs:
lint-commits:
diff --git a/.node-version b/.node-version
index 53d1c14..54c6511 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-v22
+v24
diff --git a/README.md b/README.md
index 47f0c8b..e068498 100644
--- a/README.md
+++ b/README.md
@@ -14,27 +14,27 @@
### 
VanillaJS
```ts
-import { CreateHistory } from 'rutter'
+import { CreateHistory } from "rutter";
const router = new CreateHistory({
routes: {
index: {
- pathname: ''
+ pathname: "",
},
about: {
- pathname: '/about'
+ pathname: "/about",
},
blog: {
- pathname: '/blog'
+ pathname: "/blog",
},
blogDetail: {
- pathname: '/blog/:id'
- }
- }
-})
+ pathname: "/blog/:id",
+ },
+ },
+});
-router.on('index') // boolean
-router.onOneOf(['index', 'about']) // boolean
+router.on("index"); // boolean
+router.onOneOf(["index", "about"]); // boolean
```
### 
React bindings: via `useState`/`context`
@@ -42,93 +42,80 @@ router.onOneOf(['index', 'about']) // boolean
```tsx
// router.(tsx|jsx)
-import {
- FC,
- PropsWithChildren,
- createContext,
- useContext,
- useEffect,
- useState
-} from 'react'
-
-import { CreateHistory } from 'rutter'
-
-export const {
- redirect,
- on,
- summaryState,
- routeState,
- watchSummaryState,
- watchRouteState
-} = new CreateHistory({
- routes: {
- index: {
- pathname: ''
+import { FC, PropsWithChildren, createContext, useContext, useEffect, useState } from "react";
+
+import { CreateHistory } from "rutter";
+
+export const { redirect, on, summaryState, routeState, watchSummaryState, watchRouteState } =
+ new CreateHistory({
+ routes: {
+ index: {
+ pathname: "",
+ },
+ about: {
+ pathname: "/about",
+ },
+ blog: {
+ pathname: "/blog",
+ },
+ blogDetail: {
+ pathname: "/blog/:id",
+ },
},
- about: {
- pathname: '/about'
- },
- blog: {
- pathname: '/blog'
- },
- blogDetail: {
- pathname: '/blog/:id'
- }
- }
-})
+ });
/**
* Although using with `context` is recommended for performance reason, you can directly use this hook if you don't want to store all the states in `context` tree.
*/
export const useRouterValues = () => {
- const [routeStateValue, setRouteStateState] = useState(routeState)
- const [summaryStateValue, setSummaryStateState] = useState(summaryState)
+ const [routeStateValue, setRouteStateState] = useState(routeState);
+ const [summaryStateValue, setSummaryStateState] = useState(summaryState);
- useEffect(() => watchRouteState(setRouteStateState), [])
- useEffect(() => watchSummaryState(setSummaryStateState), [])
+ useEffect(() => watchRouteState(setRouteStateState), []);
+ useEffect(() => watchSummaryState(setSummaryStateState), []);
return {
routeState: routeStateValue,
- summaryState: summaryStateValue
- }
-}
+ summaryState: summaryStateValue,
+ };
+};
const context = createContext({
routeState,
- summaryState
-})
+ summaryState,
+});
-const useRouterContext = () => useContext(context)
+const useRouterContext = () => useContext(context);
export const RouterProvider: FC = ({ children }) => {
- const value = useRouterValues()
+ const value = useRouterValues();
- return {children}
-}
+ return {children};
+};
export const useRoute = () => {
- const { routeState } = useRouterContext()
+ const { routeState } = useRouterContext();
- return routeState
-}
+ return routeState;
+};
```
```tsx
// app.(tsx|jsx)
-import { FC } from 'react'
+import { FC } from "react";
-import { on, redirect, useRoute, RouterProvider } from './router'
+import { on, redirect, useRoute, RouterProvider } from "./router";
const Routing: FC = () => {
- const { is404, ...restStates } = useRoute()
+ const { is404, ...restStates } = useRoute();
return (
<>