BREAKING CHANGE: Babel 7 (newsuk#1914)

* Use babel upgrade on packages

* Replace babel rn preset with metro preset

* Move from babelrc to babel.config.js

* Bump babel deps

* Tidy up babel versions

* Update storybook and webpack

* Bump jest

* Storybook config

* Bump graphql & apollo versions

* Update webpack configurator to support babel.config.js

* Update storybook webpack config

* Clean up expo

* Replace haul with metro

* Fix native storybooks

* Bump enzyme

* Downgrade jest and upgrade few libs

* Add babelrc for jest

* Update svgs snaps

* Fix babelrc

* Sync babel-jest and jest versions

* Fix jest config and snaps

* Tidy up slice-layout snaps

* Snaps

* Tidy up jest dependencies

* Fix more testse

* Fix tests

* Fix article header styles in article-main-standard

* Update cli files

* Update core babelrc

* Remove fructose&dextrose

* Downgrade prettier & eslint (left for another PR)

* Lint

* Fix native bundling with metro

* Remove bundle meta

* Remove comments

* Fix native storybook

* Update babel config on text-flow and cli

* Tidy up webpack tests

* Fix depend tests

* Tidy up jest-configurator tests

* Fix mock-tpa jest

* Lint

* Fix versions

* Fix article tests

* Fix ssr webpack config

* Deprecate selectV2 nad replace with select on storybooks

* Apollo server config

* Lint

* Ssr webpack configs

* Fix android build script

* Fix ios build script

.babelrc.js

@@ -0,0 +1,5 @@
+// FIXME: remove once babel-jest supports babel.config.js
+module.exports = require('./babel.config')({
+  cache: () => {},
+  env: () => process.env.NODE_ENV
+})

.eslintignore

@@ -6,6 +6,3 @@ storybook-static
 packages
 android-app
 ios-app
-dextrose/snappy
-fructose/components.js
-haul.config.js

.eslintrc.json

@@ -7,8 +7,6 @@
       "error",
       {
         "devDependencies": [
-          "**/dextrose/**",
-          "**/fructose/**",
           "**/storybook/**"
         ],
         "optionalDependencies": false

.gitignore

@@ -82,9 +82,6 @@ ios/Index/
 ios/main.jsbundle
 ios/main.jsbundle.meta
 
-# Haul
-#
-haul-debug.log
 
 
 fragment-matcher.js

.storybook.native/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = api => {
+  api.cache(true);
+  return {
+    plugins: ["@babel/plugin-transform-react-display-name"],
+    presets: ["module:metro-react-native-babel-preset"]
+  };
+};

.storybook.native/index.storybook.js

@@ -0,0 +1,4 @@
+import { AppRegistry } from 'react-native';
+import StorybookUIRoot from "./storybook"
+
+AppRegistry.registerComponent('storybooknative', () => StorybookUIRoot);

.storybook.native/index.js → .storybook.native/storybook.js

@@ -1,6 +1,5 @@
 import url from "url";
 import { AppRegistry, NativeModules, Platform } from "react-native";
-import { URL, URLSearchParams } from "url-polyfill";
 import {
   getStorybookUI,
   configure,
@@ -10,10 +9,6 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { BarSpacingDecorator, WhiteBgColorDecorator } from "@times-components/storybook";
 import { loadStories } from "./story-loader";
 
-// see https://github.com/facebook/react-native/issues/16434
-global.URL = URL;
-global.URLSearchParams = URLSearchParams;
-
 if (Platform.OS === "ios") {
   addDecorator(BarSpacingDecorator);
 }
@@ -28,9 +23,11 @@ configure(loadStories, module);
 
 const { hostname } = url.parse(NativeModules.SourceCode.scriptURL);
 
-const StorybookUI = getStorybookUI({
+const StorybookUIRoot = getStorybookUI({
   port: 7007,
   host: hostname
 });
 
-AppRegistry.registerComponent("storybooknative", () => StorybookUI);
+AppRegistry.registerComponent("storybooknative", () => StorybookUIRoot);
+
+export default StorybookUIRoot;

.storybook.native/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require("path");
+
+module.exports = (baseConfig, env, defaultConfig) => {
+  baseConfig.entry = path.resolve(__dirname, "./index.js");
+  baseConfig.resolve = {
+    ...baseConfig.resolve,
+    extensions: [".android.js", ".ios.js", ".native.js", ".js", ".webpack.js", ".mjs"],
+    mainFields: ["devModule", "dev", "react-native", "browser", "module", "main"],
+  };
+
+  baseConfig.module.rules[0].test = /\.m?jsx?$/
+  baseConfig.module.rules[0].query.presets = ["module:metro-react-native-babel-preset"]
+  baseConfig.module.rules[0].query.plugins = []
+  baseConfig.module.rules[0].exclude = /node_modules\/(?!react|@expo|svgs|pretty-format|metro)/;
+
+  baseConfig.module.rules.push(
+    {
+      test: /\.(png|jpg|jpeg|gif)$/,
+      loader: 'url-loader',
+      options: { limit: 10000 }
+    },
+    {
+      test: /\.(eot|woff|svg|ttf)$/,
+      loader: 'file-loader'
+    },
+    {
+      include: /node_modules/,
+      test: /\.mjs$/,
+      type: "javascript/auto",
+    }
+  );
+
+  return baseConfig;
+};

.storybook/addons.js

@@ -1,3 +1,3 @@
-import '@storybook/addon-knobs/register'
+import "@storybook/addon-knobs/register";
 import "@storybook/addon-actions/register";
-import '@storybook/addon-options/register';
+import "@storybook/addon-options/register";

.storybook/config.js

@@ -1,28 +1,23 @@
 import { Text, View } from 'react-native';
 import { configure, addDecorator } from "@storybook/react";
-import { withInfo, setDefaults } from '@storybook/addon-info';
-import { setOptions } from '@storybook/addon-options';
-import { withKnobs } from '@storybook/addon-knobs/react';
+import { withInfo } from '@storybook/addon-info';
+import { withOptions } from '@storybook/addon-options';
+import { withKnobs } from '@storybook/addon-knobs';
 
 const req = require.context(
   "../packages",
   true,
   /^((?!node_modules).)*\.(stories|stories.web)\.js$/
 );
 
-setDefaults({
+addDecorator(withInfo({
   propTablesExclude: [Text, View]
-})
-
-setOptions({
-  addonPanelInRight: true,
+}));
+addDecorator(withKnobs);
+addDecorator(withOptions({
   name: 'Times Components',
   hierarchySeparator: /\//
-});
-
-
-addDecorator((story, context) => withInfo('')(story)(context));
-addDecorator(withKnobs);
+}));
 
 const loadStories = () => req.keys().filter(k => k.indexOf("brightcove-video") === -1).forEach(filename => req(filename));
 

.storybook/vendor.webpack.config.js

@@ -6,13 +6,12 @@ module.exports = {
   entry: {
     vendor: ["prop-types", "react", "react-dom", "react-native-web"]
   },
-
+  mode: 'development',
   output: {
     filename: "[name].dll.js",
     path: path.resolve("./dist/public"),
     library: "[name]"
   },
-
   plugins: [
     new webpack.DllPlugin({
       path: path.join("./dist/public", "[name]-manifest.json"),

.storybook/webpack.config.js

@@ -1,35 +1,35 @@
 const path = require("path");
 const webpack = require("webpack");
 
-module.exports = {
-  devtool: "eval-source-map",
-  resolve: {
-    // Maps the 'react-native' import to 'react-native-web'.
+module.exports = async (baseConfig, env, defaultConfig) => {
+  baseConfig.devtool = "eval-source-map"
+  baseConfig.resolve = {
+    ...baseConfig.resolve,
     alias: {
+      ...baseConfig.resolve.alias,
       "react-native": "react-native-web",
       "@storybook/react-native": "@storybook/react"
     },
-    // If you're working on a multi-platform React Native app, web-specific
-    // module implementations should be written in files using the extension
-    // `.web.js`.
-    extensions: [".web.js", ".js", ".ios.js", ".android.js"],
-    mainFields: ["devModule", "dev", "module", "main"],
-  },
-
-  module: {
-    rules: [
-      {
-        test: /\.(png|jpe?g|gif)$/,
-        loader: 'react-native-web-image-loader?name=[hash].[ext]',
-      }
-    ]
-  },
-
-  plugins: [
-    // Use the DLL in development.
+    extensions: [".web.js", ".js", ".ios.js", ".android.js", ".mjs"],
+    mainFields: ["devModule", "dev", "module", "main"]
+  };
+  baseConfig.plugins.push(
     new webpack.DllReferencePlugin({
       context: __dirname,
       manifest: path.resolve("./dist/public/vendor-manifest.json")
     })
-  ]
+  );
+  baseConfig.module.rules.push(
+    {
+      test: /\.(png|jpe?g|gif)$/,
+      loader: 'react-native-web-image-loader?name=[hash].[ext]',
+    },
+    {
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto'
+    }
+  );
+
+  return baseConfig;
 };

README.md

@@ -54,21 +54,13 @@ This has been made possible using [Fructose](https://github.com/newsuk/fructose)
 
 ## Native App Dev Server
 
-In order to run development servers for native applications, start haul dev
+In order to run development servers for native applications, start react-native dev
 server via:
 
 `yarn android:app` or `yarn ios:app`
 
 For step by step guide, see the corresponding Readme documentation for [android](./android-app/README.md) and [ios](./ios-app/README.md)
 
-## Haul
-
-We use Haul in lieu of the standard `react-native` CLI so that we can generate
-native Storybook bundles using Webpack, which we configure to honour our
-monorepo packages' respective `dev` entry points; this allows one to update a
-package's source code and preview the changes without having to manually
-re-transpile. Haul also automatically generates debuggable source maps.
-
 ### Fonts ⚠️
 
 In order to view the storybook on native, you'll need to fix broken fonts. This

android-app/.eslintignore

@@ -2,4 +2,3 @@
 **/coverage/*
 dist
 rnw.js
-haul.config.js

android-app/.prettierignore

@@ -12,7 +12,6 @@ LICENSE
 yarn.lock
 *.log
 rnw.js
-haul.config.js
 xnative/*
 gradle/*
 gradlew

android-app/README.md

@@ -5,7 +5,7 @@ existing native application, or to bundle a native library for android app
 releases. This is useful when building components that are reliant on the
 behaviour of the actual app outside of the storybook.
 
-When ran as a development server, haul launches a webpack server that bundles
+When ran as a development server, react-native launches a webpack server that bundles
 components on-the-fly. Launch the app in debug mode to connect to development
 server.
 
@@ -15,7 +15,7 @@ bundle, image assets and native dependencies.
 ## Dev Server
 
 In order to run the dev server, either run `yarn android:app` in the repo root
-or `yarn start` inside this package. This will start Haul bundler and provide
+or `yarn start` inside this package. This will start react-native bundler and provide
 on-the-fly bundles for the react development.
 
 ## Bundling and release

android-app/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = api => {
+  api.cache(true);
+  return {
+    plugins: ["@babel/plugin-transform-react-display-name"],
+    presets: ["module:metro-react-native-babel-preset"]
+  };
+};