warnForExtraAttributes() — react Function Reference

Architecture documentation for the warnForExtraAttributes() function in ReactDOMComponent.js from the react codebase.

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ warnForExtraAttributes() — react Function Reference

Dependency Diagram

graph TD
  255bc5ba_4119_c519_1a8a_dd9223b03b3e["warnForExtraAttributes()"]
  1e990658_7cea_75be_1f24_2399bdf9f15b["ReactDOMComponent.js"]
  255bc5ba_4119_c519_1a8a_dd9223b03b3e -->|defined in| 1e990658_7cea_75be_1f24_2399bdf9f15b
  3246fe42_26b8_0630_2d76_6dda95625fe3["diffHydratedProperties()"]
  3246fe42_26b8_0630_2d76_6dda95625fe3 -->|calls| 255bc5ba_4119_c519_1a8a_dd9223b03b3e
  f4f229a8_f7a0_02d6_4675_de4c6a758e99["isExpectedViewTransitionName()"]
  255bc5ba_4119_c519_1a8a_dd9223b03b3e -->|calls| f4f229a8_f7a0_02d6_4675_de4c6a758e99
  2424f02e_480c_609e_b8f6_8b7a23d93641["getStylesObjectFromElement()"]
  255bc5ba_4119_c519_1a8a_dd9223b03b3e -->|calls| 2424f02e_480c_609e_b8f6_8b7a23d93641
  b5cfc303_8130_b696_4bd4_0f0ebf186511["getPropNameFromAttributeName()"]
  255bc5ba_4119_c519_1a8a_dd9223b03b3e -->|calls| b5cfc303_8130_b696_4bd4_0f0ebf186511
  style 255bc5ba_4119_c519_1a8a_dd9223b03b3e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/ReactDOMComponent.js lines 263–294

function warnForExtraAttributes(
  domElement: Element,
  attributeNames: Set<string>,
  serverDifferences: {[propName: string]: mixed},
) {
  if (__DEV__) {
    attributeNames.forEach(function (attributeName) {
      if (attributeName === 'style') {
        if (domElement.getAttribute(attributeName) === '') {
          // Skip empty style. It's fine.
          return;
        }
        const htmlElement = ((domElement: any): HTMLElement);
        const style = htmlElement.style;
        const isOnlyVTStyles =
          (style.length === 1 && style[0] === 'view-transition-name') ||
          (style.length === 2 &&
            style[0] === 'view-transition-class' &&
            style[1] === 'view-transition-name');
        if (isOnlyVTStyles && isExpectedViewTransitionName(htmlElement)) {
          // If the only extra style was the view-transition-name that we applied from the Fizz
          // runtime, then we should ignore it.
        } else {
          serverDifferences.style = getStylesObjectFromElement(domElement);
        }
      } else {
        serverDifferences[getPropNameFromAttributeName(attributeName)] =
          domElement.getAttribute(attributeName);
      }
    });
  }
}