feature: @putout/plugin-react-router: declare: add

Author: coderaiser

packages/plugin-react-router/README.md

@@ -13,6 +13,7 @@ npm i putout @putout/plugin-react-router -D
 
 ## Rules
 
+- ✅ [declare](#declare);
 - ✅ [v6-convert-switch-to-routers](#v6-convert-switch-to-routers);
 - ✅ [v6-convert-component-to-element](#v6-convert-component-to-element);
 - ✅ [v7-split-multi-segment-route](#v7-split-multi-segment-route);
@@ -24,6 +25,7 @@ npm i putout @putout/plugin-react-router -D
 ```json
 {
     "rules": {
+        "react-router/declare": "on",
         "react-router/v6-convert-switch-to-routers": "on",
         "react-router/v6-convert-component-to-element": "on",
         "react-router/v7-split-multi-segment-route": "on",
@@ -34,6 +36,34 @@ npm i putout @putout/plugin-react-router -D
 }
 ```
 
+## declare
+
+Check out in 🐊[Putout Editor](https://putout.cloudcmd.io/#/gist/c2d572f629f94043c3c5079fd95fe760/7d84e69ff1e770a1cbf5f4fc82846f7b60f47293).
+
+### ❌ Example of incorrect code
+
+```jsx
+const routes = () => (
+    <Switch>
+        <Route exact path="/login" component={Login}/>
+        <Route exact path="/join" component={Join}/>
+    </Switch>
+);
+```
+
+### ✅ Example of correct code
+
+```jsx
+import {Route, Routes} from 'react-router';
+
+const routes = () => (
+    <Routes>
+        <Route exact path="/login" component={Login}/>
+        <Route exact path="/join" component={Join}/>
+    </Routes>
+);
+```
+
 ## v6-convert-switch-to-routes
 
 `ReactRouter v6` [uses `Routers` instead of `Switch`](https://reactrouter.com/en/6.6.2/components/routes#routes). Check out in 🐊[Putout Editor](https://putout.cloudcmd.io/#/gist/2030cd7141bf5f02bef896b19b9400ea/a1364326157c85b9e8fa33b6c87cb77ca5a2792f).

packages/plugin-react-router/lib/declare/fixture/declare-fix.js

@@ -0,0 +1,5 @@
+import {Link} from 'react-router';
+
+export const Element = () => (
+    <Link/>
+);

packages/plugin-react-router/lib/declare/fixture/declare.js

@@ -0,0 +1 @@
+export const Element = () => <Link/>

packages/plugin-react-router/lib/declare/index.js

@@ -0,0 +1,52 @@
+export const declare = () => ({
+    createBrowserRouter: `import { createBrowserRouter } from 'react-router'`,
+    createHashRouter: `import { createHashRouter } from 'react-router'`,
+    createMemoryRouter: `import { createMemoryRouter } from 'react-router'`,
+    
+    createRoutesFromElements: `import { createRoutesFromElements } from 'react-router'`,
+    createRoutesFromChildren: `import { createRoutesFromChildren } from 'react-router'`,
+    
+    Routes: `import { Routes } from 'react-router'`,
+    Route: `import { Route } from 'react-router'`,
+    Outlet: `import { Outlet } from 'react-router'`,
+    Navigate: `import { Navigate } from 'react-router'`,
+    
+    Link: `import { Link } from 'react-router'`,
+    NavLink: `import { NavLink } from 'react-router'`,
+    
+    useNavigate: `import { useNavigate } from 'react-router'`,
+    useLocation: `import { useLocation } from 'react-router'`,
+    useParams: `import { useParams } from 'react-router'`,
+    useSearchParams: `import { useSearchParams } from 'react-router'`,
+    useMatch: `import { useMatch } from 'react-router'`,
+    useMatches: `import { useMatches } from 'react-router'`,
+    useHref: `import { useHref } from 'react-router'`,
+    useResolvedPath: `import { useResolvedPath } from 'react-router'`,
+    
+    useLoaderData: `import { useLoaderData } from 'react-router'`,
+    useRouteLoaderData: `import { useRouteLoaderData } from 'react-router'`,
+    useActionData: `import { useActionData } from 'react-router'`,
+    useRevalidator: `import { useRevalidator } from 'react-router'`,
+    useFetcher: `import { useFetcher } from 'react-router'`,
+    useFetchers: `import { useFetchers } from 'react-router'`,
+    useRouteError: `import { useRouteError } from 'react-router'`,
+    
+    generatePath: `import { generatePath } from 'react-router'`,
+    matchPath: `import { matchPath } from 'react-router'`,
+    matchRoutes: `import { matchRoutes } from 'react-router'`,
+    resolvePath: `import { resolvePath } from 'react-router'`,
+    redirect: `import { redirect } from 'react-router'`,
+    replace: `import { replace } from 'react-router'`,
+    json: `import { json } from 'react-router'`,
+    data: `import { data } from 'react-router'`,
+    isRouteErrorResponse: `import { isRouteErrorResponse } from 'react-router'`,
+    
+    StaticRouterProvider: `import { StaticRouterProvider } from 'react-router'`,
+    ServerRouter: `import { ServerRouter } from 'react-router'`,
+    
+    createStaticHandler: `import { createStaticHandler } from 'react-router'`,
+    createStaticRouter: `import { createStaticRouter } from 'react-router'`,
+    
+    RouterProvider: `import { RouterProvider } from 'react-router/dom'`,
+    HydratedRouter: `import { HydratedRouter } from 'react-router/dom'`,
+});

packages/plugin-react-router/lib/declare/index.spec.js

@@ -0,0 +1,18 @@
+import {createTest} from '@putout/test';
+import * as plugin from './index.js';
+
+const test = createTest(import.meta.url, {
+    plugins: [
+        ['declare', plugin],
+    ],
+});
+
+test('react-router: declare: report', (t) => {
+    t.report('declare', `Declare 'Link', it referenced but not defined`);
+    t.end();
+});
+
+test('react-router: declare: transform', (t) => {
+    t.transform('declare');
+    t.end();
+});

packages/plugin-react-router/lib/index.js

@@ -1,3 +1,4 @@
+import * as declare from './declare/index.js';
 import * as v8ApplyReactRouterDom from './v8-apply-react-router-dom/index.js';
 import * as v7RemoveUselessServer from './v7-remove-useless-server/index.js';
 import * as v6ConvertSwitchToRoutes from './v6-convert-switch-to-routes/index.js';
@@ -10,4 +11,5 @@ export const rules = {
     'v7-split-multi-segment-route': v7SplitMultiSegmentRoute,
     'v7-remove-useless-server': v7RemoveUselessServer,
     'v8-apply-react-router-dom': v8ApplyReactRouterDom,
+    'declare': declare,
 };

packages/plugin-react-router/lib/v8-apply-react-router-dom/fixture/v8-apply-react-router-dom-fix.js

@@ -1 +1 @@
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router/dom';

packages/plugin-react-router/test/fixture/declare-fix.js

@@ -0,0 +1,5 @@
+import {Link} from 'react-router';
+
+export const Element = () => (
+    <Link/>
+);

packages/plugin-react-router/test/fixture/declare.js

@@ -0,0 +1 @@
+export const Element = () => <Link/>

packages/plugin-react-router/test/fixture/v6-convert-component-to-element-fix.js

@@ -1 +1,3 @@
+import {Route} from 'react-router';
+
 <Route path="/" element={<Home/>}/>;