Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e6ea3d3

Browse files
sebmarkbagesebmarkbage
authored
Use Closure Compiler to compile to ES5 instead of Babel (facebook#18449)
* Upgrade Closure There are newer versions but they don't yet have corresponding releases of google-closure-compiler-osx. * Configure build * Refactor ReactSymbols a bit Provides a little better output.
1 parent 5200547 commit e6ea3d3

File tree

5 files changed

+158
-104
lines changed

5 files changed

+158
-104
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
"flow-bin": "0.97",
6262
"glob": "^7.1.6",
6363
"glob-stream": "^6.1.0",
64-
"google-closure-compiler": "^20200112.0.0",
64+
"google-closure-compiler": "^20200224.0.0",
6565
"gzip-size": "^5.1.1",
6666
"jasmine-check": "^1.0.0-rc.0",
6767
"jest": "^24.9.0",

‎packages/shared/ReactSymbols.js

Lines changed: 37 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,51 +9,44 @@
99

1010
// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
1111
// nor polyfill, then a plain number is used for performance.
12-
const hasSymbol = typeof Symbol === 'function' && Symbol.for;
12+
export let REACT_ELEMENT_TYPE = 0xeac7;
13+
export let REACT_PORTAL_TYPE = 0xeaca;
14+
export let REACT_FRAGMENT_TYPE = 0xeacb;
15+
export let REACT_STRICT_MODE_TYPE = 0xeacc;
16+
export let REACT_PROFILER_TYPE = 0xead2;
17+
export let REACT_PROVIDER_TYPE = 0xeacd;
18+
export let REACT_CONTEXT_TYPE = 0xeace;
19+
export let REACT_FORWARD_REF_TYPE = 0xead0;
20+
export let REACT_SUSPENSE_TYPE = 0xead1;
21+
export let REACT_SUSPENSE_LIST_TYPE = 0xead8;
22+
export let REACT_MEMO_TYPE = 0xead3;
23+
export let REACT_LAZY_TYPE = 0xead4;
24+
export let REACT_BLOCK_TYPE = 0xead9;
25+
export let REACT_SERVER_BLOCK_TYPE = 0xeada;
26+
export let REACT_FUNDAMENTAL_TYPE = 0xead5;
27+
export let REACT_RESPONDER_TYPE = 0xead6;
28+
export let REACT_SCOPE_TYPE = 0xead7;
1329

14-
export const REACT_ELEMENT_TYPE = hasSymbol
15-
? Symbol.for('react.element')
16-
: 0xeac7;
17-
export const REACT_PORTAL_TYPE = hasSymbol
18-
? Symbol.for('react.portal')
19-
: 0xeaca;
20-
export const REACT_FRAGMENT_TYPE = hasSymbol
21-
? Symbol.for('react.fragment')
22-
: 0xeacb;
23-
export const REACT_STRICT_MODE_TYPE = hasSymbol
24-
? Symbol.for('react.strict_mode')
25-
: 0xeacc;
26-
export const REACT_PROFILER_TYPE = hasSymbol
27-
? Symbol.for('react.profiler')
28-
: 0xead2;
29-
export const REACT_PROVIDER_TYPE = hasSymbol
30-
? Symbol.for('react.provider')
31-
: 0xeacd;
32-
export const REACT_CONTEXT_TYPE = hasSymbol
33-
? Symbol.for('react.context')
34-
: 0xeace;
35-
export const REACT_FORWARD_REF_TYPE = hasSymbol
36-
? Symbol.for('react.forward_ref')
37-
: 0xead0;
38-
export const REACT_SUSPENSE_TYPE = hasSymbol
39-
? Symbol.for('react.suspense')
40-
: 0xead1;
41-
export const REACT_SUSPENSE_LIST_TYPE = hasSymbol
42-
? Symbol.for('react.suspense_list')
43-
: 0xead8;
44-
export const REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
45-
export const REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
46-
export const REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
47-
export const REACT_SERVER_BLOCK_TYPE = hasSymbol
48-
? Symbol.for('react.server.block')
49-
: 0xeada;
50-
export const REACT_FUNDAMENTAL_TYPE = hasSymbol
51-
? Symbol.for('react.fundamental')
52-
: 0xead5;
53-
export const REACT_RESPONDER_TYPE = hasSymbol
54-
? Symbol.for('react.responder')
55-
: 0xead6;
56-
export const REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
30+
if (typeof Symbol === 'function' && Symbol.for) {
31+
const symbolFor = Symbol.for;
32+
REACT_ELEMENT_TYPE = symbolFor('react.element');
33+
REACT_PORTAL_TYPE = symbolFor('react.portal');
34+
REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
35+
REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
36+
REACT_PROFILER_TYPE = symbolFor('react.profiler');
37+
REACT_PROVIDER_TYPE = symbolFor('react.provider');
38+
REACT_CONTEXT_TYPE = symbolFor('react.context');
39+
REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
40+
REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
41+
REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
42+
REACT_MEMO_TYPE = symbolFor('react.memo');
43+
REACT_LAZY_TYPE = symbolFor('react.lazy');
44+
REACT_BLOCK_TYPE = symbolFor('react.block');
45+
REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
46+
REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
47+
REACT_RESPONDER_TYPE = symbolFor('react.responder');
48+
REACT_SCOPE_TYPE = symbolFor('react.scope');
49+
}
5750

5851
const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
5952
const FAUX_ITERATOR_SYMBOL = '@@iterator';

‎scripts/rollup/build.js

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,16 +97,49 @@ const errorCodeOpts = {
9797

9898
const closureOptions = {
9999
compilation_level: 'SIMPLE',
100-
language_in: 'ECMASCRIPT5_STRICT',
100+
language_in: 'ECMASCRIPT_2015',
101101
language_out: 'ECMASCRIPT5_STRICT',
102102
env: 'CUSTOM',
103103
warning_level: 'QUIET',
104104
apply_input_source_maps: false,
105105
use_types_for_optimization: false,
106106
process_common_js_modules: false,
107107
rewrite_polyfills: false,
108+
inject_libraries: false,
108109
};
109110

111+
// Non-ES2015 stuff applied before closure compiler.
112+
const babelPlugins = [
113+
// These plugins filter out non-ES2015.
114+
'@babel/plugin-transform-flow-strip-types',
115+
['@babel/plugin-proposal-class-properties', {loose: true}],
116+
'syntax-trailing-function-commas',
117+
// These use loose mode which avoids embedding a runtime.
118+
// TODO: Remove object spread from the source. Prefer Object.assign instead.
119+
[
120+
'@babel/plugin-proposal-object-rest-spread',
121+
{loose: true, useBuiltIns: true},
122+
],
123+
['@babel/plugin-transform-template-literals', {loose: true}],
124+
// TODO: Remove for...of from the source. It requires a runtime to be embedded.
125+
'@babel/plugin-transform-for-of',
126+
// TODO: Remove array spread from the source. Prefer .apply instead.
127+
['@babel/plugin-transform-spread', {loose: true, useBuiltIns: true}],
128+
'@babel/plugin-transform-parameters',
129+
// TODO: Remove array destructuring from the source. Requires runtime.
130+
['@babel/plugin-transform-destructuring', {loose: true, useBuiltIns: true}],
131+
];
132+
133+
const babelToES5Plugins = [
134+
// These plugins transform DEV mode. Closure compiler deals with these in PROD.
135+
'@babel/plugin-transform-literals',
136+
'@babel/plugin-transform-arrow-functions',
137+
'@babel/plugin-transform-block-scoped-functions',
138+
'@babel/plugin-transform-shorthand-properties',
139+
'@babel/plugin-transform-computed-properties',
140+
['@babel/plugin-transform-block-scoping', {throwIfClosureRequired: true}],
141+
];
142+
110143
function getBabelConfig(
111144
updateBabelOptions,
112145
bundleType,
@@ -118,11 +151,14 @@ function getBabelConfig(
118151
packageName === 'react' || externals.indexOf('react') !== -1;
119152
let options = {
120153
exclude: '/**/node_modules/**',
154+
babelrc: false,
155+
configFile: false,
121156
presets: [],
122-
plugins: [],
157+
plugins: [...babelPlugins],
123158
};
124159
if (isDevelopment) {
125160
options.plugins.push(
161+
...babelToES5Plugins,
126162
// Turn console.error/warn() into a custom wrapper
127163
[
128164
require('../babel/transform-replace-console-calls'),
@@ -369,7 +405,7 @@ function getPlugins(
369405
stripBanner({
370406
exclude: 'node_modules/**/*',
371407
}),
372-
// Compile to ES5.
408+
// Compile to ES2015.
373409
babel(
374410
getBabelConfig(
375411
updateBabelOptions,

‎scripts/rollup/plugins/closure-plugin.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,29 @@ function compile(flags) {
1919
});
2020
}
2121

22+
function encodeNativeCalls(code) {
23+
// Closure Compiler tries to install a polyfill if we reference the Symbol global.
24+
// We need to temporarily trick Closure that it's not the built-in it's looking for.
25+
return code.replace(/Symbol/g, 'SymbolTmp');
26+
}
27+
28+
function decodeNativeCalls(code) {
29+
return code.replace(/SymbolTmp/g, 'Symbol');
30+
}
31+
2232
module.exports = function closure(flags = {}) {
2333
return {
2434
name: 'scripts/rollup/plugins/closure-plugin',
2535
async renderChunk(code) {
2636
const inputFile = tmp.fileSync();
2737
const tempPath = inputFile.name;
2838
flags = Object.assign({}, flags, {js: tempPath});
29-
await writeFileAsync(tempPath, code, 'utf8');
39+
const filteredCode = encodeNativeCalls(code);
40+
await writeFileAsync(tempPath, filteredCode, 'utf8');
3041
const compiledCode = await compile(flags);
3142
inputFile.removeCallback();
32-
return {code: compiledCode};
43+
const decodedCode = decodeNativeCalls(compiledCode);
44+
return {code: decodedCode};
3345
},
3446
};
3547
};

0 commit comments

Comments
 (0)