Home / Class/ RenderContext Class — vue Architecture

RenderContext Class — vue Architecture

Architecture documentation for the RenderContext class in render-context.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  dcfd08ce_7436_881d_bd01_8b4c09f7fb5c["RenderContext"]
  a6a05c58_4962_0886_8e94_eeaa15c02b42["render-context.ts"]
  dcfd08ce_7436_881d_bd01_8b4c09f7fb5c -->|defined in| a6a05c58_4962_0886_8e94_eeaa15c02b42
  685d1f42_397c_b2cd_6dc4_8113d16b65d1["constructor()"]
  dcfd08ce_7436_881d_bd01_8b4c09f7fb5c -->|method| 685d1f42_397c_b2cd_6dc4_8113d16b65d1
  c25d0df8_742c_b09a_17fa_f3481184c969["next()"]
  dcfd08ce_7436_881d_bd01_8b4c09f7fb5c -->|method| c25d0df8_742c_b09a_17fa_f3481184c969

Relationship Graph

Source Code

packages/server-renderer/src/render-context.ts lines 31–123

export class RenderContext {
  userContext: Record<string, any> | null
  activeInstance: Component
  renderStates: Array<RenderState>
  write: (text: string, next: Function) => void
  renderNode: (node: VNode, isRoot: boolean, context: RenderContext) => void
  done: (err?: Error) => void

  modules: Array<(node: VNode) => string | null>
  directives: Object
  isUnaryTag: (tag: string) => boolean

  cache: any
  get?: (key: string, cb: Function) => void
  has?: (key: string, cb: Function) => void

  constructor(options: Record<string, any>) {
    this.userContext = options.userContext
    this.activeInstance = options.activeInstance
    this.renderStates = []

    this.write = options.write
    this.done = options.done
    this.renderNode = options.renderNode

    this.isUnaryTag = options.isUnaryTag
    this.modules = options.modules
    this.directives = options.directives

    const cache = options.cache
    if (cache && (!cache.get || !cache.set)) {
      throw new Error('renderer cache must implement at least get & set.')
    }
    this.cache = cache
    this.get = cache && normalizeAsync(cache, 'get')
    this.has = cache && normalizeAsync(cache, 'has')

    this.next = this.next.bind(this)
  }

  next() {
    // eslint-disable-next-line
    while (true) {
      const lastState = this.renderStates[this.renderStates.length - 1]
      if (isUndef(lastState)) {
        return this.done()
      }
      /* eslint-disable no-case-declarations */
      switch (lastState.type) {
        case 'Element':
        case 'Fragment':
          const { children, total } = lastState
          const rendered = lastState.rendered++
          if (rendered < total) {
            return this.renderNode(children[rendered], false, this)
          } else {
            this.renderStates.pop()
            if (lastState.type === 'Element') {
              return this.write(lastState.endTag, this.next)
            }
          }
          break
        case 'Component':
          this.renderStates.pop()
          this.activeInstance = lastState.prevActive
          break
        case 'ComponentWithCache':
          this.renderStates.pop()
          const { buffer, bufferIndex, componentBuffer, key } = lastState
          const result = {
            html: buffer[bufferIndex],
            components: componentBuffer[bufferIndex]
          }
          this.cache.set(key, result)
          if (bufferIndex === 0) {
            // this is a top-level cached component,
            // exit caching mode.
            //@ts-expect-error
            this.write.caching = false
          } else {
            // parent component is also being cached,

Frequently Asked Questions

What is the RenderContext class?
RenderContext is a class in the vue codebase, defined in packages/server-renderer/src/render-context.ts.
Where is RenderContext defined?
RenderContext is defined in packages/server-renderer/src/render-context.ts at line 31.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free