@tanstack/router-plugin 1.120.5 → 1.121.0-alpha.2

package/dist/esm/core/code-splitter/compilers.js

@@ -4,9 +4,9 @@ import * as template from "@babel/template";
 import { findReferencedIdentifiers, deadCodeElimination } from "babel-dead-code-elimination";
 import { parseAst, generateFromAst } from "@tanstack/router-utils";
 import { tsrSplit } from "../constants.js";
+import { routeHmrStatement } from "../route-hmr-statement.js";
 import { createIdentifier } from "./path-ids.js";
 import { getFrameworkOptions } from "./framework-options.js";
-process.env.TSR_VITE_DEBUG;
 const SPLIT_NODES_CONFIG = /* @__PURE__ */ new Map([
   [
     "loader",
@@ -99,164 +99,160 @@ function compileCodeSplitReferenceRoute(opts) {
   const LAZY_FN_IDENT = frameworkOptions.idents.lazyFn;
   babel.traverse(ast, {
     Program: {
-      enter(programPath, programState) {
-        const state = programState;
+      enter(programPath) {
         const removableImportPaths = /* @__PURE__ */ new Set([]);
-        programPath.traverse(
-          {
-            CallExpression: (path) => {
-              if (!t.isIdentifier(path.node.callee)) {
-                return;
-              }
-              if (!(path.node.callee.name === "createRoute" || path.node.callee.name === "createFileRoute")) {
-                return;
-              }
-              if (t.isCallExpression(path.parentPath.node)) {
-                const options = resolveIdentifier(
-                  path,
-                  path.parentPath.node.arguments[0]
-                );
-                const hasImportedOrDefinedIdentifier = (name) => {
-                  return programPath.scope.hasBinding(name);
-                };
-                if (t.isObjectExpression(options)) {
-                  options.properties.forEach((prop) => {
-                    if (t.isObjectProperty(prop)) {
-                      if (t.isIdentifier(prop.key)) {
-                        const codeSplitGroupingByKey = findIndexForSplitNode(
-                          prop.key.name
-                        );
-                        if (codeSplitGroupingByKey === -1) {
-                          return;
+        programPath.traverse({
+          CallExpression: (path) => {
+            if (!t.isIdentifier(path.node.callee)) {
+              return;
+            }
+            if (!(path.node.callee.name === "createRoute" || path.node.callee.name === "createFileRoute")) {
+              return;
+            }
+            function babelHandleReference(routeOptions) {
+              const hasImportedOrDefinedIdentifier = (name) => {
+                return programPath.scope.hasBinding(name);
+              };
+              if (t.isObjectExpression(routeOptions)) {
+                routeOptions.properties.forEach((prop) => {
+                  if (t.isObjectProperty(prop)) {
+                    if (t.isIdentifier(prop.key)) {
+                      const codeSplitGroupingByKey = findIndexForSplitNode(
+                        prop.key.name
+                      );
+                      if (codeSplitGroupingByKey === -1) {
+                        return;
+                      }
+                      const codeSplitGroup = [
+                        ...new Set(
+                          opts.codeSplitGroupings[codeSplitGroupingByKey]
+                        )
+                      ];
+                      const key = prop.key.name;
+                      const isNodeConfigAvailable = SPLIT_NODES_CONFIG.has(
+                        key
+                      );
+                      if (!isNodeConfigAvailable) {
+                        return;
+                      }
+                      const splitNodeMeta = SPLIT_NODES_CONFIG.get(key);
+                      const splitUrl = addSplitSearchParamToFilename(
+                        opts.filename,
+                        codeSplitGroup
+                      );
+                      if (splitNodeMeta.splitStrategy === "lazyRouteComponent") {
+                        const value = prop.value;
+                        let shouldSplit = true;
+                        if (t.isIdentifier(value)) {
+                          const existingImportPath = getImportSpecifierAndPathFromLocalName(
+                            programPath,
+                            value.name
+                          ).path;
+                          if (existingImportPath) {
+                            removableImportPaths.add(existingImportPath);
+                          }
+                          const isExported = hasExport(ast, value);
+                          shouldSplit = !isExported;
+                          if (shouldSplit) {
+                            removeIdentifierLiteral(path, value);
+                          }
                         }
-                        const codeSplitGroup = [
-                          ...new Set(
-                            opts.codeSplitGroupings[codeSplitGroupingByKey]
-                          )
-                        ];
-                        const key = prop.key.name;
-                        const isNodeConfigAvailable = SPLIT_NODES_CONFIG.has(
-                          key
-                        );
-                        if (!isNodeConfigAvailable) {
+                        if (!shouldSplit) {
                           return;
                         }
-                        const splitNodeMeta = SPLIT_NODES_CONFIG.get(
-                          key
-                        );
-                        const splitUrl = addSplitSearchParamToFilename(
-                          opts.filename,
-                          codeSplitGroup
-                        );
-                        if (splitNodeMeta.splitStrategy === "lazyRouteComponent") {
-                          const value = prop.value;
-                          let shouldSplit = true;
-                          if (t.isIdentifier(value)) {
-                            const existingImportPath = getImportSpecifierAndPathFromLocalName(
-                              programPath,
-                              value.name
-                            ).path;
-                            if (existingImportPath) {
-                              removableImportPaths.add(existingImportPath);
-                            }
-                            const isExported = hasExport(ast, value);
-                            shouldSplit = !isExported;
-                            if (shouldSplit) {
-                              removeIdentifierLiteral(path, value);
-                            }
-                          }
-                          if (!shouldSplit) {
-                            return;
-                          }
-                          if (!hasImportedOrDefinedIdentifier(
-                            LAZY_ROUTE_COMPONENT_IDENT
-                          )) {
-                            programPath.unshiftContainer("body", [
-                              template.statement(
-                                `import { ${LAZY_ROUTE_COMPONENT_IDENT} } from '${PACKAGE}'`
-                              )()
-                            ]);
-                          }
-                          if (!hasImportedOrDefinedIdentifier(
-                            splitNodeMeta.localImporterIdent
-                          )) {
-                            programPath.unshiftContainer("body", [
-                              template.statement(
-                                `const ${splitNodeMeta.localImporterIdent} = () => import('${splitUrl}')`
-                              )()
-                            ]);
-                          }
-                          if (key === "component") {
-                            prop.value = template.expression(
-                              `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}', () => Route.ssr)`
-                            )();
-                          } else {
-                            prop.value = template.expression(
-                              `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`
-                            )();
-                          }
-                          if (opts.runtimeEnv !== "prod" && // only in development
-                          !hasImportedOrDefinedIdentifier(
-                            frameworkOptions.idents.dummyHMRComponent
-                          )) {
-                            programPath.pushContainer("body", [
-                              template.statement(
-                                frameworkOptions.dummyHMRComponent
-                              )()
-                            ]);
-                          }
+                        if (!hasImportedOrDefinedIdentifier(
+                          LAZY_ROUTE_COMPONENT_IDENT
+                        )) {
+                          programPath.unshiftContainer("body", [
+                            template.statement(
+                              `import { ${LAZY_ROUTE_COMPONENT_IDENT} } from '${PACKAGE}'`
+                            )()
+                          ]);
                         }
-                        if (splitNodeMeta.splitStrategy === "lazyFn") {
-                          const value = prop.value;
-                          let shouldSplit = true;
-                          if (t.isIdentifier(value)) {
-                            const existingImportPath = getImportSpecifierAndPathFromLocalName(
-                              programPath,
-                              value.name
-                            ).path;
-                            if (existingImportPath) {
-                              removableImportPaths.add(existingImportPath);
-                            }
-                            const isExported = hasExport(ast, value);
-                            shouldSplit = !isExported;
-                            if (shouldSplit) {
-                              removeIdentifierLiteral(path, value);
-                            }
-                          }
-                          if (!shouldSplit) {
-                            return;
-                          }
-                          if (!hasImportedOrDefinedIdentifier(LAZY_FN_IDENT)) {
-                            programPath.unshiftContainer(
-                              "body",
-                              template.smart(
-                                `import { ${LAZY_FN_IDENT} } from '${PACKAGE}'`
-                              )()
-                            );
-                          }
-                          if (!hasImportedOrDefinedIdentifier(
-                            splitNodeMeta.localImporterIdent
-                          )) {
-                            programPath.unshiftContainer("body", [
-                              template.statement(
-                                `const ${splitNodeMeta.localImporterIdent} = () => import('${splitUrl}')`
-                              )()
-                            ]);
-                          }
+                        if (!hasImportedOrDefinedIdentifier(
+                          splitNodeMeta.localImporterIdent
+                        )) {
+                          programPath.unshiftContainer("body", [
+                            template.statement(
+                              `const ${splitNodeMeta.localImporterIdent} = () => import('${splitUrl}')`
+                            )()
+                          ]);
+                        }
+                        if (key === "component") {
                           prop.value = template.expression(
-                            `${LAZY_FN_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`
+                            `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}', () => Route.ssr)`
                           )();
+                        } else {
+                          prop.value = template.expression(
+                            `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`
+                          )();
+                        }
+                        if (opts.runtimeEnv !== "prod") {
+                          programPath.pushContainer("body", routeHmrStatement);
+                        }
+                      }
+                      if (splitNodeMeta.splitStrategy === "lazyFn") {
+                        const value = prop.value;
+                        let shouldSplit = true;
+                        if (t.isIdentifier(value)) {
+                          const existingImportPath = getImportSpecifierAndPathFromLocalName(
+                            programPath,
+                            value.name
+                          ).path;
+                          if (existingImportPath) {
+                            removableImportPaths.add(existingImportPath);
+                          }
+                          const isExported = hasExport(ast, value);
+                          shouldSplit = !isExported;
+                          if (shouldSplit) {
+                            removeIdentifierLiteral(path, value);
+                          }
+                        }
+                        if (!shouldSplit) {
+                          return;
+                        }
+                        if (!hasImportedOrDefinedIdentifier(LAZY_FN_IDENT)) {
+                          programPath.unshiftContainer(
+                            "body",
+                            template.smart(
+                              `import { ${LAZY_FN_IDENT} } from '${PACKAGE}'`
+                            )()
+                          );
                         }
+                        if (!hasImportedOrDefinedIdentifier(
+                          splitNodeMeta.localImporterIdent
+                        )) {
+                          programPath.unshiftContainer("body", [
+                            template.statement(
+                              `const ${splitNodeMeta.localImporterIdent} = () => import('${splitUrl}')`
+                            )()
+                          ]);
+                        }
+                        prop.value = template.expression(
+                          `${LAZY_FN_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`
+                        )();
                       }
                     }
-                    programPath.scope.crawl();
-                  });
-                }
+                  }
+                  programPath.scope.crawl();
+                });
               }
             }
-          },
-          state
-        );
+            if (t.isCallExpression(path.parentPath.node)) {
+              const options = resolveIdentifier(
+                path,
+                path.parentPath.node.arguments[0]
+              );
+              babelHandleReference(options);
+            } else if (t.isVariableDeclarator(path.parentPath.node)) {
+              const caller = resolveIdentifier(path, path.parentPath.node.init);
+              if (t.isCallExpression(caller)) {
+                const options = resolveIdentifier(path, caller.arguments[0]);
+                babelHandleReference(options);
+              }
+            }
+          }
+        });
         if (removableImportPaths.size > 0) {
           programPath.traverse({
             ImportDeclaration(path) {
@@ -284,8 +280,7 @@ function compileCodeSplitVirtualRoute(opts) {
   const knownExportedIdents = /* @__PURE__ */ new Set();
   babel.traverse(ast, {
     Program: {
-      enter(programPath, programState) {
-        const state = programState;
+      enter(programPath) {
         const trackedNodesToSplitByType = {
           component: void 0,
           loader: void 0,
@@ -293,54 +288,60 @@ function compileCodeSplitVirtualRoute(opts) {
           errorComponent: void 0,
           notFoundComponent: void 0
         };
-        programPath.traverse(
-          {
-            CallExpression: (path) => {
-              if (!t.isIdentifier(path.node.callee)) {
-                return;
-              }
-              if (!(path.node.callee.name === "createRoute" || path.node.callee.name === "createFileRoute")) {
-                return;
-              }
-              if (t.isCallExpression(path.parentPath.node)) {
-                const options = resolveIdentifier(
-                  path,
-                  path.parentPath.node.arguments[0]
-                );
-                if (t.isObjectExpression(options)) {
-                  options.properties.forEach((prop) => {
-                    if (t.isObjectProperty(prop)) {
-                      KNOWN_SPLIT_ROUTE_IDENTS.forEach((splitType) => {
-                        if (!t.isIdentifier(prop.key) || prop.key.name !== splitType) {
-                          return;
-                        }
-                        const value = prop.value;
-                        let isExported = false;
-                        if (t.isIdentifier(value)) {
-                          isExported = hasExport(ast, value);
-                          if (isExported) {
-                            knownExportedIdents.add(value.name);
-                          }
-                        }
-                        if (isExported && t.isIdentifier(value)) {
-                          removeExports(ast, value);
-                        } else {
-                          const meta = SPLIT_NODES_CONFIG.get(splitType);
-                          trackedNodesToSplitByType[splitType] = {
-                            node: prop.value,
-                            meta
-                          };
+        programPath.traverse({
+          CallExpression: (path) => {
+            if (!t.isIdentifier(path.node.callee)) {
+              return;
+            }
+            if (!(path.node.callee.name === "createRoute" || path.node.callee.name === "createFileRoute")) {
+              return;
+            }
+            function babelHandleVirtual(options) {
+              if (t.isObjectExpression(options)) {
+                options.properties.forEach((prop) => {
+                  if (t.isObjectProperty(prop)) {
+                    KNOWN_SPLIT_ROUTE_IDENTS.forEach((splitType) => {
+                      if (!t.isIdentifier(prop.key) || prop.key.name !== splitType) {
+                        return;
+                      }
+                      const value = prop.value;
+                      let isExported = false;
+                      if (t.isIdentifier(value)) {
+                        isExported = hasExport(ast, value);
+                        if (isExported) {
+                          knownExportedIdents.add(value.name);
                         }
-                      });
-                    }
-                  });
-                  options.properties = [];
-                }
+                      }
+                      if (isExported && t.isIdentifier(value)) {
+                        removeExports(ast, value);
+                      } else {
+                        const meta = SPLIT_NODES_CONFIG.get(splitType);
+                        trackedNodesToSplitByType[splitType] = {
+                          node: prop.value,
+                          meta
+                        };
+                      }
+                    });
+                  }
+                });
+                options.properties = [];
+              }
+            }
+            if (t.isCallExpression(path.parentPath.node)) {
+              const options = resolveIdentifier(
+                path,
+                path.parentPath.node.arguments[0]
+              );
+              babelHandleVirtual(options);
+            } else if (t.isVariableDeclarator(path.parentPath.node)) {
+              const caller = resolveIdentifier(path, path.parentPath.node.init);
+              if (t.isCallExpression(caller)) {
+                const options = resolveIdentifier(path, caller.arguments[0]);
+                babelHandleVirtual(options);
               }
             }
-          },
-          state
-        );
+          }
+        });
         intendedSplitNodes.forEach((SPLIT_TYPE) => {
           const splitKey = trackedNodesToSplitByType[SPLIT_TYPE];
           if (!splitKey) {