[WIP] Webpack@5

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "devDependencies": {
     "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.2.2",
     "@babel/node": "7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-decorators": "^7.0.0",
@@ -24,11 +24,12 @@
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/plugin-transform-async-to-generator": "^7.0.0",
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.2.3",
     "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-typescript": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
     "@commitlint/cli": "6.0.5",
     "@commitlint/config-conventional": "6.0.4",
+    "cross-env": "^5.2.0",
     "@types/bcryptjs": "^2.4.1",
     "@types/dotenv-safe": "^5.0.3",
     "@types/graphql-relay": "^0.4.6",
@@ -40,7 +41,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "danger": "^4.0.1",
-    "eslint": "^5.8.0",
+    "eslint": "^5.11.1",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-okonet": "^7.0.2",
     "eslint-config-shellscape": "^2.0.2",
@@ -58,7 +59,7 @@
     "lerna": "^3.4.3",
     "pre-commit": "^1.2.2",
     "prettier": "^1.15.1",
-    "typescript": "^3.0.3",
+    "typescript": "^3.2.2",
     "typescript-eslint-parser": "^18.0.0"
   },
   "license": "MIT",
@@ -84,8 +85,8 @@
     "start:android": "lerna run android --scope @entria/app --stream",
     "start:app": "lerna run start --scope @entria/app --stream",
     "start:ios": "lerna run ios --scope @entria/app --stream",
-    "start:server": "lerna run start --scope @entria/server --stream",
     "start:web": "lerna run start --scope @entria/web --stream",
+    "start:server": "lerna run start --scope @entria/server --stream",
     "test": "jest --coverage"
   },
   "workspaces": {
@@ -97,4 +98,4 @@
       "**/react-native-*"
     ]
   }
-}
+}

packages/app/src/UserCreate.tsx

@@ -1,7 +1,6 @@
 
 
 import React, { Component } from 'react';
-import { withNavigation } from 'react-navigation';
 import styled from 'styled-components';
 
 import Button from './components/Button';
@@ -42,20 +41,20 @@ class UserCreate extends Component<any, Props, State> {
       name,
       email,
       password,
-    }
+    };
 
     const onCompleted = () => {
       console.log('onCompleted');
 
       this.props.navigation.navigate('UserList');
-    }
+    };
 
     const onError = () => {
       console.log('onError');
-    }
+    };
 
     UserRegisterWithEmailMutation.commit(input, onCompleted, onError);
