mobx-route 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-route",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "keywords": [
     "mobx",
     "react",
@@ -22,11 +22,11 @@
     "url": "git://github.com/js2me/mobx-route"
   },
   "dependencies": {
-    "linked-abort-controller": "^1.1.0",
-    "mobx-location-history": "^8.1.1",
-    "path-to-regexp": "^8.2.0",
-    "react-simple-loadable": "^2.3.8",
-    "yummies": "^6.0.0"
+    "linked-abort-controller": "^1.1.1",
+    "mobx-location-history": "^9.1.1",
+    "path-to-regexp": "^8.3.0",
+    "react-simple-loadable": "^3.0.0",
+    "yummies": "^6.6.0"
   },
   "peerDependencies": {
     "mobx": "^6.12.4",
@@ -45,71 +45,28 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@biomejs/biome": "2.2.4",
-    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.5",
-    "@testing-library/react": "^16.3.0",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.17.30",
-    "@types/react": "^18.0.0 || ^19.0.0",
-    "@vitejs/plugin-react-swc": "^3.9.0",
-    "@vitest/coverage-istanbul": "^3.1.2",
-    "commitfmt": "^1.0.4",
-    "js2me-biome-config": "^1.0.5",
-    "sborshik": "^1.0.8",
-    "jsdom": "^26.1.0",
-    "lefthook": "^1.11.13",
-    "nodemon": "^3.1.10",
-    "rimraf": "^6.0.1",
-    "typescript": "^5.8.3",
-    "vitest": "^3.1.2",
-    "zshy": "^0.4.2"
-  },
-  "files": [
-    "*"
-  ],
-  "main": "./index.cjs",
-  "module": "./index.js",
-  "types": "./index.d.cts",
+  "main": "index.js",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
-      "types": "./index.d.cts",
+      "types": "./index.d.ts",
       "import": "./index.js",
-      "require": "./index.cjs"
+      "require": "./index.cjs",
+      "default": "./index.js"
     },
     "./react": {
-      "types": "./react/index.d.cts",
-      "import": "./react/index.js",
-      "require": "./react/index.cjs"
+      "types": "./react.d.ts",
+      "import": "./react.js",
+      "require": "./react.cjs",
+      "default": "./react.js"
     },
     "./view-model": {
-      "types": "./view-model/index.d.cts",
-      "import": "./view-model/index.js",
-      "require": "./view-model/index.cjs"
+      "types": "./view-model.d.ts",
+      "import": "./view-model.js",
+      "require": "./view-model.cjs",
+      "default": "./view-model.js"
     }
   },
-  "scripts": {
-    "clean": "rimraf dist",
-    "lint:check": "pnpm exec biome check --write --no-errors-on-unmatched --files-ignore-unknown=true",
-    "ts:check": "tsc --noEmit",
-    "check": "npm run lint:check && npm run ts:check",
-    "prebuild": "npm run clean && npm run check",
-    "build:watch": "pnpm build && nodemon --watch src --ext ts --exec \"pnpm build\"",
-    "build": "sborshik build --fillDist",
-    "pub": "pnpm build && sborshik publish --useDistDir",
-    "pub:patch": "PUBLISH_VERSION=patch pnpm pub",
-    "pub:minor": "PUBLISH_VERSION=minor pnpm pub",
-    "pub:major": "PUBLISH_VERSION=major pnpm pub",
-    "test": "vitest run --config vitest.config.ts",
-    "test:watch": "vitest watch --config vitest.config.ts",
-    "test:coverage": "vitest run --config vitest.config.ts --coverage",
-    "docs": "pnpm build && cd docs && pnpm dev",
-    "docs:install": "cd docs && pnpm i",
-    "docs:build": "cd docs && pnpm build",
-    "docs:serve": "cd docs && pnpm preview",
-    "dev": "pnpm test:watch",
-    "dev:install-hooks": "if [ -z \"$CI\" ]; then lefthook install; fi"
-  }
+  "files": [
+    "*"
+  ]
 }

