feat: Upgraded createRouteView & createRoutesView

Author: Kelin2025

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);
+};