Merge pull request #7 from atomic-router/feat/create-route-view

feat: Upgraded `createRouteView` & `createRoutesView`

Author: Kelin2025

README.md

@@ -20,15 +20,17 @@ npm i effector effector-react react
 
 ## Usage
 
-### `RouterProvider` - provides router instance
+### Component API
+
+#### `RouterProvider` - provides router instance
 
 Wrap your app into this:
 
 ```tsx
-import { createHistoryRouter } from 'atomic-router'
-import { RouterProvider, Route } from 'atomic-router-react'
+import { createHistoryRouter } from "atomic-router";
+import { RouterProvider, Route } from "atomic-router-react";
 
-import { HomePage } from './routes'
+import { HomePage } from "./routes";
 
 const router = createHistoryRouter({ routes });
 
@@ -41,15 +43,15 @@ const App = () => {
 };
 ```
 
-### `Link` - render a link
+#### `Link` - render a link
 
 Simple usage:
 
 ```tsx
 import { createRoute } from 'atomic-router'
 import { Link } from 'atomic-router-react'
 
-const homeRoute = createRoute<{postId:string}>()
+const homeRoute = createRoute()
 const postRoute = createRoute<{postId:string}>()
 
 <Link to={homeRoute}>Route link</Link>
@@ -60,23 +62,102 @@ const postRoute = createRoute<{postId:string}>()
 All params:
 
 ```tsx
-import { Link } from 'atomic-router-react'
+import { Link } from "atomic-router-react";
 
 <Link
   to={route}
-  params={{ foo: 'bar' }}
-  query={{ bar: 'baz' }}
+  params={{ foo: "bar" }}
+  query={{ bar: "baz" }}
   activeClassName="font-semibold text-red-400"
   inactiveClassName="opacity-80"
-/>
+/>;
+```
+
+#### `Route` - render route
+
+```tsx
+import { Route } from "atomic-router-react";
+
+<Route route={homeRoute} view={HomePage} />;
+```
+
+### Declarative API
+
+
+
+#### `createRouteView` - render view if route is opened
+
+```tsx
+import { createRoute } from "atomic-router";
+import { createRouteView } from "atomic-router-react";
+import { restore, createEffect } from "effector";
+
+const homeRoute = createRoute();
+
+const getPostsFx = createEffect(/* ... */);
+
+const $posts = restore(getPostsFx, []);
+
+const postsLoadedRoute = chainRoute({
+  route,
+  beforeOpen: getPostsFx,
+});
+
+const PostsList = createRouteView({
+  route: postsLoadedRoute,
+  view: () => {
+    const posts = useStore($posts);
+
+    return; /* ... */
+  },
+  otherwise: () => {
+    return <div>Loading...</div>;
+  },
+});
+```
+
+You can also set only a part of `createRouteView` config on create and pass the rest of it via props.
+
+#### `createRoutesView` - render routes
+
+```tsx
+import { createRouteView, RouterProvider } from "atomic-router-react";
+
+// { route: RouteInstance<...>, view: FC<...> }
+import * as Home from "@/pages/home";
+import * as Post from "@/pages/post";
+
+import { router } from "@/app/routing";
+
+const RoutesView = createRoutesView({
+  routes: [
+    { route: Home.route, view: Home.Page },
+    { route: Post.route, view: Post.Page },
+  ],
+  otherwise: () => {
+    return <div>Page not found!</div>;
+  },
+});
+
+const App = () => {
+  return (
+    <RouterProvider router={router}>
+      <RoutesView />
+    </RouterProvider>
+  );
+};
 ```
 
-### `Route` - render route
+Like in `createRouteView`, you can set only a part of `createRoutesView` config on create and pass the rest of it via props:
 
 ```tsx
-import { Route } from 'atomic-router-react'
+// Set specific otherwise view
+const RoutesView = createRoutesView({
+  otherwise: SpecificNotFound,
+});
 
