Build React DOM Fiber package (#7173)
This builds a `react-dom-fiber.js` bundle which exposes ReactDOMFiber. This allows early experiments with the new Fiber reconciler. I also expose it in the npm package through `react-dom/fiber`.
Sebastian Markbåge committed
Aug 10, 2016 at 18:45 UTC
f7e0db9a181f042c4c7ec55250786ac2e96e40db
5 files changed
+81
-5
Gruntfile.js
+12
@@ -137,6 +137,16 @@ module.exports = function(grunt) {
137
'version-check',
138
'browserify:domServerMin',
139
]);
140
+ grunt.registerTask('build:dom-fiber', [
141
+ 'build-modules',
142
+ 'version-check',
143
+ 'browserify:domFiber',
144
+ ]);
145
+ grunt.registerTask('build:dom-fiber-min', [
146
+ 'build-modules',
147
+ 'version-check',
148
+ 'browserify:domFiberMin',
149
+ ]);
150
grunt.registerTask('build:npm-react', [
151
'version-check',
152
'build-modules',
@@ -164,6 +174,8 @@ module.exports = function(grunt) {
174
'browserify:domMin',
175
'browserify:domServer',
176
'browserify:domServerMin',
177
+ 'browserify:domFiber',
178
+ 'browserify:domFiberMin',
179
'npm-react:release',
180
'npm-react:pack',
181
'npm-react-dom:release',
examples/fiber/index.html
+2
-2
@@ -18,7 +18,7 @@
18
</p>
19
</div>
20
<script src="../../build/react.js"></script>
21
- <script src="../../build/react-dom.js"></script>
21
+ <script src="../../build/react-dom-fiber.js"></script>
22
<script>
23
function ExampleApplication(props) {
24
var elapsed = Math.round(props.elapsed / 100);
@@ -34,7 +34,7 @@
34
35
var start = new Date().getTime();
36
setInterval(function() {
37
- ReactDOM.render(
37
+ ReactDOMFiber.render(
38
ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
39
document.getElementById('container')
40
);
grunt/config/browserify.js
+46
@@ -35,6 +35,18 @@ for (var key in shimSharedModulesFiles) {
35
36
var shimSharedModules = globalShim.configure(shimSharedModulesFiles);
37
38
+// Fiber needs the symbol from ReactElement right now. So we can't shim
39
+// ReactElement. Otherwise this would just be the same as above.
40
+// TODO: Refactor this so that Fiber can access the symbol without bringing in
41
+// the rest of ReactElement.
42
+var shimSharedModulesFiberFiles = {};
43
+for (var key in shimSharedModulesFiles) {
44
+ if (!/ReactElement/.test(key)) {
45
+ shimSharedModulesFiberFiles[key] = shimSharedModulesFiles[key];
46
+ }
47
+}
48
+var shimSharedModulesFiber = globalShim.configure(shimSharedModulesFiberFiles);
49
+
50
var shimDOMModules = aliasify.configure({
51
'aliases': {
52
'./ReactAddonsDOMDependencies': {relative: './ReactAddonsDOMDependenciesUMDShim'},
@@ -204,6 +216,38 @@ var domServerMin = {
216
after: [minify, bannerify],
217
};
218
219
+var domFiber = {
220
+ entries: [
221
+ './build/node_modules/react-dom/lib/ReactDOMFiber.js',
222
+ ],
223
+ outfile: './build/react-dom-fiber.js',
224
+ debug: false,
225
+ standalone: 'ReactDOMFiber',
226
+ // Apply as global transform so that we also envify fbjs and any other deps
227
+ transforms: [shimSharedModulesFiber],
228
+ globalTransforms: [envifyDev],
229
+ plugins: [collapser],
230
+ after: [derequire, simpleBannerify],
231
+};
232
+
233
+var domFiberMin = {
234
+ entries: [
235
+ './build/node_modules/react-dom/lib/ReactDOMFiber.js',
236
+ ],
237
+ outfile: './build/react-dom-fiber.min.js',
238
+ debug: false,
239
+ standalone: 'ReactDOMFiber',
240
+ // Envify twice. The first ensures that when we uglifyify, we have the right
241
+ // conditions to exclude requires. The global transform runs on deps.
242
+ transforms: [shimSharedModulesFiber, envifyProd, uglifyify],
243
+ globalTransforms: [envifyProd],
244
+ plugins: [collapser],
245
+ // No need to derequire because the minifier will mangle
246
+ // the "require" calls.
247
+
248
+ after: [minify, bannerify],
249
+};
250
+
251
module.exports = {
252
basic: basic,
253
min: min,
@@ -213,4 +257,6 @@ module.exports = {
257
domMin: domMin,
258
domServer: domServer,
259
domServerMin: domServerMin,
260
+ domFiber: domFiber,
261
+ domFiberMin: domFiberMin,
262
};
packages/react-dom/fiber.js
new
+3
@@ -0,0 +1,3 @@
1
+'use strict';
2
+
3
+module.exports = require('./lib/ReactDOMFiber');
src/renderers/dom/fiber/ReactDOMFiber.js
+18
-3
@@ -16,6 +16,8 @@ import type { HostChildren } from 'ReactFiberReconciler';
16
17
var ReactFiberReconciler = require('ReactFiberReconciler');
18
19
+var warning = require('warning');
20
+
21
type DOMContainerElement = Element & { _reactRootContainer: ?Object };
22
23
type Container = Element;
@@ -56,9 +58,9 @@ var DOMRenderer = ReactFiberReconciler({
58
},
59
60
prepareUpdate(
59
- domElement : Instance,
60
- oldProps : Props,
61
- newProps : Props,
61
+ domElement : Instance,
62
+ oldProps : Props,
63
+ newProps : Props,
64
children : HostChildren<Instance>
65
) : boolean {
66
return true;
@@ -82,9 +84,21 @@ var DOMRenderer = ReactFiberReconciler({
84
85
});
86
87
+var warned = false;
88
+
89
+function warnAboutUnstableUse() {
90
+ warning(
91
+ warned,
92
+ 'You are using React DOM Fiber which is an experimental renderer. ' +
93
+ 'It is likely to have bugs, breaking changes and is unsupported.'
94
+ );
95
+ warned = true;
96
+}
97
+
98
var ReactDOM = {
99
100
render(element : ReactElement<any>, container : DOMContainerElement) {
101
+ warnAboutUnstableUse();
102
if (!container._reactRootContainer) {
103
container._reactRootContainer = DOMRenderer.mountContainer(element, container);
104
} else {
@@ -93,6 +107,7 @@ var ReactDOM = {
107
},
108
109
unmountComponentAtNode(container : DOMContainerElement) {
110
+ warnAboutUnstableUse();
111
const root = container._reactRootContainer;
112
if (root) {
113
// TODO: Is it safe to reset this now or should I wait since this