@tanstack/router-plugin 1.39.2

package/src/compilers.ts

@@ -0,0 +1,414 @@
+import * as t from '@babel/types'
+import * as template from '@babel/template'
+import { splitPrefix } from './constants'
+import { eliminateUnreferencedIdentifiers } from './eliminateUnreferencedIdentifiers'
+import type * as babel from '@babel/core'
+import type { CompileAstFn } from './ast'
+
+type SplitModulesById = Record<
+  string,
+  { id: string; node: t.FunctionExpression }
+>
+
+interface State {
+  filename: string
+  opts: {
+    minify: boolean
+    root: string
+  }
+  imported: Record<string, boolean>
+  refs: Set<any>
+  serverIndex: number
+  splitIndex: number
+  splitModulesById: SplitModulesById
+}
+
+export async function compileFile(opts: {
+  code: string
+  compileAst: CompileAstFn
+  filename: string
+}) {
+  return await opts.compileAst({
+    code: opts.code,
+    filename: opts.filename,
+    getBabelConfig: () => ({
+      plugins: [
+        [
+          {
+            visitor: {
+              Program: {
+                enter(programPath: babel.NodePath<t.Program>, state: State) {
+                  const splitUrl = `${splitPrefix}:${opts.filename}?${splitPrefix}`
+
+                  programPath.traverse(
+                    {
+                      CallExpression: (path) => {
+                        if (path.node.callee.type === 'Identifier') {
+                          if (
+                            path.node.callee.name === 'createRoute' ||
+                            path.node.callee.name === 'createFileRoute'
+                          ) {
+                            if (
+                              path.parentPath.node.type === 'CallExpression'
+                            ) {
+                              const options = resolveIdentifier(
+                                path,
+                                path.parentPath.node.arguments[0],
+                              )
+
+                              let found = false
+
+                              const hasImportedOrDefinedIdentifier = (
+                                name: string,
+                              ) => {
+                                return programPath.scope.hasBinding(name)
+                              }
+
+                              if (t.isObjectExpression(options)) {
+                                options.properties.forEach((prop) => {
+                                  if (t.isObjectProperty(prop)) {
+                                    if (t.isIdentifier(prop.key)) {
+                                      if (prop.key.name === 'component') {
+                                        const value = prop.value
+
+                                        if (t.isIdentifier(value)) {
+                                          removeIdentifierLiteral(path, value)
+                                        }
+
+                                        // 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
+
+                                        if (
+                                          !hasImportedOrDefinedIdentifier(
+                                            'lazyRouteComponent',
+                                          )
+                                        ) {
+                                          programPath.unshiftContainer('body', [
+                                            template.smart(
+                                              `import { lazyRouteComponent } from '@tanstack/react-router'`,
+                                            )() as t.Statement,
+                                          ])
+                                        }
+
+                                        if (
+                                          !hasImportedOrDefinedIdentifier(
+                                            '$$splitComponentImporter',
+                                          )
+                                        ) {
+                                          programPath.unshiftContainer('body', [
+                                            template.smart(
+                                              `const $$splitComponentImporter = () => import('${splitUrl}')`,
+                                            )() as t.Statement,
+                                          ])
+                                        }
+
+                                        prop.value = template.expression(
+                                          `lazyRouteComponent($$splitComponentImporter, 'component')`,
+                                        )() as any
+
+                                        programPath.pushContainer('body', [
+                                          template.smart(
+                                            `function DummyComponent() { return null }`,
+                                          )() as t.Statement,
+                                        ])
+
+                                        found = true
+                                      } else if (prop.key.name === 'loader') {
+                                        const value = prop.value
+
+                                        if (t.isIdentifier(value)) {
+                                          removeIdentifierLiteral(path, value)
+                                        }
+
+                                        // Prepend the import statement to the program along with the importer function
+
+                                        if (
+                                          !hasImportedOrDefinedIdentifier(
+                                            'lazyFn',
+                                          )
+                                        ) {
+                                          programPath.unshiftContainer('body', [
+                                            template.smart(
+                                              `import { lazyFn } from '@tanstack/react-router'`,
+                                            )() as t.Statement,
+                                          ])
+                                        }
+
+                                        if (
+                                          !hasImportedOrDefinedIdentifier(
+                                            '$$splitLoaderImporter',
+                                          )
+                                        ) {
+                                          programPath.unshiftContainer('body', [
+                                            template.smart(
+                                              `const $$splitLoaderImporter = () => import('${splitUrl}')`,
+                                            )() as t.Statement,
+                                          ])
+                                        }
+
+                                        prop.value = template.expression(
+                                          `lazyFn($$splitLoaderImporter, 'loader')`,
+                                        )() as any
+
+                                        found = true
+                                      }
+                                    }
+                                  }
+
+                                  programPath.scope.crawl()
+                                })
+                              }
+
+                              if (found as boolean) {
+                                programPath.pushContainer('body', [
+                                  template.smart(
+                                    `function TSR_Dummy_Component() {}`,
+                                  )() as t.Statement,
+                                ])
+                              }
+                            }
+                          }
+                        }
+                      },
+                    },
+                    state,
+                  )
+
+                  eliminateUnreferencedIdentifiers(programPath)
+                },
+              },
+            },
+          },
+          {
+            root: process.cwd(),
+            minify: process.env.NODE_ENV === 'production',
+          },
+        ],
+      ].filter(Boolean),
+    }),
+  })
+}
+
+// Reusable function to get literal value or resolve variable to literal
+function resolveIdentifier(path: any, node: any) {
+  if (t.isIdentifier(node)) {
+    const binding = path.scope.getBinding(node.name)
+    if (
+      binding
+      // && binding.kind === 'const'
+    ) {
+      const declarator = binding.path.node
+      if (t.isObjectExpression(declarator.init)) {
+        return declarator.init
+      } else if (t.isFunctionDeclaration(declarator.init)) {
+        return declarator.init
+      }
+    }
+    return undefined
+  }
+
+  return node
+}
+
+function removeIdentifierLiteral(path: any, node: any) {
+  if (t.isIdentifier(node)) {
+    const binding = path.scope.getBinding(node.name)
+    if (binding) {
+      binding.path.remove()
+    }
+  }
+}
+
+const splitNodeTypes = ['component', 'loader'] as const
+type SplitNodeType = (typeof splitNodeTypes)[number]
+
+export async function splitFile(opts: {
+  code: string
+  compileAst: CompileAstFn
+  filename: string
+}) {
+  return await opts.compileAst({
+    code: opts.code,
+    filename: opts.filename,
+    getBabelConfig: () => ({
+      plugins: [
+        [
+          {
+            visitor: {
+              Program: {
+                enter(programPath: babel.NodePath<t.Program>, state: State) {
+                  const splitNodesByType: Record<
+                    SplitNodeType,
+                    t.Node | undefined
+                  > = {
+                    component: undefined,
+                    loader: undefined,
+                  }
+
+                  // Find the node
+                  programPath.traverse(
+                    {
+                      CallExpression: (path) => {
+                        if (path.node.callee.type === 'Identifier') {
+                          if (
+                            path.node.callee.name === 'createRoute' ||
+                            path.node.callee.name === 'createFileRoute'
+                          ) {
+                            if (
+                              path.parentPath.node.type === 'CallExpression'
+                            ) {
+                              const options = resolveIdentifier(
+                                path,
+                                path.parentPath.node.arguments[0],
+                              )
+
+                              if (t.isObjectExpression(options)) {
+                                options.properties.forEach((prop) => {
+                                  if (t.isObjectProperty(prop)) {
+                                    splitNodeTypes.forEach((type) => {
+                                      if (t.isIdentifier(prop.key)) {
+                                        if (prop.key.name === type) {
+                                          splitNodesByType[type] = prop.value
+                                        }
+                                      }
+                                    })
+                                  }
+                                })
+
+                                // Remove all of the options
+                                options.properties = []
+                              }
+                            }
+                          }
+                        }
+                      },
+                    },
+                    state,
+                  )
+
+                  splitNodeTypes.forEach((splitType) => {
+                    let splitNode = splitNodesByType[splitType]
+
+                    if (!splitNode) {
+                      return
+                    }
+
+                    while (t.isIdentifier(splitNode)) {
+                      const binding = programPath.scope.getBinding(
+                        splitNode.name,
+                      )
+                      splitNode = binding?.path.node
+                    }
+
+                    // Add the node to the program
+                    if (splitNode) {
+                      if (t.isFunctionDeclaration(splitNode)) {
+                        programPath.pushContainer(
+                          'body',
+                          t.variableDeclaration('const', [
+                            t.variableDeclarator(
+                              t.identifier(splitType),
+                              t.functionExpression(
+                                splitNode.id || null, // Anonymize the function expression
+                                splitNode.params,
+                                splitNode.body,
+                                splitNode.generator,
+                                splitNode.async,
+                              ),
+                            ),
+                          ]),
+                        )
+                      } else if (
+                        t.isFunctionExpression(splitNode) ||
+                        t.isArrowFunctionExpression(splitNode)
+                      ) {
+                        programPath.pushContainer(
+                          'body',
+                          t.variableDeclaration('const', [
+                            t.variableDeclarator(
+                              t.identifier(splitType),
+                              splitNode as any,
+                            ),
+                          ]),
+                        )
+                      } else if (t.isImportSpecifier(splitNode)) {
+                        programPath.pushContainer(
+                          'body',
+                          t.variableDeclaration('const', [
+                            t.variableDeclarator(
+                              t.identifier(splitType),
+                              splitNode.local,
+                            ),
+                          ]),
+                        )
+                      } else {
+                        console.info(splitNode)
+                        throw new Error(
+                          `Unexpected splitNode type ☝️: ${splitNode.type}`,
+                        )
+                      }
+                    }
+
+                    // If the splitNode exists at the top of the program
+                    // then we need to remove that copy
+                    programPath.node.body = programPath.node.body.filter(
+                      (node) => {
+                        return node !== splitNode
+                      },
+                    )
+
+                    // Export the node
+                    programPath.pushContainer('body', [
+                      t.exportNamedDeclaration(null, [
+                        t.exportSpecifier(
+                          t.identifier(splitType),
+                          t.identifier(splitType),
+                        ),
+                      ]),
+                    ])
+                  })
+
+                  // convert exports to imports from the original file
+                  programPath.traverse({
+                    ExportNamedDeclaration(path) {
+                      // e.g. export const x = 1 or export { x }
+                      // becomes
+                      // import { x } from '${opts.id}'
+
+                      if (path.node.declaration) {
+                        if (t.isVariableDeclaration(path.node.declaration)) {
+                          path.replaceWith(
+                            t.importDeclaration(
+                              path.node.declaration.declarations.map((decl) =>
+                                t.importSpecifier(
+                                  t.identifier((decl.id as any).name),
+                                  t.identifier((decl.id as any).name),
+                                ),
+                              ),
+                              t.stringLiteral(
+                                opts.filename.split(
+                                  `?${splitPrefix}`,
+                                )[0] as string,
+                              ),
+                            ),
+                          )
+                        }
+                      }
+                    },
+                  })
+
+                  eliminateUnreferencedIdentifiers(programPath)
+                },
+              },
+            },
+          },
+          {
+            root: process.cwd(),
+            minify: process.env.NODE_ENV === 'production',
+          },
+        ],
+      ].filter(Boolean),
+    }),
+  })
+}

