mobx-route 0.0.68 → 0.0.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-route",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "keywords": [
     "mobx",
     "react",
@@ -145,6 +145,11 @@
       "default": "./react/components/route-group-view.js",
       "types": "./react/components/route-group-view.d.ts"
     },
+    "./react/components/route-view-map": {
+      "import": "./react/components/route-view-map.js",
+      "default": "./react/components/route-view-map.js",
+      "types": "./react/components/route-view-map.d.ts"
+    },
     "./react/components/route-view": {
       "import": "./react/components/route-view.js",
       "default": "./react/components/route-view.js",

package/react/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './link.js';
 export * from './route-view.js';
 export * from './route-group-view.js';
+export * from './route-view-map.js';
 //# sourceMappingURL=index.d.ts.map

package/react/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}

package/react/components/index.js

@@ -1,3 +1,4 @@
 export * from './link.js';
 export * from './route-view.js';
 export * from './route-group-view.js';
+export * from './route-view-map.js';

package/react/components/route-group-view.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { EmptyObject } from 'yummies/utils/types';
 import { AnyRouteEntity, AnyRouteGroup, RoutesArrayCollection, RoutesCollection, RoutesObjectCollection } from '../../core/index.js';
 import { RouteViewComponent, RouteViewConfigProps } from './route-view.js';
@@ -10,8 +11,10 @@ export type RouteGroupViews<TRoutes extends RoutesCollection> = TRoutes extends
 export interface RouteGroupViewProps<TRouteGroup extends AnyRouteGroup> {
     group: TRouteGroup;
     views: Partial<RouteGroupViews<TRouteGroup['routes']>>;
+    onFallback?: VoidFunction;
+    fallbackView?: ReactNode;
 }
