generateCodeFrame() — vue Function Reference

Architecture documentation for the generateCodeFrame() function in codeframe.ts from the vue codebase.

Function typescript CompilerSFC ScriptAnalyzer calls 1 called by 1

Entity Profile

CompilerSFC→ ScriptAnalyzer→ generateCodeFrame() — vue Function Reference

Dependency Diagram

graph TD
  54df2c7b_ea8a_2236_df99_5519ea06c771["generateCodeFrame()"]
  8dfd476b_479e_3ce1_9cb2_3ae3930648d1["codeframe.ts"]
  54df2c7b_ea8a_2236_df99_5519ea06c771 -->|defined in| 8dfd476b_479e_3ce1_9cb2_3ae3930648d1
  8c37c3f7_6d20_45b0_566b_5aa0cdfb7284["createCompileToFunctionFn()"]
  8c37c3f7_6d20_45b0_566b_5aa0cdfb7284 -->|calls| 54df2c7b_ea8a_2236_df99_5519ea06c771
  9fe0b45f_1753_7ce8_b7a9_cf5a436dffbd["repeat()"]
  54df2c7b_ea8a_2236_df99_5519ea06c771 -->|calls| 9fe0b45f_1753_7ce8_b7a9_cf5a436dffbd
  style 54df2c7b_ea8a_2236_df99_5519ea06c771 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codeframe.ts lines 3–37

export function generateCodeFrame(
  source: string,
  start: number = 0,
  end: number = source.length
): string {
  const lines = source.split(/\r?\n/)
  let count = 0
  const res: string[] = []
  for (let i = 0; i < lines.length; i++) {
    count += lines[i].length + 1
    if (count >= start) {
      for (let j = i - range; j <= i + range || end > count; j++) {
        if (j < 0 || j >= lines.length) continue
        res.push(
          `${j + 1}${repeat(` `, 3 - String(j + 1).length)}|  ${lines[j]}`
        )
        const lineLength = lines[j].length
        if (j === i) {
          // push underline
          const pad = start - (count - lineLength) + 1
          const length = end > count ? lineLength - pad : end - start
          res.push(`   |  ` + repeat(` `, pad) + repeat(`^`, length))
        } else if (j > i) {
          if (end > count) {
            const length = Math.min(end - count, lineLength)
            res.push(`   |  ` + repeat(`^`, length))
          }
          count += lineLength + 1
        }
      }
      break
    }
  }
  return res.join('\n')
}