@tanstack/router-generator 1.121.0-alpha.14 → 1.121.0-alpha.26

package/src/transform/transform.ts

@@ -0,0 +1,439 @@
+import { parseAst } from '@tanstack/router-utils'
+import { parse, print, types, visit } from 'recast'
+import { SourceMapConsumer } from 'source-map'
+import { mergeImportDeclarations } from '../utils'
+import type { ImportDeclaration } from '../types'
+import type { RawSourceMap } from 'source-map'
+import type {
+  TransformOptions,
+  TransformPlugin,
+  TransformResult,
+} from './types'
+
+const b = types.builders
+
+export async function transform({
+  ctx,
+  source,
+  plugins,
+}: TransformOptions): Promise<TransformResult> {
+  let appliedChanges = false as boolean
+  let ast: types.namedTypes.File
+  const foundExports: Array<string> = []
+  try {
+    ast = parse(source, {
+      sourceFileName: 'output.ts',
+      parser: {
+        parse(code: string) {
+          return parseAst({
+            code,
+            // we need to instruct babel to produce tokens,
+            // otherwise recast will try to generate the tokens via its own parser and will fail
+            tokens: true,
+          })
+        },
+      },
+    })
+  } catch (e) {
+    console.error('Error parsing code', ctx.routeId, source, e)
+    return {
+      result: 'error',
+      error: e,
+    }
+  }
+
+  const preferredQuote = detectPreferredQuoteStyle(ast)
+
+  const registeredExports = new Map</* export name */ string, TransformPlugin>()
+
+  for (const plugin of plugins ?? []) {
+    const exportName = plugin.exportName
+    if (registeredExports.has(exportName)) {
+      throw new Error(
+        `Export ${exportName} is already registered by plugin ${registeredExports.get(exportName)?.name}`,
+      )
+    }
+    registeredExports.set(exportName, plugin)
+  }
+
+  const program: types.namedTypes.Program = ast.program
+  // first pass: find registered exports
+  for (const n of program.body) {
+    if (
+      registeredExports.size > 0 &&
+      n.type === 'ExportNamedDeclaration' &&
+      n.declaration?.type === 'VariableDeclaration'
+    ) {
+      const decl = n.declaration.declarations[0]
+      if (
+        decl &&
+        decl.type === 'VariableDeclarator' &&
+        decl.id.type === 'Identifier'
+      ) {
+        const plugin = registeredExports.get(decl.id.name)
+        if (plugin) {
+          const pluginAppliedChanges = plugin.onExportFound({
+            decl,
+            ctx: { ...ctx, preferredQuote },
+          })
+
+          if (pluginAppliedChanges) {
+            appliedChanges = true
+          }
+
+          // export is handled, remove it from the registered exports
+          registeredExports.delete(decl.id.name)
+          // store the export so we can later return it once the file is transformed
+          foundExports.push(decl.id.name)
+        }
+      }
+    }
+  }
+
+  const imports: {
+    required: Array<ImportDeclaration>
+    banned: Array<ImportDeclaration>
+  } = {
+    required: [],
+    banned: [],
+  }
+
+  for (const plugin of plugins ?? []) {
+    const exportName = plugin.exportName
+    if (foundExports.includes(exportName)) {
+      const pluginImports = plugin.imports(ctx)
+      if (pluginImports.required) {
+        imports.required.push(...pluginImports.required)
+      }
+      if (pluginImports.banned) {
+        imports.banned.push(...pluginImports.banned)
+      }
+    }
+  }
+
+  imports.required = mergeImportDeclarations(imports.required)
+  imports.banned = mergeImportDeclarations(imports.banned)
+
+  const importStatementCandidates: Array<types.namedTypes.ImportDeclaration> =
+    []
+  const importDeclarationsToRemove: Array<types.namedTypes.ImportDeclaration> =
+    []
+
+  // second pass: apply import rules, but only if a matching export for the plugin was found
+  for (const n of program.body) {
+    const findImport =
+      (opts: { source: string; importKind?: 'type' | 'value' | 'typeof' }) =>
+      (i: ImportDeclaration) => {
+        if (i.source === opts.source) {
+          const importKind = i.importKind || 'value'
+          const expectedImportKind = opts.importKind || 'value'
+          return expectedImportKind === importKind
+        }
+        return false
+      }
+    if (n.type === 'ImportDeclaration' && typeof n.source.value === 'string') {
+      const filterImport = findImport({
+        source: n.source.value,
+        importKind: n.importKind,
+      })
+      let requiredImports = imports.required.filter(filterImport)[0]
+
+      const bannedImports = imports.banned.filter(filterImport)[0]
+      if (!requiredImports && !bannedImports) {
+        continue
+      }
+      const importSpecifiersToRemove: types.namedTypes.ImportDeclaration['specifiers'] =
+        []
+      if (n.specifiers) {
+        for (const spec of n.specifiers) {
+          if (!requiredImports && !bannedImports) {
+            break
+          }
+          if (
+            spec.type === 'ImportSpecifier' &&
+            typeof spec.imported.name === 'string'
+          ) {
+            if (requiredImports) {
+              const requiredImportIndex = requiredImports.specifiers.findIndex(
+                (imp) => imp.imported === spec.imported.name,
+              )
+              if (requiredImportIndex !== -1) {
+                // import is already present, remove it from requiredImports
+                requiredImports.specifiers.splice(requiredImportIndex, 1)
+                if (requiredImports.specifiers.length === 0) {
+                  imports.required = imports.required.splice(
+                    imports.required.indexOf(requiredImports),
+                    1,
+                  )
+                  requiredImports = undefined
+                }
+              } else {
+                // add the import statement to the candidates
+                importStatementCandidates.push(n)
+              }
+            }
+            if (bannedImports) {
+              const bannedImportIndex = bannedImports.specifiers.findIndex(
+                (imp) => imp.imported === spec.imported.name,
+              )
+              if (bannedImportIndex !== -1) {
+                importSpecifiersToRemove.push(spec)
+              }
+            }
+          }
+        }
+        if (importSpecifiersToRemove.length > 0) {
+          appliedChanges = true
+          n.specifiers = n.specifiers.filter(
+            (spec) => !importSpecifiersToRemove.includes(spec),
+          )
+
+          // mark the import statement as to be deleted if it is now empty
+          if (n.specifiers.length === 0) {
+            importDeclarationsToRemove.push(n)
+          }
+        }
+      }
+    }
+  }
+  imports.required.forEach((requiredImport) => {
+    if (requiredImport.specifiers.length > 0) {
+      appliedChanges = true
+      if (importStatementCandidates.length > 0) {
+        // find the first import statement that matches both the module and the import kind
+        const importStatement = importStatementCandidates.find(
+          (importStatement) => {
+            if (importStatement.source.value === requiredImport.source) {
+              const importKind = importStatement.importKind || 'value'
+              const requiredImportKind = requiredImport.importKind || 'value'
+              return importKind === requiredImportKind
+            }
+            return false
+          },
+        )
+        if (importStatement) {
+          if (importStatement.specifiers === undefined) {
+            importStatement.specifiers = []
+          }
+          const importSpecifiersToAdd = requiredImport.specifiers.map((spec) =>
+            b.importSpecifier(
+              b.identifier(spec.imported),
+              b.identifier(spec.imported),
+            ),
+          )
+          importStatement.specifiers = [
+            ...importStatement.specifiers,
+            ...importSpecifiersToAdd,
+          ]
+          return
+        }
+      }
+      const importStatement = b.importDeclaration(
+        requiredImport.specifiers.map((spec) =>
+          b.importSpecifier(
+            b.identifier(spec.imported),
+            spec.local ? b.identifier(spec.local) : null,
+          ),
+        ),
+        b.stringLiteral(requiredImport.source),
+      )
+      program.body.unshift(importStatement)
+    }
+  })
+  if (importDeclarationsToRemove.length > 0) {
+    appliedChanges = true
+    for (const importDeclaration of importDeclarationsToRemove) {
+      // check if the import declaration is still empty
+      if (importDeclaration.specifiers?.length === 0) {
+        const index = program.body.indexOf(importDeclaration)
+        if (index !== -1) {
+          program.body.splice(index, 1)
+        }
+      }
+    }
+  }
+
+  if (!appliedChanges) {
+    return {
+      exports: foundExports,
+      result: 'not-modified',
+    }
+  }
+
+  const printResult = print(ast, {
+    reuseWhitespace: true,
+    sourceMapName: 'output.map',
+  })
+  let transformedCode = printResult.code
+  if (printResult.map) {
+    const fixedOutput = await fixTransformedOutputText({
+      originalCode: source,
+      transformedCode,
+      sourceMap: printResult.map as RawSourceMap,
+      preferredQuote,
+    })
+    transformedCode = fixedOutput
+  }
+  return {
+    result: 'modified',
+    exports: foundExports,
+    output: transformedCode,
+  }
+}
+
+async function fixTransformedOutputText({
+  originalCode,
+  transformedCode,
+  sourceMap,
+  preferredQuote,
+}: {
+  originalCode: string
+  transformedCode: string
+  sourceMap: RawSourceMap
+  preferredQuote: '"' | "'" | '`'
+}) {
+  const originalLines = originalCode.split('\n')
+  const transformedLines = transformedCode.split('\n')
+
+  const defaultUsesSemicolons = detectSemicolonUsage(originalCode)
+
+  const consumer = await new SourceMapConsumer(sourceMap)
+
+  const fixedLines = transformedLines.map((line, i) => {
+    const transformedLineNum = i + 1
+
+    let mapped = null
+    let origLineText = null
+
+    for (let col = 0; col < line.length; col++) {
+      mapped = consumer.originalPositionFor({
+        line: transformedLineNum,
+        column: col,
+      })
+      if (mapped.line != null && mapped.line > 0) {
+        origLineText = originalLines[mapped.line - 1]
+        break
+      }
+    }
+
+    if (origLineText != null) {
+      if (origLineText === line) {
+        return origLineText
+      }
+      return fixLine(line, {
+        originalLine: origLineText,
+        useOriginalSemicolon: true,
+        useOriginalQuotes: true,
+        fallbackQuote: preferredQuote,
+      })
+    } else {
+      return fixLine(line, {
+        originalLine: null,
+        useOriginalSemicolon: false,
+        useOriginalQuotes: false,
+        fallbackQuote: preferredQuote,
+        fallbackSemicolon: defaultUsesSemicolons,
+      })
+    }
+  })
+
+  return fixedLines.join('\n')
+}
+
+function fixLine(
+  line: string,
+  {
+    originalLine,
+    useOriginalSemicolon,
+    useOriginalQuotes,
+    fallbackQuote,
+    fallbackSemicolon = true,
+  }: {
+    originalLine: string | null
+    useOriginalSemicolon: boolean
+    useOriginalQuotes: boolean
+    fallbackQuote: string
+    fallbackSemicolon?: boolean
+  },
+) {
+  let result = line
+
+  if (useOriginalQuotes && originalLine) {
+    result = fixQuotes(result, originalLine, fallbackQuote)
+  } else if (!useOriginalQuotes && fallbackQuote) {
+    result = fixQuotesToPreferred(result, fallbackQuote)
+  }
+
+  if (useOriginalSemicolon && originalLine) {
+    const hadSemicolon = originalLine.trimEnd().endsWith(';')
+    const hasSemicolon = result.trimEnd().endsWith(';')
+    if (hadSemicolon && !hasSemicolon) result += ';'
+    if (!hadSemicolon && hasSemicolon) result = result.replace(/;\s*$/, '')
+  } else if (!useOriginalSemicolon) {
+    const hasSemicolon = result.trimEnd().endsWith(';')
+    if (!fallbackSemicolon && hasSemicolon) result = result.replace(/;\s*$/, '')
+    if (fallbackSemicolon && !hasSemicolon && result.trim()) result += ';'
+  }
+
+  return result
+}
+
+function fixQuotes(line: string, originalLine: string, fallbackQuote: string) {
+  let originalQuote = detectQuoteFromLine(originalLine)
+  if (!originalQuote) {
+    originalQuote = fallbackQuote
+  }
+  return fixQuotesToPreferred(line, originalQuote)
+}
+
+function fixQuotesToPreferred(line: string, quote: string) {
+  // Replace existing quotes with preferred quote
+  return line.replace(
+    /(['"`])([^'"`\\]*(?:\\.[^'"`\\]*)*)\1/g,
+    (_, q, content) => {
+      const escaped = content.replaceAll(quote, `\\${quote}`)
+      return `${quote}${escaped}${quote}`
+    },
+  )
+}
+
+function detectQuoteFromLine(line: string) {
+  const match = line.match(/(['"`])(?:\\.|[^\\])*?\1/)
+  return match ? match[1] : null
+}
+
+function detectSemicolonUsage(code: string) {
+  const lines = code.split('\n').map((l) => l.trim())
+  const total = lines.length
+  const withSemis = lines.filter((l) => l.endsWith(';')).length
+  return withSemis > total / 2
+}
+
+export function detectPreferredQuoteStyle(ast: types.ASTNode): "'" | '"' | '`' {
+  let single = 0
+  let double = 0
+  let backtick = 0
+
+  visit(ast, {
+    visitStringLiteral(path) {
+      if (path.parent.node.type !== 'JSXAttribute') {
+        const raw = path.node.extra?.raw
+        if (raw?.startsWith("'")) single++
+        else if (raw?.startsWith('"')) double++
+      }
+      return false
+    },
+    visitTemplateLiteral(path) {
+      if (path.parent.type !== 'JSXAttribute') {
+        backtick++
+      }
+      return false
+    },
+  })
+
+  return single >= double && single >= backtick
+    ? "'"
+    : double >= single && double >= backtick
+      ? '"'
+      : '`'
+}

