feat: create 'use'

eslint.config.mjs

@@ -49,6 +49,7 @@ export default [
         },
       ],
       'react-hooks/exhaustive-deps': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
 ]

examples/vite-ts/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

examples/vite-ts/src/lib/model.ts

@@ -0,0 +1,16 @@
+export interface Post {
+  id: number
+  title: string
+  body: string
+  tags: string[]
+  reactions: {
+    likes: number
+    dislikes: number
+  }
+  views: number
+  userId: number
+}
+
+export interface ErrorResponse {
+  message: string
+}

examples/vite-ts/src/lib/utils.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react'
+
+export const styler = <T extends string>(
+  styles: Record<T, CSSProperties>,
+): Record<T, CSSProperties> => styles

examples/vite-ts/src/main.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

examples/vite-ts/src/pages/RootLayout.tsx

@@ -0,0 +1,63 @@
+import { Link, Outlet, useNavigate } from 'react-router-dom'
+import { styler } from '../lib/utils'
+
+const createRandomPostId = () => Math.floor(Math.random() * 251) + 1
+
+export default function RootLayout() {
+  const navigate = useNavigate()
+
+  return (
+    <main style={styles.main}>
+      <nav style={styles.nav}>
+        <Link to='/lifecycle' style={styles.link}>
+          life cycle hook
+        </Link>
+        <button
+          onClick={() => {
+            navigate(`/message/${createRandomPostId()}`)
+          }}
+          style={{ ...styles.button, ...styles.link }}
+        >
+          use hook
+        </button>
+      </nav>
+
+      <div style={styles.outletWrapper}>
+        <Outlet />
+      </div>
+    </main>
+  )
+}
+
+const styles = styler({
+  main: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+  },
+  nav: {
+    backgroundColor: '#f0f0f0',
+    padding: '1rem',
+    display: 'flex',
+    justifyContent: 'space-around',
+  },
+  link: {
+    textDecoration: 'none',
+    color: '#333',
+    fontWeight: 'bold',
+  },
+  outletWrapper: {
+    flex: 1,
+    padding: '2rem',
+    backgroundColor: '#ffffff',
+  },
+  button: {
+    border: 'none',
+    background: 'none',
+    padding: 0,
+    margin: 0,
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'none',
+  },
+})

examples/vite-ts/src/App.tsx → examples/vite-ts/src/pages/lifeCycle/LifeCyclePage.tsx

@@ -1,38 +1,24 @@
 import { useReducer, useState } from 'react'
-import './App.css'
 import {
+  useMonitoringState,
+  useMount,
   useMountBeforePaint,
-  useUpdateBeforePaint,
+  useUnmount,
   useUnmountBeforePaint,
-  useMount,
   useUpdate,
-  useUnmount,
-  useMonitoringState,
-} from '../../../dist'
-
-function Child() {
-  useMountBeforePaint(() => {
-    console.log('Child mounted before paint')
-  })
-
-  useUnmountBeforePaint(() => {
-    console.log('Child unmounted before paint')
-  })
-
-  useMount(() => {
-    console.log('Child mounted')
-  })
-
-  useUnmount(() => {
-    console.log('Child unmounted')
-  })
+  useUpdateBeforePaint,
+} from '../../../../../dist'
+import Child from './ui/Child'
+import { RouteObject } from 'react-router-dom'
 
-  return <div className='card'>Child</div>
+export const LifeCycleRoute: RouteObject = {
+  path: '/lifecycle',
+  element: <LifeCyclePage />,
 }
 
-function App() {
+export default function LifeCyclePage() {
   const [count, setCount] = useState(0)
-  const [isShow, toggle] = useReducer(prev => !prev, true)
+  const [isShow, toggle] = useReducer(state => !state, true)
 
   useMountBeforePaint(() => {
     console.log('Before paint')
@@ -74,5 +60,3 @@ function App() {
     </div>
   )
 }
-
-export default App

examples/vite-ts/src/pages/lifeCycle/ui/Child.tsx

@@ -0,0 +1,26 @@
+import {
+  useMount,
+  useMountBeforePaint,
+  useUnmount,
+  useUnmountBeforePaint,
+} from '../../../../../../dist'
+
+export default function Child() {
+  useMountBeforePaint(() => {
+    console.log('Child mounted before paint')
+  })
+
+  useUnmountBeforePaint(() => {
+    console.log('Child unmounted before paint')
+  })
+
+  useMount(() => {
+    console.log('Child mounted')
+  })
+
+  useUnmount(() => {
+    console.log('Child unmounted')
+  })
+
+  return <div className='card'>Child</div>
+}

examples/vite-ts/src/pages/message/MessagePage.tsx

@@ -0,0 +1,15 @@
+import { GetMessage } from './ui'
+import { RouteObject, useParams } from 'react-router-dom'
+import { getMessage } from './lib'
+
+export const MessageRoute: RouteObject = {
+  path: '/message/:id',
+  element: <MessagePage />,
+}
+
+function MessagePage() {
+  const { id } = useParams()
+
+  return <GetMessage promise={getMessage(+id)} />
+}
+export default MessagePage