@tanstack/router-core 0.0.1-alpha.0 → 0.0.1-alpha.1

package/src/createRoutes.test.ts

@@ -7,312 +7,322 @@ import {
   RelativeToPathAutoComplete,
 } from '.'
 
-// Build our routes. We could do this in our component, too.
-const routeConfig = createRouteConfig().addChildren((createRoute) => [
-  createRoute({
-    path: '/',
-    validateSearch: (search) =>
-      z
-        .object({
-          version: z.number(),
-        })
-        .parse(search),
-  }),
-  createRoute({
-    path: '/test',
-    validateSearch: (search) =>
-      z
-        .object({
-          version: z.number(),
-          isGood: z.boolean(),
-        })
-        .parse(search),
-  }),
-  createRoute({
-    path: 'dashboard',
-    loader: async () => {
-      console.log('Fetching all invoices...')
-      return {
-        invoices: 'await fetchInvoices()',
-      }
-    },
-  }).addChildren((createRoute) => [
-    createRoute({ path: '/' }),
-    createRoute({
-      path: 'invoices',
-    }).addChildren((createRoute) => [
+// Write a test
+describe('everything', () => {
+  it('should work', () => {
+    // Build our routes. We could do this in our component, too.
+    const routeConfig = createRouteConfig().addChildren((createRoute) => [
       createRoute({
         path: '/',
-        action: async (partialInvoice: { amount: number }) => {
-          const invoice: { id: number; amount: number } = null!
-          // // Redirect to the new invoice
-          // ctx.router.navigate({
-          //   to: invoice.id,
-          //   // Use the current match for relative paths
-          //   from: ctx.match.pathname,
-          // })
-          return invoice
-        },
+        validateSearch: (search) =>
+          z
+            .object({
+              version: z.number(),
+            })
+            .parse(search),
+      }),
+      createRoute({
+        path: '/test',
+        validateSearch: (search) =>
+          z
+            .object({
+              version: z.number(),
+              isGood: z.boolean(),
+            })
+            .parse(search),
       }),
       createRoute({
-        path: ':invoiceId',
-        parseParams: ({ invoiceId }) => ({ invoiceId: Number(invoiceId) }),
-        stringifyParams: ({ invoiceId }) => ({ invoiceId: String(invoiceId) }),
-        loader: async ({ params: { invoiceId } }) => {
-          console.log('Fetching invoice...')
+        path: 'dashboard',
+        loader: async () => {
+          console.log('Fetching all invoices...')
           return {
-            invoice: 'await fetchInvoiceById(invoiceId!)',
+            invoices: 'await fetchInvoices()',
           }
         },
-      }),
-    ]),
-    createRoute({
-      path: 'users',
-      loader: async () => {
-        return {
-          users: 'await fetchUsers()',
-        }
-      },
-      validateSearch: (search) =>
-        z
-          .object({
-            usersView: z
+      }).addChildren((createRoute) => [
+        createRoute({ path: '/' }),
+        createRoute({
+          path: 'invoices',
+        }).addChildren((createRoute) => [
+          createRoute({
+            path: '/',
+            action: async (partialInvoice: { amount: number }) => {
+              const invoice: { id: number; amount: number } = null!
+              // // Redirect to the new invoice
+              // ctx.router.navigate({
+              //   to: invoice.id,
+              //   // Use the current match for relative paths
+              //   from: ctx.match.pathname,
+              // })
+              return invoice
+            },
+          }),
+          createRoute({
+            path: ':invoiceId',
+            parseParams: ({ invoiceId }) => ({ invoiceId: Number(invoiceId) }),
+            stringifyParams: ({ invoiceId }) => ({
+              invoiceId: String(invoiceId),
+            }),
+            loader: async ({ params: { invoiceId } }) => {
+              console.log('Fetching invoice...')
+              return {
+                invoice: 'await fetchInvoiceById(invoiceId!)',
+              }
+            },
+          }),
+        ]),
+        createRoute({
+          path: 'users',
+          loader: async () => {
+            return {
+              users: 'await fetchUsers()',
+            }
+          },
+          validateSearch: (search) =>
+            z
               .object({
-                sortBy: z.enum(['name', 'id', 'email']).optional(),
-                filterBy: z.string().optional(),
+                usersView: z
+                  .object({
+                    sortBy: z.enum(['name', 'id', 'email']).optional(),
+                    filterBy: z.string().optional(),
+                  })
+                  .optional(),
               })
-              .optional(),
-          })
-          .parse(search),
-      preSearchFilters: [
-        // Keep the usersView search param around
-        // while in this route (or it's children!)
-        (search) => ({
-          ...search,
-          usersView: {
-            ...search.usersView,
-          },
-        }),
-      ],
-    }).addChildren((createRoute) => [
+              .parse(search),
+          preSearchFilters: [
+            // Keep the usersView search param around
+            // while in this route (or it's children!)
+            (search) => ({
+              ...search,
+              usersView: {
+                ...search.usersView,
+              },
+            }),
+          ],
+        }).addChildren((createRoute) => [
+          createRoute({
+            path: ':userId',
+            loader: async ({ params: { userId }, search }) => {
+              return {
+                user: 'await fetchUserById(userId!)',
+              }
+            },
+            action: async (partialUser: { amount: number }) => {
+              const invoice: { id: number; amount: number } = null!
+              // // Redirect to the new invoice
+              // ctx.router.navigate({
+              //   to: invoice.id,
+              //   // Use the current match for relative paths
+              //   from: ctx.match.pathname,
+              // })
+              return invoice
+            },
+          }),
+        ]),
+      ]),
+      // Obviously, you can put routes in other files, too
+      // reallyExpensiveRoute,
       createRoute({
-        path: ':userId',
-        loader: async ({ params: { userId }, search }) => {
-          return {
-            user: 'await fetchUserById(userId!)',
-          }
-        },
-        action: async (partialUser: { amount: number }) => {
-          const invoice: { id: number; amount: number } = null!
-          // // Redirect to the new invoice
-          // ctx.router.navigate({
-          //   to: invoice.id,
-          //   // Use the current match for relative paths
-          //   from: ctx.match.pathname,
-          // })
-          return invoice
-        },
-      }),
-    ]),
-  ]),
-  // Obviously, you can put routes in other files, too
-  // reallyExpensiveRoute,
-  createRoute({
-    path: 'authenticated/', // Trailing slash doesn't mean anything
-  }).addChildren((createRoute) => [
-    createRoute({
-      path: '/',
-    }),
-  ]),
-])
+        path: 'authenticated/', // Trailing slash doesn't mean anything
+      }).addChildren((createRoute) => [
+        createRoute({
+          path: '/',
+        }),
+      ]),
+    ])
 
-type MyRoutesInfo = AllRouteInfo<typeof routeConfig>
-//   ^?
-type RouteInfo = MyRoutesInfo['routeInfo']
-type RoutesById = MyRoutesInfo['routeInfoById']
-type RoutesTest = Route<MyRoutesInfo, MyRoutesInfo['routeInfoByFullPath']['/']>
-//   ^?
-type RoutePaths = MyRoutesInfo['routeInfoByFullPath']
-//   ^?
-type InvoiceRouteInfo = RoutesById['/dashboard/invoices/']
-//   ^?
-type InvoiceLoaderData = InvoiceRouteInfo['loaderData']
-//   ^?//
-type InvoiceAction = InvoiceRouteInfo['actionPayload']
-//   ^?
+    type MyRoutesInfo = AllRouteInfo<typeof routeConfig>
+    //   ^?
+    type RouteInfo = MyRoutesInfo['routeInfo']
+    type RoutesById = MyRoutesInfo['routeInfoById']
+    type RoutesTest = Route<
+      MyRoutesInfo,
+      MyRoutesInfo['routeInfoByFullPath']['/']
+    >
+    //   ^?
+    type RoutePaths = MyRoutesInfo['routeInfoByFullPath']
+    //   ^?
+    type InvoiceRouteInfo = RoutesById['/dashboard/invoices/']
+    //   ^?
+    type InvoiceLoaderData = InvoiceRouteInfo['loaderData']
+    //   ^?//
+    type InvoiceAction = InvoiceRouteInfo['actionPayload']
+    //   ^?
 
-const router = createRouter({
-  routeConfig,
-})
+    const router = createRouter({
+      routeConfig,
+    })
 
-const loaderData = router.getRoute('/dashboard/users/:userId')
-//    ^?
-const route = router.getRoute('/dashboard/users/:userId')
-//    ^?
-const action = route.action
-//    ^?
-const result = action.submit({ amount: 10000 })
-//    ^?
+    const loaderData = router.getRoute('/dashboard/users/:userId')
+    //    ^?
+    const route = router.getRoute('/dashboard/users/:userId')
+    //    ^?
+    const action = route.action
+    //    ^?
+    const result = action.submit({ amount: 10000 })
+    //    ^?
 
-router.buildLink({
-  to: '/dashboard/users/:userId',
-  params: {
-    userId: '2',
-  },
-  search: (prev) => ({
-    usersView: {
-      sortBy: 'email',
-    },
-  }),
-})
+    router.buildLink({
+      to: '/dashboard/users/:userId',
+      params: {
+        userId: '2',
+      },
+      search: (prev) => ({
+        usersView: {
+          sortBy: 'email',
+        },
+      }),
+    })
 
-// @ts-expect-error
-router.buildLink({
-  from: '/',
-  to: '/test',
-})
+    // @ts-expect-error
+    router.buildLink({
+      from: '/',
+      to: '/test',
+    })
 
-router.buildLink({
-  from: '/',
-  to: '/test',
-  search: () => {
-    return {
-      version: 2,
-      isGood: true,
-    }
-  },
-})
+    router.buildLink({
+      from: '/',
+      to: '/test',
+      search: () => {
+        return {
+          version: 2,
+          isGood: true,
+        }
+      },
+    })
 
-router.buildLink({
-  from: '/test',
-  to: '/',
-})
+    router.buildLink({
+      from: '/test',
+      to: '/',
+    })
 
-route.buildLink({
-  to: '',
-})
+    route.buildLink({
+      to: '',
+    })
 
-router.getRoute('/dashboard').buildLink({
-  to: '/dashboard/invoices',
-  params: {
-    // @ts-expect-error
-    invoiceId: 2,
-  },
-})
+    router.getRoute('/dashboard').buildLink({
+      to: '/dashboard/invoices',
+      params: {
+        // @ts-expect-error
+        invoiceId: 2,
+      },
+    })
 
-router.getRoute('/dashboard').buildLink({
-  to: '/dashboard/invoices/:invoiceId',
-  params: {
-    // @ts-expect-error
-    invoiceId: '2',
-  },
-})
+    router.getRoute('/dashboard').buildLink({
+      to: '/dashboard/invoices/:invoiceId',
+      params: {
+        // @ts-expect-error
+        invoiceId: '2',
+      },
+    })
 
-router.getRoute('/').buildLink({
-  to: '/dashboard/invoices/:invoiceId',
-  params: {
-    invoiceId: 2,
-  },
-})
+    router.getRoute('/').buildLink({
+      to: '/dashboard/invoices/:invoiceId',
+      params: {
+        invoiceId: 2,
+      },
+    })
 
-router.getRoute('/').buildLink({
-  to: '/',
-  search: {
-    version: 2,
-  },
-})
+    router.getRoute('/').buildLink({
+      to: '/',
+      search: {
+        version: 2,
+      },
+    })
 
-router.getRoute('/').buildLink({
-  to: '/dashboard/users/:userId',
-  params: (current) => ({
-    userId:
-      // @ts-expect-error
-      current?.invoiceId,
-  }),
-  search: (old) => ({
-    usersView: {
-      sortBy: 'email' as const,
-      filterBy: String(old.version),
-    },
-  }),
-})
+    router.getRoute('/').buildLink({
+      to: '/dashboard/users/:userId',
+      params: (current) => ({
+        userId:
+          // @ts-expect-error
+          current?.invoiceId,
+      }),
+      search: (old) => ({
+        usersView: {
+          sortBy: 'email' as const,
+          filterBy: String(old.version),
+        },
+      }),
+    })
 
-router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
-  to: '/dashboard/users/:userId',
-  params: (current) => ({
-    userId: `${current?.invoiceId}`,
-  }),
-  search: (prev) => {
-    return {
-      usersView: {
-        sortBy: 'name' as const,
-        filterBy: 'tanner',
+    router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
+      to: '/dashboard/users/:userId',
+      params: (current) => ({
+        userId: `${current?.invoiceId}`,
+      }),
+      search: (prev) => {
+        return {
+          usersView: {
+            sortBy: 'name' as const,
+            filterBy: 'tanner',
+          },
+        }
       },
-    }
-  },
-})
+    })
 
