Pass the tag explicitly instead of reading it from the internal instance
Sebastian Markbage committed
Nov 17, 2016 at 17:19 UTC
e58b05077369bb0b6bff3f13bc05cd6aeffedf64
1 file changed
+45
-27
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+45
-27
@@ -61,17 +61,17 @@ function getDeclarationErrorAddendum() {
61
return '';
62
}
63
64
-function assertValidProps(component : Fiber, props : ?Object) {
64
+function assertValidProps(tag : string, props : ?Object) {
65
if (!props) {
66
return;
67
}
68
// Note the use of `==` which checks for null or undefined.
69
- if (voidElementTags[component._tag]) {
69
+ if (voidElementTags[tag]) {
70
invariant(
71
props.children == null && props.dangerouslySetInnerHTML == null,
72
'%s is a void element tag and must neither have `children` nor ' +
73
'use `dangerouslySetInnerHTML`.%s',
74
- component._tag,
74
+ tag,
75
getDeclarationErrorAddendum()
76
);
77
}
@@ -116,7 +116,7 @@ function assertValidProps(component : Fiber, props : ?Object) {
116
'The `style` prop expects a mapping from style properties to values, ' +
117
'not a string. For example, style={{marginRight: spacing + \'em\'}} when ' +
118
'using JSX.%s',
119
- getDeclarationErrorAddendum(component)
119
+ getDeclarationErrorAddendum()
120
);
121
}
122
@@ -176,7 +176,7 @@ function trapClickOnNonInteractiveElement(inst) {
176
node.onclick = emptyFunction;
177
}
178
179
-function trapBubbledEventsLocal(inst) {
179
+function trapBubbledEventsLocal(inst, tag) {
180
// If a component renders to null or if another component fatals and causes
181
// the state of the tree to be corrupted, `node` here can be null.
182
var node = getNode(inst);
@@ -186,7 +186,7 @@ function trapBubbledEventsLocal(inst) {
186
);
187
188
// TODO: Make sure that we check isMounted before firing any of these events.
189
- switch (inst._tag) {
189
+ switch (tag) {
190
case 'iframe':
191
case 'object':
192
ReactBrowserEventEmitter.trapBubbledEvent(
@@ -316,7 +316,8 @@ function updateDOMProperties(
316
rootContainerElement : Element,
317
lastProps : null | Object,
318
nextProps : Object,
319
- isCustomComponentTag : boolean
319
+ wasCustomComponentTag : boolean,
320
+ isCustomComponentTag : boolean,
321
) : void {
322
var propKey;
323
var styleName;
@@ -344,7 +345,7 @@ function updateDOMProperties(
345
// Noop
346
} else if (registrationNameModules.hasOwnProperty(propKey)) {
347
// Do nothing for deleted listeners.
347
- } else if (isCustomComponent(workInProgress._tag, lastProps)) {
348
+ } else if (wasCustomComponentTag) {
349
DOMPropertyOperations.deleteValueForAttribute(
350
getNode(workInProgress),
351
propKey
@@ -459,14 +460,16 @@ var ReactDOMFiberComponent = {
460
461
mountComponent: function(
462
workInProgress : Fiber,
463
+ tag : string,
464
rootContainerElement : Element,
465
props : Object,
466
context : Object
467
) : Element {
468
+ // TODO:
469
// validateDangerousTag(tag);
467
- // workInProgress._tag = tag.toLowerCase();
470
+ // tag.toLowerCase(); Do we need to apply lower case only on non-custom elements?
471
469
- switch (workInProgress._tag) {
472
+ switch (tag) {
473
case 'audio':
474
case 'form':
475
case 'iframe':
@@ -511,7 +514,7 @@ var ReactDOMFiberComponent = {
514
break;
515
}
516
514
- assertValidProps(workInProgress, props);
517
+ assertValidProps(tag, props);
518
519
// We create tags in the namespace of their parent container, except HTML
520
// tags get no namespace.
@@ -522,39 +525,38 @@ var ReactDOMFiberComponent = {
525
namespaceURI = DOMNamespaces.html;
526
}
527
if (namespaceURI === DOMNamespaces.html) {
525
- if (workInProgress._tag === 'svg') {
528
+ if (tag === 'svg') {
529
namespaceURI = DOMNamespaces.svg;
527
- } else if (workInProgress._tag === 'math') {
530
+ } else if (tag === 'math') {
531
namespaceURI = DOMNamespaces.mathml;
532
}
533
// TODO: Make this a new root container element.
534
}
535
533
- var type = workInProgress._currentElement.type;
536
var ownerDocument = rootContainerElement.ownerDocument;
537
var el;
538
if (namespaceURI === DOMNamespaces.html) {
537
- if (workInProgress._tag === 'script') {
539
+ if (tag === 'script') {
540
// Create the script via .innerHTML so its "parser-inserted" flag is
541
// set to true and it does not execute
542
var div = ownerDocument.createElement('div');
541
- div.innerHTML = `<${type}></${type}>`;
543
+ div.innerHTML = `<${tag}></${tag}>`;
544
el = div.removeChild(div.firstChild);
545
} else if (props.is) {
544
- el = ownerDocument.createElement(type, props.is);
546
+ el = ownerDocument.createElement(tag, props.is);
547
} else {
548
// Separate else branch instead of using `props.is || undefined` above becuase of a Firefox bug.
549
// See discussion in https://github.com/facebook/react/pull/6896
550
// and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
549
- el = ownerDocument.createElement(type);
551
+ el = ownerDocument.createElement(tag);
552
}
553
} else {
554
el = ownerDocument.createElementNS(
555
namespaceURI,
554
- type
556
+ tag
557
);
558
}
557
- var isCustomComponentTag = isCustomComponent(workInProgress._tag, props);
559
+ var isCustomComponentTag = isCustomComponent(tag, props);
560
if (__DEV__) {
561
if (isCustomComponentTag && !didWarnShadyDOM && el.shadyRoot) {
562
warning(
@@ -567,9 +569,16 @@ var ReactDOMFiberComponent = {
569
}
570
}
571
ReactDOMComponentTree.precacheFiberNode(workInProgress, el);
570
- updateDOMProperties(workInProgress, rootContainerElement, null, props, isCustomComponentTag);
572
+ updateDOMProperties(
573
+ workInProgress,
574
+ rootContainerElement,
575
+ null,
576
+ props,
577
+ false,
578
+ isCustomComponentTag
579
+ );
580
572
- switch (workInProgress._tag) {
581
+ switch (tag) {
582
case 'input':
583
ReactDOMFiberInput.postMountWrapper(workInProgress, props);
584
if (props.autoFocus) {
@@ -608,12 +617,13 @@ var ReactDOMFiberComponent = {
617
receiveComponent: function(
618
workInProgress : Fiber,
619
rootContainerElement : Element,
620
+ tag : string,
621
nextProps : Object,
622
context : Object
623
) {
624
var lastProps = workInProgress.memoizedProps;
625
616
- switch (workInProgress._tag) {
626
+ switch (tag) {
627
case 'input':
628
lastProps = ReactDOMFiberInput.getHostProps(workInProgress, lastProps);
629
nextProps = ReactDOMFiberInput.getHostProps(workInProgress, nextProps);
@@ -638,11 +648,19 @@ var ReactDOMFiberComponent = {
648
break;
649
}
650
641
- assertValidProps(workInProgress, nextProps);
642
- var isCustomComponentTag = isCustomComponent(workInProgress._tag, nextProps);
643
- updateDOMProperties(workInProgress, rootContainerElement, lastProps, nextProps, isCustomComponentTag);
651
+ assertValidProps(tag, nextProps);
652
+ var wasCustomComponentTag = isCustomComponent(tag, lastProps);
653
+ var isCustomComponentTag = isCustomComponent(tag, nextProps);
654
+ updateDOMProperties(
655
+ workInProgress,
656
+ rootContainerElement,
657
+ lastProps,
658
+ nextProps,
659
+ wasCustomComponentTag,
660
+ isCustomComponentTag
661
+ );
662
645
- switch (workInProgress._tag) {
663
+ switch (tag) {
664
case 'input':
665
// Update the wrapper around inputs *after* updating props. This has to
666
// happen after `updateDOMProperties`. Otherwise HTML5 input validations