fix: do not rename functions / variables when code splitting (#4960)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: schiller-manuel

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

@@ -537,7 +537,7 @@ export function compileCodeSplitVirtualRoute(
           }
 
           let splitNode = splitKey.node
-          const splitMeta = splitKey.meta
+          const splitMeta = { ...splitKey.meta, shouldRemoveNode: true }
 
           while (t.isIdentifier(splitNode)) {
             const binding = programPath.scope.getBinding(splitNode.name)
@@ -547,21 +547,15 @@ export function compileCodeSplitVirtualRoute(
           // Add the node to the program
           if (splitNode) {
             if (t.isFunctionDeclaration(splitNode)) {
-              programPath.pushContainer(
-                'body',
-                t.variableDeclaration('const', [
-                  t.variableDeclarator(
-                    t.identifier(splitMeta.localExporterIdent),
-                    t.functionExpression(
-                      splitNode.id || null, // Anonymize the function expression
-                      splitNode.params,
-                      splitNode.body,
-                      splitNode.generator,
-                      splitNode.async,
-                    ),
-                  ),
-                ]),
-              )
+              // an anonymous function declaration should only happen for `export default function() {...}`
+              // so we should never get here
+              if (!splitNode.id) {
+                throw new Error(
+                  `Function declaration for "${SPLIT_TYPE}" must have an identifier.`,
+                )
+              }
+              splitMeta.shouldRemoveNode = false
+              splitMeta.localExporterIdent = splitNode.id.name
             } else if (
               t.isFunctionExpression(splitNode) ||
               t.isArrowFunctionExpression(splitNode)
@@ -589,15 +583,14 @@ export function compileCodeSplitVirtualRoute(
                 ]),
               )
             } else if (t.isVariableDeclarator(splitNode)) {
-              programPath.pushContainer(
-                'body',
-                t.variableDeclaration('const', [
-                  t.variableDeclarator(
-                    t.identifier(splitMeta.localExporterIdent),
-                    splitNode.init,
-                  ),
-                ]),
-              )
+              if (t.isIdentifier(splitNode.id)) {
+                splitMeta.localExporterIdent = splitNode.id.name
+                splitMeta.shouldRemoveNode = false
+              } else {
+                throw new Error(
+                  `Unexpected splitNode type ☝️: ${splitNode.type}`,
+                )
+              }
             } else if (t.isCallExpression(splitNode)) {
               const outputSplitNodeCode = generateFromAst(splitNode).code
               const splitNodeAst = babel.parse(outputSplitNodeCode)
@@ -668,11 +661,13 @@ export function compileCodeSplitVirtualRoute(
             }
           }
 
-          // If the splitNode exists at the top of the program
-          // then we need to remove that copy
-          programPath.node.body = programPath.node.body.filter((node) => {
-            return node !== splitNode
-          })
+          if (splitMeta.shouldRemoveNode) {
+            // If the splitNode exists at the top of the program
+            // then we need to remove that copy
+            programPath.node.body = programPath.node.body.filter((node) => {
+              return node !== splitNode
+            })
+          }
 
           // Export the node
           programPath.pushContainer('body', [

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/[email protected]

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link, Outlet } from '@tanstack/react-router';
 import { Route } from "arrow-function.tsx";
-const SplitComponent = () => {
+const PostsComponent = () => {
   const posts = Route.useLoaderData();
   return <div className="p-2 flex gap-2">
       <ul className="list-disc pl-4">
@@ -24,4 +24,4 @@ const SplitComponent = () => {
       <Outlet />
     </div>;
 };
-export { SplitComponent as component };
+export { PostsComponent as component };

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/[email protected]

@@ -1,5 +1,11 @@
 import * as React from 'react';
 import { Route } from "chinese.tsx";
+function HomeComponent() {
+  return <div className="p-2">
+      <Demo title="标题很好看，谁说不是呢？" />
+      <Demo title="The title looks great, who can deny that?" />
+    </div>;
+}
 interface DemoProps {
   title: string;
 }
@@ -15,10 +21,4 @@ function Demo({
       {title}
     </h1>;
 }
-const SplitComponent = function HomeComponent() {
-  return <div className="p-2">
-      <Demo title="标题很好看，谁说不是呢？" />
-      <Demo title="The title looks great, who can deny that?" />
-    </div>;
-};
-export { SplitComponent as component };
+export { HomeComponent as component };

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/circular-reference-arrow-function.tsx

@@ -0,0 +1,6 @@
+const $$splitComponentImporter = () => import('circular-reference-arrow-function.tsx?tsr-split=component');
+import { lazyRouteComponent } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component')
+});

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/[email protected]

@@ -0,0 +1,20 @@
+function getComponentName(obj: Record<string, unknown>): string {
+  return Object.keys(obj)[0];
+}
+const App = () => {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>
+      Component Name is {componentName}
+      <OtherComponent />
+    </div>;
+};
+function OtherComponent() {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>App component name is {componentName}</div>;
+}
+import { Route } from "circular-reference-arrow-function.tsx";
+export { App as component };

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/[email protected]

@@ -0,0 +1,19 @@
+function getComponentName(obj: Record<string, unknown>): string {
+  return Object.keys(obj)[0];
+}
+const App = () => {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>
+      Component Name is {componentName}
+      <OtherComponent />
+    </div>;
+};
+function OtherComponent() {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>App component name is {componentName}</div>;
+}
+import { Route } from "circular-reference-arrow-function.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/[email protected]

@@ -0,0 +1,19 @@
+function getComponentName(obj: Record<string, unknown>): string {
+  return Object.keys(obj)[0];
+}
+const App = () => {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>
+      Component Name is {componentName}
+      <OtherComponent />
+    </div>;
+};
+function OtherComponent() {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>App component name is {componentName}</div>;
+}
+import { Route } from "circular-reference-arrow-function.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/circular-reference-function.tsx

@@ -0,0 +1,6 @@
+const $$splitComponentImporter = () => import('circular-reference-function.tsx?tsr-split=component');
+import { lazyRouteComponent } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component')
+});

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/[email protected]

@@ -0,0 +1,20 @@
+function getComponentName(obj: Record<string, unknown>): string {
+  return Object.keys(obj)[0];
+}
+function App() {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>
+      Component Name is {componentName}
+      <OtherComponent />
+    </div>;
+}
+function OtherComponent() {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>App component name is {componentName}</div>;
+}
+import { Route } from "circular-reference-function.tsx";
+export { App as component };

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/[email protected]

@@ -0,0 +1,19 @@
+function getComponentName(obj: Record<string, unknown>): string {
+  return Object.keys(obj)[0];
+}
+function App() {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>
+      Component Name is {componentName}
+      <OtherComponent />
+    </div>;
+}
+function OtherComponent() {
+  const componentName = getComponentName({
+    App
+  });
+  return <div>App component name is {componentName}</div>;
+}
+import { Route } from "circular-reference-function.tsx";