feat: migrate Router and Start compilation to Yuku

.changeset/mean-birds-bow.md

@@ -0,0 +1,9 @@
+---
+'@tanstack/router-utils': patch
+'@tanstack/router-generator': patch
+'@tanstack/router-plugin': patch
+'@tanstack/start-plugin-core': patch
+'@tanstack/react-start-rsc': patch
+---
+
+Standardize Yuku AST guards and compiler terminology, and share directive-preserving statement insertion and source-position helpers across compilation transforms.

.changeset/smooth-parrots-argue.md

@@ -0,0 +1,42 @@
+---
+'@tanstack/router-utils': minor
+'@tanstack/router-plugin': minor
+'@tanstack/start-plugin-core': minor
+'@tanstack/router-generator': minor
+'@tanstack/router-cli': minor
+'@tanstack/router-vite-plugin': minor
+'@tanstack/react-start-rsc': patch
+---
+
+Replace Babel-based route and Start compilation with Yuku's parser, semantic analysis, AST utilities, and code generator. Parsing and analysis run on Yuku's native core, or on its WebAssembly core in WebContainers such as StackBlitz and where the native binding cannot load. The WebAssembly core does not run on big-endian hosts (such as s390x) or under `node --jitless`.
+
+Compiler extension hooks and AST helpers now expose Yuku nodes and semantic context. Babel nodes, traversal paths, and helper APIs are removed; extensions must migrate to the native interfaces. Routing and server-function runtime contracts remain unchanged.
+
+A `createServerFn` that is not assigned to a module-level variable now fails the build in every environment: one declared inside a function or block, a default export, an object property, an assignment, or a function that returns one, including such wrappers shipped by libraries, since the compiler also processes dependencies. None of these placements worked before: depending on the other Start APIs in the file, the build already failed with "must be assigned to a variable", or the server function was left untransformed, so its handler and server-only imports shipped to the client and its calls returned `undefined`, or the output failed later in the bundler or at runtime. A function that returns an unfinished builder (`defineAction(schema).handler(fn)`) is still not detected.
+
+A route created inside a function or IIFE (a route factory) is no longer code-split, and the router plugin reports a bundler warning for it in development and builds. Edits to it may need a full page reload. Previously such routes were split, which broke when a split option used the function's locals: a `ReferenceError` at render, a build error, or the wrong component.
+
+`@tanstack/router-utils`, `@tanstack/router-generator`, `@tanstack/router-plugin`, `@tanstack/router-cli` and `@tanstack/router-vite-plugin` now require Node.js `^20.19.0 || >=22.12.0`: their CommonJS builds load Yuku's ES modules with `require()`, which Node.js 22.0 to 22.11 does not support without a flag.
+
+Other behaviour changes:
+
+- An exported function or class that a split route option uses (an exported page component the split component renders, an exported store class or helper) now moves into the route's shared module, which the route module re-exports it from, so the split chunk and every other importer use one instance: `instanceof` checks and module state agree across modules. When nothing else imports it, the bundler can leave it, and the imports only it uses, out of the route module's chunk, so the top-level side effects of those imports run when the split chunk loads. Previously the split chunk declared its own copy. An exported function that reads `Route` is still copied into the chunk when it holds no module state. In React route files, shared components go to a module of their own, apart from the other shared bindings, so that React Refresh can hot-update them.
+- A class, enum, namespace or reassigned `let` that only a split route option uses now moves into that option's chunk, like other declarations already did, so its top-level side effects run when the chunk loads instead of when the route module loads.
+- A split route option that refers to an exported binding through a TypeScript cast (`errorComponent: ErrorComponent as any`) is no longer split, like the same option without the cast, and reports the existing "will not be code-split" warning. Previously the component was duplicated into the route module and the chunk.
+- A `<Hydrate>` whose content is passed as a `children` prop is now split like JSX children, so hooks or functions there require `split={false}`, as they do for JSX children.
+- `.js` and `.jsx` files are parsed as JavaScript with JSX, so TypeScript syntax in them is a syntax error.
+- Exporting a type and a value of the same name from two separate `export` statements (`export type { Post } from './types'` and `export { Post } from './post'`) is now a syntax error, as it is in TypeScript.
+- The route generator no longer treats a type-only `Route` export (`export type { X as Route }`, `export { type X as Route }`, `export declare const Route`) as the route export: it exports nothing at runtime, so the file is reported as having no `Route` export.
+- Import protection mocks now include the names that `export * as ns`, `export enum` and `export namespace` export, no longer expose names exported inside a namespace, and cover `ns.x` reads that come before `import * as ns`.
+
+Fixes:
+
+- Route HMR in Vite now hot-updates Solid routes with automatic code splitting and Vue routes instead of reloading the page.
+- Route options wrapped in `as any`, `satisfies` or `!`, and a route factory call wrapped in a cast, are now code-split. Previously the file was left untransformed, so a server route written this way also kept its `server` handlers in the client.
+- Split route components written as a call containing JSX (`React.memo(() => <p />)`, a Vue `defineComponent` whose `setup` returns JSX) now compile.
+- A component used by both a split and an unsplit route option no longer throws "is not defined", and a component declared with `function Page` and exported with `export { Page }` no longer breaks the build.
+- Split chunks now import the classic JSX factory (`/** @jsx h */`) the route module exports, declare an enum or namespace that the loader and the component read once, keep the body of a dotted namespace (`namespace A.B {}`), and no longer import values that only types read. A split-only component named like a type no longer also stays in the route module.
+- The route generator records route options written as methods or accessors.
+- `createServerOnlyFn` and `createIsomorphicFn` passed to `.handler()`, and `.server()` or `.validator()` chain links wrapped in a cast, now compile correctly.
+- `<Hydrate>` children that read `Route` import it, also when it is exported under a string name; children passed through a `children` prop or a spread render; and `split={false}` works inside a cast.
+- Import protection reports usages inside JSX and skips type positions and member properties, and its mocks no longer reuse a name the module declares.

