createCompileToFunctionFn() — vue Function Reference

Architecture documentation for the createCompileToFunctionFn() function in to-function.ts from the vue codebase.

Function typescript VueCore Observer calls 2 called by 1

Entity Profile

VueCore→ Observer→ createCompileToFunctionFn() — vue Function Reference

Dependency Diagram

graph TD
  de1bc371_80db_723d_3fc8_276c93f033c1["createCompileToFunctionFn()"]
  fce21fb3_1100_1200_4d40_dbc0f8981911["to-function.ts"]
  de1bc371_80db_723d_3fc8_276c93f033c1 -->|defined in| fce21fb3_1100_1200_4d40_dbc0f8981911
  97855b39_317e_b246_a520_910b41a8b140["createCompilerCreator()"]
  97855b39_317e_b246_a520_910b41a8b140 -->|calls| de1bc371_80db_723d_3fc8_276c93f033c1
  dd20ebf1_1620_a5f1_519f_f296f3f66e87["generateCodeFrame()"]
  de1bc371_80db_723d_3fc8_276c93f033c1 -->|calls| dd20ebf1_1620_a5f1_519f_f296f3f66e87
  c73f2d0d_9248_50ec_9471_499ffedc764f["createFunction()"]
  de1bc371_80db_723d_3fc8_276c93f033c1 -->|calls| c73f2d0d_9248_50ec_9471_499ffedc764f
  style de1bc371_80db_723d_3fc8_276c93f033c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/to-function.ts lines 21–119

export function createCompileToFunctionFn(compile: Function): Function {
  const cache = Object.create(null)

  return function compileToFunctions(
    template: string,
    options?: CompilerOptions,
    vm?: Component
  ): CompiledFunctionResult {
    options = extend({}, options)
    const warn = options.warn || baseWarn
    delete options.warn

    /* istanbul ignore if */
    if (__DEV__) {
      // detect possible CSP restriction
      try {
        new Function('return 1')
      } catch (e: any) {
        if (e.toString().match(/unsafe-eval|CSP/)) {
          warn(
            'It seems you are using the standalone build of Vue.js in an ' +
              'environment with Content Security Policy that prohibits unsafe-eval. ' +
              'The template compiler cannot work in this environment. Consider ' +
              'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
              'templates into render functions.'
          )
        }
      }
    }

    // check cache
    const key = options.delimiters
      ? String(options.delimiters) + template
      : template
    if (cache[key]) {
      return cache[key]
    }

    // compile
    const compiled = compile(template, options)

    // check compilation errors/tips
    if (__DEV__) {
      if (compiled.errors && compiled.errors.length) {
        if (options.outputSourceRange) {
          compiled.errors.forEach(e => {
            warn(
              `Error compiling template:\n\n${e.msg}\n\n` +
                generateCodeFrame(template, e.start, e.end),
              vm
            )
          })
        } else {
          warn(
            `Error compiling template:\n\n${template}\n\n` +
              compiled.errors.map(e => `- ${e}`).join('\n') +
              '\n',
            vm
          )
        }
      }
      if (compiled.tips && compiled.tips.length) {
        if (options.outputSourceRange) {
          compiled.tips.forEach(e => tip(e.msg, vm))
        } else {
          compiled.tips.forEach(msg => tip(msg, vm))
        }
      }
    }

    // turn code into functions
    const res: any = {}
    const fnGenErrors: any[] = []
    res.render = createFunction(compiled.render, fnGenErrors)
    res.staticRenderFns = compiled.staticRenderFns.map(code => {
      return createFunction(code, fnGenErrors)
    })

    // check function generation errors.
    // this should only happen if there is a bug in the compiler itself.
    // mostly for codegen development use