refactor: router-utils for common utils (#3287)

package.json

@@ -101,7 +101,8 @@
       "@tanstack/start-plugin": "workspace:*",
       "@tanstack/eslint-plugin-router": "workspace:*",
       "@tanstack/server-functions-plugin": "workspace:*",
-      "@tanstack/directive-functions-plugin": "workspace:*"
+      "@tanstack/directive-functions-plugin": "workspace:*",
+      "@tanstack/router-utils": "workspace:*"
     }
   }
 }

packages/create-start/src/modules/core/template/app/router.tsx

@@ -6,6 +6,7 @@ import { routeTree } from './routeTree.gen'
 export function createRouter() {
   const router = createTanStackRouter({
     routeTree,
+    scrollRestoration: true,
   })
 
   return router

packages/create-start/src/modules/core/template/app/routes/__root.tsx

@@ -1,10 +1,6 @@
 // @ts-nocheck
 
-import {
-  Outlet,
-  ScrollRestoration,
-  createRootRoute,
-} from '@tanstack/react-router'
+import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { Meta, Scripts } from '@tanstack/start'
 import type { ReactNode } from 'react'
 

packages/directive-functions-plugin/package.json

@@ -67,23 +67,18 @@
   "dependencies": {
     "@babel/code-frame": "7.26.2",
     "@babel/core": "^7.26.7",
-    "@babel/generator": "^7.26.5",
-    "@babel/parser": "^7.26.7",
     "@babel/plugin-syntax-jsx": "^7.25.9",
     "@babel/plugin-syntax-typescript": "^7.25.9",
     "@babel/template": "^7.25.9",
     "@babel/traverse": "^7.26.7",
     "@babel/types": "^7.26.7",
+    "@tanstack/router-utils": "workspace:^",
     "@types/babel__code-frame": "^7.0.6",
     "@types/babel__core": "^7.20.5",
-    "@types/babel__generator": "^7.6.8",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.6",
-    "@types/diff": "^6.0.0",
     "babel-dead-code-elimination": "^1.0.8",
-    "chalk": "^5.4.1",
     "dedent": "^1.5.3",
-    "diff": "^7.0.0",
     "tiny-invariant": "^1.3.3"
   }
 }

packages/directive-functions-plugin/src/compilers.ts

@@ -1,16 +1,9 @@
 import * as babel from '@babel/core'
-import _generate from '@babel/generator'
-import { parse } from '@babel/parser'
 import { isIdentifier, isVariableDeclarator } from '@babel/types'
 import { codeFrameColumns } from '@babel/code-frame'
 import { deadCodeElimination } from 'babel-dead-code-elimination'
