fix: only transform files in codesplitter if changes were made (#5460)

Author: schiller-manuel

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,
+})