createRenderer() — vue Function Reference

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

Function typescript ServerRenderer TemplateRenderer calls 6 called by 1

Entity Profile

ServerRenderer→ TemplateRenderer→ createRenderer() — vue Function Reference

Dependency Diagram

graph TD
  de548355_dee5_dd21_62f9_410697a83cc6["createRenderer()"]
  38cdd14a_61b8_35ed_893f_b542594d7017["create-renderer.ts"]
  de548355_dee5_dd21_62f9_410697a83cc6 -->|defined in| 38cdd14a_61b8_35ed_893f_b542594d7017
  209f4be6_e015_fc89_c153_21caf40c00af["createBundleRendererCreator()"]
  209f4be6_e015_fc89_c153_21caf40c00af -->|calls| de548355_dee5_dd21_62f9_410697a83cc6
  35709e8a_b6bd_4fb5_7079_31de385b8542["createRenderFunction()"]
  de548355_dee5_dd21_62f9_410697a83cc6 -->|calls| 35709e8a_b6bd_4fb5_7079_31de385b8542
  5d2cd3b5_081a_3cb2_2e2c_6698f0a2c907["bindRenderFns()"]
  de548355_dee5_dd21_62f9_410697a83cc6 -->|calls| 5d2cd3b5_081a_3cb2_2e2c_6698f0a2c907
  44d22c0e_d64d_e680_50d4_d4cf20f4c4b8["createPromiseCallback()"]
  de548355_dee5_dd21_62f9_410697a83cc6 -->|calls| 44d22c0e_d64d_e680_50d4_d4cf20f4c4b8
  5086a0f6_8276_ebf4_9891_182f4be074f2["createWriteFunction()"]
  de548355_dee5_dd21_62f9_410697a83cc6 -->|calls| 5086a0f6_8276_ebf4_9891_182f4be074f2
  31737441_3215_1599_6096_babd073ce4a3["render()"]
  de548355_dee5_dd21_62f9_410697a83cc6 -->|calls| 31737441_3215_1599_6096_babd073ce4a3
  7a01e46c_cb57_f4b6_f87e_9ad369aa019d["createStream()"]
  de548355_dee5_dd21_62f9_410697a83cc6 -->|calls| 7a01e46c_cb57_f4b6_f87e_9ad369aa019d
  style de548355_dee5_dd21_62f9_410697a83cc6 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
    },