package/react.cjs

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const mobxReactLite = require("mobx-react-lite");
+const mobxRoute = require("mobx-route");
+const react = require("react");
+const data = require("yummies/data");
+const reactSimpleLoadable = require("react-simple-loadable");
+const Link = mobxReactLite.observer(
+  react.forwardRef(
+    ({
+      to,
+      href: outerHref,
+      mergeQuery,
+      asChild,
+      children,
+      params,
+      // route navigate params
+      query,
+      replace,
+      state,
+      ...outerAnchorProps
+    }, ref) => {
+      const isExternalNavigation = outerAnchorProps.target === "_blank" || outerAnchorProps.target === "blank";
+      const queryDataRef = react.useRef(query);
+      if (!data.isShallowEqual(queryDataRef.current, query)) {
+        queryDataRef.current = query;
+      }
+      const { href, navigateParams } = react.useMemo(() => {
+        const navigateParams2 = {
+          mergeQuery,
+          query,
+          replace,
+          state
+        };
+        const cfg = mobxRoute.routeConfig.get();
+        let href2;
+        if (outerHref) {
+          href2 = outerHref;
+        } else {
+          if (typeof to === "string") {
+            const isNeedToMergeQuery = navigateParams2.mergeQuery ?? cfg.mergeQuery;
+            const [path, ...querySegments] = to.split("?");
+            const existedQuery = mobxRoute.parseSearchString(querySegments.join("?"));
+            const query2 = {
+              ...isNeedToMergeQuery ? cfg.queryParams.data : {},
+              ...existedQuery,
+              ...navigateParams2.query
+            };
+            href2 = `${path}${mobxRoute.buildSearchString(query2)}`;
+          } else {
+            href2 = to.createUrl(
+              params,
+              navigateParams2.query,
+              navigateParams2.mergeQuery
+            );
+          }
+        }
+        return {
+          href: cfg.formatLinkHref?.(href2) ?? href2,
+          navigateParams: navigateParams2
+        };
+      }, [mergeQuery, replace, state, to, queryDataRef.current]);
+      const handleClick = (event) => {
+        if (isExternalNavigation || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0)
+          return;
+        outerAnchorProps.onClick?.(event);
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          if (navigateParams.replace) {
+            mobxRoute.routeConfig.get().history.replace(href, navigateParams.state);
+          } else {
+            mobxRoute.routeConfig.get().history.push(href, navigateParams.state);
+          }
+        }
+      };
+      const anchorProps = {
+        ...outerAnchorProps,
+        href,
+        onClick: handleClick,
+        rel: outerAnchorProps.rel ?? (isExternalNavigation ? "noopener noreferrer" : void 0)
+      };
+      return asChild && react.isValidElement(children) ? react.cloneElement(children, anchorProps) : /* @__PURE__ */ jsxRuntime.jsx("a", { ...anchorProps, ref, children });
+    }
+  )
+);
+function RouteViewBase(props) {
+  const lazyViewComponentRef = react.useRef();
+  let Component;
+  if (!("route" in props)) {
+    return typeof props.children === "function" ? props.children() : props.children;
+  }
+  if (!props.route.isOpened) {
+    return props.fallback ?? null;
+  }
+  if (props.loadView) {
+    if (!lazyViewComponentRef.current) {
+      lazyViewComponentRef.current = reactSimpleLoadable.loadable({
+        load: () => props.loadView(props.route),
+        loading: props.loading,
+        preload: props.preload,
+        throwOnError: props.throwOnError
+      });
+    }
+    Component = lazyViewComponentRef.current;
+  } else {
+    Component = props.view;
+  }
+  const params = "params" in props.route ? props.route.params : {};
+  if (Component) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { params, children: props.children });
+  }
+  if (typeof props.children === "function") {
+    return props.children(params, props.route);
+  }
+  return props.children;
+}
+const RouteView = mobxReactLite.observer(RouteViewBase);
+const RouteViewGroup = mobxReactLite.observer(
+  ({
+    children,
+    layout: Layout,
+    otherwise: otherwiseNavigation,
+    // @ts-expect-error
+    params,
+    ...navigateParams
+  }) => {
+    let activeChildNode = null;
+    let lastInactiveChildNode = null;
+    const childNodes = Array.isArray(children) ? children : [children];
+    for (const childNode of childNodes) {
+      if (react.isValidElement(childNode) && // @ts-expect-error redundand checks better to wrap in this directive
+      mobxRoute.isRouteEntity(childNode.props?.route) && // @ts-expect-error redundand checks better to wrap in this directive
+      childNode.props.route.isOpened) {
+        activeChildNode = childNode;
+        break;
+      } else {
+        lastInactiveChildNode = childNode;
+      }
+    }
+    const hasActiveChildNode = !!activeChildNode;
+    react.useEffect(() => {
+      if (!hasActiveChildNode && otherwiseNavigation) {
+        if (typeof otherwiseNavigation === "string") {
+          const history = mobxRoute.routeConfig.get().history;
+          const url = `${otherwiseNavigation}${mobxRoute.buildSearchString(navigateParams.query || {})}`;
+          if (navigateParams.replace) {
+            history.replace(url, navigateParams.state);
+          } else {
+            history.push(url, navigateParams.state);
+          }
+        } else if (!otherwiseNavigation.isOpened) {
+          otherwiseNavigation.open(params, navigateParams);
+        }
+      }
+    }, [hasActiveChildNode, otherwiseNavigation]);
+    if (otherwiseNavigation && !activeChildNode) {
+      return null;
+    }
+    const resultNodeToRender = activeChildNode ?? lastInactiveChildNode ?? null;
+    if (Layout) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: resultNodeToRender });
+    }
+    return resultNodeToRender;
+  }
+);
+exports.Link = Link;
+exports.RouteView = RouteView;
+exports.RouteViewGroup = RouteViewGroup;
+//# sourceMappingURL=react.cjs.map

