@tanstack/router-vite-plugin 1.24.1 → 1.26.6

package/src/compilers.ts

@@ -0,0 +1,420 @@
+import * as t from '@babel/types'
+import * as template from '@babel/template'
+import * as babel from '@babel/core'
+import { splitPrefix } from './constants'
+import { eliminateUnreferencedIdentifiers } from './eliminateUnreferencedIdentifiers'
+
+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 type CompileFn = (compileOpts: {
+  code: string
+  filename: string
+  getBabelConfig: () => { plugins: Array<any> }
+}) => Promise<{
+  code: string
+  map: any
+}>
+
+export function makeCompile(makeOpts: { root: string }) {
+  return async (opts: {
+    code: string
+    filename: string
+    getBabelConfig: () => { plugins: Array<any> }
+  }): Promise<{
+    code: string
+    map: any
+  }> => {
+    const res = await babel.transform(opts.code, {
+      plugins: [
+        ['@babel/plugin-syntax-jsx', {}],
+        [
+          '@babel/plugin-syntax-typescript',
+          {
+            isTSX: true,
+          },
+        ],
+        ...opts.getBabelConfig().plugins,
+      ],
+      root: makeOpts.root,
+      filename: opts.filename,
+      sourceMaps: true,
+    })
+
+    if (res?.code) {
+      return {
+        code: res.code,
+        map: res.map,
+      }
+    }
+
+    return {
+      code: opts.code,
+      map: null,
+    }
+  }
+}
+
+export async function compileFile(opts: {
+  code: string
+  compile: CompileFn
+  filename: string
+}) {
+  return await opts.compile({
+    code: opts.code,
+    filename: opts.filename,
+    getBabelConfig: () => ({
+      plugins: [
+        [
+          {
+            visitor: {
+              Program: {
+                enter(programPath: babel.NodePath<t.Program>, state: State) {
+                  const splitUrl = `${splitPrefix}:${state.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
+
+                              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
+
+                                        programPath.unshiftContainer('body', [
+                                          template.smart(
+                                            `import { lazyRouteComponent } from '@tanstack/react-router'`,
+                                          )() as t.Statement,
+                                          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
+
+                                        programPath.unshiftContainer('body', [
+                                          template.smart(
+                                            `import { lazyFn } from '@tanstack/react-router'`,
+                                          )() as t.Statement,
+                                          template.smart(
+                                            `const $$splitLoaderImporter = () => import('${splitUrl}')`,
+                                          )() as t.Statement,
+                                        ])
+
+                                        prop.value = template.expression(
+                                          `lazyFn($$splitLoaderImporter, 'loader')`,
+                                        )() as any
+
+                                        found = true
+                                      }
+                                    }
+                                  }
+                                })
+                              }
+
+                              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
+  compile: CompileFn
+  filename: string
+  // ref: string
+}) {
+  return await opts.compile({
+    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 === '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.log(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) => {
+                        // console.log(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/constants.ts

@@ -0,0 +1 @@
+export const splitPrefix = 'tsr-split'

package/src/eliminateUnreferencedIdentifiers.ts

@@ -0,0 +1,287 @@
+// 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>
+
+// export function findReferencedIdentifiers(
+//   programPath: NodePath<BabelTypes.Program>,
+// ): Set<IdentifierPath> {
+//   const refs = new Set<IdentifierPath>()
+
+//   function markFunction(
+//     path: NodePath<
+//       | BabelTypes.FunctionDeclaration
+//       | BabelTypes.FunctionExpression
+//       | BabelTypes.ArrowFunctionExpression
+//     >,
+//   ) {
+//     const ident = getIdentifier(path)
+//     if (ident?.node && isIdentifierReferenced(ident)) {
+//       refs.add(ident)
+//     }
+//   }
+
+//   function markImport(
+//     path: NodePath<
+//       | BabelTypes.ImportSpecifier
+//       | BabelTypes.ImportDefaultSpecifier
+//       | BabelTypes.ImportNamespaceSpecifier
+//     >,
+//   ) {
+//     const local = path.get('local')
+//     if (isIdentifierReferenced(local)) {
+//       refs.add(local)
+//     }
+//   }
+
+//   programPath.traverse({
+//     VariableDeclarator(path) {
+//       if (path.node.id.type === 'Identifier') {
+//         const local = path.get('id') as NodePath<BabelTypes.Identifier>
+//         if (isIdentifierReferenced(local)) {
+//           refs.add(local)
+//         }
+//       } else if (path.node.id.type === 'ObjectPattern') {
+//         const pattern = path.get('id') as NodePath<BabelTypes.ObjectPattern>
+
+//         const properties = pattern.get('properties')
+//         properties.forEach((p) => {
+//           const local = p.get(
+//             p.node.type === 'ObjectProperty'
+//               ? 'value'
+//               : p.node.type === 'RestElement'
+//                 ? 'argument'
+//                 : (function () {
+//                     throw new Error('invariant')
+//                   })(),
+//           ) as NodePath<BabelTypes.Identifier>
+//           if (isIdentifierReferenced(local)) {
+//             refs.add(local)
+//           }
+//         })
+//       } else if (path.node.id.type === 'ArrayPattern') {
+//         const pattern = path.get('id') as NodePath<BabelTypes.ArrayPattern>
+
+//         const elements = pattern.get('elements')
+//         elements.forEach((e) => {
+//           let local: NodePath<BabelTypes.Identifier>
+//           if (e.node?.type === 'Identifier') {
+//             local = e as NodePath<BabelTypes.Identifier>
+//           } else if (e.node?.type === 'RestElement') {
+//             local = e.get('argument') as NodePath<BabelTypes.Identifier>
+//           } else {
+//             return
+//           }
+
+//           if (isIdentifierReferenced(local)) {
+//             refs.add(local)
+//           }
+//         })
+//       }
+//     },
+
+//     FunctionDeclaration: markFunction,
+//     FunctionExpression: markFunction,
+//     ArrowFunctionExpression: markFunction,
+//     ImportSpecifier: markImport,
+//     ImportDefaultSpecifier: markImport,
+//     ImportNamespaceSpecifier: markImport,
+//   })
+//   return refs
+// }
+
+/**
+ * @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()
+      }
+    }
+  }
+
+  // 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') {
+          const pattern = path.get('id') as NodePath<BabelTypes.ObjectPattern>
+
+          const beforeCount = referencesRemovedInThisPass
+          const properties = pattern.get('properties')
+          properties.forEach((property) => {
+            const local = property.get(
+              property.node.type === 'ObjectProperty'
+                ? 'value'
+                : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                  property.node.type === 'RestElement'
+                  ? 'argument'
+                  : (function () {
+                      throw new Error('invariant')
+                    })(),
+            ) as NodePath<BabelTypes.Identifier>
+
+            if (shouldBeRemoved(local)) {
+              ++referencesRemovedInThisPass
+              property.remove()
+            }
+          })
+
+          if (
+            beforeCount !== referencesRemovedInThisPass &&
+            pattern.get('properties').length < 1
+          ) {
+            path.remove()
+          }
+        } else if (path.node.id.type === 'ArrayPattern') {
+          const pattern = path.get('id') as NodePath<BabelTypes.ArrayPattern>
+
+          const beforeCount = referencesRemovedInThisPass
+          const elements = pattern.get('elements')
+          elements.forEach((e) => {
+            let local: NodePath<BabelTypes.Identifier>
+            if (e.node?.type === 'Identifier') {
+              local = e as NodePath<BabelTypes.Identifier>
+            } else if (e.node?.type === 'RestElement') {
+              local = e.get('argument') as NodePath<BabelTypes.Identifier>
+            } else {
+              return
+            }
+
+            if (shouldBeRemoved(local)) {
+              ++referencesRemovedInThisPass
+              e.remove()
+            }
+          })
+
+          if (
+            beforeCount !== referencesRemovedInThisPass &&
+            pattern.get('elements').length < 1
+          ) {
+            path.remove()
+          }
+        }
+      },
+      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
+  }
+
+  // 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
+}