From 4c65452dd22f2b40b42af7d203ddabd2d2562006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Augustin=20=C5=A0ulc?= <sulc.gusta@gmail.com>
Date: Sat, 18 Feb 2023 19:15:27 +0100
Subject: [PATCH] Added tanstack/router

---
 examples/navigation/package.json              |   2 +-
 .../src/customers/customersViewModel.ts       |  22 +-
 examples/navigation/src/home/homeView.tsx     |  31 ++-
 examples/navigation/src/home/homeViewModel.ts |   1 -
 .../src/invoices/invoiceDetailViewModel.ts    |  10 +-
 .../navigation/src/invoices/invoicesView.tsx  |   2 +-
 .../src/invoices/invoicesViewModel.ts         |  14 +-
 examples/navigation/src/main.tsx              |  69 +++---
 examples/todolist/package.json                |   2 +-
 examples/todolist/src/list/Footer.tsx         |   6 +-
 .../todolist/src/list/todoListViewModel.ts    |  27 ++-
 examples/todolist/src/main.tsx                |  29 ++-
 packages/views/package.json                   |   1 -
 packages/views/src/binding/useBinding.tsx     |   6 +-
 packages/views/src/index.ts                   |   1 -
 packages/views/src/router/RouteView.tsx       |  25 ---
 packages/views/src/router/router.tsx          | 199 +++++++++++++++---
 packages/views/src/router/types.ts            |  27 ++-
 .../src/router/viewModelLifecycleManager.ts   | 102 +++++++++
 yarn.lock                                     |  15 --
 20 files changed, 424 insertions(+), 167 deletions(-)
 delete mode 100644 packages/views/src/router/RouteView.tsx
 create mode 100644 packages/views/src/router/viewModelLifecycleManager.ts

diff --git a/examples/navigation/package.json b/examples/navigation/package.json
index cfd0bb8..e9a06f1 100644
--- a/examples/navigation/package.json
+++ b/examples/navigation/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@frui.ts/views": "^999.0.0",
-    "@tanstack/react-location": "^3.7.4",
+    "@tanstack/react-router": "^0.0.1-beta.82",
     "mobx": "6.7.0",
     "mobx-react-lite": "3",
     "react": "^18.2.0",
diff --git a/examples/navigation/src/customers/customersViewModel.ts b/examples/navigation/src/customers/customersViewModel.ts
index 4487273..5bbc24d 100644
--- a/examples/navigation/src/customers/customersViewModel.ts
+++ b/examples/navigation/src/customers/customersViewModel.ts
@@ -1,7 +1,9 @@
+import type { IViewModel, NavigationContext, NoParams } from "@frui.ts/views";
 import { makeObservable, observable, runInAction } from "mobx";
-import type { IViewModel, SearchType } from "@frui.ts/views";
 