package/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.cjs","sources":["../src/react/components/link.tsx","../src/react/components/route-view.tsx","../src/react/components/route-view-group.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport {\n  type AnyRoute,\n  buildSearchString,\n  type InputPathParams,\n  parseSearchString,\n  type RouteNavigateParams,\n  routeConfig,\n} from 'mobx-route';\nimport {\n  type AnchorHTMLAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  useMemo,\n  useRef,\n} from 'react';\nimport { isShallowEqual } from 'yummies/data';\nimport type { IsPartial } from 'yummies/types';\n\ninterface LinkAnchorProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {\n  asChild?: boolean;\n}\n\ntype LinkPathRouteProps<TRoute extends AnyRoute> = {\n  to: TRoute;\n} & (IsPartial<InputPathParams<TRoute['path']>> extends true\n  ? {\n      params?: InputPathParams<TRoute['path']> | null | undefined;\n    }\n  : { params: InputPathParams<TRoute['path']> });\n\ntype LinkSimpleRouteProps =\n  | {\n      to: string;\n    }\n  | {\n      href: string;\n    };\n\nexport type LinkProps<TRoute extends AnyRoute> = LinkAnchorProps &\n  RouteNavigateParams &\n  (LinkPathRouteProps<TRoute> | LinkSimpleRouteProps);\n\ntype LinkComponentType = <TRoute extends AnyRoute>(\n  props: LinkProps<TRoute>,\n) => React.ReactNode;\n\nexport const Link = observer(\n  forwardRef<\n    HTMLAnchorElement,\n    LinkAnchorProps &\n      RouteNavigateParams & {\n        params?: any;\n        to: string | AnyRoute;\n        href: string;\n      }\n  >(\n    (\n      {\n        to,\n        href: outerHref,\n        mergeQuery,\n        asChild,\n        children,\n        params,\n        // route navigate params\n        query,\n        replace,\n        state,\n        ...outerAnchorProps\n      },\n      ref,\n    ) => {\n      const isExternalNavigation =\n        outerAnchorProps.target === '_blank' ||\n        outerAnchorProps.target === 'blank';\n      const queryDataRef = useRef<RouteNavigateParams['query']>(query);\n\n      if (!isShallowEqual(queryDataRef.current, query)) {\n        queryDataRef.current = query;\n      }\n\n      const { href, navigateParams } = useMemo(() => {\n        const navigateParams: RouteNavigateParams = {\n          mergeQuery,\n          query,\n          replace,\n          state,\n        };\n\n        const cfg = routeConfig.get();\n\n        let href: string;\n\n        if (outerHref) {\n          href = outerHref;\n        } else {\n          if (typeof to === 'string') {\n            const isNeedToMergeQuery =\n              navigateParams.mergeQuery ?? cfg.mergeQuery;\n\n            const [path, ...querySegments] = to.split('?');\n\n            const existedQuery = parseSearchString(querySegments.join('?'));\n\n            const query = {\n              ...(isNeedToMergeQuery ? cfg.queryParams.data : {}),\n              ...existedQuery,\n              ...navigateParams.query,\n            };\n\n            href = `${path}${buildSearchString(query)}`;\n          } else {\n            href = to.createUrl(\n              params,\n              navigateParams.query,\n              navigateParams.mergeQuery,\n            );\n          }\n        }\n\n        return {\n          href: cfg.formatLinkHref?.(href) ?? href,\n          navigateParams,\n        };\n      }, [mergeQuery, replace, state, to, queryDataRef.current]);\n\n      const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n        if (\n          isExternalNavigation ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.altKey ||\n          event.shiftKey ||\n          event.button !== 0\n        )\n          return;\n\n        outerAnchorProps.onClick?.(event);\n\n        if (!event.defaultPrevented) {\n          event.preventDefault();\n\n          if (navigateParams.replace) {\n            routeConfig.get().history.replace(href, navigateParams.state);\n          } else {\n            routeConfig.get().history.push(href, navigateParams.state);\n          }\n        }\n      };\n\n      const anchorProps = {\n        ...outerAnchorProps,\n        href,\n        onClick: handleClick,\n        rel:\n          outerAnchorProps.rel ??\n          (isExternalNavigation ? 'noopener noreferrer' : undefined),\n      };\n\n      return asChild && isValidElement(children) ? (\n        cloneElement(children, anchorProps)\n      ) : (\n        <a {...anchorProps} ref={ref}>\n          {children}\n        </a>\n      );\n    },\n  ),\n) as unknown as LinkComponentType;\n","import { observer } from 'mobx-react-lite';\nimport type {\n  AnyAbstractRouteEntity,\n  AnyRoute,\n  AnyVirtualRoute,\n} from 'mobx-route';\nimport { useRef } from 'react';\nimport { type LoadableConfig, loadable } from 'react-simple-loadable';\n\nexport type RouteViewComponent<TRoute extends AnyAbstractRouteEntity> =\n  React.ComponentType<RouteViewProps<TRoute>>;\n\ninterface RouteViewConfigWithoutRoute {\n  children?: React.ReactNode | (() => React.ReactNode);\n}\n\nexport interface RouteViewConfigWithRoute<TRoute extends AnyAbstractRouteEntity>\n  extends Pick<LoadableConfig, 'loading' | 'preload' | 'throwOnError'> {\n  route: TRoute;\n  view?: RouteViewComponent<TRoute>;\n  loadView?: (route: TRoute) => Promise<RouteViewComponent<TRoute>>;\n  /**\n   * Case when route is not opened\n   */\n  fallback?: React.ReactNode;\n  children?:\n    | React.ReactNode\n    | ((\n        params: RouteViewProps<TRoute>['params'],\n        route: TRoute,\n      ) => React.ReactNode);\n}\n\nexport type RouteViewConfig<TRoute extends AnyAbstractRouteEntity> =\n  | RouteViewConfigWithRoute<TRoute>\n  | RouteViewConfigWithoutRoute;\n\nexport type RouteViewProps<TRoute extends AnyAbstractRouteEntity> = {\n  children?: React.ReactNode;\n  params: TRoute extends AnyRoute\n    ? Exclude<TRoute['params'], null | undefined>\n    : TRoute extends AnyVirtualRoute\n      ? TRoute['params']\n      : never;\n};\n\ntype RouteViewBaseComponent = <TRoute extends AnyAbstractRouteEntity>(\n  props: RouteViewConfig<TRoute>,\n) => React.ReactNode;\n\nfunction RouteViewBase<TRoute extends AnyAbstractRouteEntity>(\n  props: Readonly<RouteViewConfig<TRoute>>,\n): React.ReactNode {\n  // @ts-expect-error redundand pass first argument\n  const lazyViewComponentRef = useRef<React.ComponentType<any>>();\n\n  let Component: React.ComponentType<any> | undefined;\n\n  if (!('route' in props)) {\n    return typeof props.children === 'function'\n      ? props.children()\n      : props.children;\n  }\n\n  if (!props.route.isOpened) {\n    return props.fallback ?? null;\n  }\n\n  if (props.loadView) {\n    if (!lazyViewComponentRef.current) {\n      lazyViewComponentRef.current = loadable({\n        load: () => props.loadView!(props.route),\n        loading: props.loading,\n        preload: props.preload,\n        throwOnError: props.throwOnError,\n      });\n    }\n    Component = lazyViewComponentRef.current;\n  } else {\n    Component = props.view;\n  }\n\n  const params: any = 'params' in props.route ? props.route.params : {};\n\n  if (Component) {\n    return <Component params={params}>{props.children}</Component>;\n  }\n\n  if (typeof props.children === 'function') {\n    return props.children(params, props.route);\n  }\n\n  return props.children;\n}\n\nexport const RouteView = observer(RouteViewBase) as RouteViewBaseComponent;\n","import { observer } from 'mobx-react-lite';\nimport {\n  type AnyRouteEntity,\n  buildSearchString,\n  isRouteEntity,\n  type RouteNavigateParams,\n  type RouteParams,\n  routeConfig,\n} from 'mobx-route';\nimport { isValidElement, useEffect } from 'react';\nimport type { IsPartial, Maybe } from 'yummies/types';\n\ntype LayoutComponent =\n  | React.ComponentType<{ children?: React.ReactNode }>\n  | React.ComponentType<{ children: React.ReactNode }>;\n\ninterface BaseProps extends RouteNavigateParams {\n  children: React.ReactNode;\n  layout?: LayoutComponent;\n}\n\ntype PropsWithDefaultRoute<TRoute extends AnyRouteEntity> = BaseProps & {\n  otherwise?: TRoute;\n} & (IsPartial<RouteParams<TRoute>> extends true\n    ? {\n        params?: Maybe<RouteParams<TRoute>>;\n      }\n    : {\n        params: RouteParams<TRoute>;\n      });\n\ntype PropsWithDefaultUrl = BaseProps & {\n  otherwise?: string;\n};\n\nexport type RouteViewGroupProps<TRoute extends AnyRouteEntity> =\n  | PropsWithDefaultRoute<TRoute>\n  | PropsWithDefaultUrl;\n\ntype RouteViewGroupComponent = <TRoute extends AnyRouteEntity>(\n  props: RouteViewGroupProps<TRoute>,\n) => React.ReactNode;\n\nexport const RouteViewGroup = observer(\n  <TRoute extends AnyRouteEntity>({\n    children,\n    layout: Layout,\n    otherwise: otherwiseNavigation,\n    // @ts-expect-error\n    params,\n    ...navigateParams\n  }: RouteViewGroupProps<TRoute>) => {\n    let activeChildNode: React.ReactNode = null;\n    let lastInactiveChildNode: React.ReactNode = null;\n\n    const childNodes: React.ReactNode[] = Array.isArray(children)\n      ? children\n      : [children];\n\n    for (const childNode of childNodes) {\n      if (\n        isValidElement(childNode) &&\n        // @ts-expect-error redundand checks better to wrap in this directive\n        isRouteEntity(childNode.props?.route) &&\n        // @ts-expect-error redundand checks better to wrap in this directive\n        childNode.props.route.isOpened\n      ) {\n        activeChildNode = childNode;\n        break;\n      } else {\n        lastInactiveChildNode = childNode;\n      }\n    }\n\n    const hasActiveChildNode = !!activeChildNode;\n\n    useEffect(() => {\n      if (!hasActiveChildNode && otherwiseNavigation) {\n        if (typeof otherwiseNavigation === 'string') {\n          const history = routeConfig.get().history;\n          const url = `${otherwiseNavigation}${buildSearchString(navigateParams.query || {})}`;\n\n          if (navigateParams.replace) {\n            history.replace(url, navigateParams.state);\n          } else {\n            history.push(url, navigateParams.state);\n          }\n        } else if (!otherwiseNavigation.isOpened) {\n          otherwiseNavigation.open(params, navigateParams);\n        }\n      }\n    }, [hasActiveChildNode, otherwiseNavigation]);\n\n    if (otherwiseNavigation && !activeChildNode) {\n      return null;\n    }\n\n    const resultNodeToRender = activeChildNode ?? lastInactiveChildNode ?? null;\n\n    if (Layout) {\n      return <Layout>{resultNodeToRender}</Layout>;\n    }\n\n    return resultNodeToRender;\n  },\n) as unknown as RouteViewGroupComponent;\n"],"names":["observer","forwardRef","useRef","isShallowEqual","useMemo","navigateParams","routeConfig","href","parseSearchString","query","buildSearchString","isValidElement","cloneElement","jsx","loadable","isRouteEntity","useEffect"],"mappings":"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"}

package/react.d.ts

@@ -0,0 +1,71 @@
+import { AnyRoute, RouteNavigateParams, InputPathParams, AnyAbstractRouteEntity, AnyVirtualRoute, AnyRouteEntity, RouteParams } from 'mobx-route';
+import { AnchorHTMLAttributes } from 'react';
+import { IsPartial, Maybe } from 'yummies/types';
+import { LoadableConfig } from 'react-simple-loadable';
+
+interface LinkAnchorProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    asChild?: boolean;
+}
+type LinkPathRouteProps<TRoute extends AnyRoute> = {
+    to: TRoute;
+} & (IsPartial<InputPathParams<TRoute['path']>> extends true ? {
+    params?: InputPathParams<TRoute['path']> | null | undefined;
+} : {
+    params: InputPathParams<TRoute['path']>;
+});
+type LinkSimpleRouteProps = {
+    to: string;
+} | {
+    href: string;
+};
+type LinkProps<TRoute extends AnyRoute> = LinkAnchorProps & RouteNavigateParams & (LinkPathRouteProps<TRoute> | LinkSimpleRouteProps);
+type LinkComponentType = <TRoute extends AnyRoute>(props: LinkProps<TRoute>) => React.ReactNode;
+declare const Link: LinkComponentType;
+
+type RouteViewComponent<TRoute extends AnyAbstractRouteEntity> = React.ComponentType<RouteViewProps<TRoute>>;
+interface RouteViewConfigWithoutRoute {
+    children?: React.ReactNode | (() => React.ReactNode);
+}
+interface RouteViewConfigWithRoute<TRoute extends AnyAbstractRouteEntity> extends Pick<LoadableConfig, 'loading' | 'preload' | 'throwOnError'> {
+    route: TRoute;
+    view?: RouteViewComponent<TRoute>;
+    loadView?: (route: TRoute) => Promise<RouteViewComponent<TRoute>>;
+    /**
+     * Case when route is not opened
+     */
+    fallback?: React.ReactNode;
+    children?: React.ReactNode | ((params: RouteViewProps<TRoute>['params'], route: TRoute) => React.ReactNode);
+}
+type RouteViewConfig<TRoute extends AnyAbstractRouteEntity> = RouteViewConfigWithRoute<TRoute> | RouteViewConfigWithoutRoute;
+type RouteViewProps<TRoute extends AnyAbstractRouteEntity> = {
+    children?: React.ReactNode;
+    params: TRoute extends AnyRoute ? Exclude<TRoute['params'], null | undefined> : TRoute extends AnyVirtualRoute ? TRoute['params'] : never;
+};
+type RouteViewBaseComponent = <TRoute extends AnyAbstractRouteEntity>(props: RouteViewConfig<TRoute>) => React.ReactNode;
+declare const RouteView: RouteViewBaseComponent;
+
+type LayoutComponent = React.ComponentType<{
+    children?: React.ReactNode;
+}> | React.ComponentType<{
+    children: React.ReactNode;
+}>;
+interface BaseProps extends RouteNavigateParams {
+    children: React.ReactNode;
+    layout?: LayoutComponent;
+}
+type PropsWithDefaultRoute<TRoute extends AnyRouteEntity> = BaseProps & {
+    otherwise?: TRoute;
+} & (IsPartial<RouteParams<TRoute>> extends true ? {
+    params?: Maybe<RouteParams<TRoute>>;
+} : {
+    params: RouteParams<TRoute>;
+});
+type PropsWithDefaultUrl = BaseProps & {
+    otherwise?: string;
+};
+type RouteViewGroupProps<TRoute extends AnyRouteEntity> = PropsWithDefaultRoute<TRoute> | PropsWithDefaultUrl;
+type RouteViewGroupComponent = <TRoute extends AnyRouteEntity>(props: RouteViewGroupProps<TRoute>) => React.ReactNode;
+declare const RouteViewGroup: RouteViewGroupComponent;
+
+export { Link, RouteView, RouteViewGroup };
+export type { LinkProps, RouteViewComponent, RouteViewConfig, RouteViewConfigWithRoute, RouteViewGroupProps, RouteViewProps };

package/react.js

@@ -0,0 +1,170 @@
+import { jsx } from "react/jsx-runtime";
+import { observer } from "mobx-react-lite";
+import { routeConfig, parseSearchString, buildSearchString, isRouteEntity } from "mobx-route";
+import { forwardRef, useRef, useMemo, cloneElement, isValidElement, useEffect } from "react";
+import { isShallowEqual } from "yummies/data";
+import { loadable } from "react-simple-loadable";
+const Link = observer(
+  forwardRef(
+    ({
+      to,
+      href: outerHref,
+      mergeQuery,
+      asChild,
+      children,
+      params,
+      // route navigate params
+      query,
+      replace,
+      state,
+      ...outerAnchorProps
+    }, ref) => {
+      const isExternalNavigation = outerAnchorProps.target === "_blank" || outerAnchorProps.target === "blank";
+      const queryDataRef = useRef(query);
+      if (!isShallowEqual(queryDataRef.current, query)) {
+        queryDataRef.current = query;
+      }
+      const { href, navigateParams } = useMemo(() => {
+        const navigateParams2 = {
+          mergeQuery,
+          query,
+          replace,
+          state
+        };
+        const cfg = routeConfig.get();
+        let href2;
+        if (outerHref) {
+          href2 = outerHref;
+        } else {
+          if (typeof to === "string") {
+            const isNeedToMergeQuery = navigateParams2.mergeQuery ?? cfg.mergeQuery;
+            const [path, ...querySegments] = to.split("?");
+            const existedQuery = parseSearchString(querySegments.join("?"));
+            const query2 = {
+              ...isNeedToMergeQuery ? cfg.queryParams.data : {},
+              ...existedQuery,
+              ...navigateParams2.query
+            };
+            href2 = `${path}${buildSearchString(query2)}`;
+          } else {
+            href2 = to.createUrl(
+              params,
+              navigateParams2.query,
+              navigateParams2.mergeQuery
+            );
+          }
+        }
+        return {
+          href: cfg.formatLinkHref?.(href2) ?? href2,
+          navigateParams: navigateParams2
+        };
+      }, [mergeQuery, replace, state, to, queryDataRef.current]);
+      const handleClick = (event) => {
+        if (isExternalNavigation || event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0)
+          return;
+        outerAnchorProps.onClick?.(event);
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          if (navigateParams.replace) {
+            routeConfig.get().history.replace(href, navigateParams.state);
+          } else {
+            routeConfig.get().history.push(href, navigateParams.state);
+          }
+        }
+      };
+      const anchorProps = {
+        ...outerAnchorProps,
+        href,
+        onClick: handleClick,
+        rel: outerAnchorProps.rel ?? (isExternalNavigation ? "noopener noreferrer" : void 0)
+      };
+      return asChild && isValidElement(children) ? cloneElement(children, anchorProps) : /* @__PURE__ */ jsx("a", { ...anchorProps, ref, children });
+    }
+  )
+);
+function RouteViewBase(props) {
+  const lazyViewComponentRef = useRef();
+  let Component;
+  if (!("route" in props)) {
+    return typeof props.children === "function" ? props.children() : props.children;
+  }
+  if (!props.route.isOpened) {
+    return props.fallback ?? null;
+  }
+  if (props.loadView) {
+    if (!lazyViewComponentRef.current) {
+      lazyViewComponentRef.current = loadable({
+        load: () => props.loadView(props.route),
+        loading: props.loading,
+        preload: props.preload,
+        throwOnError: props.throwOnError
+      });
+    }
+    Component = lazyViewComponentRef.current;
+  } else {
+    Component = props.view;
+  }
+  const params = "params" in props.route ? props.route.params : {};
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { params, children: props.children });
+  }
+  if (typeof props.children === "function") {
+    return props.children(params, props.route);
+  }
+  return props.children;
+}
+const RouteView = observer(RouteViewBase);
+const RouteViewGroup = observer(
+  ({
+    children,
+    layout: Layout,
+    otherwise: otherwiseNavigation,
+    // @ts-expect-error
+    params,
+    ...navigateParams
+  }) => {
+    let activeChildNode = null;
+    let lastInactiveChildNode = null;
+    const childNodes = Array.isArray(children) ? children : [children];
+    for (const childNode of childNodes) {
+      if (isValidElement(childNode) && // @ts-expect-error redundand checks better to wrap in this directive
+      isRouteEntity(childNode.props?.route) && // @ts-expect-error redundand checks better to wrap in this directive
+      childNode.props.route.isOpened) {
+        activeChildNode = childNode;
+        break;
+      } else {
+        lastInactiveChildNode = childNode;
+      }
+    }
+    const hasActiveChildNode = !!activeChildNode;
+    useEffect(() => {
+      if (!hasActiveChildNode && otherwiseNavigation) {
+        if (typeof otherwiseNavigation === "string") {
+          const history = routeConfig.get().history;
+          const url = `${otherwiseNavigation}${buildSearchString(navigateParams.query || {})}`;
+          if (navigateParams.replace) {
+            history.replace(url, navigateParams.state);
+          } else {
+            history.push(url, navigateParams.state);
+          }
+        } else if (!otherwiseNavigation.isOpened) {
+          otherwiseNavigation.open(params, navigateParams);
+        }
+      }
+    }, [hasActiveChildNode, otherwiseNavigation]);
+    if (otherwiseNavigation && !activeChildNode) {
+      return null;
+    }
+    const resultNodeToRender = activeChildNode ?? lastInactiveChildNode ?? null;
+    if (Layout) {
+      return /* @__PURE__ */ jsx(Layout, { children: resultNodeToRender });
+    }
+    return resultNodeToRender;
+  }
+);
+export {
+  Link,
+  RouteView,
+  RouteViewGroup
+};
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sources":["../src/react/components/link.tsx","../src/react/components/route-view.tsx","../src/react/components/route-view-group.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport {\n  type AnyRoute,\n  buildSearchString,\n  type InputPathParams,\n  parseSearchString,\n  type RouteNavigateParams,\n  routeConfig,\n} from 'mobx-route';\nimport {\n  type AnchorHTMLAttributes,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  useMemo,\n  useRef,\n} from 'react';\nimport { isShallowEqual } from 'yummies/data';\nimport type { IsPartial } from 'yummies/types';\n\ninterface LinkAnchorProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {\n  asChild?: boolean;\n}\n\ntype LinkPathRouteProps<TRoute extends AnyRoute> = {\n  to: TRoute;\n} & (IsPartial<InputPathParams<TRoute['path']>> extends true\n  ? {\n      params?: InputPathParams<TRoute['path']> | null | undefined;\n    }\n  : { params: InputPathParams<TRoute['path']> });\n\ntype LinkSimpleRouteProps =\n  | {\n      to: string;\n    }\n  | {\n      href: string;\n    };\n\nexport type LinkProps<TRoute extends AnyRoute> = LinkAnchorProps &\n  RouteNavigateParams &\n  (LinkPathRouteProps<TRoute> | LinkSimpleRouteProps);\n\ntype LinkComponentType = <TRoute extends AnyRoute>(\n  props: LinkProps<TRoute>,\n) => React.ReactNode;\n\nexport const Link = observer(\n  forwardRef<\n    HTMLAnchorElement,\n    LinkAnchorProps &\n      RouteNavigateParams & {\n        params?: any;\n        to: string | AnyRoute;\n        href: string;\n      }\n  >(\n    (\n      {\n        to,\n        href: outerHref,\n        mergeQuery,\n        asChild,\n        children,\n        params,\n        // route navigate params\n        query,\n        replace,\n        state,\n        ...outerAnchorProps\n      },\n      ref,\n    ) => {\n      const isExternalNavigation =\n        outerAnchorProps.target === '_blank' ||\n        outerAnchorProps.target === 'blank';\n      const queryDataRef = useRef<RouteNavigateParams['query']>(query);\n\n      if (!isShallowEqual(queryDataRef.current, query)) {\n        queryDataRef.current = query;\n      }\n\n      const { href, navigateParams } = useMemo(() => {\n        const navigateParams: RouteNavigateParams = {\n          mergeQuery,\n          query,\n          replace,\n          state,\n        };\n\n        const cfg = routeConfig.get();\n\n        let href: string;\n\n        if (outerHref) {\n          href = outerHref;\n        } else {\n          if (typeof to === 'string') {\n            const isNeedToMergeQuery =\n              navigateParams.mergeQuery ?? cfg.mergeQuery;\n\n            const [path, ...querySegments] = to.split('?');\n\n            const existedQuery = parseSearchString(querySegments.join('?'));\n\n            const query = {\n              ...(isNeedToMergeQuery ? cfg.queryParams.data : {}),\n              ...existedQuery,\n              ...navigateParams.query,\n            };\n\n            href = `${path}${buildSearchString(query)}`;\n          } else {\n            href = to.createUrl(\n              params,\n              navigateParams.query,\n              navigateParams.mergeQuery,\n            );\n          }\n        }\n\n        return {\n          href: cfg.formatLinkHref?.(href) ?? href,\n          navigateParams,\n        };\n      }, [mergeQuery, replace, state, to, queryDataRef.current]);\n\n      const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {\n        if (\n          isExternalNavigation ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.altKey ||\n          event.shiftKey ||\n          event.button !== 0\n        )\n          return;\n\n        outerAnchorProps.onClick?.(event);\n\n        if (!event.defaultPrevented) {\n          event.preventDefault();\n\n          if (navigateParams.replace) {\n            routeConfig.get().history.replace(href, navigateParams.state);\n          } else {\n            routeConfig.get().history.push(href, navigateParams.state);\n          }\n        }\n      };\n\n      const anchorProps = {\n        ...outerAnchorProps,\n        href,\n        onClick: handleClick,\n        rel:\n          outerAnchorProps.rel ??\n          (isExternalNavigation ? 'noopener noreferrer' : undefined),\n      };\n\n      return asChild && isValidElement(children) ? (\n        cloneElement(children, anchorProps)\n      ) : (\n        <a {...anchorProps} ref={ref}>\n          {children}\n        </a>\n      );\n    },\n  ),\n) as unknown as LinkComponentType;\n","import { observer } from 'mobx-react-lite';\nimport type {\n  AnyAbstractRouteEntity,\n  AnyRoute,\n  AnyVirtualRoute,\n} from 'mobx-route';\nimport { useRef } from 'react';\nimport { type LoadableConfig, loadable } from 'react-simple-loadable';\n\nexport type RouteViewComponent<TRoute extends AnyAbstractRouteEntity> =\n  React.ComponentType<RouteViewProps<TRoute>>;\n\ninterface RouteViewConfigWithoutRoute {\n  children?: React.ReactNode | (() => React.ReactNode);\n}\n\nexport interface RouteViewConfigWithRoute<TRoute extends AnyAbstractRouteEntity>\n  extends Pick<LoadableConfig, 'loading' | 'preload' | 'throwOnError'> {\n  route: TRoute;\n  view?: RouteViewComponent<TRoute>;\n  loadView?: (route: TRoute) => Promise<RouteViewComponent<TRoute>>;\n  /**\n   * Case when route is not opened\n   */\n  fallback?: React.ReactNode;\n  children?:\n    | React.ReactNode\n    | ((\n        params: RouteViewProps<TRoute>['params'],\n        route: TRoute,\n      ) => React.ReactNode);\n}\n\nexport type RouteViewConfig<TRoute extends AnyAbstractRouteEntity> =\n  | RouteViewConfigWithRoute<TRoute>\n  | RouteViewConfigWithoutRoute;\n\nexport type RouteViewProps<TRoute extends AnyAbstractRouteEntity> = {\n  children?: React.ReactNode;\n  params: TRoute extends AnyRoute\n    ? Exclude<TRoute['params'], null | undefined>\n    : TRoute extends AnyVirtualRoute\n      ? TRoute['params']\n      : never;\n};\n\ntype RouteViewBaseComponent = <TRoute extends AnyAbstractRouteEntity>(\n  props: RouteViewConfig<TRoute>,\n) => React.ReactNode;\n\nfunction RouteViewBase<TRoute extends AnyAbstractRouteEntity>(\n  props: Readonly<RouteViewConfig<TRoute>>,\n): React.ReactNode {\n  // @ts-expect-error redundand pass first argument\n  const lazyViewComponentRef = useRef<React.ComponentType<any>>();\n\n  let Component: React.ComponentType<any> | undefined;\n\n  if (!('route' in props)) {\n    return typeof props.children === 'function'\n      ? props.children()\n      : props.children;\n  }\n\n  if (!props.route.isOpened) {\n    return props.fallback ?? null;\n  }\n\n  if (props.loadView) {\n    if (!lazyViewComponentRef.current) {\n      lazyViewComponentRef.current = loadable({\n        load: () => props.loadView!(props.route),\n        loading: props.loading,\n        preload: props.preload,\n        throwOnError: props.throwOnError,\n      });\n    }\n    Component = lazyViewComponentRef.current;\n  } else {\n    Component = props.view;\n  }\n\n  const params: any = 'params' in props.route ? props.route.params : {};\n\n  if (Component) {\n    return <Component params={params}>{props.children}</Component>;\n  }\n\n  if (typeof props.children === 'function') {\n    return props.children(params, props.route);\n  }\n\n  return props.children;\n}\n\nexport const RouteView = observer(RouteViewBase) as RouteViewBaseComponent;\n","import { observer } from 'mobx-react-lite';\nimport {\n  type AnyRouteEntity,\n  buildSearchString,\n  isRouteEntity,\n  type RouteNavigateParams,\n  type RouteParams,\n  routeConfig,\n} from 'mobx-route';\nimport { isValidElement, useEffect } from 'react';\nimport type { IsPartial, Maybe } from 'yummies/types';\n\ntype LayoutComponent =\n  | React.ComponentType<{ children?: React.ReactNode }>\n  | React.ComponentType<{ children: React.ReactNode }>;\n\ninterface BaseProps extends RouteNavigateParams {\n  children: React.ReactNode;\n  layout?: LayoutComponent;\n}\n\ntype PropsWithDefaultRoute<TRoute extends AnyRouteEntity> = BaseProps & {\n  otherwise?: TRoute;\n} & (IsPartial<RouteParams<TRoute>> extends true\n    ? {\n        params?: Maybe<RouteParams<TRoute>>;\n      }\n    : {\n        params: RouteParams<TRoute>;\n      });\n\ntype PropsWithDefaultUrl = BaseProps & {\n  otherwise?: string;\n};\n\nexport type RouteViewGroupProps<TRoute extends AnyRouteEntity> =\n  | PropsWithDefaultRoute<TRoute>\n  | PropsWithDefaultUrl;\n\ntype RouteViewGroupComponent = <TRoute extends AnyRouteEntity>(\n  props: RouteViewGroupProps<TRoute>,\n) => React.ReactNode;\n\nexport const RouteViewGroup = observer(\n  <TRoute extends AnyRouteEntity>({\n    children,\n    layout: Layout,\n    otherwise: otherwiseNavigation,\n    // @ts-expect-error\n    params,\n    ...navigateParams\n  }: RouteViewGroupProps<TRoute>) => {\n    let activeChildNode: React.ReactNode = null;\n    let lastInactiveChildNode: React.ReactNode = null;\n\n    const childNodes: React.ReactNode[] = Array.isArray(children)\n      ? children\n      : [children];\n\n    for (const childNode of childNodes) {\n      if (\n        isValidElement(childNode) &&\n        // @ts-expect-error redundand checks better to wrap in this directive\n        isRouteEntity(childNode.props?.route) &&\n        // @ts-expect-error redundand checks better to wrap in this directive\n        childNode.props.route.isOpened\n      ) {\n        activeChildNode = childNode;\n        break;\n      } else {\n        lastInactiveChildNode = childNode;\n      }\n    }\n\n    const hasActiveChildNode = !!activeChildNode;\n\n    useEffect(() => {\n      if (!hasActiveChildNode && otherwiseNavigation) {\n        if (typeof otherwiseNavigation === 'string') {\n          const history = routeConfig.get().history;\n          const url = `${otherwiseNavigation}${buildSearchString(navigateParams.query || {})}`;\n\n          if (navigateParams.replace) {\n            history.replace(url, navigateParams.state);\n          } else {\n            history.push(url, navigateParams.state);\n          }\n        } else if (!otherwiseNavigation.isOpened) {\n          otherwiseNavigation.open(params, navigateParams);\n        }\n      }\n    }, [hasActiveChildNode, otherwiseNavigation]);\n\n    if (otherwiseNavigation && !activeChildNode) {\n      return null;\n    }\n\n    const resultNodeToRender = activeChildNode ?? lastInactiveChildNode ?? null;\n\n    if (Layout) {\n      return <Layout>{resultNodeToRender}</Layout>;\n    }\n\n    return resultNodeToRender;\n  },\n) as unknown as RouteViewGroupComponent;\n"],"names":["navigateParams","href","query"],"mappings":"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"}

package/view-model.cjs

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const mobx = require("mobx");
+const mobxRoute = require("mobx-route");
+const mobxViewModel = require("mobx-view-model");
+class RouteViewModel extends mobxViewModel.ViewModelBase {
+  constructor(params) {
+    super(params);
+    mobxViewModel.applyObservable(
+      this,
+      [
+        ["pathParams", mobx.computed.struct],
+        ["query", mobx.computed]
+      ],
+      this.vmConfig.observable.viewModels
+    );
+    mobx.when(
+      () => this.isMounted,
+      () => {
+        mobx.reaction(
+          () => this.route.isOpened,
+          (isOpened) => {
+            if (!isOpened && this.isMounted) {
+              this.unmount();
+            }
+          },
+          { fireImmediately: true, signal: this.unmountSignal }
+        );
+      },
+      { signal: this.unmountSignal }
+    );
+  }
+  get payload() {
+    if (this.route instanceof mobxRoute.Route) {
+      return this.route.params || {};
+    }
+    if (this.route instanceof mobxRoute.VirtualRoute) {
+      return this.route.params;
+    }
+    return {};
+  }
+  get query() {
+    if ("query" in this.route) {
+      return this.route.query;
+    }
+    return mobxRoute.routeConfig.get().queryParams;
+  }
+  get pathParams() {
+    return this.payload;
+  }
+  get isMounted() {
+    return super.isMounted && this.route.isOpened;
+  }
+}
+exports.RouteViewModel = RouteViewModel;
+//# sourceMappingURL=view-model.cjs.map

package/view-model.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-model.cjs","sources":["../src/view-model/route-view-model.ts"],"sourcesContent":["import { computed, reaction, when } from 'mobx';\nimport {\n  type AnyAbstractRouteEntity,\n  type IQueryParams,\n  Route,\n  type RouteParams,\n  routeConfig,\n  VirtualRoute,\n} from 'mobx-route';\nimport {\n  applyObservable,\n  ViewModelBase,\n  type ViewModelParams,\n} from 'mobx-view-model';\nimport type { EmptyObject } from 'yummies/types';\n\nexport abstract class RouteViewModel<\n  TRoute extends AnyAbstractRouteEntity = AnyAbstractRouteEntity,\n> extends ViewModelBase<EmptyObject> {\n  abstract readonly route: TRoute;\n\n  constructor(params: ViewModelParams<EmptyObject, any>) {\n    super(params);\n\n    applyObservable(\n      this,\n      [\n        ['pathParams', computed.struct],\n        ['query', computed],\n      ],\n      this.vmConfig.observable.viewModels,\n    );\n\n    when(\n      () => this.isMounted,\n      () => {\n        reaction(\n          () => this.route.isOpened,\n          (isOpened) => {\n            if (!isOpened && this.isMounted) {\n              this.unmount();\n            }\n          },\n          { fireImmediately: true, signal: this.unmountSignal },\n        );\n      },\n      { signal: this.unmountSignal },\n    );\n  }\n\n  override get payload(): RouteParams<TRoute> {\n    if (this.route instanceof Route) {\n      return this.route.params || ({} as any);\n    }\n\n    if (this.route instanceof VirtualRoute) {\n      return this.route.params as any;\n    }\n\n    return {} as EmptyObject as any;\n  }\n\n  get query(): IQueryParams {\n    if ('query' in this.route) {\n      return this.route.query as IQueryParams;\n    }\n\n    return routeConfig.get().queryParams;\n  }\n\n  get pathParams() {\n    return this.payload;\n  }\n\n  get isMounted() {\n    return super.isMounted && this.route.isOpened;\n  }\n}\n"],"names":["ViewModelBase","applyObservable","computed","when","reaction","Route","VirtualRoute","routeConfig"],"mappings":";;;;;AAgBO,MAAe,uBAEZA,cAAAA,cAA2B;AAAA,EAGnC,YAAY,QAA2C;AACrD,UAAM,MAAM;AAEZC,kBAAAA;AAAAA,MACE;AAAA,MACA;AAAA,QACE,CAAC,cAAcC,KAAAA,SAAS,MAAM;AAAA,QAC9B,CAAC,SAASA,KAAAA,QAAQ;AAAA,MAAA;AAAA,MAEpB,KAAK,SAAS,WAAW;AAAA,IAAA;AAG3BC,SAAAA;AAAAA,MACE,MAAM,KAAK;AAAA,MACX,MAAM;AACJC,aAAAA;AAAAA,UACE,MAAM,KAAK,MAAM;AAAA,UACjB,CAAC,aAAa;AACZ,gBAAI,CAAC,YAAY,KAAK,WAAW;AAC/B,mBAAK,QAAA;AAAA,YACP;AAAA,UACF;AAAA,UACA,EAAE,iBAAiB,MAAM,QAAQ,KAAK,cAAA;AAAA,QAAc;AAAA,MAExD;AAAA,MACA,EAAE,QAAQ,KAAK,cAAA;AAAA,IAAc;AAAA,EAEjC;AAAA,EAEA,IAAa,UAA+B;AAC1C,QAAI,KAAK,iBAAiBC,iBAAO;AAC/B,aAAO,KAAK,MAAM,UAAW,CAAA;AAAA,IAC/B;AAEA,QAAI,KAAK,iBAAiBC,wBAAc;AACtC,aAAO,KAAK,MAAM;AAAA,IACpB;AAEA,WAAO,CAAA;AAAA,EACT;AAAA,EAEA,IAAI,QAAsB;AACxB,QAAI,WAAW,KAAK,OAAO;AACzB,aAAO,KAAK,MAAM;AAAA,IACpB;AAEA,WAAOC,UAAAA,YAAY,MAAM;AAAA,EAC3B;AAAA,EAEA,IAAI,aAAa;AACf,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,YAAY;AACd,WAAO,MAAM,aAAa,KAAK,MAAM;AAAA,EACvC;AACF;;"}