.changeset/split-object-form-loader.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/router-plugin': patch
+---
+
+Split the `handler` of a loader written inline in object form (`loader: { handler, staleReloadMode }`) into its chunk, keeping the other loader options in the route module, so that a split object-form loader loads its data. An object-form loader passed by reference (`const loader = { handler }`, then `loader`) is not supported yet.

e2e/react-start/hmr/src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ChildRouteImport } from './routes/child'
 import { Route as ComponentHmrRouteImport } from './routes/component-hmr'
+import { Route as ComponentHmrExportedSplitRouteImport } from './routes/component-hmr-exported-split'
 import { Route as ComponentHmrInlineErrorSplitRouteImport } from './routes/component-hmr-inline-error-split'
 import { Route as ComponentHmrInlineNosplitRouteImport } from './routes/component-hmr-inline-nosplit'
 import { Route as ComponentHmrInlineSplitRouteImport } from './routes/component-hmr-inline-split'
@@ -39,6 +40,12 @@ const ComponentHmrRoute = ComponentHmrRouteImport.update({
   path: '/component-hmr',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ComponentHmrExportedSplitRoute =
+  ComponentHmrExportedSplitRouteImport.update({
+    id: '/component-hmr-exported-split',
+    path: '/component-hmr-exported-split',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const ComponentHmrInlineErrorSplitRoute =
   ComponentHmrInlineErrorSplitRouteImport.update({
     id: '/component-hmr-inline-error-split',
@@ -105,6 +112,7 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/child': typeof ChildRoute
   '/component-hmr': typeof ComponentHmrRoute
+  '/component-hmr-exported-split': typeof ComponentHmrExportedSplitRoute
   '/component-hmr-inline-error-split': typeof ComponentHmrInlineErrorSplitRoute
   '/component-hmr-inline-nosplit': typeof ComponentHmrInlineNosplitRoute
   '/component-hmr-inline-split': typeof ComponentHmrInlineSplitRoute
@@ -121,6 +129,7 @@ export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/child': typeof ChildRoute
   '/component-hmr': typeof ComponentHmrRoute
+  '/component-hmr-exported-split': typeof ComponentHmrExportedSplitRoute
   '/component-hmr-inline-error-split': typeof ComponentHmrInlineErrorSplitRoute
   '/component-hmr-inline-nosplit': typeof ComponentHmrInlineNosplitRoute
   '/component-hmr-inline-split': typeof ComponentHmrInlineSplitRoute
@@ -138,6 +147,7 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/child': typeof ChildRoute
   '/component-hmr': typeof ComponentHmrRoute
+  '/component-hmr-exported-split': typeof ComponentHmrExportedSplitRoute
   '/component-hmr-inline-error-split': typeof ComponentHmrInlineErrorSplitRoute
   '/component-hmr-inline-nosplit': typeof ComponentHmrInlineNosplitRoute
   '/component-hmr-inline-split': typeof ComponentHmrInlineSplitRoute
@@ -156,6 +166,7 @@ export interface FileRouteTypes {
     | '/'
     | '/child'
     | '/component-hmr'
+    | '/component-hmr-exported-split'
     | '/component-hmr-inline-error-split'
     | '/component-hmr-inline-nosplit'
     | '/component-hmr-inline-split'
@@ -172,6 +183,7 @@ export interface FileRouteTypes {
     | '/'
     | '/child'
     | '/component-hmr'
+    | '/component-hmr-exported-split'
     | '/component-hmr-inline-error-split'
     | '/component-hmr-inline-nosplit'
     | '/component-hmr-inline-split'
@@ -188,6 +200,7 @@ export interface FileRouteTypes {
     | '/'
     | '/child'
     | '/component-hmr'
+    | '/component-hmr-exported-split'
     | '/component-hmr-inline-error-split'
     | '/component-hmr-inline-nosplit'
     | '/component-hmr-inline-split'
@@ -205,6 +218,7 @@ export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ChildRoute: typeof ChildRoute
   ComponentHmrRoute: typeof ComponentHmrRoute
+  ComponentHmrExportedSplitRoute: typeof ComponentHmrExportedSplitRoute
   ComponentHmrInlineErrorSplitRoute: typeof ComponentHmrInlineErrorSplitRoute
   ComponentHmrInlineNosplitRoute: typeof ComponentHmrInlineNosplitRoute
   ComponentHmrInlineSplitRoute: typeof ComponentHmrInlineSplitRoute
@@ -240,6 +254,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentHmrRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/component-hmr-exported-split': {
+      id: '/component-hmr-exported-split'
+      path: '/component-hmr-exported-split'
+      fullPath: '/component-hmr-exported-split'
+      preLoaderRoute: typeof ComponentHmrExportedSplitRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/component-hmr-inline-error-split': {
       id: '/component-hmr-inline-error-split'
       path: '/component-hmr-inline-error-split'
@@ -337,6 +358,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ChildRoute: ChildRoute,
   ComponentHmrRoute: ComponentHmrRoute,
+  ComponentHmrExportedSplitRoute: ComponentHmrExportedSplitRoute,
   ComponentHmrInlineErrorSplitRoute: ComponentHmrInlineErrorSplitRoute,
   ComponentHmrInlineNosplitRoute: ComponentHmrInlineNosplitRoute,
   ComponentHmrInlineSplitRoute: ComponentHmrInlineSplitRoute,

e2e/react-start/hmr/src/routes/component-hmr-exported-split.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+
+export const Route = createFileRoute('/component-hmr-exported-split')({
+  component: ComponentHmrPage,
+})
+
+// Private values the exported component reads: they are shared with the
+// split component, next to the component
+const markerClassNames = { marker: 'hmr-marker' }
+
+function markerClassName() {
+  return markerClassNames.marker
+}
+
+export function ComponentHmrMarker() {
+  return (
+    <p className={markerClassName()} data-testid="component-hmr-marker">
+      component-hmr-exported-split-baseline
+    </p>
+  )
+}
+
+function ComponentHmrPage() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <main className="hmr-card flex flex-col gap-5">
+      <ComponentHmrMarker />
+      <p data-testid="component-hmr-count">Count: {count}</p>
+      <button
+        data-testid="component-hmr-increment"
+        onClick={() => setCount((value) => value + 1)}
+      >
+        Increment
+      </button>
+      <input data-testid="component-hmr-message" defaultValue="" />
+    </main>
+  )
+}

e2e/react-start/hmr/tests/app.spec.ts

@@ -27,6 +27,7 @@ const routeFilePaths = {
   componentHmrNamedSplit: 'routes/component-hmr-named-split.tsx',
   componentHmrLowercaseNamedSplit:
     'routes/component-hmr-lowercase-named-split.tsx',
+  componentHmrExportedSplit: 'routes/component-hmr-exported-split.tsx',
   componentHmrNamedNosplit: 'routes/component-hmr-named-nosplit.tsx',
   componentHmrInlineErrorSplit: 'routes/component-hmr-inline-error-split.tsx',
   componentHmrNamedErrorSplit: 'routes/component-hmr-named-error-split.tsx',
@@ -122,6 +123,11 @@ const routeFileRestoreChecks: Partial<
     testId: 'component-hmr-marker',
     text: 'component-hmr-lowercase-named-split-baseline',
   },
+  componentHmrExportedSplit: {
+    url: '/component-hmr-exported-split',
+    testId: 'component-hmr-marker',
+    text: 'component-hmr-exported-split-baseline',
+  },
   componentHmrNamedNosplit: {
     url: '/component-hmr-named-nosplit',
     testId: 'component-hmr-marker',
@@ -279,6 +285,10 @@ function normalizeRouteSource(routeFileKey: RouteFileKey, source: string) {
       'component-hmr-lowercase-named-split-updated',
       'component-hmr-lowercase-named-split-baseline',
     ],
+    componentHmrExportedSplit: [
+      'component-hmr-exported-split-updated',
+      'component-hmr-exported-split-baseline',
+    ],
     componentHmrNamedNosplit: [
       'component-hmr-named-nosplit-updated',
       'component-hmr-named-nosplit-baseline',
@@ -1442,6 +1452,28 @@ test.describe('react-start hmr', () => {
     await expectComponentHmrStatePreserved(page)
   })
 
+  // The split component renders an exported component that reads private
+  // values: all of them go to the route file's shared modules
+  test('updates an exported component that a code-split route component renders', async ({
+    page,
+  }) => {
+    await seedComponentHmrState(page, '/component-hmr-exported-split')
+
+    await replaceRouteTextAndWait(
+      page,
+      'componentHmrExportedSplit',
+      'component-hmr-exported-split-baseline',
+      'component-hmr-exported-split-updated',
+      async () => {
+        await hmrExpect(page.getByTestId('component-hmr-marker')).toHaveText(
+          'component-hmr-exported-split-updated',
+        )
+      },
+    )
+
+    await expectComponentHmrStatePreserved(page)
+  })
+
   test('updates non-root route component during HMR when component is not defined inline and codeSplitGroupings disables code splitting', async ({
     page,
   }) => {

e2e/react-start/rsbuild/tests/error-overlay.spec.ts

@@ -376,9 +376,9 @@ test('shows a module syntax error through the error overlay', async ({
       [
         {
           "title": "Build failed",
-          "description": "SyntaxError: Unexpected token (16:22)",
+          "description": "SyntaxError: <fixture-root>/src/routes/index.tsx: Unexpected token ';' (16:22)",
           "runtime": "client",
-          "sourceFrame": "File: ./src/routes/index.tsx:1:1\\nx Module build failed (from <rsbuild-transform-loader>):\\n->   x SyntaxError: Unexpected token (16:22)",
+          "sourceFrame": "File: ./src/routes/index.tsx:1:1\\nx Module build failed (from <rsbuild-transform-loader>):\\n->   x SyntaxError: <fixture-root>/src/routes/index.tsx: Unexpected token ';' (16:22)",
           "importTrace": [
             "../../../packages/react-start/dist/plugin/default-entry/client.tsx",
             "../../../packages/react-start/dist/esm/client.js",
@@ -389,9 +389,9 @@ test('shows a module syntax error through the error overlay', async ({
         },
         {
           "title": "Build failed",
-          "description": "SyntaxError: Unexpected token (16:22)",
+          "description": "SyntaxError: <fixture-root>/src/routes/index.tsx: Unexpected token ';' (16:22)",
           "runtime": "server",
-          "sourceFrame": "File: ./src/routes/index.tsx:1:1\\nx Module build failed (from <rsbuild-transform-loader>):\\n->   x SyntaxError: Unexpected token (16:22)",
+          "sourceFrame": "File: ./src/routes/index.tsx:1:1\\nx Module build failed (from <rsbuild-transform-loader>):\\n->   x SyntaxError: <fixture-root>/src/routes/index.tsx: Unexpected token ';' (16:22)",
           "importTrace": [
             "../../../packages/react-start/dist/plugin/default-entry/server.ts",
             "../../../packages/react-start/dist/esm/server.js",

packages/react-start-rsc/package.json

@@ -104,7 +104,8 @@
     "@tanstack/start-fn-stubs": "workspace:*",
     "@tanstack/start-plugin-core": "workspace:*",
     "@tanstack/start-storage-context": "workspace:*",
-    "pathe": "catalog:"
+    "pathe": "catalog:",
+    "yuku-ast": "catalog:"
   },
   "devDependencies": {
     "@rspack/core": "2.2.7",