createRenderer() — vue Function Reference

Architecture documentation for the createRenderer() function in create-renderer.ts from the vue codebase.

Function typescript ServerRenderer BundleRenderer calls 6 called by 2

Entity Profile

ServerRenderer→ BundleRenderer→ createRenderer() — vue Function Reference

Dependency Diagram

graph TD
  0ef8eb2c_b0fb_7608_a58e_c6b068a0d511["createRenderer()"]
  a0250ae2_2716_65d8_1d1d_df4785a5c81f["createBundleRendererCreator()"]
  a0250ae2_2716_65d8_1d1d_df4785a5c81f -->|calls| 0ef8eb2c_b0fb_7608_a58e_c6b068a0d511
  392e91c4_8ac7_041a_eb4b_e9f0fa008280["createRenderer()"]
  392e91c4_8ac7_041a_eb4b_e9f0fa008280 -->|calls| 0ef8eb2c_b0fb_7608_a58e_c6b068a0d511
  bcfdaca3_f60a_836c_8a8e_ab6eb04bb14e["createRenderFunction()"]
  0ef8eb2c_b0fb_7608_a58e_c6b068a0d511 -->|calls| bcfdaca3_f60a_836c_8a8e_ab6eb04bb14e
  a9898ee0_db52_d8ff_9b47_b48d3fbeb000["bindRenderFns()"]
  0ef8eb2c_b0fb_7608_a58e_c6b068a0d511 -->|calls| a9898ee0_db52_d8ff_9b47_b48d3fbeb000
  2e2c8bb3_8474_7b2e_e72a_577b6d3c8760["createPromiseCallback()"]
  0ef8eb2c_b0fb_7608_a58e_c6b068a0d511 -->|calls| 2e2c8bb3_8474_7b2e_e72a_577b6d3c8760
  952e7302_eb52_7258_f162_b5e4d278feb0["createWriteFunction()"]
  0ef8eb2c_b0fb_7608_a58e_c6b068a0d511 -->|calls| 952e7302_eb52_7258_f162_b5e4d278feb0
  d00ee0bd_5dce_cc55_ebbd_75e9b4ae547b["render()"]
  0ef8eb2c_b0fb_7608_a58e_c6b068a0d511 -->|calls| d00ee0bd_5dce_cc55_ebbd_75e9b4ae547b
  cee5cc70_ab66_5bad_f2f5_ad932eb86910["createStream()"]
  0ef8eb2c_b0fb_7608_a58e_c6b068a0d511 -->|calls| cee5cc70_ab66_5bad_f2f5_ad932eb86910
  style 0ef8eb2c_b0fb_7608_a58e_c6b068a0d511 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/create-renderer.ts lines 43–164

export function createRenderer({
  modules = [],
  directives = {},
  isUnaryTag = () => false,
  template,
  inject,
  cache,
  shouldPreload,
  shouldPrefetch,
  clientManifest,
  serializer
}: RenderOptions = {}): Renderer {
  const render = createRenderFunction(modules, directives, isUnaryTag, cache)
  const templateRenderer = new TemplateRenderer({
    template,
    inject,
    // @ts-expect-error
    shouldPreload,
    // @ts-expect-error
    shouldPrefetch,
    clientManifest,
    serializer
  })

  return {
    renderToString(
      component: Component,
      context?: any,
      cb?: any
    ): Promise<string> {
      if (typeof context === 'function') {
        cb = context
        context = {}
      }
      if (context) {
        templateRenderer.bindRenderFns(context)
      }

      // no callback, return Promise
      let promise
      if (!cb) {
        ;({ promise, cb } = createPromiseCallback())
      }

      let result = ''
      const write = createWriteFunction(text => {
        result += text
        return false
      }, cb)
      try {
        // @ts-expect-error TODO improve
        render(component, write, context, err => {
          if (err) {
            return cb(err)
          }
          if (context && context.rendered) {
            context.rendered(context)
          }
          if (template) {
            try {
              const res = templateRenderer.render(result, context)
              if (typeof res !== 'string') {
                // function template returning promise
                res.then(html => cb(null, html)).catch(cb)
              } else {
                cb(null, res)
              }
            } catch (e: any) {
              cb(e)
            }
          } else {
            cb(null, result)
          }
        })
      } catch (e: any) {
        cb(e)
      }

      return promise
    },

    renderToStream(component: Component, context?: Object): Readable {
      if (context) {
        templateRenderer.bindRenderFns(context)
      }
      const renderStream = new RenderStream((write, done) => {
        // @ts-expect-error
        render(component, write, context, done)
      })
      if (!template) {
        // @ts-expect-error
        if (context && context.rendered) {
          // @ts-expect-error
          const rendered = context.rendered
          renderStream.once('beforeEnd', () => {
            rendered(context)
          })
        }
        return renderStream
      } else if (typeof template === 'function') {
        throw new Error(
          `function template is only supported in renderToString.`
        )
      } else {
        const templateStream = templateRenderer.createStream(context)
        renderStream.on('error', err => {
          templateStream.emit('error', err)
        })
        renderStream.pipe(templateStream)
        //@ts-expect-error
        if (context && context.rendered) {
          //@ts-expect-error
          const rendered = context.rendered
          renderStream.once('beforeEnd', () => {
            rendered(context)
          })
        }
        return templateStream
      }
    }
  }
}