Interpretation of Vue source code -- Analysis of compiler

When learning becomes a habit, knowledge becomes common sense. Thank you for your attention, likes, collections and comments.

The new video and articles will be sent to WeChat official account for the first time. Li Yongning

The article has been included in github warehouse liyongning/blog , welcome to Watch and Star.

Special instructions

Due to the limited length of the article, Vue source code interpretation (8) - compiler parsing is divided into two parts, so please open it at the same time when reading this article Interpretation of Vue source code (8) -- Analysis of compiler (Part 2) Read together.

preface

Interpretation of Vue source code (4) -- asynchronous update Finally, when it comes to refreshing the watcher queue, execute each watcher Run method, by watcher Run calls watcher Get to execute the watcher Getter method to enter the actual update phase. If you are not familiar with this process, I suggest you read this article again.

When updating a render watcher, the updateComponent method is executed:

// /src/core/instance/lifecycle.js
const updateComponent = () => {
  // Execute VM_ Render() function, get the virtual DOM and pass vnode to_ update method, and then it's time to go to the patch stage
  vm._update(vm._render(), hydrating)
}

You can see that you need to execute VM before each update_ Render() method, VM_ Render is the render function we often hear, which is obtained in two ways:

Provided by users themselves. When writing components, use the render option instead of the template
The compiler compiles the component template to generate the render option

Today, let's go deep into the compiler to see how it compiles the class html template we usually write into the render function.

The core of the compiler consists of three parts:

Parse and convert the class html template into AST object
Optimization, also known as static marking, traverses AST objects, marks whether each node is a static node, and marks the static root node
Generate rendering function, and generate AST object into rendering function

Due to the large amount of code in the compiler, this part of knowledge is divided into three parts. The first part is parsing.

target

Deeply understand the parsing process of Vue compiler and how to convert class html template string into AST object.

Source code interpretation

Next, we go to the source code to find the answer.

Reading suggestions

Due to the huge amount of code in the parsing process, it is recommended that you grasp the main line: "parse HTML string template and generate AST object", and this AST object is the final result we want to get. Therefore, in the process of reading, you should record this AST object, which is helpful for understanding and makes you less likely to get lost.

You can also read the help section of the next article first to have an advance preparation and psychological expectation.

Entry - $mount

The entry location of the compiler is / SRC / platforms / Web / entry runtime with compiler JS, there are two ways to find this entry

Breakpoint debugging, Interpretation of Vue source code (2) -- Vue initialization process As mentioned in, the last step of initialization is to execute $mount for mounting. In the full volume of Vue packages, this step will enter the compilation stage.
Find it step by step through the configuration file of rollup

/src/platforms/web/entry-runtime-with-compiler.js

