Tanstack-react: Keep JSX-only component references during dead-code elimination

code/frameworks/tanstack-react/src/plugins/server-code-elimination.test.ts

@@ -285,6 +285,62 @@ describe('serverCodeEliminationPlugin', () => {
       expect(result!.code).not.toContain('secret');
     });
 
+    it('keeps imports only referenced in JSX after stripping the server option', async () => {
+      const code = [
+        `import { createFileRoute } from '@tanstack/react-router';`,
+        `import { ImportedPanel } from '../components/ImportedPanel';`,
+        `export const Route = createFileRoute('/demo')({`,
+        `  component: RouteComponent,`,
+        `  server: { handlers: { default: async () => new Response('ok') } },`,
+        `});`,
+        `function RouteComponent() {`,
+        `  return <ImportedPanel />;`,
+        `}`,
+      ].join('\n');
+      const result = await transform(code, '/project/src/routes/demo.tsx');
+      expect(result).not.toBeNull();
+      expect(result!.code).not.toMatch(/\bserver:\s*\{/);
+      expect(result!.code).toMatch(/import\s*\{\s*ImportedPanel\s*\}\s*from/);
+    });
+
+    it('keeps same-file components referenced only from JSX', async () => {
+      const code = [
+        `import { createFileRoute } from '@tanstack/react-router';`,
+        `import { createMiddleware } from '@tanstack/react-start';`,
+        `const noopMiddleware = createMiddleware().server(async ({ next }) => next());`,
+        `export const Route = createFileRoute('/fails')({`,
+        `  component: Component,`,
+        `  server: { middleware: [noopMiddleware] },`,
+        `});`,
+        `function Component() {`,
+        `  return <NestedComponent />;`,
+        `}`,
+        `function NestedComponent() {`,
+        `  return <div>Nested Component</div>;`,
+        `}`,
+      ].join('\n');
+      const result = await transform(code, '/project/src/routes/fails.tsx');
+      expect(result).not.toBeNull();
+      expect(result!.code).toContain('function NestedComponent');
+    });
+
+    it('keeps imports referenced via a JSX member expression (Namespace.Child)', async () => {
+      const code = [
+        `import { createFileRoute } from '@tanstack/react-router';`,
+        `import { UI } from '../components/ui';`,
+        `export const Route = createFileRoute('/demo')({`,
+        `  component: RouteComponent,`,
+        `  server: { handler: async () => ({}) },`,
+        `});`,
+        `function RouteComponent() {`,
+        `  return <UI.Panel />;`,
+        `}`,
+      ].join('\n');
+      const result = await transform(code, '/project/src/routes/demo.tsx');
+      expect(result).not.toBeNull();
+      expect(result!.code).toMatch(/import\s*\{\s*UI\s*\}\s*from/);
+    });
+
     it('keeps still-referenced imports from a partially-used declaration', async () => {
       const code = [
         `import { createServerOnlyFn, useSomething } from '@tanstack/react-start';`,

code/frameworks/tanstack-react/src/plugins/server-code-elimination.ts

@@ -1,5 +1,5 @@
-import { transformSync, types as t, type NodePath } from 'storybook/internal/babel';
-import { type Statement } from '@babel/types';
+import { type JSXIdentifier, type JSXOpeningElement, type Statement } from '@babel/types';
+import { types as t, transformSync, type NodePath } from 'storybook/internal/babel';
 import type { Plugin } from 'vite';
 
 interface TransformState {
@@ -387,6 +387,13 @@ function stripServerOption(options: import('@babel/types').ObjectExpression): bo
   return options.properties.length !== initialLength;
 }
 
+function getJsxRootIdentifier(name: JSXOpeningElement['name']): JSXIdentifier | null {
+  while (t.isJSXMemberExpression(name)) {
+    name = name.object;
+  }
+  return t.isJSXIdentifier(name) ? name : null;
+}
+
 /**
  * Collect all non-binding identifier references in the program.
  * Excludes binding sites (declarations) and import specifiers.
@@ -406,6 +413,12 @@ function collectReferencedIdentifiers(
       }
       referenced.add(node.name);
     },
+    JSXOpeningElement(path) {
+      const root = getJsxRootIdentifier(path.node.name);
+      if (root) {
+        referenced.add(root.name);
+      }
+    },
   });
   return referenced;
 }