feat(preset): add react-router & react-router-dom (unplugin#110)

Author: Jungzl

examples/vite-react/package.json

@@ -8,7 +8,9 @@
   },
   "dependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
     "@iconify-json/logos": "*",

examples/vite-react/src/App.tsx

@@ -1,5 +1,8 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
+import MainLayout from './layouts/MainLayout'
+import PageA from './views/PageA'
+import PageB from './views/PageB'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -14,6 +17,12 @@ function App() {
           </button>
         </p>
       </header>
+      <Routes>
+        <Route path="/" element={<MainLayout />} >
+          <Route path="/list" element={<PageA />} />
+          <Route path="/detail/:id" element={<PageB />} />
+        </Route>
+      </Routes>
     </div>
   )
 }

examples/vite-react/src/layouts/MainLayout.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const MainLayout = () => {
+  return (
+    <div>
+      <h1>Main Layout Header</h1>
+      <nav>
+        <Link to="/list">List</Link>
+      </nav>
+      <Outlet />
+      <h1>Main Layout Footer</h1>
+    </div>
+  )
+}
+
+export default MainLayout

examples/vite-react/src/main.tsx

@@ -1,11 +1,14 @@
 // eslint-disable-next-line no-use-before-define
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { BrowserRouter } from 'react-router-dom'
 import App from './App'
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root'),
 )

examples/vite-react/src/views/PageA.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const PageA = () => {
+  return (
+    <div>
+      <main>
+        <h2>Welcome to the homepage!</h2>
+        <p>You can do this, I believe in you.</p>
+      </main>
+      <ul>
+        {[13, 14, 15].map(n => (
+          <li key={n}>
+            <nav>
+              <Link to={`/detail/${new Date().getTime()}?q=${new Date().getTime() % n}`}>Detail-{n}</Link>
+            </nav>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default PageA

examples/vite-react/src/views/PageB.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const PageB = () => {
+  const location = useLocation()
+  const { id } = useParams()
+  const [query] = useSearchParams()
+  return (
+    <div>
+      <main>
+        <h2>Who are we?</h2>
+        <p>
+            That feels like an existential question, don&apos;t you
+            think?
+        </p>
+        <p>path: {location.pathname}</p>
+        <p>params id: {id}</p>
+        <p>query q: {query.get('q')}</p>
+      </main>
+      <nav>
+        <Link to="/">Home</Link>
+      </nav>
+    </div>
+  )
+}
+
+export default PageB

examples/vite-react/vite.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
       jsx: 'react',
     }),
     AutoImport({
-      imports: 'react',
+      imports: ['react', 'react-router-dom'],
       dts: './src/auto-imports.d.ts',
       resolvers: [
         IconsResolver({

pnpm-lock.yaml

@@ -4,6 +4,8 @@ import pinia from './pinia'
 import preact from './preact'
 import quasar from './quasar'
 import react from './react'
+import reactRouter from './react-router'
+import reactRouterDom from './react-router-dom'
 import {
   svelte,
   svelteAnimate,
@@ -33,6 +35,8 @@ export const presets = {
   'preact': preact,
   'quasar': quasar,
   'react': react,
+  'react-router': reactRouter,
+  'react-router-dom': reactRouterDom,
   'svelte': svelte,
   'svelte/animate': svelteAnimate,
   'svelte/easing': svelteEasing,

src/presets/index.ts

@@ -0,0 +1,29 @@
+import type { ImportsMap } from '../types'
+import { ReactRouterHooks } from './react-router'
+
+/**
+ * Only compatible with React Router Dom v6.
+ */
+export default <ImportsMap>({
+  'react-router-dom': [
+    ...ReactRouterHooks,
+
+    // react-router-dom only hooks
+    'useLinkClickHandler',
+    'useSearchParams',
+
+    // react-router-dom Component
+
+    // call once in general
+    // 'BrowserRouter',
+    // 'HashRouter',
+    // 'MemoryRouter',
+
+    'Link',
+    'NavLink',
+    'Navigate',
+    'Outlet',
+    'Route',
+    'Routes',
+  ],
+})

src/presets/react-router-dom.ts

@@ -0,0 +1,23 @@
+import type { ImportsMap } from '../types'
+
+/**
+ * Only compatible with React Router v6.
+ */
+export const ReactRouterHooks = [
+  'useOutletContext',
+  'useHref',
+  'useInRouterContext',
+  'useLocation',
+  'useNavigationType',
+  'useNavigate',
+  'useOutlet',
+  'useParams',
+  'useResolvedPath',
+  'useRoutes',
+]
+
+export default <ImportsMap>({
+  'react-router': [
+    ...ReactRouterHooks,
+  ],
+})