[change] Compile using Babel 7

Fix #1170
Close #1205
Close #1191

.babelrc

@@ -1,5 +0,0 @@
-{
-  "presets": [
-    "./scripts/babel/preset"
-  ]
-}

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - "8"
+  - "10"
 
 before_install:
   # Install Yarn

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: ['./scripts/babel/preset']
+  };
+};

docs/guides/advanced.md

@@ -109,5 +109,5 @@ If you're using `skpm`, you can rely on an [undocumented
 feature](https://github.com/sketch-pm/skpm/blob/master/lib/utils/webpackConfig.js)
 which will merge your `webpack.config.js`, `.babelrc`, or `package.json` Babel
 config into its internal webpack config. The simplest option may be to use the
-[babel-plugin-module-alias](https://www.npmjs.com/package/babel-plugin-module-alias)
+[babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver)
 and configure it in your `package.json`.

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "clean": "del ./packages/*/dist",
     "compile": "npm-run-all clean -p \"compile:* -- {@}\" --",
-    "compile:commonjs": "cd packages/react-native-web && BABEL_ENV=commonjs babel src --out-dir dist/cjs --ignore \"**/__tests__\"",
-    "compile:es": "cd packages/react-native-web && babel src --out-dir dist --ignore \"**/__tests__\"",
+    "compile:commonjs": "cd packages/react-native-web && BABEL_ENV=commonjs babel --root-mode upward src --out-dir dist/cjs --ignore \"**/__tests__\"",
+    "compile:es": "cd packages/react-native-web && babel --root-mode upward src --out-dir dist --ignore \"**/__tests__\"",
     "benchmarks": "cd packages/benchmarks && yarn build",
     "benchmarks:release": "cd packages/benchmarks && yarn release",
     "examples": "cd packages/examples && yarn build",
@@ -15,7 +15,7 @@
     "website:release": "cd packages/website && yarn release",
     "flow": "flow",
     "fmt": "prettier --write \"**/*.js\"",
-    "jest": "BABEL_ENV=commonjs jest --config ./scripts/jest/config.js",
+    "jest": "jest --config ./scripts/jest/config.js",
     "lint": "yarn lint:check --fix",
     "lint:check": "eslint packages scripts",
     "precommit": "lint-staged",
@@ -25,18 +25,18 @@
     "test": "yarn flow && yarn lint:check && yarn jest --runInBand"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-native": "^4.0.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.0",
+    "babel-jest": "24.0.0-alpha.9",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-add-module-exports": "^1.0.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
     "caniuse-api": "^2.0.0",
     "del-cli": "^1.1.0",
     "enzyme": "^3.6.0",
@@ -50,9 +50,10 @@
     "glob": "^7.1.2",
     "husky": "^0.14.3",
     "inline-style-prefixer": "^5.0.3",
-    "jest": "^22.4.3",
+    "jest": "24.0.0-alpha.9",
     "jest-canvas-mock": "^1.0.2",
     "lint-staged": "^7.1.0",
+    "metro-react-native-babel-preset": "^0.51.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^1.12.1",
     "react": "^16.7.0",

packages/benchmarks/webpack.config.js

@@ -34,7 +34,7 @@ module.exports = {
           loader: 'babel-loader',
           options: {
             cacheDirectory: false,
-            presets: babelPreset,
+            presets: [babelPreset],
             plugins: ['styled-jsx/babel']
           }
         }

packages/examples/package.json

@@ -7,12 +7,13 @@
     "release": "yarn build && git checkout gh-pages && rm -rf ../../examples && mv dist ../../examples && git add -A && git commit -m \"Examples deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
-    "babel-runtime": "^6.26.0",
+    "@babel/runtime": "^7.2.0",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-native-web": "0.9.13"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.2.0",
     "babel-plugin-react-native-web": "0.9.13",
     "babel-plugin-transform-runtime": "^6.23.0",
     "file-loader": "^1.1.11",

packages/examples/webpack.config.js

@@ -34,10 +34,10 @@ module.exports = {
           loader: 'babel-loader',
           options: {
             cacheDirectory: false,
-            presets: ['react-native'],
+            presets: ['module:metro-react-native-babel-preset'],
             plugins: [
               // needed to support async/await
-              'transform-runtime'
+              '@babel/plugin-transform-runtime'
             ]
           }
         }

packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap

@@ -51,7 +51,6 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
 
 exports[`AppRegistry getApplication returns "element" and "getStyleElement" 1`] = `
 <AppContainer
-  WrapperComponent={undefined}
   rootTag={Object {}}
 >
   <RootComponent />

packages/react-native-web/src/exports/Text/__tests__/index-test.js

@@ -34,7 +34,7 @@ describe('components/Text', () => {
     expect(component.contains(children)).toEqual(true);
   });
 
-  test('prop "numberOfLines"');
+  test('prop "numberOfLines"', () => {});
 
   test('prop "onPress"', () => {
     const onPress = e => {};

packages/react-native-web/src/exports/TextInput/__tests__/index-test.js

@@ -12,7 +12,7 @@ const testIfDocumentIsFocused = (message, fn) => {
   if (document.hasFocus && document.hasFocus()) {
     test(message, fn);
   } else {
-    test.skip(`${message} – document is not focused`);
+    test.skip(`${message} – document is not focused`, () => {});
   }
 };
 

packages/react-native-web/src/exports/TextInput/index.js

@@ -150,8 +150,6 @@ class TextInput extends Component<*> {
 
   static State = TextInputState;
 
-  blur: Function;
-
   clear() {
     this._node.value = '';
   }
@@ -401,6 +399,7 @@ class TextInput extends Component<*> {
         onSubmitEditing(e);
       }
       if (shouldBlurOnSubmit) {
+        // $FlowFixMe
         this.blur();
       }
     }

packages/website/storybook/.storybook/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [
-    "react-native"
-  ],
-  "plugins": [
-    "react-native-web"
-  ]
-}

packages/website/storybook/.storybook/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['module:metro-react-native-babel-preset'],
+    plugins: ['react-native-web']
+  };
+};

scripts/babel/preset.js

@@ -1,11 +1,11 @@
 const createConfig = ({ modules }) => ({
   presets: [
     [
-      'babel-preset-env',
+      '@babel/preset-env',
       {
         loose: true,
         modules,
-        exclude: ['transform-es2015-typeof-symbol'],
+        exclude: ['transform-typeof-symbol'],
         targets: {
           browsers: [
             'chrome 38',
@@ -24,17 +24,19 @@ const createConfig = ({ modules }) => ({
         }
       }
     ],
-    'babel-preset-react',
-    'babel-preset-flow'
+    '@babel/preset-react',
+    '@babel/preset-flow'
   ],
   plugins: [
-    ['babel-plugin-transform-class-properties', { loose: true }],
-    ['babel-plugin-transform-object-rest-spread', { useBuiltIns: true }],
-    ['babel-plugin-transform-react-remove-prop-types', { mode: 'wrap' }]
+    '@babel/plugin-transform-flow-strip-types',
+    ['babel-plugin-transform-react-remove-prop-types', { mode: 'wrap' }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-object-rest-spread', { useBuiltIns: true }],
   ].concat(modules ? ['babel-plugin-add-module-exports'] : [])
 });
 
-module.exports =
-  process.env.BABEL_ENV === 'commonjs'
+module.exports = function() {
+  return process.env.BABEL_ENV === 'commonjs' || process.env.NODE_ENV === 'test'
     ? createConfig({ modules: 'commonjs' })
     : createConfig({ modules: false });
+};

scripts/jest/config.js

@@ -11,7 +11,7 @@ module.exports = {
   rootDir: process.cwd(),
   roots: ['<rootDir>/packages'],
   setupFiles: ['jest-canvas-mock'],
-  setupTestFrameworkScriptFile: require.resolve('./setupFramework.js'),
+  setupFilesAfterEnv: [require.resolve('./setupFramework.js')],
   snapshotSerializers: ['enzyme-to-json/serializer'],
   testEnvironment: 'jsdom',
   timers: 'fake'