-router.getRoute('/dashboard/users/:userId').buildLink({
-  to: '/',
-  search: (prev) => {
-    return {
-      version: 2,
-    }
-  },
-})
+    router.getRoute('/dashboard/users/:userId').buildLink({
+      to: '/',
+      search: (prev) => {
+        return {
+          version: 2,
+        }
+      },
+    })
 
-router.buildLink({
-  from: '/',
-  to: '/dashboard/users/:userId',
-  params: {
-    userId: '2',
-  },
-  search: (prev) => ({
-    usersView: {
-      sortBy: 'id',
-      filterBy: `${prev.version}`,
-    },
-  }),
-})
+    router.buildLink({
+      from: '/',
+      to: '/dashboard/users/:userId',
+      params: {
+        userId: '2',
+      },
+      search: (prev) => ({
+        usersView: {
+          sortBy: 'id',
+          filterBy: `${prev.version}`,
+        },
+      }),
+    })
 
-router.getRoute('/').navigate({
-  // to: '.',
-  // TODO: What the heck? Why is any required here?
-  search: (prev: any) => ({
-    version: prev.version,
-  }),
-})
+    router.getRoute('/').navigate({
+      // to: '.',
+      // TODO: What the heck? Why is any required here?
+      search: (prev: any) => ({
+        version: prev.version,
+      }),
+    })
 
