@ssrx/plugin-tanstack-router

Plugin

The runtime plugin is not yet implemented.

Router Adapter

The router adapter allows you to use tanstack router with @ssrx/vite. It supports code splitting and asset pre-loading so long as you leverage the adjusted lazyRouteComponent function (see note at end of this readme).

Usage

1import { tanstackRouterAdapter } from '@ssrx/plugin-tanstack-router/adapter';
2import { ssrx } from '@ssrx/vite/plugin';
3import { defineConfig } from 'vite';
4
5export default defineConfig({
6  plugins: [
7    // ... your other plugins
8
9    ssrx({
10      routerAdapter: tanstackRouterAdapter({
11        // Override this default if needed.. the adapter expects your routes file to export the
12        // route tree on this named export
13        exportName: 'routeTree',
14      }),
15    }),
16  ],
17});

Note, the lazyRouteComponent included in @tanstack/react-router does not preserve the identity of the original dynamic import when it assigns the preload property.

Use the below version in your project:

1/**
2 * Adapted from https://github.com/TanStack/router/blob/main/packages/react-router/src/lazyRouteComponent.tsx
3 *
4 * The comp.preload property has been adjusted to maintain a reference to the orginal lazy import function.
5 */
6export function lazyRouteComponent<T extends Record<string, any>, TKey extends keyof T = 'default'>(
7  importer: () => Promise<T>,
8  exportName?: TKey,
9): T[TKey] extends (props: infer TProps) => any ? AsyncRouteComponent<TProps> : never {
10  const load = importer;
11
12  const lazyComp = React.lazy(async () => {
13    const moduleExports = await load();
14    const comp = moduleExports[exportName ?? 'default'];
15    return {
16      default: comp,
17    };
18  });
19
20  (lazyComp as any).preload = load;
21
22  return lazyComp as any;
23}