package/src/transform/types.ts

@@ -0,0 +1,50 @@
+import type { ImportDeclaration } from '../types'
+import type { types } from 'recast'
+import type { Config } from '../config'
+
+export interface TransformOptions {
+  source: string
+  ctx: TransformContext
+  plugins?: Array<TransformPlugin>
+}
+
+export type TransformResult =
+  | {
+      result: 'not-modified'
+      exports: Array<string>
+    }
+  | {
+      result: 'modified'
+      output: string
+      exports: Array<string>
+    }
+  | {
+      result: 'error'
+      error?: any
+    }
+
+export interface TransformImportsConfig {
+  banned?: Array<ImportDeclaration>
+  required?: Array<ImportDeclaration>
+}
+export interface TransformPlugin {
+  name: string
+  exportName: string
+  imports: (ctx: TransformContext) => TransformImportsConfig
+  /**
+   * Called after the export is found in the AST.
+   * @returns true if the plugin modified the AST, false otherwise
+   */
+  onExportFound: (opts: {
+    decl: types.namedTypes.VariableDeclarator
+    ctx: TransformContext
+  }) => boolean
+}
+
+export interface TransformContext {
+  target: Config['target']
+  routeId: string
+  lazy: boolean
+  verboseFileRoutes: boolean
+  preferredQuote?: '"' | "'" | '`'
+}

