Home / File/ client.ts — vue Source File

client.ts — vue Source File

Architecture documentation for client.ts, a typescript file in the vue codebase. 4 imports, 0 dependents.

Entity Profile

Dependency Diagram

graph LR
  ec02ebf8_0cff_52d3_7c39_83182ca2e2b1["client.ts"]
  99a6affb_d8d8_b016_2ca6_5459e015e0f9["util.ts"]
  ec02ebf8_0cff_52d3_7c39_83182ca2e2b1 --> 99a6affb_d8d8_b016_2ca6_5459e015e0f9
  11838abe_bf22_0a67_14eb_b6ab497c47e4["getAssetName"]
  ec02ebf8_0cff_52d3_7c39_83182ca2e2b1 --> 11838abe_bf22_0a67_14eb_b6ab497c47e4
  f535a975_7845_514b_b6ff_17229ed679d1["onEmit"]
  ec02ebf8_0cff_52d3_7c39_83182ca2e2b1 --> f535a975_7845_514b_b6ff_17229ed679d1
  d684c337_83a8_2e6a_ffb4_92e30fe4a4f8["stripModuleIdHash"]
  ec02ebf8_0cff_52d3_7c39_83182ca2e2b1 --> d684c337_83a8_2e6a_ffb4_92e30fe4a4f8
  style ec02ebf8_0cff_52d3_7c39_83182ca2e2b1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

const hash = require('hash-sum')
const uniq = require('lodash.uniq')
import { isJS, isCSS, getAssetName, onEmit, stripModuleIdHash } from './util'

export default class VueSSRClientPlugin {
  constructor(options = {}) {
    //@ts-expect-error no type on options
    this.options = Object.assign(
      {
        filename: 'vue-ssr-client-manifest.json'
      },
      options
    )
  }

  apply(compiler) {
    const stage = 'PROCESS_ASSETS_STAGE_ADDITIONAL'
    onEmit(compiler, 'vue-client-plugin', stage, (compilation, cb) => {
      const stats = compilation.getStats().toJson()

      const allFiles = uniq(stats.assets.map(a => a.name))

      const initialFiles = uniq(
        Object.keys(stats.entrypoints)
          .map(name => stats.entrypoints[name].assets)
          .reduce((assets, all) => all.concat(assets), [])
          .map(getAssetName)
          .filter(file => isJS(file) || isCSS(file))
      )

      const asyncFiles = allFiles
        .filter(file => isJS(file) || isCSS(file))
        .filter(file => initialFiles.indexOf(file) < 0)

      const manifest = {
        publicPath: stats.publicPath,
        all: allFiles,
        initial: initialFiles,
        async: asyncFiles,
        modules: {
          /* [identifier: string]: Array<index: number> */
        }
      }

      const assetModules = stats.modules.filter(m => m.assets.length)
      const fileToIndex = asset => manifest.all.indexOf(getAssetName(asset))
      stats.modules.forEach(m => {
        // ignore modules duplicated in multiple chunks
        if (m.chunks.length === 1) {
          const cid = m.chunks[0]
          const chunk = stats.chunks.find(c => c.id === cid)
          if (!chunk || !chunk.files) {
            return
          }
          const id = stripModuleIdHash(m.identifier)
          const files = (manifest.modules[hash(id)] =
            chunk.files.map(fileToIndex))
          // find all asset modules associated with the same chunk
          assetModules.forEach(m => {
            if (m.chunks.some(id => id === cid)) {
              files.push.apply(files, m.assets.map(fileToIndex))
            }
          })
        }
      })

      const json = JSON.stringify(manifest, null, 2)
      //@ts-expect-error no type on options
      compilation.assets[this.options.filename] = {
        source: () => json,
        size: () => json.length
      }
      cb()
    })
  }
}

Subdomains

Frequently Asked Questions

What does client.ts do?
client.ts is a source file in the vue codebase, written in typescript. It belongs to the ServerRenderer domain, TemplateRenderer subdomain.
What does client.ts depend on?
client.ts imports 4 module(s): getAssetName, onEmit, stripModuleIdHash, util.ts.
Where is client.ts in the architecture?
client.ts is located at packages/server-renderer/src/webpack-plugin/client.ts (domain: ServerRenderer, subdomain: TemplateRenderer, directory: packages/server-renderer/src/webpack-plugin).

Analyze Your Own Codebase

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

Try Supermodel Free