fix: lazy loaderClient/actionClient initilialization

TanStack · Jan 24, 2023 · 434aa74 · 434aa74
1 parent 98870f4
commit 434aa74
Show file tree

Hide file tree

Showing 65 changed files with 156 additions and 119 deletions.
diff --git a/docs/api/react/lazy.md b/docs/api/react/lazy.md
@@ -6,15 +6,17 @@ title: lazy
 ```tsx
 import { lazy } from '@tanstack/react-router'
 
-export const expensiveRoute = rootRoute.createRoute({
+export const expensiveRoute = new Route({ getParentRoute: () => rootRoute,
   path: 'expensive',
   component: lazy(() => import('./Expensive')),
 })
 ```
 
 **Options**
+
 - `importer: () => Promise<{ default: SyncRouteComponent }>`
   - **Required**
 
 **Returns**
+
 - `element: RouteComponent`
diff --git a/docs/guide/history-types.md b/docs/guide/history-types.md
@@ -27,7 +27,7 @@ import {
 
 const rootRoute = createRouteConfig()
 
-const indexRoute = rootRoute.createRoute({ path: '/' })
+const new Route({ getParentRoute: () => indexRoute = rootRoute, path: '/' })
 
 const memoryHistory = createMemoryHistory({
   initialEntries: ['/'], // Pass your initial url
@@ -53,7 +53,7 @@ import {
 
 const rootRoute = createRouteConfig()
 
-const indexRoute = rootRoute.createRoute({ path: '/' })
+const new Route({ getParentRoute: () => indexRoute = rootRoute, path: '/' })
 
 const hashHistory = createHashHistory()
 
@@ -73,7 +73,7 @@ import {
 
 const rootRoute = createRouteConfig()
 
-const indexRoute = rootRoute.createRoute({ path: '/' })
+const new Route({ getParentRoute: () => indexRoute = rootRoute, path: '/' })
 
 const memoryHistory = createMemoryHistory({
   initialEntries: ['/'], // Pass your initial url

diff --git a/docs/guide/layout-routes.md b/docs/guide/layout-routes.md
@@ -15,15 +15,15 @@ To create a layout route, define a route config with an `id` property instead of
 const rootRoute = createRouteConfig()
 
 // Our layout route
-const layoutRoute = rootRoute.createRoute({
-  id: 'layout',
-})
+const layoutRoute = new Route({ getParentRoute: () => rootRoute, id: 'layout' })
 
-const layoutARoute = layoutRoute.createRoute({
+const layoutARoute = new Route({
+  getParentRoute: () => layoutRoute,
   path: 'layout-a',
 })
 
-const layoutBRoute = layoutRoute.createRoute({
+const layoutBRoute = new Route({
+  getParentRoute: () => layoutRoute,
   path: 'layout-b',
 })
 
@@ -43,34 +43,34 @@ Simple example with different layouts for authenticated and unauthenticated rout
 ```tsx
 const rootRoute = createRouteConfig();
 
-const layoutRoot = rootRoute.createRoute({
+const layoutRoot = new Route({ getParentRoute: () => rootRoute,
   id: "layout",
 });
 
-const layoutUnauth = layoutRoot.createRoute({
+const layoutUnauth = new Route({ getParentRoute: () => layoutRoot,
   id: "layout-unauth",
   component: LayoutUnauth, // layout component for unauthenticated routes
 });
 
-const layoutAuth = layoutRoot.createRoute({
+const layoutAuth = new Route({ getParentRoute: () => layoutRoot,
   id: "layout-auth",
   component: LayoutAuth, // layout component for authenticated routes
 });
 
-const indexRoute = layoutUnauth.createRoute({
+const indexRoute = new Route({ getParentRoute: () => layoutUnauth,
   path: "/",
   component: LandingPage, // landing page component that will use unauthenticated layout
 });
 
-const dashboardRoute = layoutAuth.createRoute({
+const dashboardRoute = new Route({ getParentRoute: () => layoutAuth,
   path: "app",
   component: DashboardPage, // homepage page component that will use authenticated layout
   },
 });
 
-export const loginRoute = layoutUnauth.createRoute({
+export const loginRoute = new Route({ getParentRoute: () => layoutUnauth,
   path: "login",
-  component: LoginPage, // another component that will unauthenticated layout 
+  component: LoginPage, // another component that will unauthenticated layout
 });
 
 const routeConfig = rootRoute.addChildren([

diff --git a/docs/guide/route-configs.md b/docs/guide/route-configs.md
@@ -21,9 +21,9 @@ Children routes can be created by calling the `.createRoute()` method on the roo
 ```ts
 let rootRoute = createRouteConfig()
 
-const indexRoute = rootRoute.createRoute({ path: '/' })
-const blogRoute = rootRoute.createRoute({ path: 'blog' })
-const postRoute = blogRoute.createRoute({ path: '$slug' })
+const new Route({ getParentRoute: () => indexRoute = rootRoute, path: '/' })
+const new Route({ getParentRoute: () => blogRoute = rootRoute, path: 'blog' })
+const new Route({ getParentRoute: () => postRoute = blogRoute, path: '$slug' })
 ```
 
 ## Building a Route Config
@@ -33,9 +33,9 @@ Once all of your child routes have been created, a final route config object can
 ```ts
 let rootRoute = createRouteConfig()
 
-const indexRoute = rootRoute.createRoute({ path: '/' })
-const blogRoute = rootRoute.createRoute({ path: 'blog' })
-const postRoute = blogRoute.createRoute({ path: '$slug' })
+const new Route({ getParentRoute: () => indexRoute = rootRoute, path: '/' })
+const new Route({ getParentRoute: () => blogRoute = rootRoute, path: 'blog' })
+const new Route({ getParentRoute: () => postRoute = blogRoute, path: '$slug' })
 
 const routeConfig = rootRoute.addChildren([
   indexRoute,

diff --git a/docs/guide/route-paths.md b/docs/guide/route-paths.md
@@ -31,19 +31,20 @@ A route with a path of `/` is considered the root or index route for its parent
 let rootRoute = createRouteConfig()
 
 // This is the index route for the entire router
-const indexRoute = rootRoute.createRoute({ path: '/' })
+const new Route({ getParentRoute: () => indexRoute = rootRoute, path: '/' })
 
-const blogRoute = rootRoute.createRoute({ path: 'blog' })
+const new Route({ getParentRoute: () => blogRoute = rootRoute, path: 'blog' })
 
 // This is the index route for the `/blog` route
-const blogIndexRoute = blogRoute.createRoute({ path: '/' })
+const new Route({ getParentRoute: () => blogIndexRoute = blogRoute, path: '/' })
 
 const routeConfig = rootRoute.addChildren([
   indexRoute,
   blogRoute.addChildren([blogIndexRoute]),
 ])
 ```
-If you put a component in the normal (non-index) route, it will render both when its route is terminal *and* when children are also active; children will render in its `<Outlet />`. If there is no outlet then the children will not render.
+
+If you put a component in the normal (non-index) route, it will render both when its route is terminal _and_ when children are also active; children will render in its `<Outlet />`. If there is no outlet then the children will not render.
 
 ## Layout Routes
 

diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -27,12 +27,12 @@ const rootRoute = createRouteConfig({
   ),
 })
 
-const indexRoute = rootRoute.createRoute({
+const new Route({ getParentRoute: () => indexRoute = rootRoute,
   path: '/',
   component: Index,
 })
 
-const aboutRoute = rootRoute.createRoute({
+const new Route({ getParentRoute: () => aboutRoute = rootRoute,
   path: '/about',
   component: About,
 })

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/index.client.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/index.client.tsx
@@ -1,6 +1,6 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "./__root.client";
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: lazy(() => import('./index-component').then(d => ({
     default: d.component

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/index.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/index.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "./__root";
 import * as React from 'react';
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: () => <div>
       <h3>Welcome Home!</h3>

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/posts.client.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/posts.client.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router'
 import { routeConfig as parentRouteConfig } from './__root.client'
 import { useMatch } from '@tanstack/react-router'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: 'posts',
   component: lazy(() =>
     import('./posts-component').then((d) => ({

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/posts.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/posts.tsx
@@ -7,7 +7,7 @@ import {
   useLoaderInstance,
   useMatch,
 } from '@tanstack/react-router'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: 'posts',
   component: Posts,
   onLoad: (...args) =>

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/posts/$postId.client.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/posts/$postId.client.tsx
@@ -7,7 +7,7 @@ export type PostType = {
   body: string
 }
 export const tanner = 'foo'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: '$postId',
   component: lazy(() =>
     import('./$postId-component').then((d) => ({

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/posts/$postId.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/posts/$postId.tsx
@@ -8,7 +8,7 @@ export type PostType = {
   body: string
 }
 export const tanner = 'foo'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: '$postId',
   component: Post,
   onLoad: (...args) =>

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/posts/index.client.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/posts/index.client.tsx
@@ -1,6 +1,6 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "../posts.client";
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: lazy(() => import('./index-component').then(d => ({
     default: d.component

diff --git a/examples/react/basic-ssr-streaming/src/routes.generated/posts/index.tsx b/examples/react/basic-ssr-streaming/src/routes.generated/posts/index.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "../posts";
 import * as React from 'react';
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: () => <div>Select a post.</div>
 });

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/index.client.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/index.client.tsx
@@ -1,6 +1,6 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "./__root.client";
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: lazy(() => import('./index-component').then(d => ({
     default: d.component

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/index.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/index.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "./__root";
 import * as React from 'react';
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: () => <div className="p-2">
       <h3>Welcome Home!</h3>

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/posts.client.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/posts.client.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router'
 import { routeConfig as parentRouteConfig } from './__root.client'
 import { useMatch } from '@tanstack/react-router'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: 'posts',
   component: lazy(() =>
     import('./posts-component').then((d) => ({

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/posts.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/posts.tsx
@@ -8,7 +8,7 @@ import {
   useMatch,
 } from '@tanstack/react-router'
 import { postspostIdRoute } from '../routes.generated/posts/$postId.client'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: 'posts',
   component: Posts,
   onLoad: (...args) =>

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/posts/$postId.client.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/posts/$postId.client.tsx
@@ -6,7 +6,7 @@ export type PostType = {
   title: string
   body: string
 }
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: '$postId',
   component: lazy(() =>
     import('./$postId-component').then((d) => ({

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/posts/$postId.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/posts/$postId.tsx
@@ -7,7 +7,7 @@ export type PostType = {
   title: string
   body: string
 }
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: '$postId',
   component: Post,
   onLoad: (...args) =>

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/posts/index.client.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/posts/index.client.tsx
@@ -1,6 +1,6 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "../posts.client";
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: lazy(() => import('./index-component').then(d => ({
     default: d.component

diff --git a/examples/react/basic-ssr-with-html/src/routes.generated/posts/index.tsx b/examples/react/basic-ssr-with-html/src/routes.generated/posts/index.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "../posts";
 import * as React from 'react';
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: () => <div>Select a post.</div>
 });

diff --git a/examples/react/basic-ssr/src/routes.generated/index.client.tsx b/examples/react/basic-ssr/src/routes.generated/index.client.tsx
@@ -1,6 +1,6 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "./__root.client";
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: lazy(() => import('./index-component').then(d => ({
     default: d.component

diff --git a/examples/react/basic-ssr/src/routes.generated/index.tsx b/examples/react/basic-ssr/src/routes.generated/index.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "./__root";
 import * as React from 'react';
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: () => <div className="p-2">
       <h3>Welcome Home!</h3>

diff --git a/examples/react/basic-ssr/src/routes.generated/posts.client.tsx b/examples/react/basic-ssr/src/routes.generated/posts.client.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router'
 import { routeConfig as parentRouteConfig } from './__root.client'
 import { useMatch } from '@tanstack/react-router'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: 'posts',
   component: lazy(() =>
     import('./posts-component').then((d) => ({

diff --git a/examples/react/basic-ssr/src/routes.generated/posts.tsx b/examples/react/basic-ssr/src/routes.generated/posts.tsx
@@ -8,7 +8,7 @@ import {
   useMatch,
 } from '@tanstack/react-router'
 import { postspostIdRoute } from '../routes.generated/posts/$postId.client'
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: 'posts',
   component: Posts,
   onLoad: (...args) =>

diff --git a/examples/react/basic-ssr/src/routes.generated/posts/$postId.client.tsx b/examples/react/basic-ssr/src/routes.generated/posts/$postId.client.tsx
@@ -6,7 +6,7 @@ export type PostType = {
   title: string
   body: string
 }
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: '$postId',
   component: lazy(() =>
     import('./$postId-component').then((d) => ({

diff --git a/examples/react/basic-ssr/src/routes.generated/posts/$postId.tsx b/examples/react/basic-ssr/src/routes.generated/posts/$postId.tsx
@@ -7,7 +7,7 @@ export type PostType = {
   title: string
   body: string
 }
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: '$postId',
   component: Post,
   onLoad: (...args) =>

diff --git a/examples/react/basic-ssr/src/routes.generated/posts/index.client.tsx b/examples/react/basic-ssr/src/routes.generated/posts/index.client.tsx
@@ -1,6 +1,6 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "../posts.client";
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: lazy(() => import('./index-component').then(d => ({
     default: d.component

diff --git a/examples/react/basic-ssr/src/routes.generated/posts/index.tsx b/examples/react/basic-ssr/src/routes.generated/posts/index.tsx
@@ -1,7 +1,7 @@
 import { lazy } from '@tanstack/react-router';
 import { routeConfig as parentRouteConfig } from "../posts";
 import * as React from 'react';
-const routeConfig = parentRouteConfig.createRoute({
+const new Route({ getParentRoute: () => routeConfig = parentRouteConfig,
   path: "/",
   component: () => <div>Select a post.</div>
 });

diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -52,7 +52,7 @@ const postLoader = new Loader({
 })
 
 const loaderClient = new LoaderClient({
-  loaders: [postsLoader, postLoader],
+  getLoaders: () => [postsLoader, postLoader],
 })
 
 const rootRoute = new RootRoute({