/**
 * Compiler entry
 * Vue at runtime JS package does not have this part of the code. It is precompiled through the packer combined with Vue loader + Vue compiler utils to compile the template into render function
 * 
 * Just do one thing, get the rendering function of the component and set it to this$ Options
 */
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  // Mount point
  el = el && query(el)

  // The mount point cannot be body or html
  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  // Configuration item
  const options = this.$options
  // resolve template/el and convert to render function
  /**
   * If the user provides the render configuration item, the compilation phase will be skipped directly. Otherwise, the compilation phase will be entered
   *   Parse template and el and convert them to render function
   *   Priority: render > template > el
   */
  if (!options.render) {
    let template = options.template
    if (template) {
      // Processing template options
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          // {template: '#app'}. If template is an id selector, get the innerHtml of the element as the template
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        // Template is a normal element. Get its innerHtml as a template
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // Set the el option to obtain the outerHtml of the el selector as the template
      template = getOuterHTML(el)
    }
    if (template) {
      // The template is ready and enters the compilation stage
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      // Static rendering function and dynamic rendering function
      const { render, staticRenderFns } = compileToFunctions(template, {
        // In a non production environment, compile time records the position index of the label attribute at the beginning and end of the template string
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        // Delimiter, default {}
        delimiters: options.delimiters,
        // Keep comments
        comments: options.comments
      }, this)
      // Put two rendering functions into this$ Options
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  // Perform mount
  return mount.call(this, el, hydrating)
}

compileToFunctions

/src/compiler/to-function.js

/**
 * 1,Execute the compilation function to get the compilation result - > compiled
 * 2,Process the error and tip generated during compilation and output them to the console respectively
 * 3,Convert the compiled string code into an executable function through new Function(codeStr)
 * 4,Cache compilation results
 * @param { string } template String template
 * @param { CompilerOptions } options Compile options
 * @param { Component } vm Component instance
 * @return { render, staticRenderFns }
 */
return function compileToFunctions(
  template: string,
  options?: CompilerOptions,
  vm?: Component
): CompiledFunctionResult {
  // Compilation options passed in
  options = extend({}, options)
  // journal
  const warn = options.warn || baseWarn
  delete options.warn

  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production') {
    // Detect possible CSP limitations
    try {
      new Function('return 1')
    } catch (e) {
      if (e.toString().match(/unsafe-eval|CSP/)) {
        // It seems that you are using the full version of Vue in a CSP insecure environment JS, the template compiler cannot work in such an environment.
        // Consider relaxing policy restrictions or precompiling your template as the render function
        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.'
        )
      }
    }
  }

  // If there is a cache, skip the compilation and get the results of the last compilation directly from the cache
  const key = options.delimiters
    ? String(options.delimiters) + template
    : template
  if (cache[key]) {
    return cache[key]
  }

  // Execute the compilation function to get the compilation result
  const compiled = compile(template, options)

  // Check the error and tip generated during compilation and output them to the console respectively
  if (process.env.NODE_ENV !== 'production') {
    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))
      }
    }
  }

  // Convert the compiled string code into a function, which is realized through new Function(code)
  // turn code into functions
  const res = {}
  const fnGenErrors = []
  res.render = createFunction(compiled.render, fnGenErrors)
  res.staticRenderFns = compiled.staticRenderFns.map(code => {
    return createFunction(code, fnGenErrors)
  })

  // When dealing with the errors in the above code conversion process, this step generally will not report an error unless the compiler itself makes an error
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production') {
    if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
      warn(
        `Failed to generate render function:\n\n` +
        fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
        vm
      )
    }
  }

  // Cache compilation results
  return (cache[key] = res)
}

compile

/src/compiler/create-compiler.js

/**
 * To compile functions, you do two things:
 *   1,Option merging: merge the options configuration item into final options (base options) to get the final compiled configuration object
 *   2,Call the core compiler baseCompile to get the compilation result
 *   3,Mount the error and tip generated during compilation to the compilation result and return the compilation result
 * @param {*} template Template
 * @param {*} options Configuration item
 * @returns 
 */
function compile(
  template: string,
  options?: CompilerOptions
): CompiledResult {
  // Create a compilation option object based on the platform specific compilation configuration
  const finalOptions = Object.create(baseOptions)
  const errors = []
  const tips = []

  // Log, responsible for recording error and tip
  let warn = (msg, range, tip) => {
    (tip ? tips : errors).push(msg)
  }

  // If compilation options exist, merge options and baseOptions
  if (options) {
    // Development environment
    if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
      // $flow-disable-line
      const leadingSpaceLength = template.match(/^\s*/)[0].length

      // Enhanced logging method
      warn = (msg, range, tip) => {
        const data: WarningMessage = { msg }
        if (range) {
          if (range.start != null) {
            data.start = range.start + leadingSpaceLength
          }
          if (range.end != null) {
            data.end = range.end + leadingSpaceLength
          }
        }
        (tip ? tips : errors).push(data)
      }
    }

    /**
     * Merge the configuration items in options into finalOptions
     */

    // Merge custom module s
    if (options.modules) {
      finalOptions.modules =
        (baseOptions.modules || []).concat(options.modules)
    }
    // Merge custom directives
    if (options.directives) {
      finalOptions.directives = extend(
        Object.create(baseOptions.directives || null),
        options.directives
      )
    }
    // Copy other configuration items
    for (const key in options) {
      if (key !== 'modules' && key !== 'directives') {
        finalOptions[key] = options[key]
      }
    }
  }

  // journal
  finalOptions.warn = warn

  // So far, the key point is finally reached. Call the core compilation function, pass the template string and the final compilation options, and get the compilation result
  // All of the above is to build the final compilation options of the platform
  const compiled = baseCompile(template.trim(), finalOptions)
  if (process.env.NODE_ENV !== 'production') {
    detectErrors(compiled.ast, warn)
  }
  // Mount the errors and prompts generated during compilation to the compilation results
  compiled.errors = errors
  compiled.tips = tips
  return compiled
}