-<Route route={homeRoute} view={HomePage} />
+// Pass the routes as a prop
+<RoutesView routes={routes} />;
 ```
 
 ### `useLink` — resolve path from route

src/create-route-view.tsx

@@ -1,25 +1,39 @@
 import React from "react";
-import { combine } from "effector";
-import { useUnit } from "effector-react";
 import { RouteInstance } from "atomic-router";
 
-export const createRouteView = <Props,>(
-  route: RouteInstance<any> | RouteInstance<any>[],
-  View: React.FC<Props>
-) => {
-  const $isOpened = Array.isArray(route)
-    ? combine(combine(route.map((r) => r.$isOpened)), (isOpened) => isOpened.includes(true))
-    : route.$isOpened;
+import { useIsOpened } from "./use-is-opened";
+
+export type RouteViewConfig<Props, Params> = {
+  route: RouteInstance<Params> | RouteInstance<Params>[];
+  view: React.FC<Props>;
+  otherwise?: React.FC<Props>;
+};
 
-  function RouteView(props: Props) {
-    const isOpened = useUnit($isOpened);
+export const createRouteView = <
+  Props,
+  Params,
+  Config extends {
+    [key in keyof RouteViewConfig<Props, Params>]?: RouteViewConfig<Props, Params>[key];
+  }
+>(
+  config: Config
+) => {
+  return (props: Props & Omit<RouteViewConfig<Props, Params>, keyof Config>) => {
+    const mergedConfig = { ...config, ...props } as RouteViewConfig<Props, Params>;
+    const isOpened = useIsOpened(mergedConfig.route);
 
     if (isOpened) {
+      const View = mergedConfig.view;
+
       return <View {...props} />;
     }
 
-    return null;
-  }
+    if (mergedConfig.otherwise) {
+      const Otherwise = mergedConfig.otherwise;
 
-  return RouteView;
+      return <Otherwise {...props} />;
+    }
+
+    return null;
+  };
 };

src/create-routes-view.tsx

@@ -1,37 +1,40 @@
-import { combine } from "effector";
-import { useUnit } from "effector-react";
 import React, { FC } from "react";
 import { RouteInstance } from "atomic-router";
-import { createRouteView } from "./create-route-view";
-
-export const createRoutesView = (config: {
-  routes: { route: RouteInstance<any> | RouteInstance<any>[]; view: FC<any> }[];
-  notFound?: FC<any>;
-}) => {
-  const views = config.routes.map(({ route, view }) => createRouteView(route, view));
-  const $isSomeOpened = combine(
-    ...config.routes
-      .map(({ route }) => route)
-      .flat()
-      .map((route) => route.$isOpened),
-    // @ts-expect-error
-    (...isOpened) => isOpened.some(Boolean)
-  );
-
-  const NotFound = config.notFound;
-
-  return () => {
-    const isSomeOpened = useUnit($isSomeOpened);
-
-    if (!isSomeOpened && NotFound) {
-      return <NotFound />;
+
+import { useIsOpened } from "./use-is-opened";
+
+type RouteRecord<Props, Params> = {
+  route: RouteInstance<Params> | RouteInstance<Params>[];
+  view: FC<Props>;
+};
+
+export type RoutesViewConfig = {
+  routes: RouteRecord<unknown, unknown>[];
+  otherwise?: React.FC<unknown>;
+};
+
+export const createRoutesView = <Config extends RoutesViewConfig>(config: Config) => {
+  return (props: Omit<Config, keyof Config>) => {
+    const mergedConfig = { ...config, ...props };
+    const routes = mergedConfig.routes.map((routeRecord) => {
+      const isOpened = useIsOpened(routeRecord.route);
+      return { ...routeRecord, isOpened };
+    });
+
+    for (const route of routes) {
+      if (route.isOpened) {
+        const View = route.view;
+
+        return <View />;
+      }
+    }
+
+    if (mergedConfig.otherwise) {
+      const Otherwise = mergedConfig.otherwise;
+
+      return <Otherwise />;
     }
-    return (
-      <>
-        {views.map((View, idx) => (
-          <View key={idx} />
-        ))}
-      </>
-    );
+
+    return null;
   };
 };

src/route.tsx

@@ -1,26 +1,15 @@
 import React, { FC } from 'react';
-import { useStoreMap } from 'effector-react';
 import { RouteInstance, RouteParams } from 'atomic-router';
 
-import { useRouter } from './router-provider';
+import { useIsOpened } from './use-is-opened';
 
 type Props<Params extends RouteParams> = {
   route: RouteInstance<Params> | RouteInstance<Params>[];
   view: FC;
 };
 
 export function Route<Params>({ route, view: Component }: Props<Params>) {
-  const router = useRouter();
-  /* eslint-disable */
-  const isOpened = useStoreMap({
-    store: router.$activeRoutes,
-    keys: [route],
-    fn: (activeRoutes, [route]) => {
-      return Array.isArray(route)
-        ? route.some(route => activeRoutes.includes(route))
-        : activeRoutes.includes(route);
-    },
-  });
+  const isOpened = useIsOpened(route);
 
   if (isOpened) {
     return <Component />;

src/use-is-opened.tsx

@@ -0,0 +1,10 @@
+import { useUnit } from 'effector-react';
+import { RouteInstance } from 'atomic-router';
+
+export const useIsOpened = (
+  route: RouteInstance<any> | RouteInstance<any>[]
+) => {
+  return Array.isArray(route)
+    ? useUnit(route.map((route) => route.$isOpened)).some(Boolean)
+    : useUnit(route.$isOpened);
+};