From 93a782b40ba0899ccdf577b4a7f3400667ad577a Mon Sep 17 00:00:00 2001 From: Ben Alpert Date: Fri, 1 May 2015 11:10:59 -0700 Subject: [PATCH] Use Babel to build React Size comparison: ``` raw gz Compared to master @ 6ed98ec0c83918d91b16517544e658e2ec068070 = = build/JSXTransformer.js -15736 -3247 build/react-with-addons.js +287 +7 build/react-with-addons.min.js -14412 -2887 build/react.js +274 +15 build/react.min.js ``` Differences mostly look to be various bits of whitespace that Babel ends up removing during its transforms (https://gist.github.com/spicyj/21ef31f4d95fb7a58daf). In minified files, mostly additions of `"use strict";`. --- bin/jsx-internal | 9 +++++++-- jest/preprocessor.js | 12 +++++++++--- package.json | 3 ++- src/browser/ui/dom/setInnerHTML.js | 6 +++++- src/test/mocks.js | 6 +++--- 5 files changed, 26 insertions(+), 10 deletions(-) diff --git a/bin/jsx-internal b/bin/jsx-internal index 8716d7f1c3..7e4a5cff62 100755 --- a/bin/jsx-internal +++ b/bin/jsx-internal @@ -1,8 +1,10 @@ #!/usr/bin/env node // -*- mode: js -*- +// vim: set ft=javascript : "use strict"; -var transform = require('../main').transform; +var babel = require('babel-core'); + var propagate = require("../vendor/constants").propagate; require("commoner").version( @@ -30,7 +32,10 @@ require("commoner").version( var constants = context.config.constants || {}; // This is where JSX, ES6, etc. desugaring happens. - source = transform(source, {harmony: true, stripTypes: true}); + source = babel.transform(source, { + blacklist: ['spec.functionName', 'validation.react'], + filename: id + }).code; // Constant propagation means removing any obviously dead code after // replacing constant expressions with literal (boolean) values. diff --git a/jest/preprocessor.js b/jest/preprocessor.js index 8f696b33ac..ab2ce32141 100644 --- a/jest/preprocessor.js +++ b/jest/preprocessor.js @@ -1,8 +1,8 @@ 'use strict'; -var ReactTools = require('../main.js'); - +var babel = require('babel-core'); var coffee = require('coffee-script'); + var tsPreprocessor = require('./ts-preprocessor'); var defaultLibraries = [ @@ -20,6 +20,12 @@ module.exports = { if (path.match(/\.ts$/) && !path.match(/\.d\.ts$/)) { return ts.compile(src, path); } - return ReactTools.transform(src, {harmony: true}); + if (!path.match(/\/node_modules\//)) { + return babel.transform(src, { + blacklist: ['spec.functionName', 'validation.react'], + filename: path + }).code; + } + return src; } }; diff --git a/package.json b/package.json index 9c806dddb6..18392a4d2e 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "jstransform": "^10.1.0" }, "devDependencies": { + "babel-core": "^5.2.7", "benchmark": "~1.0.0", "browserify": "^9.0.3", "bundle-collapser": "^1.1.1", @@ -70,7 +71,7 @@ }, "preferGlobal": true, "commonerConfig": { - "version": 4 + "version": 5 }, "scripts": { "test": "jest", diff --git a/src/browser/ui/dom/setInnerHTML.js b/src/browser/ui/dom/setInnerHTML.js index 678bb4068b..5a4a01bf0b 100644 --- a/src/browser/ui/dom/setInnerHTML.js +++ b/src/browser/ui/dom/setInnerHTML.js @@ -67,7 +67,11 @@ if (ExecutionEnvironment.canUseDOM) { html[0] === '<' && NONVISIBLE_TEST.test(html)) { // Recover leading whitespace by temporarily prepending any character. // \uFEFF has the potential advantage of being zero-width/invisible. - node.innerHTML = '\uFEFF' + html; + // UglifyJS drops U+FEFF chars when parsing, so use String.fromCharCode + // in hopes that this is preserved even if "\uFEFF" is transformed to + // the actual Unicode character (by Babel, for example). + // https://github.com/mishoo/UglifyJS2/blob/v2.4.20/lib/parse.js#L216 + node.innerHTML = String.fromCharCode(0xFEFF) + html; // deleteData leaves an empty `TextNode` which offsets the index of all // children. Definitely want to avoid this. diff --git a/src/test/mocks.js b/src/test/mocks.js index 4639219e97..849dc4a510 100644 --- a/src/test/mocks.js +++ b/src/test/mocks.js @@ -69,7 +69,7 @@ function makeComponent(metadata) { instances.push(this); calls.push(Array.prototype.slice.call(arguments)); - if (this instanceof arguments.callee) { + if (this instanceof f) { // This is probably being called as a constructor for (var slot in prototype) { // Copy prototype methods to the instance to make @@ -106,8 +106,8 @@ function makeComponent(metadata) { } // Otherwise use prototype implementation - if (returnValue === undefined && arguments.callee._protoImpl) { - return arguments.callee._protoImpl.apply(this, arguments); + if (returnValue === undefined && f._protoImpl) { + return f._protoImpl.apply(this, arguments); } return returnValue;