fix: only transform files in codesplitter if changes were made

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

@@ -112,7 +112,7 @@ export function compileCodeSplitReferenceRoute(
     id: string
     addHmr?: boolean
   },
-): GeneratorResult {
+): GeneratorResult | null {
   const ast = parseAst(opts)
 
   const refIdents = findReferencedIdentifiers(ast)
@@ -132,6 +132,7 @@ export function compileCodeSplitReferenceRoute(
 
   let createRouteFn: string
 
+  let modified = false as boolean
   babel.traverse(ast, {
     Program: {
       enter(programPath) {
@@ -170,6 +171,7 @@ export function compileCodeSplitReferenceRoute(
                       if (t.isObjectProperty(prop)) {
                         if (t.isIdentifier(prop.key)) {
                           if (opts.deleteNodes!.has(prop.key.name as any)) {
+                            modified = true
                             return false
                           }
                         }
@@ -181,6 +183,7 @@ export function compileCodeSplitReferenceRoute(
                 if (!splittableCreateRouteFns.includes(createRouteFn)) {
                   // we can't split this route but we still add HMR handling if enabled
                   if (opts.addHmr) {
+                    modified = true
                     programPath.pushContainer('body', routeHmrStatement)
                   }
                   // exit traversal so this route is not split
@@ -268,6 +271,8 @@ export function compileCodeSplitReferenceRoute(
                           return
                         }
 
+                        modified = true
+
                         // Prepend the import statement to the program along with the importer function
                         // Check to see if lazyRouteComponent is already imported before attempting
                         // to import it again
@@ -305,9 +310,8 @@ export function compileCodeSplitReferenceRoute(
                         if (opts.addHmr) {
                           programPath.pushContainer('body', routeHmrStatement)
                         }
-                      }
-
-                      if (splitNodeMeta.splitStrategy === 'lazyFn') {
+                      } else {
+                        // if (splitNodeMeta.splitStrategy === 'lazyFn') {
                         const value = prop.value
 
                         let shouldSplit = true
@@ -339,6 +343,7 @@ export function compileCodeSplitReferenceRoute(
                         if (!shouldSplit) {
                           return
                         }
+                        modified = true
 
                         // Prepend the import statement to the program along with the importer function
                         if (!hasImportedOrDefinedIdentifier(LAZY_FN_IDENT)) {
@@ -404,6 +409,7 @@ export function compileCodeSplitReferenceRoute(
          * specifiers
          */
         if (removableImportPaths.size > 0) {
+          modified = true
           programPath.traverse({
             ImportDeclaration(path) {
               if (path.node.specifiers.length > 0) return
@@ -417,6 +423,9 @@ export function compileCodeSplitReferenceRoute(
     },
   })
 
+  if (!modified) {
+    return null
+  }
   deadCodeElimination(ast, refIdents)
 
   // if there are exported identifiers, then we need to add a warning

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

@@ -138,6 +138,14 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
         (userConfig.codeSplittingOptions?.addHmr ?? true) && !isProduction,
     })
 
+    if (compiledReferenceRoute === null) {
+      if (debug) {
+        console.info(
+          `No changes made to route "${id}", skipping code-splitting.`,
+        )
+      }
+      return null
+    }
     if (debug) {
       logDiff(code, compiledReferenceRoute.code)
       console.log('Output:\n', compiledReferenceRoute.code + '\n\n')

packages/router-plugin/tests/add-hmr.test.ts

@@ -32,7 +32,7 @@ describe('add-hmr works', () => {
           targetFramework: framework,
         })
 
-        await expect(compileResult.code).toMatchFileSnapshot(
+        await expect(compileResult?.code || code).toMatchFileSnapshot(
           path.join(dirs.snapshots, filename.replace('.tsx', '@true.tsx')),
         )
       },
@@ -53,7 +53,7 @@ describe('add-hmr works', () => {
           targetFramework: framework,
         })
 
-        await expect(compileResult.code).toMatchFileSnapshot(
+        await expect(compileResult?.code || code).toMatchFileSnapshot(
           path.join(dirs.snapshots, filename.replace('.tsx', '@false.tsx')),
         )
       },

packages/router-plugin/tests/add-hmr/snapshots/react/destructuring@false.tsx

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

packages/router-plugin/tests/add-hmr/snapshots/react/destructuring@true.tsx

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

packages/router-plugin/tests/add-hmr/snapshots/react/explicit-undefined-component@false.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { createFileRoute } from '@tanstack/react-router';
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
 export const Route = createFileRoute('/')({
-  component: undefined
-});
+  component: undefined,
+})

packages/router-plugin/tests/add-hmr/snapshots/react/explicit-undefined-component@true.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { createFileRoute } from '@tanstack/react-router';
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
 export const Route = createFileRoute('/')({
-  component: undefined
-});
+  component: undefined,
+})

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

@@ -67,7 +67,7 @@ describe('code-splitter works', () => {
               targetFramework: framework,
             })
 
-            await expect(compileResult.code).toMatchFileSnapshot(
+            await expect(compileResult?.code || code).toMatchFileSnapshot(
               path.join(dirs.snapshots, groupName, filename),
             )
           },

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/destructuring.tsx

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

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/explicit-undefined-component.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { createFileRoute } from '@tanstack/react-router';
+import React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
 export const Route = createFileRoute('/')({
-  component: undefined
-});
+  component: undefined,
+})

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/export-default-component.tsx

@@ -1,12 +1,16 @@
-console.warn("[tanstack-router] These exports from \"export-default-component.tsx\" will not be code-split and will increase your bundle size:\n- Home\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file.");
-import React, { useState } from 'react';
-import { createFileRoute } from '@tanstack/react-router';
+import React, { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
 export const Route = createFileRoute('/home')({
-  component: Home
-});
+  component: Home,
+})
+
 export default function Home() {
-  const [one, setOne] = useState('this is from a state');
-  return <div>
+  const [one, setOne] = useState('this is from a state')
+
+  return (
+    <div>
       <h1>{one}</h1>
-    </div>;
-}
+    </div>
+  )
+}

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/function-as-parameter.tsx

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

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-export-component.tsx

@@ -1,12 +1,14 @@
-console.warn("[tanstack-router] These exports from \"retain-export-component.tsx\" will not be code-split and will increase your bundle size:\n- Layout\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file.");
-import * as React from 'react';
-import { createFileRoute, Outlet } from '@tanstack/react-router';
-import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported';
+import * as React from 'react'
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import {
+  importedComponent as ImportedComponent,
+  importedLoader,
+} from '../../shared/imported'
+
 export function Layout() {
-  return <main>
-      <header style={{
-      height: HEADER_HEIGHT
-    }}>
+  return (
+    <main>
+      <header style={{ height: HEADER_HEIGHT }}>
         <nav>
           <ul>
             <li>
@@ -17,13 +19,16 @@ export function Layout() {
       </header>
       <ImportedComponent />
       <Outlet />
-    </main>;
+    </main>
+  )
 }
+
 export const Route = createFileRoute('/_layout')({
   component: Layout,
-  loader: importedLoader
-});
-const HEADER_HEIGHT = '63px';
-export const SIDEBAR_WIDTH = '150px';
-const SIDEBAR_MINI_WIDTH = '80px';
-const ASIDE_WIDTH = '250px';
+  loader: importedLoader,
+})
+
+const HEADER_HEIGHT = '63px'
+export const SIDEBAR_WIDTH = '150px'
+const SIDEBAR_MINI_WIDTH = '80px'
+const ASIDE_WIDTH = '250px'

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/retain-exports-const.tsx

@@ -1,15 +1,18 @@
-console.warn("[tanstack-router] These exports from \"retain-exports-const.tsx\" will not be code-split and will increase your bundle size:\n- Layout\nFor the best optimization, these items should either have their export statements removed, or be imported from another location that is not a route file.");
-import * as React from 'react';
-import { createFileRoute, Outlet } from '@tanstack/react-router';
-import { importedComponent as ImportedComponent, importedLoader } from '../../shared/imported';
+import * as React from 'react'
+import { createFileRoute, Outlet } from '@tanstack/react-router'
+import {
+  importedComponent as ImportedComponent,
+  importedLoader,
+} from '../../shared/imported'
+
 export const loaderFn = () => {
-  return importedLoader();
-};
+  return importedLoader()
+}
+
 const Layout = () => {
-  return <main>
-      <header style={{
-      height: HEADER_HEIGHT
-    }}>
+  return (
+    <main>
+      <header style={{ height: HEADER_HEIGHT }}>
         <nav>
           <ul>
             <li>
@@ -20,14 +23,18 @@ const Layout = () => {
       </header>
       <ImportedComponent />
       <Outlet />
-    </main>;
-};
+    </main>
+  )
+}
+
 export const Route = createFileRoute('/_layout')({
   component: Layout,
-  loader: loaderFn
-});
-const HEADER_HEIGHT = '63px';
-export const SIDEBAR_WIDTH = '150px';
-export const SIDEBAR_MINI_WIDTH = '80px';
-const ASIDE_WIDTH = '250px';
-export default Layout;
+  loader: loaderFn,
+})
+
+const HEADER_HEIGHT = '63px'
+export const SIDEBAR_WIDTH = '150px'
+export const SIDEBAR_MINI_WIDTH = '80px'
+const ASIDE_WIDTH = '250px'
+
+export default Layout