package/src/config.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+import {
+  configSchema as generatorConfigSchema,
+  getConfig as getGeneratorConfig,
+} from '@tanstack/router-generator'
+
+const configSchema = generatorConfigSchema.extend({
+  enableRouteGeneration: z.boolean().optional(),
+  experimental: z
+    .object({
+      enableCodeSplitting: z.boolean().optional(),
+    })
+    .optional(),
+})
+
+export const getConfig = async (
+  inlineConfig: Partial<PluginOptions>,
+  root: string,
+) => {
+  const config = await getGeneratorConfig(inlineConfig, root)
+
+  return configSchema.parse({ ...config, ...inlineConfig })
+}
+
+export type PluginOptions = z.infer<typeof configSchema>

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const CONFIG_FILE_NAME = 'tsr.config.json'
+export const splitPrefix = 'tsr-split'

package/src/eliminateUnreferencedIdentifiers.ts

@@ -0,0 +1,211 @@
+// Copied from https://github.com/pcattori/vite-env-only/blob/main/src/dce.ts
+// Adapted with some minor changes for the purpose of this project
+
+import * as t from '@babel/types'
+import type { types as BabelTypes } from '@babel/core'
+import type { NodePath } from '@babel/traverse'
+
+type IdentifierPath = NodePath<BabelTypes.Identifier>
+
+/**
+ * @param refs - If provided, only these identifiers will be considered for removal.
+ */
+export const eliminateUnreferencedIdentifiers = (
+  programPath: NodePath<BabelTypes.Program>,
+  refs?: Set<IdentifierPath>,
+) => {
+  let referencesRemovedInThisPass: number
+
+  const shouldBeRemoved = (ident: IdentifierPath) => {
+    if (isIdentifierReferenced(ident)) return false
+    if (!refs) return true
+    return refs.has(ident)
+  }
+
+  const sweepFunction = (
+    path: NodePath<
+      | BabelTypes.FunctionDeclaration
+      | BabelTypes.FunctionExpression
+      | BabelTypes.ArrowFunctionExpression
+    >,
+  ) => {
+    const identifier = getIdentifier(path)
+    if (identifier?.node && shouldBeRemoved(identifier)) {
+      ++referencesRemovedInThisPass
+
+      if (
+        t.isAssignmentExpression(path.parentPath.node) ||
+        t.isVariableDeclarator(path.parentPath.node)
+      ) {
+        path.parentPath.remove()
+      } else {
+        path.remove()
+      }
+    }
+  }
+
+  const sweepImport = (
+    path: NodePath<
+      | BabelTypes.ImportSpecifier
+      | BabelTypes.ImportDefaultSpecifier
+      | BabelTypes.ImportNamespaceSpecifier
+    >,
+  ) => {
+    const local = path.get('local')
+    if (shouldBeRemoved(local)) {
+      ++referencesRemovedInThisPass
+      path.remove()
+      if (
+        (path.parent as BabelTypes.ImportDeclaration).specifiers.length === 0
+      ) {
+        path.parentPath.remove()
+      }
+    }
+  }
+
+  const handleObjectPattern = (pattern: NodePath<BabelTypes.ObjectPattern>) => {
+    const properties = pattern.get('properties')
+    properties.forEach((property) => {
+      if (property.node.type === 'ObjectProperty') {
+        const value = property.get('value') as any
+        if (t.isIdentifier(value)) {
+          if (shouldBeRemoved(value as any)) {
+            property.remove()
+          }
+        } else if (t.isObjectPattern(value)) {
+          handleObjectPattern(value as any)
+        }
+      } else if (t.isRestElement(property.node)) {
+        const argument = property.get('argument')
+        if (
+          t.isIdentifier(argument as any) &&
+          shouldBeRemoved(argument as NodePath<BabelTypes.Identifier>)
+        ) {
+          property.remove()
+        }
+      }
+    })
+  }
+
+  // Traverse again to remove unused references. This happens at least once,
+  // then repeats until no more references are removed.
+  do {
+    referencesRemovedInThisPass = 0
+
+    programPath.scope.crawl()
+
+    programPath.traverse({
+      VariableDeclarator(path) {
+        if (path.node.id.type === 'Identifier') {
+          const local = path.get('id') as NodePath<BabelTypes.Identifier>
+          if (shouldBeRemoved(local)) {
+            ++referencesRemovedInThisPass
+            path.remove()
+          }
+        } else if (path.node.id.type === 'ObjectPattern') {
+          handleObjectPattern(
+            path.get('id') as NodePath<BabelTypes.ObjectPattern>,
+          )
+        } else if (path.node.id.type === 'ArrayPattern') {
+          const pattern = path.get('id') as NodePath<BabelTypes.ArrayPattern>
+
+          let hasRemoved = false as boolean
+
+          pattern.get('elements').forEach((element, index) => {
+            // if (!element) return // Skip holes in the pattern
+
+            let identifierPath: NodePath<BabelTypes.Identifier>
+
+            if (t.isIdentifier(element.node)) {
+              identifierPath = element as NodePath<BabelTypes.Identifier>
+            } else if (t.isRestElement(element.node)) {
+              identifierPath = element.get(
+                'argument',
+              ) as NodePath<BabelTypes.Identifier>
+            } else {
+              // For now, ignore other types like AssignmentPattern
+              return
+            }
+
+            if (shouldBeRemoved(identifierPath)) {
+              hasRemoved = true
+              pattern.node.elements[index] = null // Remove the element by setting it to null
+            }
+          })
+
+          // If any elements were removed and no elements are left, remove the entire declaration
+          if (
+            hasRemoved &&
+            pattern.node.elements.every((element) => element === null)
+          ) {
+            path.remove()
+            ++referencesRemovedInThisPass
+          }
+        }
+      },
+      FunctionDeclaration: sweepFunction,
+      FunctionExpression: sweepFunction,
+      ArrowFunctionExpression: sweepFunction,
+      ImportSpecifier: sweepImport,
+      ImportDefaultSpecifier: sweepImport,
+      ImportNamespaceSpecifier: sweepImport,
+    })
+  } while (referencesRemovedInThisPass)
+}
+
+function getIdentifier(
+  path: NodePath<
+    | BabelTypes.FunctionDeclaration
+    | BabelTypes.FunctionExpression
+    | BabelTypes.ArrowFunctionExpression
+  >,
+): NodePath<BabelTypes.Identifier> | null {
+  const parentPath = path.parentPath
+  if (parentPath.type === 'VariableDeclarator') {
+    const variablePath = parentPath as NodePath<BabelTypes.VariableDeclarator>
+    const name = variablePath.get('id')
+    return name.node.type === 'Identifier'
+      ? (name as NodePath<BabelTypes.Identifier>)
+      : null
+  }
+
+  if (parentPath.type === 'AssignmentExpression') {
+    const variablePath = parentPath as NodePath<BabelTypes.AssignmentExpression>
+    const name = variablePath.get('left')
+    return name.node.type === 'Identifier'
+      ? (name as NodePath<BabelTypes.Identifier>)
+      : null
+  }
+
+  if (path.node.type === 'ArrowFunctionExpression') {
+    return null
+  }
+
+  if (path.node.type === 'FunctionExpression') {
+    return null
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  return path.node.id && path.node.id.type === 'Identifier'
+    ? (path.get('id') as NodePath<BabelTypes.Identifier>)
+    : null
+}
+
+function isIdentifierReferenced(
+  ident: NodePath<BabelTypes.Identifier>,
+): boolean {
+  const binding = ident.scope.getBinding(ident.node.name)
+  if (binding?.referenced) {
+    // Functions can reference themselves, so we need to check if there's a
+    // binding outside the function scope or not.
+    if (binding.path.type === 'FunctionDeclaration') {
+      return !binding.constantViolations
+        .concat(binding.referencePaths)
+        // Check that every reference is contained within the function:
+        .every((ref) => ref.findParent((parent) => parent === binding.path))
+    }
+
+    return true
+  }
+  return false
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { unpluginRouterCodeSplitter } from './code-splitter'
+export { unpluginRouterGenerator } from './router-generator'