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 1

Entity Profile

ServerRenderer→ BundleRenderer→ createRenderer() — vue Function Reference

Dependency Diagram

graph TD
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52["createRenderer()"]
  53b05d28_585e_4d3e_ad81_d6a7ef6875f2["create-renderer.ts"]
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 -->|defined in| 53b05d28_585e_4d3e_ad81_d6a7ef6875f2
  12e2c88e_c7c5_fea0_a285_dc96ab9156f5["createBundleRendererCreator()"]
  12e2c88e_c7c5_fea0_a285_dc96ab9156f5 -->|calls| 1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52
  7ae3edb4_84c6_0281_9ecf_c1bb0face36e["createRenderFunction()"]
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 -->|calls| 7ae3edb4_84c6_0281_9ecf_c1bb0face36e
  f07ce837_f1b1_3c7f_1e83_fc7a3e6ac523["bindRenderFns()"]
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 -->|calls| f07ce837_f1b1_3c7f_1e83_fc7a3e6ac523
  46da04ac_8d5c_f991_fddd_ba38b64b6398["createPromiseCallback()"]
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 -->|calls| 46da04ac_8d5c_f991_fddd_ba38b64b6398
  208f6731_ceac_754f_49df_75211ecf996c["createWriteFunction()"]
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 -->|calls| 208f6731_ceac_754f_49df_75211ecf996c
  c2756fe6_1f1e_29d1_4e0a_75be9f92ec3b["render()"]
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 -->|calls| c2756fe6_1f1e_29d1_4e0a_75be9f92ec3b
  0e1a08dc_34b7_e3a6_2c6e_9ccddca3d0de["createStream()"]
  1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 -->|calls| 0e1a08dc_34b7_e3a6_2c6e_9ccddca3d0de
  style 1c60f0eb_7fcc_3a6b_d886_ed0ac8152d52 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
    },