Home / Function/ transformNode() — vue Function Reference

transformNode() — vue Function Reference

Architecture documentation for the transformNode() function in style.ts from the vue codebase.

Function typescript WebPlatform WebCompiler calls 4

Entity Profile

Dependency Diagram

graph TD
  6ff8ece7_aa25_0786_1ca4_98f18f60c01c["transformNode()"]
  b701a596_9c82_7ec4_2fc8_2e36d33c4974["getAndRemoveAttr()"]
  6ff8ece7_aa25_0786_1ca4_98f18f60c01c -->|calls| b701a596_9c82_7ec4_2fc8_2e36d33c4974
  0a22351a_c237_f9ca_df3f_a6e82bad69d8["parseText()"]
  6ff8ece7_aa25_0786_1ca4_98f18f60c01c -->|calls| 0a22351a_c237_f9ca_df3f_a6e82bad69d8
  c12b5087_c2dd_0dcd_db62_ddbbe838d7fc["parseStyleText()"]
  6ff8ece7_aa25_0786_1ca4_98f18f60c01c -->|calls| c12b5087_c2dd_0dcd_db62_ddbbe838d7fc
  0d1a9a6d_9f27_26ff_a82e_63f0ab50e4ee["getBindingAttr()"]
  6ff8ece7_aa25_0786_1ca4_98f18f60c01c -->|calls| 0d1a9a6d_9f27_26ff_a82e_63f0ab50e4ee
  style 6ff8ece7_aa25_0786_1ca4_98f18f60c01c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/compiler/modules/style.ts lines 6–30

function transformNode(el: ASTElement, options: CompilerOptions) {
  const warn = options.warn || baseWarn
  const staticStyle = getAndRemoveAttr(el, 'style')
  if (staticStyle) {
    /* istanbul ignore if */
    if (__DEV__) {
      const res = parseText(staticStyle, options.delimiters)
      if (res) {
        warn(
          `style="${staticStyle}": ` +
            'Interpolation inside attributes has been removed. ' +
            'Use v-bind or the colon shorthand instead. For example, ' +
            'instead of <div style="{{ val }}">, use <div :style="val">.',
          el.rawAttrsMap['style']
        )
      }
    }
    el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
  }

  const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
  if (styleBinding) {
    el.styleBinding = styleBinding
  }
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does transformNode() do?
transformNode() is a function in the vue codebase.
What does transformNode() call?
transformNode() calls 4 function(s): getAndRemoveAttr, getBindingAttr, parseStyleText, parseText.

Analyze Your Own Codebase

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

Try Supermodel Free