-router.buildLink({
-  from: '/dashboard/invoices',
-  to: '/dashboard',
-})
+    router.buildLink({
+      from: '/dashboard/invoices',
+      to: '/dashboard',
+    })
 
-router.getRoute('/').buildLink({
-  to: '/dashboard/invoices/:invoiceId',
-  params: {
-    invoiceId: 2,
-  },
-})
+    router.getRoute('/').buildLink({
+      to: '/dashboard/invoices/:invoiceId',
+      params: {
+        invoiceId: 2,
+      },
+    })
 
-router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
-  to: '.',
-  params: (d) => ({
-    invoiceId: d.invoiceId,
-  }),
-})
+    router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
+      to: '.',
+      params: (d) => ({
+        invoiceId: d.invoiceId,
+      }),
+    })
 
-type test = RelativeToPathAutoComplete<
-  //   ^?
-  MyRoutesInfo['fullPath'],
-  '/dashboard/invoices',
-  '..'
->
+    type test = RelativeToPathAutoComplete<
+      //   ^?
+      MyRoutesInfo['fullPath'],
+      '/dashboard/invoices',
+      '..'
+    >
 
-router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
-  to: '../test',
-  search: {
-    version: 2,
-    isGood: true,
-  },
+    router.getRoute('/dashboard/invoices/:invoiceId').buildLink({
+      to: '../test',
+      search: {
+        version: 2,
+        isGood: true,
+      },
+    })
+  })
 })