Stop using host parent/container internal objects
Instead we extract the namespace from the root element.
Sebastian Markbage committed
Nov 17, 2016 at 16:51 UTC
2defc83f34821e1e5ca62ae1d2ac87a421eff576
1 file changed
+27
-31
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+27
-31
@@ -120,7 +120,7 @@ function assertValidProps(component : Fiber, props : ?Object) {
120
);
121
}
122
123
-function ensureListeningTo(inst, registrationName) {
123
+function ensureListeningTo(rootContainerElement, registrationName) {
124
if (__DEV__) {
125
// IE8 has no API for event capturing and the `onScroll` event doesn't
126
// bubble.
@@ -129,9 +129,8 @@ function ensureListeningTo(inst, registrationName) {
129
'This browser doesn\'t support the `onScroll` event'
130
);
131
}
132
- var containerInfo = inst._hostContainerInfo;
133
- var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
134
- var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
132
+ var isDocumentFragment = rootContainerElement.nodeType === DOC_FRAGMENT_TYPE;
133
+ var doc = isDocumentFragment ? rootContainerElement : rootContainerElement.ownerDocument;
134
listenTo(registrationName, doc);
135
}
136
@@ -314,6 +313,7 @@ function isCustomComponent(tagName, props) {
313
*/
314
function updateDOMProperties(
315
workInProgress : Fiber,
316
+ rootContainerElement : Element,
317
lastProps : null | Object,
318
nextProps : Object,
319
isCustomComponentTag : boolean
@@ -418,7 +418,7 @@ function updateDOMProperties(
418
// Noop
419
} else if (registrationNameModules.hasOwnProperty(propKey)) {
420
if (nextProp) {
421
- ensureListeningTo(workInProgress, propKey);
421
+ ensureListeningTo(rootContainerElement, propKey);
422
}
423
} else if (isCustomComponentTag) {
424
DOMPropertyOperations.setValueForAttribute(
@@ -451,19 +451,21 @@ function updateDOMProperties(
451
452
var ReactDOMFiberComponent = {
453
454
+ // TODO: Use this to keep track of changes to the host context and use this
455
+ // to determine whether we switch to svg and back.
456
+ isNewHostContainer: function(tag : string) {
457
+ return tag === 'svg' || tag === 'foreignobject';
458
+ },
459
+
460
mountComponent: function(
461
workInProgress : Fiber,
462
+ rootContainerElement : Element,
463
props : Object,
457
- hostParent : Fiber,
458
- hostContainerInfo : Object,
464
context : Object
465
) : Element {
466
// validateDangerousTag(tag);
467
// workInProgress._tag = tag.toLowerCase();
468
464
- workInProgress._hostParent = hostParent;
465
- workInProgress._hostContainerInfo = hostContainerInfo;
466
-
469
switch (workInProgress._tag) {
470
case 'audio':
471
case 'form':
@@ -476,7 +478,7 @@ var ReactDOMFiberComponent = {
478
trapBubbledEventsLocal(workInProgress);
479
break;
480
case 'input':
479
- ReactDOMFiberInput.mountWrapper(workInProgress, props, hostParent);
481
+ ReactDOMFiberInput.mountWrapper(workInProgress, props);
482
props = ReactDOMFiberInput.getHostProps(workInProgress, props);
483
// TODO: Make sure we check if this is still unmounted or do any clean
484
// up necessary since we never stop tracking anymore.
@@ -484,28 +486,28 @@ var ReactDOMFiberComponent = {
486
trapBubbledEventsLocal(workInProgress);
487
// For controlled components we always need to ensure we're listening
488
// to onChange. Even if there is no listener.
487
- ensureListeningTo(workInProgress, 'onChange');
489
+ ensureListeningTo(rootContainerElement, 'onChange');
490
break;
491
case 'option':
490
- ReactDOMFiberOption.mountWrapper(workInProgress, props, hostParent);
492
+ ReactDOMFiberOption.mountWrapper(workInProgress, props);
493
props = ReactDOMFiberOption.getHostProps(workInProgress, props);
494
break;
495
case 'select':
494
- ReactDOMFiberSelect.mountWrapper(workInProgress, props, hostParent);
496
+ ReactDOMFiberSelect.mountWrapper(workInProgress, props);
497
props = ReactDOMFiberSelect.getHostProps(workInProgress, props);
498
trapBubbledEventsLocal(workInProgress);
499
// For controlled components we always need to ensure we're listening
500
// to onChange. Even if there is no listener.
499
- ensureListeningTo(workInProgress, 'onChange');
501
+ ensureListeningTo(rootContainerElement, 'onChange');
502
break;
503
case 'textarea':
502
- ReactDOMFiberTextarea.mountWrapper(workInProgress, props, hostParent);
504
+ ReactDOMFiberTextarea.mountWrapper(workInProgress, props);
505
props = ReactDOMFiberTextarea.getHostProps(workInProgress, props);
506
inputValueTracking.track(workInProgress);
507
trapBubbledEventsLocal(workInProgress);
508
// For controlled components we always need to ensure we're listening
509
// to onChange. Even if there is no listener.
508
- ensureListeningTo(workInProgress, 'onChange');
510
+ ensureListeningTo(rootContainerElement, 'onChange');
511
break;
512
}
513
@@ -513,17 +515,10 @@ var ReactDOMFiberComponent = {
515
516
// We create tags in the namespace of their parent container, except HTML
517
// tags get no namespace.
516
- var namespaceURI;
517
- var parentTag;
518
- if (hostParent != null) {
519
- namespaceURI = hostParent._namespaceURI;
520
- parentTag = hostParent._tag;
521
- } else if (hostContainerInfo._tag) {
522
- namespaceURI = hostContainerInfo._namespaceURI;
523
- parentTag = hostContainerInfo._tag;
524
- }
518
+ var namespaceURI = rootContainerElement.namespaceURI;
519
if (namespaceURI == null ||
526
- namespaceURI === DOMNamespaces.svg && parentTag === 'foreignobject') {
520
+ namespaceURI === DOMNamespaces.svg &&
521
+ rootContainerElement.tagName === 'foreignObject') {
522
namespaceURI = DOMNamespaces.html;
523
}
524
if (namespaceURI === DOMNamespaces.html) {
@@ -532,11 +527,11 @@ var ReactDOMFiberComponent = {
527
} else if (workInProgress._tag === 'math') {
528
namespaceURI = DOMNamespaces.mathml;
529
}
530
+ // TODO: Make this a new root container element.
531
}
536
- workInProgress._namespaceURI = namespaceURI;
532
533
var type = workInProgress._currentElement.type;
539
- var ownerDocument = hostContainerInfo._ownerDocument;
534
+ var ownerDocument = rootContainerElement.ownerDocument;
535
var el;
536
if (namespaceURI === DOMNamespaces.html) {
537
if (workInProgress._tag === 'script') {
@@ -572,7 +567,7 @@ var ReactDOMFiberComponent = {
567
}
568
}
569
ReactDOMComponentTree.precacheFiberNode(workInProgress, el);
575
- updateDOMProperties(workInProgress, null, props, isCustomComponentTag);
570
+ updateDOMProperties(workInProgress, rootContainerElement, null, props, isCustomComponentTag);
571
572
switch (workInProgress._tag) {
573
case 'input':
@@ -612,6 +607,7 @@ var ReactDOMFiberComponent = {
607
608
receiveComponent: function(
609
workInProgress : Fiber,
610
+ rootContainerElement : Element,
611
nextProps : Object,
612
context : Object
613
) {
@@ -644,7 +640,7 @@ var ReactDOMFiberComponent = {
640
641
assertValidProps(workInProgress, nextProps);
642
var isCustomComponentTag = isCustomComponent(workInProgress._tag, nextProps);
647
- updateDOMProperties(workInProgress, lastProps, nextProps, isCustomComponentTag);
643
+ updateDOMProperties(workInProgress, rootContainerElement, lastProps, nextProps, isCustomComponentTag);
644
645
switch (workInProgress._tag) {
646
case 'input':