vue Architecture Docs
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
  6758f672_6a56_f76d_7ea5_63af7382caff["transformNode()"]
  b54f5bfb_1a4e_430d_f7d5_41f81c9a1ab3["getAndRemoveAttr()"]
  6758f672_6a56_f76d_7ea5_63af7382caff -->|calls| b54f5bfb_1a4e_430d_f7d5_41f81c9a1ab3
  98ee1e5f_4546_f8dd_b03c_1579380b057f["parseText()"]
  6758f672_6a56_f76d_7ea5_63af7382caff -->|calls| 98ee1e5f_4546_f8dd_b03c_1579380b057f
  6035f657_5899_1773_aa74_0b3c968a42fe["parseStyleText()"]
  6758f672_6a56_f76d_7ea5_63af7382caff -->|calls| 6035f657_5899_1773_aa74_0b3c968a42fe
  2e03f8d2_4a5a_f1cd_1d7b_db95ba63549e["getBindingAttr()"]
  6758f672_6a56_f76d_7ea5_63af7382caff -->|calls| 2e03f8d2_4a5a_f1cd_1d7b_db95ba63549e
  style 6758f672_6a56_f76d_7ea5_63af7382caff 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