fix: do not minify during code splitting

fixes #3183

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

@@ -268,7 +268,6 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) {
   return generate(ast, {
     sourceMaps: true,
     sourceFileName: opts.filename,
-    minified: process.env.NODE_ENV === 'production',
   })
 }
 
@@ -528,7 +527,6 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) {
   return generate(ast, {
     sourceMaps: true,
     sourceFileName: opts.filename,
-    minified: process.env.NODE_ENV === 'production',
   })
 }
 

packages/router-plugin/tests/code-splitter.test.ts

@@ -12,46 +12,50 @@ async function getFilenames() {
   return await readdir(path.resolve(__dirname, './code-splitter/test-files'))
 }
 
-describe('code-splitter works', async () => {
-  const filenames = await getFilenames()
-
-  it.each(filenames)(
-    'should handle the compiling of "%s"',
-    async (filename) => {
-      const file = await readFile(
-        path.resolve(__dirname, `./code-splitter/test-files/${filename}`),
-      )
-      const code = file.toString()
-
-      const compileResult = compileCodeSplitReferenceRoute({
-        code,
-        root: './code-splitter/test-files',
-        filename,
-      })
-
-      await expect(compileResult.code).toMatchFileSnapshot(
-        `./code-splitter/snapshots/${filename}`,
-      )
-    },
-  )
-
-  it.each(filenames)(
-    'should handle the splitting of "%s"',
-    async (filename) => {
-      const file = await readFile(
-        path.resolve(__dirname, `./code-splitter/test-files/${filename}`),
-      )
-      const code = file.toString()
-
-      const splitResult = compileCodeSplitVirtualRoute({
-        code: code,
-        root: './code-splitter/test-files',
-        filename: `${filename}?${splitPrefix}`,
-      })
-
-      await expect(splitResult.code).toMatchFileSnapshot(
-        `./code-splitter/snapshots/${filename.replace('.tsx', '')}@split.tsx`,
-      )
-    },
-  )
-})
+describe.each(['development', 'production'])(
+  'code-splitter works, NODE_ENV=%s ',
+  async (NODE_ENV) => {
+    process.env.NODE_ENV = NODE_ENV
+    const filenames = await getFilenames()
+
+    it.each(filenames)(
+      'should handle the compiling of "%s"',
+      async (filename) => {
+        const file = await readFile(
+          path.resolve(__dirname, `./code-splitter/test-files/${filename}`),
+        )
+        const code = file.toString()
+
+        const compileResult = compileCodeSplitReferenceRoute({
+          code,
+          root: './code-splitter/test-files',
+          filename,
+        })
+
+        await expect(compileResult.code).toMatchFileSnapshot(
+          `./code-splitter/snapshots/${NODE_ENV}/${filename}`,
+        )
+      },
+    )
+
+    it.each(filenames)(
+      'should handle the splitting of "%s"',
+      async (filename) => {
+        const file = await readFile(
+          path.resolve(__dirname, `./code-splitter/test-files/${filename}`),
+        )
+        const code = file.toString()
+
+        const splitResult = compileCodeSplitVirtualRoute({
+          code: code,
+          root: './code-splitter/test-files',
+          filename: `${filename}?${splitPrefix}`,
+        })
+
+        await expect(splitResult.code).toMatchFileSnapshot(
+          `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@split.tsx`,
+        )
+      },
+    )
+  },
+)

packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx

@@ -0,0 +1,9 @@
+const $$splitComponentImporter = () => import('chinese.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
+});
+interface DemoProps {
+  title: string;
+}

packages/router-plugin/tests/code-splitter/snapshots/development/chinese@split.tsx

@@ -0,0 +1,22 @@
+interface DemoProps {
+  title: string;
+}
+function Demo({
+  title
+}: DemoProps) {
+  return <h1 style={{
+    color: '#2969ff',
+    fontSize: '2rem',
+    fontWeight: 'bold',
+    letterSpacing: '3px'
+  }}>
+      {title}
+    </h1>;
+}
+const component = function HomeComponent() {
+  return <div className="p-2">
+      <Demo title="标题很好看，谁说不是呢？" />
+      <Demo title="The title looks great, who can deny that?" />
+    </div>;
+};
+export { component };

packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@split.tsx

@@ -0,0 +1,3 @@
+import { importedLoader } from '../shared/imported';
+const loader = importedLoader;
+export { loader };

packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx → packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@split.tsx

@@ -1,4 +1,3 @@
-console.warn("These exports from \"retain-exports-loader.tsx\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route.");
 import { Outlet } from '@tanstack/react-router';
 import { importedComponent as ImportedComponent } from '../shared/imported';
 const HEADER_HEIGHT = '63px';

packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx

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

packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@split.tsx

@@ -0,0 +1,29 @@
+import { Link, Outlet } from '@tanstack/react-router';
+import { fetchPosts } from '../posts';
+import { Route } from "arrow-function.tsx";
+const component = () => {
+  const posts = Route.useLoaderData();
+  return <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, {
+        id: 'i-do-not-exist',
+        title: 'Non-existent Post'
+      }]?.map(post => {
+        return <li key={post.id} className="whitespace-nowrap">
+                <Link to="/posts/$postId" params={{
+            postId: post.id
+          }} className="block py-1 text-blue-800 hover:text-blue-600" activeProps={{
+            className: 'text-black font-bold'
+          }}>
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>;
+      })}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>;
+};
+export { component };
+const loader = fetchPosts;
+export { loader };

packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx

@@ -0,0 +1,9 @@
+const $$splitComponentImporter = () => import('chinese.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
+});
+interface DemoProps {
+  title: string;
+}

packages/router-plugin/tests/code-splitter/snapshots/production/chinese@split.tsx

@@ -0,0 +1,22 @@
+interface DemoProps {
+  title: string;
+}
+function Demo({
+  title
+}: DemoProps) {
+  return <h1 style={{
+    color: '#2969ff',
+    fontSize: '2rem',
+    fontWeight: 'bold',
+    letterSpacing: '3px'
+  }}>
+      {title}
+    </h1>;
+}
+const component = function HomeComponent() {
+  return <div className="p-2">
+      <Demo title="标题很好看，谁说不是呢？" />
+      <Demo title="The title looks great, who can deny that?" />
+    </div>;
+};
+export { component };

packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx

@@ -0,0 +1,9 @@
+const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split');
+import { lazyFn } from '@tanstack/react-router';
+const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr),
+  loader: lazyFn($$splitLoaderImporter, 'loader')
+});

packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@split.tsx

@@ -0,0 +1,9 @@
+import { memo } from 'react';
+import { importedLoader } from '../shared/imported';
+function Component() {
+  return <div>Component</div>;
+}
+const component = memo(Component);
+export { component };
+const loader = importedLoader;
+export { loader };

packages/router-plugin/tests/code-splitter/snapshots/production/destructuring.tsx

@@ -0,0 +1,11 @@
+import thing from 'thing';
+export function test() {
+  const {
+    foo: {
+      bar: {
+        destructured
+      }
+    }
+  } = thing;
+  return destructured;
+}

packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@split.tsx

@@ -0,0 +1,11 @@
+import thing from 'thing';
+export function test() {
+  const {
+    foo: {
+      bar: {
+        destructured
+      }
+    }
+  } = thing;
+  return destructured;
+}

packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+// @ts-expect-error
+import { useMemo } from 'tan-react';
+const ReactUseMemoCall1 = React.useMemo(function performAction() {
+  return 'true';
+}, []);
+console.info(ReactUseMemoCall1);
+const ReactUseMemoCall2 = React.useMemo(() => {
+  return 'true';
+}, []);
+console.info(ReactUseMemoCall2);
+const UseMemoCall1 = useMemo(function performAction() {
+  return 'true';
+}, []);
+console.info(UseMemoCall1);
+const UseMemoCall2 = useMemo(() => {
+  return 'true';
+}, []);
+console.info(UseMemoCall2);

packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@split.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+// @ts-expect-error
+import { useMemo } from 'tan-react';
+const ReactUseMemoCall1 = React.useMemo(function performAction() {
+  return 'true';
+}, []);
+console.info(ReactUseMemoCall1);
+const ReactUseMemoCall2 = React.useMemo(() => {
+  return 'true';
+}, []);
+console.info(ReactUseMemoCall2);
+const UseMemoCall1 = useMemo(function performAction() {
+  return 'true';
+}, []);
+console.info(UseMemoCall1);
+const UseMemoCall2 = useMemo(() => {
+  return 'true';
+}, []);
+console.info(UseMemoCall2);

packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx

@@ -0,0 +1,9 @@
+const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split');
+import { lazyFn } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/posts')({
+  loader: lazyFn($$splitLoaderImporter, 'loader'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr)
+});

packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx

@@ -0,0 +1,29 @@
+import { Link, Outlet } from '@tanstack/react-router';
+import { fetchPosts } from '../posts';
+import { Route } from "function-declaration.tsx";
+const component = function PostsComponent() {
+  const posts = Route.useLoaderData();
+  return <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, {
+        id: 'i-do-not-exist',
+        title: 'Non-existent Post'
+      }]?.map(post => {
+        return <li key={post.id} className="whitespace-nowrap">
+                <Link to="/posts/$postId" params={{
+            postId: post.id
+          }} className="block py-1 text-blue-800 hover:text-blue-600" activeProps={{
+            className: 'text-black font-bold'
+          }}>
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>;
+      })}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>;
+};
+export { component };
+const loader = fetchPosts;
+export { loader };

packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx

@@ -0,0 +1,9 @@
+const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split');
+import { lazyFn } from '@tanstack/react-router';
+const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr),
+  loader: lazyFn($$splitLoaderImporter, 'loader')
+});

packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@split.tsx

@@ -0,0 +1,5 @@
+import importedComponent, { importedLoader } from '../shared/imported';
+const component = importedComponent;
+export { component };
+const loader = importedLoader;
+export { loader };

packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx

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

packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@split.tsx

@@ -0,0 +1,3 @@
+import ImportedDefaultComponent from '../shared/imported';
+const component = ImportedDefaultComponent;
+export { component };