baseOptions

/src/platforms/web/compiler/options.js

export const baseOptions: CompilerOptions = {
  expectHTML: true,
  // Handle class, style, v-model
  modules,
  // Processing instruction
  // Is it a pre tag
  isPreTag,
  // Is it a self closing label
  isUnaryTag,
  // Specifies some properties that should be bound using props
  mustUseProp,
  // You can only write the label of the start label, and the end label browser will complete it automatically
  canBeLeftOpenTag,
  // Is it a reserved tag (html + svg)
  isReservedTag,
  // Gets the namespace of the tag
  getTagNamespace,
  staticKeys: genStaticKeys(modules)
}

baseCompile

/src/compiler/index.js

/**
 * All the things we have done before have only one purpose, which is to build platform specific compilation options, such as web platform
 * 
 * 1,Parse html template into ast
 * 2,Static marking of ast tree
 * 3,Generate ast render function
 *    Put the static rendering function into code Staticrenderfns array
 *    code.render Is a dynamic rendering function
 *    Execute the rendering function to get vnode when rendering in the future
 */
function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  // The template is parsed into ast, and all the information of the element is set on the ast object of each node, such as label information, attribute information, slot information, parent node, child node, etc.
  // For the specific properties, check the start and end methods to process the start and end tags
  const ast = parse(template.trim(), options)
  // Optimize, traverse AST and make static marks for each node
  // Mark whether each node is a static node, and then further mark the static root node
  // In this way, these static nodes can be skipped in subsequent updates
  // Mark the static root, which is used to generate the render function stage and generate the render function of the static root node
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  // Generate rendering function from AST and generate code like this, such as code render = "_c('div',{attrs:{"id":"app"}},_l((arr),function(item){return _c('div',{key:item},[_v(_s(item))])}),0)"
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
}

parse

Note: due to the large amount of code in this part, some adjustments have been made to the structure of the code to facilitate reading and understanding.

/src/compiler/parser/index.js

/**
 * 
 * Convert HTML string to AST
 * @param {*} template HTML Template
 * @param {*} options Platform specific compilation options
 * @returns root
 */
export function parse(
  template: s tring,
  options: CompilerOptions
): ASTElement | void {
  // journal
  warn = options.warn || baseWarn

  // Is it a pre tag
  platformIsPreTag = options.isPreTag || no
  // Properties that must be bound using props
  platformMustUseProp = options.mustUseProp || no
  // Gets the namespace of the tag
  platformGetTagNamespace = options.getTagNamespace || no
  // Is it a reserved tag (html + svg)
  const isReservedTag = options.isReservedTag || no
  // Judge whether an element is a component
  maybeComponent = (el: ASTElement) => !!el.component || !isReservedTag(el.tag)

  // Get options Methods of transformNode, preTransformNode and postTransformNode in the three modules of class, model and style under modules
  // Responsible for handling class, style and v-model on the element node
  transforms = pluckModuleFunction(options.modules, 'transformNode')
  preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
  postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')

  // Delimiter, such as: {}}
  delimiters = options.delimiters

  const stack = []
  // Space options
  const preserveWhitespace = options.preserveWhitespace !== false
  const whitespaceOption = options.whitespace
  // The root node takes root as the root, and the processed nodes will be attached to root according to the hierarchy. The last return is root, an ast syntax tree
  let root
  // Parent element of the current element
  let currentParent
  let inVPre = false
  let inPre = false
  let warned = false
  
  // Parse html template string and handle all tags and attributes on tags
  // parseHTMLOptions here will be used in later processing and will be further analyzed
  // If you analyze it in advance, it's easy for you to diverge
  parseHTML(template, parseHtmlOptions)
  
  // Returns the generated ast object
  return root