vue Architecture Docs
Home / Function/ transform() — vue Function Reference

transform() — vue Function Reference

Architecture documentation for the transform() function in srcset.ts from the vue codebase.

Function typescript CompilerSFC ScriptCompiler calls 2

Entity Profile

Dependency Diagram

graph TD
  9806d4c8_1f8b_eef1_02b1_ca958f0b0e01["transform()"]
  85c84789_cf5f_3077_96f3_7206f35f33ec["transform()"]
  9806d4c8_1f8b_eef1_02b1_ca958f0b0e01 -->|calls| 85c84789_cf5f_3077_96f3_7206f35f33ec
  90eed22c_58dc_8abb_a418_7c84bdd13880["urlToRequire()"]
  9806d4c8_1f8b_eef1_02b1_ca958f0b0e01 -->|calls| 90eed22c_58dc_8abb_a418_7c84bdd13880
  style 9806d4c8_1f8b_eef1_02b1_ca958f0b0e01 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/compiler-sfc/src/templateCompilerModules/srcset.ts lines 21–76

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

Calls

Source

Frequently Asked Questions

What does transform() do?
transform() is a function in the vue codebase.
What does transform() call?
transform() calls 2 function(s): transform, urlToRequire.

Analyze Your Own Codebase

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

Try Supermodel Free