Remove old IE polyfill code (#10238)

* Upgrade DOM Fixtures Upgrade to react-scripts v1 and include required polyfills for older browsers * Remove ChangeEvent polyfills for unsupported browsers
facebook · Aug 3, 2017 · 0b220d0 · 0b220d0
1 parent c1833b4
commit 0b220d0
Show file tree

Hide file tree

Showing 21 changed files with 191 additions and 253 deletions.
diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.9.5"
+    "react-scripts": "1.0.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "query-string": "^4.2.3",
+    "core-js": "^2.4.1",
     "prop-types": "^15.5.6",
+    "query-string": "^4.2.3",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "semver": "^5.3.0"

diff --git a/fixtures/dom/public/index.html b/fixtures/dom/public/index.html
@@ -15,7 +15,6 @@
     -->
     <title>React App</title>
     <script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
-    <script src="react-loader.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/fixtures/dom/public/react-loader.js b/fixtures/dom/public/react-loader.js
diff --git a/fixtures/dom/src/components/App.js b/fixtures/dom/src/components/App.js
@@ -1,9 +1,9 @@
-const React = window.React;
 import Header from './Header';
 import Fixtures from './fixtures';
-
 import '../style.css';
 
+const React = window.React;
+
 function App() {
   return (
     <div>

diff --git a/fixtures/dom/src/components/fixtures/buttons/index.js b/fixtures/dom/src/components/fixtures/buttons/index.js
@@ -1,8 +1,8 @@
-const React = window.React;
-
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 
+const React = window.React;
+
 function onButtonClick() {
   window.alert(`This shouldn't have happened!`);
 }

diff --git a/fixtures/dom/src/components/fixtures/error-handling/index.js b/fixtures/dom/src/components/fixtures/error-handling/index.js
@@ -1,8 +1,8 @@
-const React = window.React;
-
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 
+const React = window.React;
+
 function BadRender(props) {
   throw props.error;
 }

diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
@@ -1,4 +1,3 @@
-const React = window.React;
 import RangeInputFixtures from './range-inputs';
 import TextInputFixtures from './text-inputs';
 import SelectFixtures from './selects';
@@ -10,6 +9,8 @@ import ButtonFixtures from './buttons';
 import DateInputFixtures from './date-inputs';
 import ErrorHandling from './error-handling';
 
+const React = window.React;
+
 /**
  * A simple routing component that renders the appropriate
  * fixture based on the location pathname.
@@ -41,4 +42,4 @@ function FixturesPage() {
   }
 }
 
-module.exports = FixturesPage;
+export default FixturesPage;
diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputDecimal.js
@@ -1,7 +1,7 @@
-const React = window.React;
-
 import Fixture from '../../Fixture';
 
+const React = window.React;
+
 class NumberInputDecimal extends React.Component {
   state = {value: '.98'};
   changeValue = () => {

diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberInputExtraZeroes.js
@@ -1,7 +1,7 @@
-const React = window.React;
-
 import Fixture from '../../Fixture';
 
+const React = window.React;
+
 class NumberInputExtraZeroes extends React.Component {
   state = {value: '3.0000'};
   changeValue = () => {

diff --git a/fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js b/fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
@@ -1,7 +1,7 @@
-const React = window.React;
-
 import Fixture from '../../Fixture';
 
+const React = window.React;
+
 class NumberTestCase extends React.Component {
   state = {value: ''};
   onChange = event => {

diff --git a/fixtures/dom/src/components/fixtures/number-inputs/index.js b/fixtures/dom/src/components/fixtures/number-inputs/index.js
@@ -1,11 +1,11 @@
-const React = window.React;
-
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 import NumberTestCase from './NumberTestCase';
 import NumberInputDecimal from './NumberInputDecimal';
 import NumberInputExtraZeroes from './NumberInputExtraZeroes';
 
+const React = window.React;
+
 function NumberInputs() {
   return (
     <FixtureSet

diff --git a/fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js b/fixtures/dom/src/components/fixtures/password-inputs/PasswordTestCase.js
@@ -1,7 +1,7 @@
-const React = window.React;
-
 import Fixture from '../../Fixture';
 
+const React = window.React;
+
 class PasswordTestCase extends React.Component {
   state = {value: ''};
   onChange = event => {

diff --git a/fixtures/dom/src/components/fixtures/password-inputs/index.js b/fixtures/dom/src/components/fixtures/password-inputs/index.js
@@ -1,9 +1,9 @@
-const React = window.React;
-
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 import PasswordTestCase from './PasswordTestCase';
 
+const React = window.React;
+
 function NumberInputs() {
   return (
     <FixtureSet title="Password inputs" description="">

diff --git a/fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js b/fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.js
@@ -1,6 +1,5 @@
-const React = window.React;
-
 import Fixture from '../../Fixture';
+const React = window.React;
 
 class InputTestCase extends React.Component {
   static defaultProps = {

diff --git a/fixtures/dom/src/components/fixtures/text-inputs/index.js b/fixtures/dom/src/components/fixtures/text-inputs/index.js
@@ -1,10 +1,10 @@
-const React = window.React;
-
 import Fixture from '../../Fixture';
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 import InputTestCase from './InputTestCase';
 
+const React = window.React;
+
 class TextInputFixtures extends React.Component {
   render() {
     return (
@@ -93,4 +93,4 @@ class TextInputFixtures extends React.Component {
   }
 }
 
-module.exports = TextInputFixtures;
+export default TextInputFixtures;
diff --git a/fixtures/dom/src/index.js b/fixtures/dom/src/index.js
@@ -1,5 +1,11 @@
-const React = window.React;
-const ReactDOM = window.ReactDOM;
-import App from './components/App';
+import './polyfills';
+import loadReact from './react-loader';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+loadReact().then(() => import('./components/App')).then(App => {
+  const {React, ReactDOM} = window;
+
+  ReactDOM.render(
+    React.createElement(App.default),
+    document.getElementById('root')
+  );
+});
diff --git a/fixtures/dom/src/polyfills.js b/fixtures/dom/src/polyfills.js
@@ -0,0 +1,35 @@
+import 'core-js/es6/promise';
+import 'core-js/es6/set';
+import 'core-js/es6/map';
+
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+// MIT license
+(function() {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame =
+      window[vendors[x] + 'CancelAnimationFrame'] ||
+      window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+
+  if (!window.requestAnimationFrame)
+    window.requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() {
+        callback(currTime + timeToCall);
+      }, timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+
+  if (!window.cancelAnimationFrame)
+    window.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };
+})();
diff --git a/fixtures/dom/src/react-loader.js b/fixtures/dom/src/react-loader.js
@@ -0,0 +1,63 @@
+/**
+ * Take a version from the window query string and load a specific
+ * version of React.
+ *
+ * @example
+ * http://localhost:3000?version=15.4.1
+ * (Loads React 15.4.1)
+ */
+
+function parseQuery(qstr) {
+  var query = {};
+  var a = qstr.substr(1).split('&');
+
+  for (var i = 0; i < a.length; i++) {
+    var b = a[i].split('=');
+    query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
+  }
+  return query;
+}
+
+function loadScript(src) {
+  let firstScript = document.getElementsByTagName('script')[0];
+  let scriptNode;
+
+  return new Promise((resolve, reject) => {
+    scriptNode = document.createElement('script');
+    scriptNode.async = 1;
+    scriptNode.src = src;
+
+    scriptNode.onload = () => resolve();
+    scriptNode.onerror = () => reject(new Error(`failed to load: ${src}`));
+
+    firstScript.parentNode.insertBefore(scriptNode, firstScript);
+  });
+}
+
+export default function loadReact() {
+  let REACT_PATH = 'react.development.js';
+  let DOM_PATH = 'react-dom.development.js';
+
+  let query = parseQuery(window.location.search);
+  let version = query.version || 'local';
+
+  if (version !== 'local') {
+    REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.js';
+    DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
+  }
+
+  const needsReactDOM = version === 'local' || parseFloat(version, 10) > 0.13;
+
+  let request = loadScript(REACT_PATH);
+
+  if (needsReactDOM) {
+    request = request.then(() => loadScript(DOM_PATH));
+  } else {
+    // Aliasing React to ReactDOM for compatibility.
+    request = request.then(() => {
+      window.ReactDOM = window.React;
+    });
+  }
+
+  return request;
+}
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
@@ -1472,7 +1472,7 @@ core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-core-js@^2.4.0:
+core-js@^2.4.0, core-js@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"