@ssrx/plugin-tanstack-router

@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

import { tanstackRouterAdapter } from '@ssrx/plugin-tanstack-router/adapter';
import { ssrx } from '@ssrx/vite/plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // ... your other plugins

    ssrx({
      routerAdapter: tanstackRouterAdapter({
        // Override this default if needed.. the adapter expects your routes file to export the
        // route tree on this named export
        exportName: 'routeTree',
      }),
    }),
  ],
});

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:

/**
 * Adapted from https://github.com/TanStack/router/blob/main/packages/react-router/src/lazyRouteComponent.tsx
 *
 * The comp.preload property has been adjusted to maintain a reference to the orginal lazy import function.
 */
export function lazyRouteComponent<T extends Record<string, any>, TKey extends keyof T = 'default'>(
  importer: () => Promise<T>,
  exportName?: TKey,
): T[TKey] extends (props: infer TProps) => any ? AsyncRouteComponent<TProps> : never {
  const load = importer;

  const lazyComp = React.lazy(async () => {
    const moduleExports = await load();
    const comp = moduleExports[exportName ?? 'default'];
    return {
      default: comp,
    };
  });

  (lazyComp as any).preload = load;

  return lazyComp as any;
}