-import type { ParseResult } from '@babel/parser'
-
-let generate = _generate
-
-if ('default' in generate) {
-  generate = generate.default as typeof generate
-}
+import { generateFromAst, parseAst } from '@tanstack/router-utils'
+import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
 
 export interface DirectiveFn {
   nodePath: SupportedFunctionPath
@@ -46,29 +39,14 @@ export type CompileDirectivesOpts = ParseAstOptions & {
   // devSplitImporter: string
 }
 
-export type ParseAstOptions = {
-  code: string
-  filename: string
-  root: string
-}
-
-export function parseAst(opts: ParseAstOptions): ParseResult<babel.types.File> {
-  return parse(opts.code, {
-    plugins: ['jsx', 'typescript'],
-    sourceType: 'module',
-    ...{
-      root: opts.root,
-      filename: opts.filename,
-      sourceMaps: true,
-    },
-  })
-}
-
 function buildDirectiveSplitParam(opts: CompileDirectivesOpts) {
   return `tsr-directive-${opts.directive.replace(/[^a-zA-Z0-9]/g, '-')}`
 }
 
-export function compileDirectives(opts: CompileDirectivesOpts) {
+export function compileDirectives(opts: CompileDirectivesOpts): {
+  compiledResult: GeneratorResult
+  directiveFnsById: Record<string, DirectiveFn>
+} {
   const directiveSplitParam = buildDirectiveSplitParam(opts)
   const isDirectiveSplitParam = opts.filename.includes(directiveSplitParam)
 
@@ -123,7 +101,7 @@ export function compileDirectives(opts: CompileDirectivesOpts) {
 
   deadCodeElimination(ast)
 
-  const compiledResult = generate(ast, {
+  const compiledResult = generateFromAst(ast, {
     sourceMaps: true,
     sourceFileName: opts.filename,
   })
@@ -248,7 +226,7 @@ export function findDirectives(
     replacer?: ReplacerFn
     directiveSplitParam: string
   },
-) {
+): Record<string, DirectiveFn> {
   const directiveFnsById: Record<string, DirectiveFn> = {}
   const functionNameSet: Set<string> = new Set()
 

packages/directive-functions-plugin/src/index.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath, pathToFileURL } from 'node:url'
 
+import { logDiff } from '@tanstack/router-utils'
 import { compileDirectives } from './compilers'
-import { logDiff } from './logger'
 import type { CompileDirectivesOpts, DirectiveFn } from './compilers'
 import type { Plugin } from 'vite'
 

packages/router-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-plugin",
-  "version": "1.98.4",
+  "version": "1.98.3",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -104,24 +104,19 @@
   },
   "dependencies": {
     "@babel/core": "^7.26.7",
-    "@babel/generator": "^7.26.5",
-    "@babel/parser": "^7.26.7",
     "@babel/plugin-syntax-jsx": "^7.25.9",
     "@babel/plugin-syntax-typescript": "^7.25.9",
     "@babel/template": "^7.25.9",
     "@babel/traverse": "^7.26.7",
     "@babel/types": "^7.26.7",
     "@tanstack/router-generator": "workspace:^",
+    "@tanstack/router-utils": "workspace:^",
     "@tanstack/virtual-file-routes": "workspace:^",
     "@types/babel__core": "^7.20.5",
-    "@types/babel__generator": "^7.6.8",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.6",
-    "@types/diff": "^6.0.0",
     "babel-dead-code-elimination": "^1.0.8",
-    "chalk": "^5.4.1",
     "chokidar": "^3.6.0",
-    "diff": "^7.0.0",
     "unplugin": "^2.1.2",
     "zod": "^3.24.1"
   },

packages/router-plugin/src/core/code-splitter/compilers.ts

@@ -1,24 +1,13 @@
 import * as t from '@babel/types'
 import babel from '@babel/core'
-import _generate from '@babel/generator'
 import * as template from '@babel/template'
 import { deadCodeElimination } from 'babel-dead-code-elimination'
-
+import { generateFromAst, parseAst } from '@tanstack/router-utils'
 import { splitPrefix } from '../constants'
-import { parseAst } from './ast'
-import type { ParseAstOptions } from './ast'
+import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
 
 const debug = process.env.TSR_VITE_DEBUG
 
-// Babel is a CJS package and uses `default` as named binding (`exports.default =`).
-// https://github.com/babel/babel/issues/15269.
-let generate = (_generate as any)['default'] as typeof _generate
-
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-if (!generate) {
-  generate = _generate
-}
-
 type SplitModulesById = Record<
   string,
   { id: string; node: t.FunctionExpression }
@@ -79,7 +68,9 @@ const SPLIT_NOES_CONFIG = new Map<SplitRouteIdentNodes, SplitNodeMeta>([
 ])
 const SPLIT_ROUTE_IDENT_NODES = [...SPLIT_NOES_CONFIG.keys()] as const
 
-export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) {
+export function compileCodeSplitReferenceRoute(
+  opts: ParseAstOptions,
+): GeneratorResult {
   const ast = parseAst(opts)
 
   babel.traverse(ast, {
@@ -321,13 +312,15 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) {
 
   deadCodeElimination(ast)
 
-  return generate(ast, {
+  return generateFromAst(ast, {
     sourceMaps: true,
     sourceFileName: opts.filename,
   })
 }
 
-export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) {
+export function compileCodeSplitVirtualRoute(
+  opts: ParseAstOptions,
+): GeneratorResult {
   const ast = parseAst(opts)
 
   const knownExportedIdents = new Set<string>()
@@ -483,7 +476,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) {
                 ]),
               )
             } else if (t.isCallExpression(splitNode)) {
-              const outputSplitNodeCode = generate(splitNode).code
+              const outputSplitNodeCode = generateFromAst(splitNode).code
               const splitNodeAst = babel.parse(outputSplitNodeCode)
 
               if (!splitNodeAst) {
@@ -593,7 +586,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) {
     }
   }
 
-  return generate(ast, {
+  return generateFromAst(ast, {
     sourceMaps: true,
     sourceFileName: opts.filename,
   })

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

@@ -1,7 +1,7 @@
 import { isAbsolute, join, normalize } from 'node:path'
 
 import { fileURLToPath, pathToFileURL } from 'node:url'
-import { logDiff } from '../logger'
+import { logDiff } from '@tanstack/router-utils'
 import { getConfig } from './config'
 import {
   compileCodeSplitReferenceRoute,

packages/router-utils/eslint.config.js

@@ -0,0 +1,5 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+export default [...rootConfig]