@tanstack/router-plugin 1.102.3 → 1.102.4

package/dist/esm/esbuild.d.ts

@@ -9,7 +9,7 @@ import { configSchema, Config } from './core/config.js';
  * ```
  */
 declare const TanStackRouterGeneratorEsbuild: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -50,7 +50,7 @@ declare const TanStackRouterGeneratorEsbuild: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterCodeSplitterEsbuild: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -91,7 +91,7 @@ declare const TanStackRouterCodeSplitterEsbuild: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterEsbuild: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;

package/dist/esm/rspack.d.ts

@@ -13,7 +13,7 @@ import { configSchema, Config } from './core/config.js';
  * ```
  */
 declare const TanStackRouterGeneratorRspack: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -58,7 +58,7 @@ declare const TanStackRouterGeneratorRspack: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterCodeSplitterRspack: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -103,7 +103,7 @@ declare const TanStackRouterCodeSplitterRspack: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterRspack: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;

package/dist/esm/vite.d.ts

@@ -9,7 +9,7 @@ import { configSchema, Config } from './core/config.js';
  * ```
  */
 declare const TanStackRouterGeneratorVite: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -50,7 +50,7 @@ declare const TanStackRouterGeneratorVite: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterCodeSplitterVite: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -91,7 +91,7 @@ declare const TanStackRouterCodeSplitterVite: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterVite: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;

package/dist/esm/webpack.d.ts

@@ -9,7 +9,7 @@ import { configSchema, Config } from './core/config.js';
  * ```
  */
 declare const TanStackRouterGeneratorWebpack: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -50,7 +50,7 @@ declare const TanStackRouterGeneratorWebpack: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterCodeSplitterWebpack: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;
