vue Architecture Docs
Home / File/ ssr-template.spec.ts — vue Source File

ssr-template.spec.ts — vue Source File

Architecture documentation for ssr-template.spec.ts, a typescript file in the vue codebase. 7 imports, 0 dependents.

File typescript VueCore VDom 7 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  f246650d_e128_4b03_fd24_dee5a38a97e4["ssr-template.spec.ts"]
  376852b3_f7bb_d51e_6be4_247c9f18e863["compile-with-webpack.ts"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> 376852b3_f7bb_d51e_6be4_247c9f18e863
  4bcbdd96_b277_5b96_8526_0f9b1e5719c4["compileWithWebpack"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> 4bcbdd96_b277_5b96_8526_0f9b1e5719c4
  840bac07_32f7_334d_1162_27955fe7db96["createWebpackBundleRenderer"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> 840bac07_32f7_334d_1162_27955fe7db96
  db9e7bef_009d_3918_6e7d_543a36a38d75["vue"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> db9e7bef_009d_3918_6e7d_543a36a38d75
  386e4f98_fa09_48cc_4d7e_50b82a7536ae["index"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> 386e4f98_fa09_48cc_4d7e_50b82a7536ae
  36dccfd6_aff8_9476_e4f3_0d0a9a9bca1d["client"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> 36dccfd6_aff8_9476_e4f3_0d0a9a9bca1d
  9083499b_4ec5_05e2_393e_6ee78c12dd13["create-renderer"]
  f246650d_e128_4b03_fd24_dee5a38a97e4 --> 9083499b_4ec5_05e2_393e_6ee78c12dd13
  style f246650d_e128_4b03_fd24_dee5a38a97e4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

// @vitest-environment node

import Vue from 'vue'
import {
  compileWithWebpack,
  createWebpackBundleRenderer
} from './compile-with-webpack'
import { createRenderer } from 'server/index'
import VueSSRClientPlugin from 'server/webpack-plugin/client'
import { RenderOptions } from 'server/create-renderer'

const defaultTemplate = `<html><head></head><body><!--vue-ssr-outlet--></body></html>`
const interpolateTemplate = `<html><head><title>{{ title }}</title></head><body><!--vue-ssr-outlet-->{{{ snippet }}}</body></html>`

async function generateClientManifest(file: string) {
  const fs = await compileWithWebpack(file, {
    output: {
      path: '/',
      publicPath: '/',
      filename: '[name].js'
    },
    optimization: {
      runtimeChunk: {
        name: 'manifest'
      }
    },
    plugins: [new VueSSRClientPlugin()]
  })
  return JSON.parse(fs.readFileSync('/vue-ssr-client-manifest.json', 'utf-8'))
}

async function createRendererWithManifest(
  file: string,
  options?: RenderOptions
) {
  const clientManifest = await generateClientManifest(file)
  return createWebpackBundleRenderer(
    file,
    Object.assign(
      {
        asBundle: true,
        template: defaultTemplate,
        clientManifest
      },
      options
    )
  )
}

describe('SSR: template option', () => {
  it('renderToString', async () => {
    const renderer = createRenderer({
      template: defaultTemplate
    })

    const context = {
      head: '<meta name="viewport" content="width=device-width">',
      styles: '<style>h1 { color: red }</style>',
      state: { a: 1 }
    }
// ... (571 more lines)

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does ssr-template.spec.ts do?
ssr-template.spec.ts is a source file in the vue codebase, written in typescript. It belongs to the VueCore domain, VDom subdomain.
What functions are defined in ssr-template.spec.ts?
ssr-template.spec.ts defines 2 function(s): createRendererWithManifest, generateClientManifest.
What does ssr-template.spec.ts depend on?
ssr-template.spec.ts imports 7 module(s): client, compile-with-webpack.ts, compileWithWebpack, create-renderer, createWebpackBundleRenderer, index, vue.
Where is ssr-template.spec.ts in the architecture?
ssr-template.spec.ts is located at packages/server-renderer/test/ssr-template.spec.ts (domain: VueCore, subdomain: VDom, directory: packages/server-renderer/test).

Analyze Your Own Codebase

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

Try Supermodel Free