package/src/transform/utils.ts

@@ -0,0 +1,42 @@
+import { types } from 'recast'
+
+const b = types.builders
+
+export function ensureStringArgument(
+  callExpression: types.namedTypes.CallExpression,
+  value: string,
+  preferredQuote?: "'" | '"' | '`',
+) {
+  const argument = callExpression.arguments[0]
+  if (!argument) {
+    let stringLiteral: types.namedTypes.StringLiteral
+    if (!preferredQuote) {
+      stringLiteral = b.stringLiteral.from({ value })
+    } else {
+      stringLiteral = b.stringLiteral.from({
+        value,
+        extra: {
+          rawValue: value,
+          raw: `${preferredQuote}${value}${preferredQuote}`,
+        },
+      })
+    }
+    callExpression.arguments.push(stringLiteral)
+    return true
+  } else if (argument.type === 'StringLiteral') {
+    if (argument.value !== value) {
+      argument.value = value
+      return true
+    }
+  } else if (argument.type === 'TemplateLiteral') {
+    if (
+      argument.quasis.length === 1 &&
+      argument.quasis[0] &&
+      argument.quasis[0].value.raw !== value
+    ) {
+      argument.quasis[0].value.raw = value
+      return true
+    }
+  }
+  return false
+}

package/src/types.ts

@@ -12,6 +12,7 @@ export type RouteNode = {
   isVirtual?: boolean
   children?: Array<RouteNode>
   parent?: RouteNode
+  exports?: Array<string>
 }
 
 export interface GetRouteNodesResult {
@@ -29,3 +30,27 @@ export type FsRouteType =
   | 'component' // @deprecated
   | 'pendingComponent' // @deprecated
   | 'errorComponent' // @deprecated
+
+export type RouteSubNode = {
+  component?: RouteNode
+  errorComponent?: RouteNode
+  pendingComponent?: RouteNode
+  loader?: RouteNode
+  lazy?: RouteNode
+}
+
+export type ImportSpecifier = {
+  imported: string
+  local?: string
+}
+export type ImportDeclaration = {
+  source: string
+  specifiers: Array<ImportSpecifier>
+  importKind?: 'type' | 'value'
+}
+
+export type HandleNodeAccumulator = {
+  routeTree: Array<RouteNode>
+  routePiecesByPath: Record<string, RouteSubNode>
+  routeNodes: Array<RouteNode>
+}