-  }
+  };
 
   goToList = () => {
     this.props.navigation.navigate('UserList');

packages/app/src/UserDetail.tsx

@@ -3,11 +3,7 @@
 import React, { Component } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import {
-  graphql,
-  createFragmentContainer,
-  QueryRenderer,
-} from 'react-relay';
+import { graphql, createFragmentContainer } from 'react-relay';
 import { createQueryRendererModern } from './relay';
 
 import { UserDetail_query } from './__generated__/UserDetail_query.graphql';
@@ -50,18 +46,14 @@ const UserDetailFragmentContainer = createFragmentContainer(
 );
 
 export default withNavigation(
-  createQueryRendererModern(
-    UserDetailFragmentContainer,
-    UserDetail,
-    {
-      query: graphql`
-        query UserDetailQuery($id: ID!) {
+  createQueryRendererModern(UserDetailFragmentContainer, UserDetail, {
+    query: graphql`
+      query UserDetailQuery($id: ID!) {
         ...UserDetail_query
-        }
-      `,
-      queriesParams: ({ navigation }) => ({ id: navigation.state.params.id }),
-    },
-  )
+      }
+    `,
+    queriesParams: ({ navigation }) => ({ id: navigation.state.params.id }),
+  }),
 );
 
 const styles = StyleSheet.create({

packages/app/src/UserList.tsx

@@ -1,18 +1,7 @@
 
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableHighlight,
-  FlatList,
-} from 'react-native';
-import { withNavigation } from 'react-navigation';
-
-import {
-  createPaginationContainer,
-  graphql,
-} from 'react-relay';
+import { StyleSheet, Text, View, TouchableHighlight, FlatList } from 'react-native';
+import { createPaginationContainer, graphql } from 'react-relay';
 import { createQueryRendererModern } from './relay';
 
 import { UserList_query } from './__generated__/UserList_query.graphql';
@@ -43,9 +32,9 @@ class UserList extends Component<any, Props, State> {
 
     this.setState({
       isFetchingTop: true,
-    })
+    });
 
-    this.props.relay.refetchConnection(users.edges.length, (err) => {
+    this.props.relay.refetchConnection(users.edges.length, () => {
       this.setState({
         isFetchingTop: false,
       });
@@ -58,7 +47,7 @@ class UserList extends Component<any, Props, State> {
     }
 
     // fetch more 2
-    this.props.relay.loadMore(2, (err) => {
+    this.props.relay.loadMore(2, err => {
       console.log('loadMore: ', err);
     });
   };
@@ -67,10 +56,7 @@ class UserList extends Component<any, Props, State> {
     const { node } = item;
 
     return (
-      <TouchableHighlight
-        onPress={() => this.goToUserDetail(node)}
-        underlayColor="whitesmoke"
-      >
+      <TouchableHighlight onPress={() => this.goToUserDetail(node)} underlayColor="whitesmoke">
         <View style={styles.userContainer}>
           <Text>{node.name}</Text>
         </View>
@@ -109,10 +95,7 @@ const UserListPaginationContainer = createPaginationContainer(
   {
     query: graphql`
       fragment UserList_query on Query {
-        users(
-          first: $count
-          after: $cursor
-        ) @connection(key: "UserList_users") {
+        users(first: $count, after: $cursor) @connection(key: "UserList_users") {
           pageInfo {
             hasNextPage
             endCursor
@@ -124,7 +107,7 @@ const UserListPaginationContainer = createPaginationContainer(
             }
           }
         }
-      } 
+      }
     `,
   },
   {
@@ -138,41 +121,29 @@ const UserListPaginationContainer = createPaginationContainer(
         count: totalCount,
       };
     },
-    getVariables(props, { count, cursor }, fragmentVariables) {
+    getVariables(props, { count, cursor }) {
       return {
         count,
         cursor,
       };
     },
     variables: { cursor: null },
     query: graphql`
-      query UserListPaginationQuery (
-        $count: Int!,
-        $cursor: String
-      ) {
+      query UserListPaginationQuery($count: Int!, $cursor: String) {
         ...UserList_query
       }
     `,
   },
 );
 
-
-export default
-  createQueryRendererModern(
-    UserListPaginationContainer,
-    UserList,
-    {
-      query: graphql`
-        query UserListQuery(
-          $count: Int!,
-          $cursor: String
-        ) {
-          ...UserList_query
-        }
-      `,
-      variables: {cursor: null, count: 1},
-    },
-  );
+export default createQueryRendererModern(UserListPaginationContainer, UserList, {
+  query: graphql`
+    query UserListQuery($count: Int!, $cursor: String) {
+      ...UserList_query
+    }
+  `,
+  variables: { cursor: null, count: 1 },
+});
 
 const styles = StyleSheet.create({
   container: {

packages/server/.eslintrc

@@ -10,7 +10,8 @@
     "generator-star-spacing": 0,
     "object-curly-newline": 0,
     "import/prefer-default-export": 0,
-    "function-paren-newline": 0
+    "function-paren-newline": 0,
+    "import/no-extraneous-dependencies": 0
   },
   "env": {
     "jest": true

packages/server/package.json

@@ -89,16 +89,16 @@
     "rimraf": "^2.6.2",
     "typescript": "^3.0.3",
     "typescript-eslint-parser": "^18.0.0",
-    "webpack": "^4.26.0",
-    "webpack-cli": "^3.1.2",
+    "webpack": "next",
+    "webpack-nano": "^0.6.1",
     "webpack-merge": "^4.1.4",
     "webpack-node-externals": "^1.7.2"
   },
   "license": "MIT",
   "private": true,
   "scripts": {
     "build": "npm run clear && babel src --extensions \".es6,.js,.es,.jsx,.mjs,.ts\" --ignore *.spec.js --out-dir dist --copy-files",
-    "build:webpack": "npm run clear && webpack --env.mode=prod",
+    "build:webpack": "npm run clear && cross-env NODE_ENV=prod wp",
     "clear": "rimraf ./dist",
     "flow": "flow",
     "flow-log": "yarn flow --show-all-errors > flow.log",
@@ -108,7 +108,7 @@
     "prettier": "prettier --write --single-quote true --trailing-comma all --print-width 120",
     "repl": "nodemon --config ./repl/nodemon.json ./repl.js --exec babel-node",
     "serve": "node dist/index.js",
-    "start": "npm run clear && webpack --env.mode=dev",
+    "start": "npm run clear && cross-env NODE_ENV=dev wp",
     "test": "jest",
     "test:watch": "jest --watch --coverage",
     "typecheck": "tsc",

packages/server/webpack.config.js

@@ -1,7 +1,3 @@
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
-
-module.exports = env => {
-  const config = require(`./webpack/webpack.${env.mode}`);
-  return config;
-};
+module.exports = require(`./webpack/webpack.${process.env.NODE_ENV}`);

packages/server/webpack/webpack.common.js

@@ -1,10 +1,14 @@
 const { resolve } = require('path');
-const webpack = require('webpack');
 
 module.exports = {
   entry: {
     index: ['./src/index.js'],
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory: resolve(__dirname, '.cache'),
+    loglevel: 'warning',
+  },
   output: {
     filename: '[name].js',
     path: resolve('dist'),

packages/server/webpack/webpack.dev.js

@@ -1,4 +1,3 @@
-const { resolve } = require('path');
 const webpack = require('webpack');
 const merge = require('webpack-merge');
 const WebpackNodeExternals = require('webpack-node-externals');

packages/web/jest.setup.js

@@ -1,5 +1,2 @@
-// add some helpful assertions
-//import 'jest-dom/extend-expect';
-
 // this is basically: afterEach(cleanup)
-//import 'react-testing-library/cleanup-after-each';
+require('react-testing-library/cleanup-after-each');