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

attrs.ts — vue Source File

Architecture documentation for attrs.ts, a typescript file in the vue codebase. 6 imports, 3 dependents.

File typescript ServerRenderer TemplateRenderer 6 imports 3 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  bc187cab_30a4_3c2e_1a8b_ee1317ae8c83["attrs.ts"]
  a0033b88_b768_84c8_da01_e6315f54737c["util.ts"]
  bc187cab_30a4_3c2e_1a8b_ee1317ae8c83 --> a0033b88_b768_84c8_da01_e6315f54737c
  1e08374e_4b7f_6901_4657_b7f1d04e4395["escape"]
  bc187cab_30a4_3c2e_1a8b_ee1317ae8c83 --> 1e08374e_4b7f_6901_4657_b7f1d04e4395
  dc8dc7b8_5ebc_4fba_c935_e9310909f8a2["isSSRUnsafeAttr"]
  bc187cab_30a4_3c2e_1a8b_ee1317ae8c83 --> dc8dc7b8_5ebc_4fba_c935_e9310909f8a2
  156bf2e1_8a13_f22d_5437_54f14bcef8fa["util"]
  bc187cab_30a4_3c2e_1a8b_ee1317ae8c83 --> 156bf2e1_8a13_f22d_5437_54f14bcef8fa
  6d00c927_5e4e_8ab1_e4eb_3210e91f735b["attrs"]
  bc187cab_30a4_3c2e_1a8b_ee1317ae8c83 --> 6d00c927_5e4e_8ab1_e4eb_3210e91f735b
  81ed4f13_7d68_6e21_7425_cf978f68576f["vnode"]
  bc187cab_30a4_3c2e_1a8b_ee1317ae8c83 --> 81ed4f13_7d68_6e21_7425_cf978f68576f
  2d0c5ed1_0a31_49db_0a74_ee78b6474708["dom-props.ts"]
  2d0c5ed1_0a31_49db_0a74_ee78b6474708 --> bc187cab_30a4_3c2e_1a8b_ee1317ae8c83
  0b31f4f0_30b4_7b6a_627f_14db65cbd2d8["index.ts"]
  0b31f4f0_30b4_7b6a_627f_14db65cbd2d8 --> bc187cab_30a4_3c2e_1a8b_ee1317ae8c83
  b4035da1_cf86_9027_2643_66e42fd3924f["runtime-helpers.ts"]
  b4035da1_cf86_9027_2643_66e42fd3924f --> bc187cab_30a4_3c2e_1a8b_ee1317ae8c83
  style bc187cab_30a4_3c2e_1a8b_ee1317ae8c83 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { escape } from '../util'

import { isDef, isUndef, extend } from 'shared/util'

import {
  isBooleanAttr,
  isEnumeratedAttr,
  isFalsyAttrValue,
  convertEnumeratedValue
} from 'web/util/attrs'

import { isSSRUnsafeAttr } from '../util'
import type { VNodeWithData } from 'types/vnode'

export default function renderAttrs(node: VNodeWithData): string {
  let attrs = node.data.attrs
  let res = ''

  const opts = node.parent && node.parent.componentOptions
  if (isUndef(opts) || opts.Ctor.options.inheritAttrs !== false) {
    let parent = node.parent
    while (isDef(parent)) {
      // Stop fallthrough in case parent has inheritAttrs option set to false
      if (
        parent.componentOptions &&
        parent.componentOptions.Ctor.options.inheritAttrs === false
      ) {
        break
      }
      if (isDef(parent.data) && isDef(parent.data.attrs)) {
        attrs = extend(extend({}, attrs), parent.data.attrs)
      }
      parent = parent.parent
    }
  }

  if (isUndef(attrs)) {
    return res
  }

  for (const key in attrs) {
    if (isSSRUnsafeAttr(key)) {
      continue
    }
    if (key === 'style') {
      // leave it to the style module
      continue
    }
    res += renderAttr(key, attrs[key])
  }
  return res
}

export function renderAttr(key: string, value: string): string {
  if (isBooleanAttr(key)) {
    if (!isFalsyAttrValue(value)) {
      return ` ${key}="${key}"`
    }
  } else if (isEnumeratedAttr(key)) {
    return ` ${key}="${escape(convertEnumeratedValue(key, value))}"`
  } else if (!isFalsyAttrValue(value)) {
    return ` ${key}="${escape(String(value))}"`
  }
  return ''
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does attrs.ts do?
attrs.ts is a source file in the vue codebase, written in typescript. It belongs to the ServerRenderer domain, TemplateRenderer subdomain.
What functions are defined in attrs.ts?
attrs.ts defines 2 function(s): renderAttr, renderAttrs.
What does attrs.ts depend on?
attrs.ts imports 6 module(s): attrs, escape, isSSRUnsafeAttr, util, util.ts, vnode.
What files import attrs.ts?
attrs.ts is imported by 3 file(s): dom-props.ts, index.ts, runtime-helpers.ts.
Where is attrs.ts in the architecture?
attrs.ts is located at packages/server-renderer/src/modules/attrs.ts (domain: ServerRenderer, subdomain: TemplateRenderer, directory: packages/server-renderer/src/modules).

Analyze Your Own Codebase

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

Try Supermodel Free