-export default class CustomersViewModel implements IViewModel {
+type SearchScheme = { name?: string };
+
+export default class CustomersViewModel implements IViewModel<NoParams, SearchScheme> {
   @observable
   search?: string;
 
@@ -9,9 +11,21 @@ export default class CustomersViewModel implements IViewModel {
     makeObservable(this);
   }
 
-  onNavigate(search: SearchType) {
+  onNavigate({ search }: NavigationContext<NoParams, SearchScheme>) {
+    console.log("customers navigate", search);
+
     runInAction(() => {
-      this.search = search.name as string;
+      this.search = search.name;
     });
   }
+
+  onDeactivate(context: NavigationContext<NoParams, SearchScheme>) {
+    console.log("customers deactivate");
+  }
+
+  static validateSearch(search: Record<string, unknown>) {
+    return {
+      name: search.name as string | undefined,
+    };
+  }
 }
diff --git a/examples/navigation/src/home/homeView.tsx b/examples/navigation/src/home/homeView.tsx
index 5127fdb..20b4998 100644
--- a/examples/navigation/src/home/homeView.tsx
+++ b/examples/navigation/src/home/homeView.tsx
@@ -1,34 +1,51 @@
 import { registerViewComponent } from "@frui.ts/views";
-import { Link, Outlet } from "@tanstack/react-location";
+import { Link, Outlet } from "@tanstack/react-router";
 import { Observer } from "mobx-react-lite";
 import React from "react";
 import HomeViewModel from "./homeViewModel";
 
 export const HomeView = registerViewComponent(HomeViewModel, vm => {
+  const linkProps = {
+    activeProps: { style: { color: "red" } },
+    activeOptions: {
+      exact: true,
+    },
+  };
+
   return (
     <div>
       <header>
         <nav>
           <ul>
             <li>
-              <Link to="/">Home</Link>
+              <Link to="/" {...linkProps}>
+                Home
+              </Link>
             </li>
             <li>
-              <Link to="/invoices">Invoices</Link>
+              <Link to="/invoices" {...linkProps}>
+                Invoices
+              </Link>
               <ul>
                 <li>
-                  <Link to="/invoices/4">Invoice 4</Link>
+                  <Link to="/invoices/$invoiceId" params={{ invoiceId: "4" }} {...linkProps}>
+                    Invoice 4
+                  </Link>
                 </li>
                 <li>
-                  <Link to="/invoices/5">Invoice 5</Link>
+                  <Link to="/invoices/$invoiceId" params={{ invoiceId: "5" }} {...linkProps}>
+                    Invoice 5
+                  </Link>
                 </li>
               </ul>
             </li>
             <li>
-              <Link to="/customers">Customers</Link>
+              <Link to="/customers" {...linkProps}>
+                Customers
+              </Link>
               <ul>
                 <li>
-                  <Link to="/customers" search={{ name: "abc" }}>
+                  <Link to="/customers" search={{ name: "abc" }} {...linkProps}>
                     Customers search
                   </Link>
                 </li>
diff --git a/examples/navigation/src/home/homeViewModel.ts b/examples/navigation/src/home/homeViewModel.ts
index db77b41..52c9dc2 100644
--- a/examples/navigation/src/home/homeViewModel.ts
+++ b/examples/navigation/src/home/homeViewModel.ts
@@ -1,6 +1,5 @@
 import type { IViewModel } from "@frui.ts/views";
 import { action, makeObservable, observable } from "mobx";
-
 export default class HomeViewModel implements IViewModel {
   text = "foo";
 
diff --git a/examples/navigation/src/invoices/invoiceDetailViewModel.ts b/examples/navigation/src/invoices/invoiceDetailViewModel.ts
index 6ebffc2..a1eccf5 100644
--- a/examples/navigation/src/invoices/invoiceDetailViewModel.ts
+++ b/examples/navigation/src/invoices/invoiceDetailViewModel.ts
@@ -1,7 +1,9 @@
+import type { IViewModel, NavigationContext } from "@frui.ts/views";
 import { makeObservable, observable, runInAction } from "mobx";
-import type { IViewModel, RouteMatch } from "@frui.ts/views";
 
-export default class InvoiceDetailViewModel implements IViewModel {
+type ParamsScheme = Record<"invoiceId", string>;
+
+export default class InvoiceDetailViewModel implements IViewModel<ParamsScheme> {
   @observable
   id = -1;
 
@@ -9,9 +11,9 @@ export default class InvoiceDetailViewModel implements IViewModel {
     makeObservable(this);
   }
 
-  onInitialize(routeMatch: RouteMatch) {
+  onNavigate({ params }: NavigationContext<ParamsScheme>) {
     runInAction(() => {
-      this.id = +routeMatch.params.id;
+      this.id = +params.invoiceId;
     });
   }
 }
diff --git a/examples/navigation/src/invoices/invoicesView.tsx b/examples/navigation/src/invoices/invoicesView.tsx
index 8510cff..49fe02b 100644
--- a/examples/navigation/src/invoices/invoicesView.tsx
+++ b/examples/navigation/src/invoices/invoicesView.tsx
@@ -1,5 +1,5 @@
 import { registerViewComponent } from "@frui.ts/views";
-import { Outlet } from "@tanstack/react-location";
+import { Outlet } from "@tanstack/react-router";
 import React from "react";
 import InvoicesViewModel from "./invoicesViewModel";
 
diff --git a/examples/navigation/src/invoices/invoicesViewModel.ts b/examples/navigation/src/invoices/invoicesViewModel.ts
index 8342813..3f04143 100644
--- a/examples/navigation/src/invoices/invoicesViewModel.ts
+++ b/examples/navigation/src/invoices/invoicesViewModel.ts
@@ -1,15 +1,15 @@
-import type { IViewModel, RouteMatch } from "@frui.ts/views";
+import type { IViewModel, NavigationContext } from "@frui.ts/views";
 
 export default class InvoicesViewModel implements IViewModel {
-  onInitialize(routeMatch: RouteMatch) {
-    console.log("invoices on initialize", routeMatch);
+  onInitialize(context: NavigationContext) {
+    console.log("invoices on initialize", context);
   }
 
-  onActivate(routeMatch: RouteMatch) {
-    console.log("invoices on activate", routeMatch);
+  onActivate(context: NavigationContext) {
+    console.log("invoices on activate", context);
   }
 
-  onDeactivate(routeMatch: RouteMatch) {
-    console.log("invoices on deactivate", routeMatch);
+  onDeactivate(context: NavigationContext) {
+    console.log("invoices on deactivate", context);
   }
 }
diff --git a/examples/navigation/src/main.tsx b/examples/navigation/src/main.tsx
index 8f6c6d2..991d18e 100644
--- a/examples/navigation/src/main.tsx
+++ b/examples/navigation/src/main.tsx
@@ -1,6 +1,5 @@
-import type { LocationGenerics } from "@frui.ts/views";
-import { buildRoutes, RouteView } from "@frui.ts/views";
-import { ReactLocation, Router } from "@tanstack/react-location";
+import { buildRootRoute, buildRoute } from "@frui.ts/views";
+import { ReactRouter, Route, RouterProvider } from "@tanstack/react-router";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import CustomersViewModel from "./customers/customersViewModel";
@@ -10,37 +9,51 @@ import InvoiceDetailViewModel from "./invoices/invoiceDetailViewModel";
 import InvoicesViewModel from "./invoices/invoicesViewModel";
 import "./viewsRegistry";
 
-const location = new ReactLocation<LocationGenerics>();
-
-const routes = buildRoutes([
-  {
-    path: "/",
-    vmFactory: () => new HomeViewModel(),
-    children: [
-      {
-        path: "invoices",
-        vmFactory: () => new InvoicesViewModel(),
-        children: [
-          {
-            path: ":id",
-            vmFactory: () => new InvoiceDetailViewModel(),
-          },
-          { element: "invoices list" },
-        ],
-      },
-      {
-        path: "customers",
-        vmFactory: () => new CustomersViewModel(),
-      },
-    ],
-  },
+const homeRoute = buildRootRoute(() => new HomeViewModel(), {});
+
+const indexRoute = new Route({ getParentRoute: () => homeRoute, path: "/" });
+
+const invoicesRoute = buildRoute(() => new InvoicesViewModel(), {
+  getParentRoute: () => homeRoute,
+  path: "invoices",
+});
+
+const invoiceDetailRoute = buildRoute(() => new InvoiceDetailViewModel(), {
+  getParentRoute: () => invoicesRoute,
+  path: "$invoiceId",
+});
+
+const defaultInvoiceRoute = new Route({
+  getParentRoute: () => invoicesRoute,
+  path: "/",
+  component: () => <div>Invoices list</div>,
+});
+
+const customersRoute = buildRoute(() => new CustomersViewModel(), {
+  getParentRoute: () => homeRoute,
+  path: "customers",
+  validateSearch: CustomersViewModel.validateSearch,
+});
+
+const routeTree = homeRoute.addChildren([
+  indexRoute,
+  invoicesRoute.addChildren([invoiceDetailRoute, defaultInvoiceRoute]),
+  customersRoute,
 ]);
 
+const router = new ReactRouter({ routeTree });
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
 const container = document.getElementById("root");
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>
-    <Router location={location} routes={routes} defaultElement={<RouteView />} />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
diff --git a/examples/todolist/package.json b/examples/todolist/package.json
index db2eb6b..28e40c2 100644
--- a/examples/todolist/package.json
+++ b/examples/todolist/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@frui.ts/htmlcontrols": "^999.0.0",
     "@frui.ts/views": "^999.0.0",
-    "@tanstack/react-location": "^3.7.4",
+    "@tanstack/react-router": "^0.0.1-beta.82",
     "mobx": "6.7.0",
     "mobx-react-lite": "3",
     "react": "^18.2.0",
diff --git a/examples/todolist/src/list/Footer.tsx b/examples/todolist/src/list/Footer.tsx
index 1d78d29..8121b9b 100644
--- a/examples/todolist/src/list/Footer.tsx
+++ b/examples/todolist/src/list/Footer.tsx
@@ -1,5 +1,5 @@
 import { createViewComponent } from "@frui.ts/views";
-import { Link } from "@tanstack/react-location";
+import { Link } from "@tanstack/react-router";
 import React from "react";
 import { pluralize } from "../helpers";
 import type TodoListViewModel from "./todoListViewModel";
@@ -20,12 +20,12 @@ export const Footer = createViewComponent<TodoListViewModel>(vm => {
           </Link>
         </li>
         <li>
-          <Link to="/active" className={getFilterClass("active")}>
+          <Link to="/$filter" params={{ filter: "active" }} className={getFilterClass("active")}>
             Active
           </Link>
         </li>
         <li>
-          <Link to="/completed" className={getFilterClass("completed")}>
+          <Link to="/$filter" params={{ filter: "completed" }} className={getFilterClass("completed")}>
             Completed
           </Link>
         </li>
diff --git a/examples/todolist/src/list/todoListViewModel.ts b/examples/todolist/src/list/todoListViewModel.ts
index 6b91b4c..6cc442d 100644
--- a/examples/todolist/src/list/todoListViewModel.ts
+++ b/examples/todolist/src/list/todoListViewModel.ts
@@ -1,12 +1,11 @@
-import type { IViewModel } from "@frui.ts/views";
-import { type RouteMatch } from "@frui.ts/views";
-import { action, computed, makeObservable, observable } from "mobx";
+import type { IViewModel, NavigationContext } from "@frui.ts/views";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { v4 as uuid } from "uuid";
 import { type TodoItem } from "../models/todoItem";
 
 type FilterType = "all" | "completed" | "active";
-
-export default class TodoListViewModel implements IViewModel {
+type ParamsScheme = Record<"filter", string>;
+export default class TodoListViewModel implements IViewModel<ParamsScheme> {
   name = "TODO List";
   @observable list: TodoItem[] = [];
   @observable newItem!: TodoItem;
@@ -38,12 +37,24 @@ export default class TodoListViewModel implements IViewModel {
   }
 
   onInitialize() {
+    console.log("initializing");
     this.setNewItem();
   }
 
-  @action onNavigate(routeMatch: RouteMatch) {
-    console.log("navigate", routeMatch.params, routeMatch.pathname, routeMatch);
-    // TODO set filter
+  onDeactivate(context: NavigationContext<ParamsScheme, unknown>) {
+    console.log("deactivating", context);
+  }
+
+  onNavigate(routeMatch: NavigationContext<ParamsScheme>) {
+    switch (routeMatch.params.filter) {
+      case "completed":
+      case "active":
+        runInAction(() => (this.filter = routeMatch.params.filter as FilterType));
+        break;
+      default:
+        runInAction(() => (this.filter = "all"));
+        break;
+    }
   }
 
   @action private setNewItem() {
diff --git a/examples/todolist/src/main.tsx b/examples/todolist/src/main.tsx
index a3e6651..a490cea 100644
--- a/examples/todolist/src/main.tsx
+++ b/examples/todolist/src/main.tsx
@@ -1,6 +1,5 @@
-import type { LocationGenerics } from "@frui.ts/views";
-import { buildRoutes, RouteView } from "@frui.ts/views";
-import { ReactLocation, Router } from "@tanstack/react-location";
+import { buildRoute } from "@frui.ts/views";
+import { ReactRouter, RootRoute, RouterProvider } from "@tanstack/react-router";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import "todomvc-app-css/index.css";
@@ -8,19 +7,29 @@ import "todomvc-common/base.css";
 import ListViewModel from "./list/todoListViewModel";
 import "./viewsRegistry";
 
-const location = new ReactLocation<LocationGenerics>();
+const rootRoute = new RootRoute();
+const homeRoute = buildRoute(() => new ListViewModel(), {
+  getParentRoute: () => rootRoute,
+  path: "$filter",
+});
 
-const routes = buildRoutes([
-  {
-    vmFactory: () => new ListViewModel(),
-  },
-]);
+const routeTree = rootRoute.addChildren([homeRoute]);
+
+const router = new ReactRouter({
+  routeTree,
+});
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
 
 const container = document.getElementById("root");
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>
-    <Router location={location} routes={routes} defaultElement={<RouteView />} />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
diff --git a/packages/views/package.json b/packages/views/package.json
index 0b2273f..23366e7 100644
--- a/packages/views/package.json
+++ b/packages/views/package.json
@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@frui.ts/helpers": "^999.0.0",
-    "@tanstack/react-location": "^3.7.4",
     "@tanstack/react-router": "^0.0.1-beta.82",
     "inversify": "^6.0.1",
     "lodash-es": "^4.17.21"
diff --git a/packages/views/src/binding/useBinding.tsx b/packages/views/src/binding/useBinding.tsx
index d5949c7..2c98559 100644
--- a/packages/views/src/binding/useBinding.tsx
+++ b/packages/views/src/binding/useBinding.tsx
@@ -9,10 +9,12 @@ export function getValue<
   TProperty extends TypedBindingProperty<TTarget, TValueRestriction>
 >(target: TTarget | undefined, property: TProperty | undefined, ensureObservable = true): TValueRestriction {
   if (!target) {
-    throw new Error("'target' prop has not been set");
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    throw new Error(`Cannot read property '${property}', because target has not been set`);
   }
   if (property === undefined) {
-    throw new Error("'property' prop has not been set");
+    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+    throw new Error(`'property' prop has not been set for target '${target}'`);
   }
 
   if (isObservableMap(target)) {
diff --git a/packages/views/src/index.ts b/packages/views/src/index.ts
index 9403db2..6c01967 100644
--- a/packages/views/src/index.ts
+++ b/packages/views/src/index.ts
@@ -6,7 +6,6 @@ export { default as createDataIdHandler } from "./helpers/dataIdHandler";
 export { default as createMemoizedHandler } from "./helpers/memoizedDataHandler";
 export { default as preventDefault } from "./helpers/preventDefault";
 export * from "./router/router";
-export * from "./router/RouteView";
 export * from "./router/types";
 export * from "./types";
 export * from "./view/helpers";
diff --git a/packages/views/src/router/RouteView.tsx b/packages/views/src/router/RouteView.tsx
deleted file mode 100644
index 327c9fa..0000000
--- a/packages/views/src/router/RouteView.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Outlet, useMatch, useSearch } from "@tanstack/react-location";
-import React, { useEffect } from "react";
-import View from "../view/view";
-import type { LocationGenerics } from "./types";
-
-export function RouteView() {
-  const match = useMatch<LocationGenerics>();
-  const vm = match.data.vm;
-
-  const search = useSearch<LocationGenerics>();
-  useEffect(() => {
-    vm?.onSearchChanged?.(search, match);
-  }, [vm, search]);
-
-  // console.log("rendering", matches);
-  // const allMatches = useMatches<LocationGenerics>();
-  // const isLatest = allMatches[allMatches.length - 1] === match;
-  // console.log("rendering view", { isLatest }, vm, allMatches);
-
-  return (
-    <View vm={vm}>
-      <Outlet />
-    </View>
-  );
-}
diff --git a/packages/views/src/router/router.tsx b/packages/views/src/router/router.tsx
index 791b844..53ffaf2 100644
--- a/packages/views/src/router/router.tsx
+++ b/packages/views/src/router/router.tsx
@@ -1,42 +1,175 @@
-import type { PartialGenerics, Route as RawRoute } from "@tanstack/react-location";
-import type { IViewModel, LocationGenerics } from "./types";
+/* eslint-disable @typescript-eslint/ban-types */
+import type {
+  AnyRoute,
+  AnySearchSchema,
+  InferFullSearchSchema,
+  IsAny,
+  NoInfer,
+  ParsePathParams,
+  ResolveFullSearchSchema,
+  RootRouteId,
+  RouteContext,
+  RouteOptions,
+  RouterContext,
+} from "@tanstack/react-router";
+import { Outlet, RootRoute, Route } from "@tanstack/react-router";
+import React from "react";
+import View from "../view/view";
+import type { IViewModel, NoParams } from "./types";
+import { ViewModelLifecycleManager } from "./viewModelLifecycleManager";
 
-export type Route<T extends PartialGenerics = LocationGenerics> = RawRoute<T>;
+function buildViewModelOptions<
+  TParentRoute extends AnyRoute = AnyRoute,
+  TPath extends string = string,
+  // TFullPath extends ResolveFullPath<TParentRoute, TPath> = ResolveFullPath<TParentRoute, TPath>,
+  TCustomId extends string = string,
+  // TId extends ResolveId<TParentRoute, TCustomId, TPath> = ResolveId<TParentRoute, TCustomId, TPath>,
+  TSearchSchema extends AnySearchSchema = {},
+  TFullSearchSchema extends AnySearchSchema = ResolveFullSearchSchema<TParentRoute, TSearchSchema>,
+  TParams extends Record<ParsePathParams<TPath>, any> = Record<ParsePathParams<TPath>, string>,
+  TAllParams extends MergeFromParent<TParentRoute["__types"]["allParams"], TParams> = MergeFromParent<
+    TParentRoute["__types"]["allParams"],
+    TParams
+  >,
+  TParentContext extends TParentRoute["__types"]["routeContext"] = TParentRoute["__types"]["routeContext"],
+  TAllParentContext extends TParentRoute["__types"]["context"] = TParentRoute["__types"]["context"],
+  TRouteContext extends RouteContext = RouteContext,
+  TContext extends MergeFromParent<TParentRoute["__types"]["context"], TRouteContext> = MergeFromParent<
+    TParentRoute["__types"]["context"],
+    TRouteContext
+  >,
+  // TRouterContext extends AnyContext = AnyContext,
+  // TChildren = unknown,
+  // TRoutesInfo extends DefaultRoutesInfo = DefaultRoutesInfo,
+  TViewModel extends IViewModel<TAllParams, TFullSearchSchema> = IViewModel<TAllParams, TFullSearchSchema>
+>(vmFactory: () => TViewModel) {
+  const vmManager = new ViewModelLifecycleManager<TAllParams, TFullSearchSchema, TViewModel>(vmFactory);
 
-export type ViewModelRoute = Omit<Route, "children"> & {
-  vmFactory: () => IViewModel;
-  children?: (ViewModelRoute | Route)[];
-};
-
-export function buildRoutes(routes: (ViewModelRoute | Route)[]): Route[] {
-  return routes.map(x => buildRoute(x));
-}
-
-export function buildRoute(route: ViewModelRoute | Route): Route {
-  if (!isViewModelRoute(route)) {
-    return route;
-  }
+  // since the current router does not help here,
+  // we need to manually handle situation when a route remains selected,
+  // but only search or params change.
+  // If onLoad is called sooner than onLoaded callback, we should not call the disposer logic.
+  let loadCounter = 0;
 
   return {
-    ...route,
-    children: route.children?.map(x => (isViewModelRoute(x) ? buildRoute(x) : x)),
-    async loader(match, { parentMatch }) {
-      const vm = route.vmFactory();
-      await vm.onInitialize?.(match, parentMatch);
-      return { vm };
-    },
-    onMatch(match) {
-      void match.data.vm?.onActivate?.(match);
-    },
-    onTransition(match) {
-      void match.data.vm?.onNavigate?.(match);
+    async onLoad(context) {
+      await vmManager.initialize({
+        isPreload: context.preload,
+        params: context.params,
+        search: context.search,
+      });
+
+      if (!context.preload) {
+        loadCounter++;
+        void vmManager.navigate({ params: context.params, search: context.search });
+      }
     },
-    unloader: match => {
-      void match.data.vm?.onDeactivate?.(match);
+    onLoaded() {
+      return context => {
+        if (--loadCounter === 0) {
+          void vmManager.close({ params: context.params, search: context.search });
+        }
+      };
     },
-  };
+    component: () => (
+      <View vm={vmManager.instance}>
+        <Outlet />
+      </View>
+    ),
+  } as Partial<
+    RouteOptions<
+      TParentRoute,
+      TCustomId,
+      TPath,
+      InferFullSearchSchema<TParentRoute>,
+      TSearchSchema,
+      TFullSearchSchema,
+      TParentRoute["__types"]["allParams"],
+      TParams,
+      TAllParams,
+      TParentContext,
+      TAllParentContext,
+      TRouteContext,
+      TContext
+    >
+  >;
+}
+
+export function buildRoute<
+  TParentRoute extends AnyRoute = AnyRoute,
+  TPath extends string = string,
+  // TFullPath extends ResolveFullPath<TParentRoute, TPath> = ResolveFullPath<TParentRoute, TPath>,
+  TCustomId extends string = string,
+  // TId extends ResolveId<TParentRoute, TCustomId, TPath> = ResolveId<TParentRoute, TCustomId, TPath>,
+  TSearchSchema extends AnySearchSchema = {},
+  TFullSearchSchema extends AnySearchSchema = ResolveFullSearchSchema<TParentRoute, TSearchSchema>,
+  TParams extends Record<ParsePathParams<TPath>, any> = Record<ParsePathParams<TPath>, string>,
+  TAllParams extends MergeFromParent<TParentRoute["__types"]["allParams"], TParams> = MergeFromParent<
+    TParentRoute["__types"]["allParams"],
+    TParams
+  >,
+  TParentContext extends TParentRoute["__types"]["routeContext"] = TParentRoute["__types"]["routeContext"],
+  TAllParentContext extends TParentRoute["__types"]["context"] = TParentRoute["__types"]["context"],
+  TRouteContext extends RouteContext = RouteContext,
+  TContext extends MergeFromParent<TParentRoute["__types"]["context"], TRouteContext> = MergeFromParent<
+    TParentRoute["__types"]["context"],
+    TRouteContext
+  >,
+  // TRouterContext extends AnyContext = AnyContext,
+  // TChildren = unknown,
+  // TRoutesInfo extends DefaultRoutesInfo = DefaultRoutesInfo,
+  TViewModel extends IViewModel<TAllParams, TFullSearchSchema> = IViewModel<TAllParams, TFullSearchSchema>
+>(
+  vmFactory: () => TViewModel,
+  options: RouteOptions<
+    TParentRoute,
+    TCustomId,
+    TPath,
+    InferFullSearchSchema<TParentRoute>,
+    TSearchSchema,
+    TFullSearchSchema,
+    TParentRoute["__types"]["allParams"],
+    TParams,
+    TAllParams,
+    TParentContext,
+    TAllParentContext,
+    TRouteContext,
+    TContext
+  >
+) {
+  const customOptions = buildViewModelOptions(vmFactory);
+  const newOptions = Object.assign(options, customOptions) as typeof options;
+  return new Route(newOptions);
 }
 
-export function isViewModelRoute(route: ViewModelRoute | Route): route is ViewModelRoute {
-  return !!(route as ViewModelRoute).vmFactory;
+export function buildRootRoute<
+  TSearchSchema extends AnySearchSchema = {},
+  TContext extends RouteContext = RouteContext,
+  TRouterContext extends RouterContext = RouterContext,
+  TViewModel extends IViewModel<NoParams, TSearchSchema> = IViewModel<NoParams, TSearchSchema>
+>(
+  vmFactory: () => TViewModel,
+  options: Omit<
+    RouteOptions<
+      AnyRoute,
+      RootRouteId,
+      "",
+      {},
+      TSearchSchema,
+      NoInfer<TSearchSchema>,
+      {},
+      TRouterContext,
+      TRouterContext,
+      TContext,
+      NoInfer<TContext>
+    >,
+    "path" | "id" | "getParentRoute" | "caseSensitive" | "parseParams" | "stringifyParams"
+  >
+) {
+  const customOptions = buildViewModelOptions(vmFactory);
+  const newOptions = Object.assign(options, customOptions) as typeof options;
+  return new RootRoute(newOptions);
 }
+
+// helpers
+type MergeFromParent<T, U> = IsAny<T, U, T & U>;
diff --git a/packages/views/src/router/types.ts b/packages/views/src/router/types.ts
index b296971..c38f9f2 100644
--- a/packages/views/src/router/types.ts
+++ b/packages/views/src/router/types.ts
@@ -1,18 +1,15 @@
-import type { MakeGenerics, PartialGenerics, RouteMatch as RawRouteMatch, UseSearchType } from "@tanstack/react-location";
+export type NoParams = Record<never, string>;
 
-export type LocationGenerics = MakeGenerics<{
-  LoaderData: {
-    vm?: IViewModel;
-  };
-}>;
-
-export type RouteMatch<T extends PartialGenerics = LocationGenerics> = RawRouteMatch<T>;
-export type SearchType<T extends PartialGenerics = LocationGenerics> = ReturnType<UseSearchType<T>>;
+export interface NavigationContext<TParams extends Record<string, string> = NoParams, TSearch = unknown> {
+  isPreload?: boolean;
+  params: TParams;
+  search: TSearch;
+}
 
-export interface IViewModel<T extends PartialGenerics = LocationGenerics> {
-  onInitialize?(routeMatch: RouteMatch<T>, parentMatch?: RouteMatch<T>): Promise<unknown> | unknown;
-  onActivate?(routeMatch: RouteMatch<T>): Promise<unknown> | unknown;
-  onNavigate?(routeMatch: RouteMatch<T>): Promise<unknown> | unknown;
-  onSearchChanged?(search: SearchType<T>, routeMatch: RouteMatch<T>): Promise<unknown> | unknown;
-  onDeactivate?(routeMatch: RouteMatch<T>): Promise<unknown> | unknown;
+export interface IViewModel<TParams extends Record<string, string> = NoParams, TSearch = unknown> {
+  onInitialize?(context: NavigationContext<TParams, TSearch>): Promise<unknown> | unknown;
+  onActivate?(context: NavigationContext<TParams, TSearch>): Promise<unknown> | unknown;
+  onNavigate?(context: NavigationContext<TParams, TSearch>): Promise<unknown> | unknown;
+  onSearchChanged?(context: NavigationContext<TParams, TSearch>): Promise<unknown> | unknown;
+  onDeactivate?(context: NavigationContext<TParams, TSearch>): Promise<unknown> | unknown;
 }
diff --git a/packages/views/src/router/viewModelLifecycleManager.ts b/packages/views/src/router/viewModelLifecycleManager.ts
new file mode 100644
index 0000000..945cd30
--- /dev/null
+++ b/packages/views/src/router/viewModelLifecycleManager.ts
@@ -0,0 +1,102 @@
+import type { IViewModel, NavigationContext } from "./types";
+
+export class ViewModelLifecycleManager<
+  TParams extends Record<string, string>,
+  TSearch,
+  TViewModel extends IViewModel<TParams, TSearch>
+> {
+  #instance: TViewModel | undefined;
+
+  _isInitialized = false;
+  #initializationPromise: Promise<void> | undefined;
+
+  _isActive = false;
+  #activationPromise: Promise<void> | undefined;
+
+  #navigationPromise: Promise<void> | undefined;
+
+  #deactivationPromise: Promise<void> | undefined;
+
+  get instance() {
+    this.#instance ??= this.factory();
+    return this.#instance;
+  }
+
+  constructor(private factory: () => TViewModel) {}
+
+  resetInstance() {
+    this.#instance = undefined;
+    this._isInitialized = false;
+    this._isActive = false;
+  }
+
+  async initialize(context: NavigationContext<TParams, TSearch>) {
+    await (this.#initializationPromise ??= new Promise(
+      (resolve, reject) =>
+        void this.callInitialize(context)
+          .then(resolve, reject)
+          .finally(() => (this.#initializationPromise = undefined))
+    ));
+  }
+
+  private async callInitialize(context: NavigationContext<TParams, TSearch>) {
+    if (!this._isInitialized) {
+      await this.instance.onInitialize?.(context);
+      this._isInitialized = true;
+    }
+  }
+
+  async activate(context: NavigationContext<TParams, TSearch>) {
+    await this.initialize(context);
+    await (this.#activationPromise ??= new Promise(
+      (resolve, reject) =>
+        void this.callActivate(context)
+          .then(resolve, reject)
+          .finally(() => (this.#activationPromise = undefined))
+    ));
+  }
+
+  private async callActivate(context: NavigationContext<TParams, TSearch>) {
+    if (!this._isActive) {
+      await this.instance.onActivate?.(context);
+      this._isActive = true;
+    }
+  }
+
+  async navigate(context: NavigationContext<TParams, TSearch>) {
+    await this.activate(context);
+    await (this.#navigationPromise ??= new Promise(
+      (resolve, reject) =>
+        void this.callNavigate(context)
+          .then(resolve, reject)
+          .finally(() => (this.#navigationPromise = undefined))
+    ));
+  }
+
+  private async callNavigate(context: NavigationContext<TParams, TSearch>) {
+    await this.instance.onNavigate?.(context);
+  }
+
+  async deactivate(context: NavigationContext<TParams, TSearch>) {
+    await this.#initializationPromise;
+    await this.#activationPromise;
+    await (this.#deactivationPromise ??= new Promise(
+      (resolve, reject) =>
+        void this.callDeactivate(context)
+          .then(resolve, reject)
+          .finally(() => (this.#deactivationPromise = undefined))
+    ));
+  }
+
+  private async callDeactivate(context: NavigationContext<TParams, TSearch>) {
+    if (this._isActive) {
+      await this.instance.onDeactivate?.(context);
+      this._isActive = false;
+    }
+  }
+
+  async close(context: NavigationContext<TParams, TSearch>) {
+    await this.deactivate(context);
+    this.resetInstance();
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 0f10c70..7c4b83b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3401,14 +3401,6 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@tanstack/react-location@^3.7.4":
-  version "3.7.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-location/-/react-location-3.7.4.tgz#0125ba5685805d232429b8df70d20cb6c2a56cec"
-  integrity sha512-6rH2vNHGr0uyeUz5ZHvWMYjeYKGgIKFzvs5749QtnS9f+FU7t7fQE0hKZAzltBZk82LT7iYbcHBRyUg2lW13VA==
-  dependencies:
-    "@babel/runtime" "^7.16.7"
-    history "^5.2.0"
-
 "@tanstack/react-router@^0.0.1-beta.82":
   version "0.0.1-beta.82"
   resolved "https://registry.yarnpkg.com/@tanstack/react-router/-/react-router-0.0.1-beta.82.tgz#4c1ff8cf55563ff03f0244fbdbd1ca2f1aacfbcb"
@@ -8168,13 +8160,6 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-history@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
-  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"