@@ -91,7 +91,7 @@ declare const TanStackRouterCodeSplitterWebpack: (options?: Partial<{
  * ```
  */
 declare const TanStackRouterWebpack: (options?: Partial<{
-    target: "react";
+    target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
     generatedRouteTree: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-plugin",
-  "version": "1.102.3",
+  "version": "1.102.4",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -100,9 +100,9 @@
     "chokidar": "^3.6.0",
     "unplugin": "^2.1.2",
     "zod": "^3.24.1",
-    "@tanstack/virtual-file-routes": "^1.99.0",
-    "@tanstack/router-generator": "^1.102.3",
-    "@tanstack/router-utils": "^1.102.2"
+    "@tanstack/router-generator": "^1.102.4",
+    "@tanstack/router-utils": "^1.102.2",
+    "@tanstack/virtual-file-routes": "^1.99.0"
   },
   "peerDependencies": {
     "@rsbuild/core": ">=1.0.2",

package/src/core/code-splitter/compilers.ts

@@ -5,8 +5,10 @@ import { deadCodeElimination } from 'babel-dead-code-elimination'
 import { generateFromAst, parseAst } from '@tanstack/router-utils'
 import { tsrSplit } from '../constants'
 import { createIdentifier } from './path-ids'
+import { getFrameworkOptions } from './framework-options'
 import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
 import type { CodeSplitGroupings, SplitRouteIdentNodes } from '../constants'
+import type { Config } from '../config'
 
 // eslint-disable-next-line unused-imports/no-unused-vars
 const debug = process.env.TSR_VITE_DEBUG
@@ -31,7 +33,7 @@ interface State {
 
 type SplitNodeMeta = {
   routeIdent: SplitRouteIdentNodes
-  splitStrategy: 'normal' | 'react-component'
+  splitStrategy: 'lazyFn' | 'lazyRouteComponent'
   localImporterIdent: string
   exporterIdent: string
   localExporterIdent: string
@@ -42,7 +44,7 @@ const SPLIT_NODES_CONFIG = new Map<SplitRouteIdentNodes, SplitNodeMeta>([
     {
       routeIdent: 'loader',
       localImporterIdent: '$$splitLoaderImporter', // const $$splitLoaderImporter = () => import('...')
-      splitStrategy: 'normal',
+      splitStrategy: 'lazyFn',
       localExporterIdent: 'SplitLoader', // const SplitLoader = ...
       exporterIdent: 'loader', // export { SplitLoader as loader }
     },
@@ -52,7 +54,7 @@ const SPLIT_NODES_CONFIG = new Map<SplitRouteIdentNodes, SplitNodeMeta>([
     {
       routeIdent: 'component',
       localImporterIdent: '$$splitComponentImporter', // const $$splitComponentImporter = () => import('...')
-      splitStrategy: 'react-component',
+      splitStrategy: 'lazyRouteComponent',
       localExporterIdent: 'SplitComponent', // const SplitComponent = ...
       exporterIdent: 'component', // export { SplitComponent as component }
     },
@@ -62,7 +64,7 @@ const SPLIT_NODES_CONFIG = new Map<SplitRouteIdentNodes, SplitNodeMeta>([
     {
       routeIdent: 'pendingComponent',
       localImporterIdent: '$$splitPendingComponentImporter', // const $$splitPendingComponentImporter = () => import('...')
-      splitStrategy: 'react-component',
+      splitStrategy: 'lazyRouteComponent',
       localExporterIdent: 'SplitPendingComponent', // const SplitPendingComponent = ...
       exporterIdent: 'pendingComponent', // export { SplitPendingComponent as pendingComponent }
     },
@@ -72,7 +74,7 @@ const SPLIT_NODES_CONFIG = new Map<SplitRouteIdentNodes, SplitNodeMeta>([
     {
       routeIdent: 'errorComponent',
       localImporterIdent: '$$splitErrorComponentImporter', // const $$splitErrorComponentImporter = () => import('...')
-      splitStrategy: 'react-component',
+      splitStrategy: 'lazyRouteComponent',
       localExporterIdent: 'SplitErrorComponent', // const SplitErrorComponent = ...
       exporterIdent: 'errorComponent', // export { SplitErrorComponent as errorComponent }
     },
@@ -82,7 +84,7 @@ const SPLIT_NODES_CONFIG = new Map<SplitRouteIdentNodes, SplitNodeMeta>([
     {
       routeIdent: 'notFoundComponent',
       localImporterIdent: '$$splitNotFoundComponentImporter', // const $$splitNotFoundComponentImporter = () => import('...')
-      splitStrategy: 'react-component',
+      splitStrategy: 'lazyRouteComponent',
       localExporterIdent: 'SplitNotFoundComponent', // const SplitNotFoundComponent = ...
       exporterIdent: 'notFoundComponent', // export { SplitNotFoundComponent as notFoundComponent }
     },
@@ -111,6 +113,7 @@ export function compileCodeSplitReferenceRoute(
   opts: ParseAstOptions & {
     runtimeEnv: 'dev' | 'prod'
     codeSplitGroupings: CodeSplitGroupings
+    targetFramework: Config['target']
   },
 ): GeneratorResult {
   const ast = parseAst(opts)
@@ -121,6 +124,11 @@ export function compileCodeSplitReferenceRoute(
     )
   }
 
+  const frameworkOptions = getFrameworkOptions(opts.targetFramework)
+  const PACKAGE = frameworkOptions.package
+  const LAZY_ROUTE_COMPONENT_IDENT = frameworkOptions.idents.lazyRouteComponent
+  const LAZY_FN_IDENT = frameworkOptions.idents.lazyFn
+
   babel.traverse(ast, {
     Program: {
       enter(programPath, programState) {
@@ -202,7 +210,9 @@ export function compileCodeSplitReferenceRoute(
                           codeSplitGroup,
                         )
 
-                        if (splitNodeMeta.splitStrategy === 'react-component') {
+                        if (
+                          splitNodeMeta.splitStrategy === 'lazyRouteComponent'
+                        ) {
                           const value = prop.value
 
                           let shouldSplit = true
@@ -238,12 +248,12 @@ export function compileCodeSplitReferenceRoute(
 
                           if (
                             !hasImportedOrDefinedIdentifier(
-                              'lazyRouteComponent',
+                              LAZY_ROUTE_COMPONENT_IDENT,
                             )
                           ) {
                             programPath.unshiftContainer('body', [
                               template.statement(
-                                `import { lazyRouteComponent } from '@tanstack/react-router'`,
+                                `import { ${LAZY_ROUTE_COMPONENT_IDENT} } from '${PACKAGE}'`,
                               )(),
                             ])
                           }
@@ -265,28 +275,30 @@ export function compileCodeSplitReferenceRoute(
                           // If it's a component, we need to pass the function to check the Route.ssr value
                           if (key === 'component') {
                             prop.value = template.expression(
-                              `lazyRouteComponent(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}', () => Route.ssr)`,
+                              `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}', () => Route.ssr)`,
                             )()
                           } else {
                             prop.value = template.expression(
-                              `lazyRouteComponent(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
+                              `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
                             )()
                           }
 
                           // If the TSRDummyComponent is not defined, define it
                           if (
                             opts.runtimeEnv !== 'prod' && // only in development
-                            !hasImportedOrDefinedIdentifier('TSRDummyComponent')
+                            !hasImportedOrDefinedIdentifier(
+                              frameworkOptions.idents.dummyHMRComponent,
+                            )
                           ) {
                             programPath.pushContainer('body', [
                               template.statement(
-                                `export function TSRDummyComponent() { return null }`,
+                                frameworkOptions.dummyHMRComponent,
                               )(),
                             ])
                           }
                         }
 