-declare const RouteGroupViewBase: <TRouteGroup extends AnyRouteGroup>({ group, views, }: RouteGroupViewProps<TRouteGroup>) => import("react/jsx-runtime").JSX.Element;
-export declare const RouteGroupView: typeof RouteGroupViewBase;
-export {};
+export declare const RouteGroupView: (<TRouteGroup extends AnyRouteGroup>({ group, views, fallbackView, onFallback, }: RouteGroupViewProps<TRouteGroup>) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
 //# sourceMappingURL=route-group-view.d.ts.map

package/react/components/route-group-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route-group-view.d.ts","sourceRoot":"","sources":["../../../src/react/components/route-group-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EACL,cAAc,EACd,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAEL,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,cAAc,CAAC,YAAY,SAAS,cAAc,IAE1D,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAEjD,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAErC,MAAM,MAAM,eAAe,CAAC,OAAO,SAAS,gBAAgB,IAC1D,OAAO,SAAS,qBAAqB,GACjC;KACG,CAAC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,cAAc,GACnD,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC1B,KAAK;CACV,GACD,OAAO,SAAS,sBAAsB,GACpC;KACG,CAAC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,cAAc,GACnD,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC1B,KAAK;CACV,GACD,WAAW,CAAC;AAEpB,MAAM,WAAW,mBAAmB,CAAC,WAAW,SAAS,aAAa;IACpE,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,kBAAkB,GAAI,WAAW,SAAS,aAAa,EAAE,mBAG5D,mBAAmB,CAAC,WAAW,CAAC,4CAsBlC,CAAC;AAEF,eAAO,MAAM,cAAc,EAGtB,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"route-group-view.d.ts","sourceRoot":"","sources":["../../../src/react/components/route-group-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EACL,cAAc,EACd,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAEL,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,cAAc,CAAC,YAAY,SAAS,cAAc,IAE1D,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAEjD,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAErC,MAAM,MAAM,eAAe,CAAC,OAAO,SAAS,gBAAgB,IAC1D,OAAO,SAAS,qBAAqB,GACjC;KACG,CAAC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,cAAc,GACnD,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC1B,KAAK;CACV,GACD,OAAO,SAAS,sBAAsB,GACpC;KACG,CAAC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,cAAc,GACnD,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAC1B,KAAK;CACV,GACD,WAAW,CAAC;AAEpB,MAAM,WAAW,mBAAmB,CAAC,WAAW,SAAS,aAAa;IACpE,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAmDD,eAAO,MAAM,cAAc,IAjDC,WAAW,SAAS,aAAa,+CAK1D,mBAAmB,CAAC,WAAW,CAAC;;CA4CuB,CAAC"}

package/react/components/route-group-view.js

@@ -1,20 +1,40 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { useLayoutEffect, useMemo } from 'react';
 import { RouteView, } from './route-view.js';
-const RouteGroupViewBase = ({ group, views, }) => {
-    const viewEntries = Object.entries(views);
-    return (_jsx(_Fragment, { children: viewEntries.map(([routeName, propsOrView]) => {
-            // @ts-expect-error Object.entries is not accept types for arrays
-            const route = group.routes[routeName];
-            const viewProps = propsOrView &&
-                (typeof propsOrView === 'function' ||
-                    'contextTypes' in propsOrView ||
-                    '$$typeof' in propsOrView)
-                ? {
-                    view: propsOrView,
-                }
-                : propsOrView;
-            return _jsx(RouteView, { route: route, ...viewProps }, routeName);
-        }) }));
+const RouteGroupViewBase = ({ group, views, fallbackView, onFallback, }) => {
+    const viewEntries = useMemo(() => Object.entries(views), []);
+    const openedRouteEntry = viewEntries.find(([routeName]) => {
+        // @ts-expect-error Object.entries is not accept types for arrays
+        const route = group.routes[routeName];
+        return route.isOpened;
+    });
+    const openedRouteName = openedRouteEntry?.[0];
+    const openedRoutePropsOrView = openedRouteEntry?.[1];
+    const openedRoute = openedRouteName && openedRouteName in group.routes
+        ? // @ts-expect-error Object.entries is not accept types for arrays
+            group.routes[openedRouteName]
+        : undefined;
+    useLayoutEffect(() => {
+        if (!openedRoute) {
+            onFallback?.();
+        }
+    }, [openedRoute]);
+    if (!openedRoute) {
+        return fallbackView ?? null;
+    }
+    const openedRouteViewProps = openedRoutePropsOrView &&
+        (typeof openedRoutePropsOrView === 'function' ||
+            'contextTypes' in openedRoutePropsOrView ||
+            '$$typeof' in openedRoutePropsOrView)
+        ? {
+            view: openedRoutePropsOrView,
+            fallbackView,
+        }
+        : {
+            ...openedRoutePropsOrView,
+            fallbackView: openedRoutePropsOrView?.fallbackView ?? fallbackView,
+        };
+    return _jsx(RouteView, { route: openedRoute, ...openedRouteViewProps });
 };
-export const RouteGroupView = memo(RouteGroupViewBase, () => true);
+export const RouteGroupView = observer(RouteGroupViewBase);

package/react/components/route-view-map.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { AnyRouteEntity } from '../../core/index.js';
+import { RouteViewComponent, RouteViewConfigProps } from './route-view.js';
+export type MappedRouteView<TRouteEntity extends AnyRouteEntity> = Omit<RouteViewConfigProps<TRouteEntity>, 'route'> | RouteViewComponent<TRouteEntity>;
+type RouteViewMapArrayType = [
+    AnyRouteEntity,
+    MappedRouteView<AnyRouteEntity>
+][];
+export type RouteViewMapType = RouteViewMapArrayType;
+export interface RouteViewMapProps<TMap extends RouteViewMapType> {
+    map: TMap;
+    onFallback?: VoidFunction;
+    fallbackView?: ReactNode;
+}
+export declare const RouteViewMap: (<TMap extends RouteViewMapType>({ map, onFallback, fallbackView, }: RouteViewMapProps<TMap>) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=route-view-map.d.ts.map

package/react/components/route-view-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-view-map.d.ts","sourceRoot":"","sources":["../../../src/react/components/route-view-map.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAEL,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,eAAe,CAAC,YAAY,SAAS,cAAc,IAE3D,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,GAEjD,kBAAkB,CAAC,YAAY,CAAC,CAAC;AAErC,KAAK,qBAAqB,GAAG;IAC3B,cAAc;IACd,eAAe,CAAC,cAAc,CAAC;CAChC,EAAE,CAAC;AAGJ,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC;AAErD,MAAM,WAAW,iBAAiB,CAAC,IAAI,SAAS,gBAAgB;IAC9D,GAAG,EAAE,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AA2CD,eAAO,MAAM,YAAY,IAzCC,IAAI,SAAS,gBAAgB,sCAIpD,iBAAiB,CAAC,IAAI,CAAC;;CAqC4B,CAAC"}

package/react/components/route-view-map.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { useLayoutEffect, useMemo } from 'react';
+import { RouteView, } from './route-view.js';
+const RouteViewMapBase = ({ map, onFallback, fallbackView, }) => {
+    const viewEntries = useMemo(() => Object.entries(map), []);
+    const openedRouteEntry = viewEntries.find(([, data]) => {
+        const route = data[0];
+        return route.isOpened;
+    });
+    const openedRoute = openedRouteEntry?.[1]?.[0];
+    const openedRoutePropsOrView = openedRouteEntry?.[1]?.[1];
+    useLayoutEffect(() => {
+        if (!openedRoute) {
+            onFallback?.();
+        }
+    }, [openedRoute]);
+    if (!openedRoute) {
+        return fallbackView ?? null;
+    }
+    const openedRouteViewProps = openedRoutePropsOrView &&
+        (typeof openedRoutePropsOrView === 'function' ||
+            'contextTypes' in openedRoutePropsOrView ||
+            '$$typeof' in openedRoutePropsOrView)
+        ? {
+            view: openedRoutePropsOrView,
+            fallbackView,
+        }
+        : {
+            ...openedRoutePropsOrView,
+            fallbackView: openedRoutePropsOrView?.fallbackView ?? fallbackView,
+        };
+    return _jsx(RouteView, { route: openedRoute, ...openedRouteViewProps });
+};
+export const RouteViewMap = observer(RouteViewMapBase);

package/react/components/route-view.d.ts

@@ -6,7 +6,7 @@ export interface RouteViewConfigProps<TRouteEntity extends AnyRouteEntity> {
     view?: RouteViewComponent<TRouteEntity>;
     lazyView?: () => Promise<ComponentType<RouteViewProps<TRouteEntity>>>;
     loader?: ComponentType;
-    notOpenedContent?: ReactNode;
+    fallbackView?: ReactNode;
     children?: ReactNode;
 }
 export type RouteViewProps<TRouteEntity extends AnyRouteEntity> = {

package/react/components/route-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route-view.d.ts","sourceRoot":"","sources":["../../../src/react/components/route-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,kBAAkB,CAAC,YAAY,SAAS,cAAc,IAChE,aAAa,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9C,MAAM,WAAW,oBAAoB,CAAC,YAAY,SAAS,cAAc;IACvE,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACtE,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,CAAC,YAAY,SAAS,cAAc,IAAI;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,YAAY,SAAS,QAAQ,GACjC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC,GACjD,YAAY,SAAS,eAAe,GAClC,YAAY,CAAC,QAAQ,CAAC,GACtB,KAAK,CAAC;CACb,CAAC;AAEF,iBAAS,aAAa,CAAC,YAAY,SAAS,cAAc,EACxD,KAAK,EAAE,oBAAoB,CAAC,YAAY,CAAC,gHA0B1C;AAED,eAAO,MAAM,SAAS;;CAA0B,CAAC"}
+{"version":3,"file":"route-view.d.ts","sourceRoot":"","sources":["../../../src/react/components/route-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,kBAAkB,CAAC,YAAY,SAAS,cAAc,IAChE,aAAa,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9C,MAAM,WAAW,oBAAoB,CAAC,YAAY,SAAS,cAAc;IACvE,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACtE,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,CAAC,YAAY,SAAS,cAAc,IAAI;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,YAAY,SAAS,QAAQ,GACjC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC,GACjD,YAAY,SAAS,eAAe,GAClC,YAAY,CAAC,QAAQ,CAAC,GACtB,KAAK,CAAC;CACb,CAAC;AAEF,iBAAS,aAAa,CAAC,YAAY,SAAS,cAAc,EACxD,KAAK,EAAE,oBAAoB,CAAC,YAAY,CAAC,gHA0B1C;AAED,eAAO,MAAM,SAAS;;CAA0B,CAAC"}

package/react/components/route-view.js

@@ -6,7 +6,7 @@ function RouteViewBase(props) {
     const lazyViewComponentRef = useRef();
     let Component;
     if (!props.route.isOpened) {
-        return props.notOpenedContent ?? null;
+        return props.fallbackView ?? null;
     }
     if (props.lazyView) {
         lazyViewComponentRef.current = loadable(props.lazyView, {