13
13
'use strict' ;
14
14
15
15
import type { Fiber } from 'ReactFiber' ;
16
- import type { HostChildren } from 'ReactFiberReconciler' ;
17
16
import type { ReactNodeList } from 'ReactTypes' ;
18
17
19
18
var ReactBrowserEventEmitter = require ( 'ReactBrowserEventEmitter' ) ;
39
38
} = ReactDOMFiberComponent ;
40
39
var { precacheFiberNode } = ReactDOMComponentTree ;
41
40
41
+ const DOCUMENT_NODE = 9 ;
42
+
42
43
ReactDOMInjection . inject ( ) ;
43
44
ReactControlledComponent . injection . injectFiberControlledHostComponent (
44
45
ReactDOMFiberComponent
@@ -54,23 +55,6 @@ type Props = { className ?: string };
54
55
type Instance = Element ;
55
56
type TextInstance = Text ;
56
57
57
- function recursivelyAppendChildren ( parent : Element , child : HostChildren < Instance | TextInstance > ) {
58
- if ( ! child ) {
59
- return ;
60
- }
61
- /* $FlowFixMe: Element and Text should have this property. */
62
- if ( child . nodeType === 1 || child . nodeType === 3 ) {
63
- /* $FlowFixMe: Refinement issue. I don't know how to express different. */
64
- parent . appendChild ( child ) ;
65
- } else {
66
- /* As a result of the refinement issue this type isn't known. */
67
- let node : any = child ;
68
- do {
69
- recursivelyAppendChildren ( parent , node . output ) ;
70
- } while ( node = node . sibling ) ;
71
- }
72
- }
73
-
74
58
let eventsEnabled : ?boolean = null ;
75
59
let selectionInformation : ?mixed = null ;
76
60
@@ -89,27 +73,28 @@ var DOMRenderer = ReactFiberReconciler({
89
73
eventsEnabled = null ;
90
74
} ,
91
75
92
- updateContainer ( container : Container , children : HostChildren < Instance | TextInstance > ) : void {
93
- // TODO: Containers should update similarly to other parents.
94
- container. innerHTML = '' ;
95
- recursivelyAppendChildren ( container , children ) ;
96
- } ,
97
-
98
76
createInstance (
99
77
type : string ,
100
78
props : Props ,
101
- children : HostChildren < Instance | TextInstance > ,
102
79
internalInstanceHandle : Object
103
80
) : Instance {
104
- const root = document . body ; // HACK
81
+ const root = document . documentElement ; // HACK
105
82
106
83
const domElement : Instance = createElement ( type , props , root ) ;
107
84
precacheFiberNode ( internalInstanceHandle , domElement ) ;
108
- recursivelyAppendChildren ( domElement , children ) ;
109
- setInitialProperties ( domElement , type , props , root ) ;
110
85
return domElement ;
111
86
} ,
112
87
88
+ appendInitialChild ( parentInstance : Instance , child : Instance | TextInstance ) : void {
89
+ parentInstance. appendChild ( child ) ;
90
+ } ,
91
+
92
+ finalizeInitialChildren ( domElement : Instance , type : string , props : Props ) : void {
93
+ const root = document . documentElement ; // HACK
94
+
95
+ setInitialProperties ( domElement , type , props , root ) ;
96
+ } ,
97
+
113
98
prepareUpdate (
114
99
domElement : Instance ,
115
100
oldProps : Props ,
@@ -125,7 +110,7 @@ var DOMRenderer = ReactFiberReconciler({
125
110
internalInstanceHandle : Object
126
111
) : void {
127
112
var type = domElement . tagName . toLowerCase ( ) ; // HACK
128
- var root = document . body ; // HACK
113
+ var root = document . documentElement ; // HACK
129
114
// Update the internal instance handle so that we know which props are
130
115
// the current ones.
131
116
precacheFiberNode ( internalInstanceHandle , domElement ) ;
@@ -142,19 +127,19 @@ var DOMRenderer = ReactFiberReconciler({
142
127
textInstance. nodeValue = newText ;
143
128
} ,
144
129
145
- appendChild ( parentInstance : Instance , child : Instance | TextInstance ) : void {
130
+ appendChild ( parentInstance : Instance | Container , child : Instance | TextInstance ) : void {
146
131
parentInstance. appendChild ( child ) ;
147
132
} ,
148
133
149
134
insertBefore (
150
- parentInstance : Instance ,
135
+ parentInstance : Instance | Container ,
151
136
child : Instance | TextInstance ,
152
137
beforeChild : Instance | TextInstance
153
138
) : void {
154
139
parentInstance. insertBefore ( child , beforeChild ) ;
155
140
} ,
156
141
157
- removeChild ( parentInstance : Instance , child : Instance | TextInstance ) : void {
142
+ removeChild ( parentInstance : Instance | Container , child : Instance | TextInstance ) : void {
158
143
parentInstance. removeChild ( child ) ;
159
144
} ,
160
145
@@ -180,9 +165,15 @@ function warnAboutUnstableUse() {
180
165
warned = true ;
181
166
}
182
167
183
- function renderSubtreeIntoContainer ( parentComponent : ?ReactComponent < any , any , any > , element : ReactElement < any > , container : DOMContainerElement , callback : ?Function ) {
168
+ function renderSubtreeIntoContainer ( parentComponent : ?ReactComponent < any , any , any > , element : ReactElement < any > , containerNode : DOMContainerElement | Document , callback : ?Function ) {
169
+ let container : DOMContainerElement =
170
+ containerNode . nodeType === DOCUMENT_NODE ? ( containerNode : any ) . documentElement : ( containerNode : any ) ;
184
171
let root ;
185
172
if ( ! container . _reactRootContainer ) {
173
+ // First clear any existing content.
174
+ while ( container . lastChild ) {
175
+ container . removeChild ( container . lastChild ) ;
176
+ }
186
177
root = container . _reactRootContainer = DOMRenderer . mountContainer ( element , container , parentComponent , callback ) ;
187
178
} else {
188
179
DOMRenderer . updateContainer ( element , root = container . _reactRootContainer , parentComponent , callback ) ;
@@ -197,12 +188,12 @@ var ReactDOM = {
197
188
return renderSubtreeIntoContainer ( null , element, container, callback) ;
198
189
} ,
199
190
200
- unstable_renderSubtreeIntoContainer ( parentComponent : ReactComponent < any , any , any > , element : ReactElement < any > , container : DOMContainerElement , callback : ?Function ) {
191
+ unstable_renderSubtreeIntoContainer ( parentComponent : ReactComponent < any , any , any > , element : ReactElement < any > , containerNode : DOMContainerElement | Document , callback : ?Function ) {
201
192
invariant (
202
193
parentComponent != null && ReactInstanceMap . has ( parentComponent ) ,
203
194
'parentComponent must be a valid React Component'
204
195
) ;
205
- return renderSubtreeIntoContainer ( parentComponent , element , container , callback ) ;
196
+ return renderSubtreeIntoContainer ( parentComponent , element , containerNode , callback ) ;
206
197
} ,
207
198
208
199
unmountComponentAtNode ( container : DOMContainerElement ) {
0 commit comments