-                        if (splitNodeMeta.splitStrategy === 'normal') {
+                        if (splitNodeMeta.splitStrategy === 'lazyFn') {
                           const value = prop.value
 
                           let shouldSplit = true
@@ -317,11 +329,11 @@ export function compileCodeSplitReferenceRoute(
                           }
 
                           // Prepend the import statement to the program along with the importer function
-                          if (!hasImportedOrDefinedIdentifier('lazyFn')) {
+                          if (!hasImportedOrDefinedIdentifier(LAZY_FN_IDENT)) {
                             programPath.unshiftContainer(
                               'body',
                               template.smart(
-                                `import { lazyFn } from '@tanstack/react-router'`,
+                                `import { ${LAZY_FN_IDENT} } from '${PACKAGE}'`,
                               )(),
                             )
                           }
@@ -342,7 +354,7 @@ export function compileCodeSplitReferenceRoute(
 
                           // Add the lazyFn call with the dynamic import to the prop value
                           prop.value = template.expression(
-                            `lazyFn(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
+                            `${LAZY_FN_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
                           )()
                         }
                       }

package/src/core/code-splitter/framework-options.ts

@@ -0,0 +1,47 @@
+type FrameworkOptions = {
+  package: string
+  idents: {
+    createFileRoute: string
+    lazyFn: string
+    lazyRouteComponent: string
+    dummyHMRComponent: string
+  }
+  dummyHMRComponent: string
+}
+
+export function getFrameworkOptions(framework: string): FrameworkOptions {
+  let frameworkOptions: FrameworkOptions
+
+  switch (framework) {
+    case 'react':
+      frameworkOptions = {
+        package: '@tanstack/react-router',
+        idents: {
+          createFileRoute: 'createFileRoute',
+          lazyFn: 'lazyFn',
+          lazyRouteComponent: 'lazyRouteComponent',
+          dummyHMRComponent: 'TSRDummyComponent',
+        },
+        dummyHMRComponent: `export function TSRDummyComponent() { return null }`,
+      }
+      break
+    case 'solid':
+      frameworkOptions = {
+        package: '@tanstack/solid-router',
+        idents: {
+          createFileRoute: 'createFileRoute',
+          lazyFn: 'lazyFn',
+          lazyRouteComponent: 'lazyRouteComponent',
+          dummyHMRComponent: 'TSRDummyComponent',
+        },
+        dummyHMRComponent: `export function TSRDummyComponent() { return null }`,
+      }
+      break
+    default:
+      throw new Error(
+        `[getFrameworkOptions] - Unsupported framework: ${framework}`,
+      )
+  }
+
+  return frameworkOptions
+}

package/src/core/router-code-splitter-plugin.ts

@@ -143,6 +143,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
       filename: id,
       runtimeEnv: isProduction ? 'prod' : 'dev',
       codeSplitGroupings: splitGroupings,
+      targetFramework: userConfig.target,
     })
 
     if (debug) {