vue Architecture Docs
Home / File/ srcset.ts — vue Source File

srcset.ts — vue Source File

Architecture documentation for srcset.ts, a typescript file in the vue codebase. 5 imports, 1 dependents.

File typescript SfcCompiler ScriptCompiler 5 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  d1a7581d_37f4_760f_46fe_99640069e5dd["srcset.ts"]
  c7f42e34_1c62_9250_3035_ae380c3322e2["utils.ts"]
  d1a7581d_37f4_760f_46fe_99640069e5dd --> c7f42e34_1c62_9250_3035_ae380c3322e2
  8fd1d7ae_4758_a029_20c6_a5380f519c70["urlToRequire"]
  d1a7581d_37f4_760f_46fe_99640069e5dd --> 8fd1d7ae_4758_a029_20c6_a5380f519c70
  cae36964_2fe7_a649_0189_6f756f42c7f5["assetUrl.ts"]
  d1a7581d_37f4_760f_46fe_99640069e5dd --> cae36964_2fe7_a649_0189_6f756f42c7f5
  43eac639_4f58_466c_2a30_0af4c4f2e699["TransformAssetUrlsOptions"]
  d1a7581d_37f4_760f_46fe_99640069e5dd --> 43eac639_4f58_466c_2a30_0af4c4f2e699
  a80b8e3b_d720_9146_3bf6_594d4ee5dd77["compiler"]
  d1a7581d_37f4_760f_46fe_99640069e5dd --> a80b8e3b_d720_9146_3bf6_594d4ee5dd77
  b824bd73_da14_5076_9939_3d47171265ea["compileTemplate.ts"]
  b824bd73_da14_5076_9939_3d47171265ea --> d1a7581d_37f4_760f_46fe_99640069e5dd
  style d1a7581d_37f4_760f_46fe_99640069e5dd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

// vue compiler module for transforming `img:srcset` to a number of `require`s

import { urlToRequire } from './utils'
import { TransformAssetUrlsOptions } from './assetUrl'
import { ASTNode } from 'types/compiler'

interface ImageCandidate {
  require: string
  descriptor: string
}

export default (transformAssetUrlsOptions?: TransformAssetUrlsOptions) => ({
  postTransformNode: (node: ASTNode) => {
    transform(node, transformAssetUrlsOptions)
  }
})

// http://w3c.github.io/html/semantics-embedded-content.html#ref-for-image-candidate-string-5
const escapedSpaceCharacters = /( |\\t|\\n|\\f|\\r)+/g

function transform(
  node: ASTNode,
  transformAssetUrlsOptions?: TransformAssetUrlsOptions
) {
  if (node.type !== 1 || !node.attrs) {
    return
  }

  if (node.tag === 'img' || node.tag === 'source') {
    node.attrs.forEach(attr => {
      if (attr.name === 'srcset') {
        // same logic as in transform-require.js
        const value = attr.value
        const isStatic =
          value.charAt(0) === '"' && value.charAt(value.length - 1) === '"'
        if (!isStatic) {
          return
        }

        const imageCandidates: ImageCandidate[] = value
          .slice(1, -1)
          .split(',')
          .map(s => {
            // The attribute value arrives here with all whitespace, except
            // normal spaces, represented by escape sequences
            const [url, descriptor] = s
              .replace(escapedSpaceCharacters, ' ')
              .trim()
              .split(' ', 2)
            return {
              require: urlToRequire(url, transformAssetUrlsOptions),
              descriptor
            }
          })

        // "require(url1)"
        // "require(url1) 1x"
        // "require(url1), require(url2)"
        // "require(url1), require(url2) 2x"
        // "require(url1) 1x, require(url2)"
        // "require(url1) 1x, require(url2) 2x"
        const code = imageCandidates
          .map(
            ({ require, descriptor }) =>
              `${require} + "${descriptor ? ' ' + descriptor : ''}, " + `
          )
          .join('')
          .slice(0, -6)
          .concat('"')
          .replace(/ \+ ""$/, '')

        attr.value = code
      }
    })
  }
}

Domain

Subdomains

Functions

Types

Dependencies

Imported By

Source

Frequently Asked Questions

What does srcset.ts do?
srcset.ts is a source file in the vue codebase, written in typescript. It belongs to the SfcCompiler domain, ScriptCompiler subdomain.
What functions are defined in srcset.ts?
srcset.ts defines 1 function(s): transform.
What does srcset.ts depend on?
srcset.ts imports 5 module(s): TransformAssetUrlsOptions, assetUrl.ts, compiler, urlToRequire, utils.ts.
What files import srcset.ts?
srcset.ts is imported by 1 file(s): compileTemplate.ts.
Where is srcset.ts in the architecture?
srcset.ts is located at packages/compiler-sfc/src/templateCompilerModules/srcset.ts (domain: SfcCompiler, subdomain: ScriptCompiler, directory: packages/compiler-sfc/src/templateCompilerModules).

Analyze Your Own Codebase

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

Try Supermodel Free