big upgrade

.babelrc

@@ -19,16 +19,10 @@
   ],
   "env":{
     "test": {
-      "presets": [
-        // Jest runs in Node and needs to transpile ES6 modules to CommonJS.
-        // For normal builds, Webpack 2 supports ES modules natively.
-        ["env", {
-          "targets": {
-            "node": 6
-          },
-          "modules": "commonjs"
-        }]
-      ]
+      "presets": [["env", { "modules": "commonjs" }]]
+    },
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
     }
   }
 }

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     'react/jsx-filename-extension': [2, { extensions: ['.js'] }],
     'react/prefer-stateless-function': 0,
     'react/prop-types': 0,
+    'jsx-a11y/anchor-is-valid': [2, { specialLink: ['to'] }],
   },
   parserOptions: {
     ecmaVersion: 8,
@@ -39,4 +40,7 @@ module.exports = {
     es6: true,
     jest: true,
   },
+  settings: {
+    'import/resolver': 'webpack',
+  },
 };

.travis.yml

@@ -5,12 +5,14 @@ cache: yarn
 env:
   global:
     - NODE_ENV=test
+before_install: yarn global add greenkeeper-lockfile
+before_script: greenkeeper-lockfile-update
 script:
-  - yarn run lint
-  - yarn run test -- --coverage
+  - yarn lint
+  - yarn test --coverage
   - NODE_ENV=production $(yarn bin)/webpack
 after_success:
-  - bash yarn.sh
+  - greenkeeper-lockfile-upload
   - bash <(curl -s https://codecov.io/bash)
 deploy:
   provider: s3
@@ -26,9 +28,8 @@ deploy:
     condition: $(node aws/utils bucketExists) = "true"
 after_deploy:
   - node aws/utils invalidate "/index.html"
-  # This package is broken with Yarn
-  - node_modules/sentry-cli-binary/bin/sentry-cli releases -o $(node config SentryOrg) -p $(node config SentryProject) new $TRAVIS_COMMIT
-  - node_modules/sentry-cli-binary/bin/sentry-cli releases -o $(node config SentryOrg) -p $(node config SentryProject) files $TRAVIS_COMMIT upload-sourcemaps dist
+  - $(yarn bin)/sentry-cli releases -o $(node config SentryOrg) -p $(node config SentryProject) new $TRAVIS_COMMIT
+  - $(yarn bin)/sentry-cli releases -o $(node config SentryOrg) -p $(node config SentryProject) files $TRAVIS_COMMIT upload-sourcemaps dist
 notifications:
   email: false
   slack: bjacobel:xasDl3nTxo2feJGba70E43oR

CHANGELOG.md

@@ -1,3 +1,10 @@
+### v0.1.0
+- Upgrade to React 16
+- Upgrade to Webpack 4
+- Many, many other package upgrades [see here for more](https://github.com/bjacobel/rak/pull/173/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2)
+- Refactor test folder structure
+- Shrink bundle size significantly
+
 ### v0.0.5
 - Refactor with Prettier
 

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  collectCoverageFrom: ['src/**/*.js'],
+  coveragePathIgnorePatterns: ['polyfills.js'],
+  moduleNameMapper: {
+    '^.+\\.css$': '<rootDir>/__mocks__/stylesheets.js',
+  },
+  moduleDirectories: [__dirname, 'node_modules', 'src'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFiles: ['raf/polyfill', './jest.setup.js'],
+};

package.json

@@ -3,80 +3,67 @@
   "bin": "install.js",
   "bugs": "https://github.com/bjacobel/rak/issues",
   "dependencies": {
+    "core-js": "^2.5.5",
     "raf": "^3.4.0",
     "raven-js": "^3.14.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-redux": "^5.0.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "redux": "^3.6.0",
+    "redux": "^3.7.2",
     "redux-thunk": "^2.2.0"
   },
   "description": "Opinionated skeleton to quickly set up a new React app.",
   "devDependencies": {
     "@bjacobel/cloudformer-node": "^0.0.13",
-    "@mapbox/cloudfriend": "^1.8.1",
-    "autoprefixer": "^7.0.0",
-    "aws-sdk": "^2.9.0",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "^6.22.0",
-    "babel-polyfill": "^6.22.0",
-    "babel-preset-env": "^1.3.1",
-    "babel-preset-react": "^6.22.0",
-    "css-loader": "^0.28.0",
-    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.1.0",
-    "eslint": "^4.3.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-config-prettier": "^2.3.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-prettier": "^2.1.2",
-    "eslint-plugin-react": "^7.1.0",
-    "extract-text-webpack-plugin": "^2.1.2",
-    "file-loader": "^1.0.0-rc.0",
-    "html-webpack-plugin": "^2.28.0",
-    "inline-manifest-webpack-plugin": "^3.0.1",
-    "jest-cli": "^21.1.0",
-    "postcss-font-magician": "^2.0.0",
-    "postcss-loader": "^2.0.1",
-    "postcss-modules-values": "^1.2.2",
+    "@mapbox/cloudfriend": "^1.9.0",
+    "@sentry/cli": "^1.30.5",
+    "autoprefixer": "^8.3.0",
+    "aws-sdk": "^2.205.0",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.4.3",
+    "babel-loader": "^7.1.3",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx-source": "^6.22.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.0",
+    "css-loader": "^0.28.10",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.1",
+    "eslint": "^4.18.2",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-import-resolver-webpack": "^0.9.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-react": "^7.7.0",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.0.4",
+    "jest-cli": "^21.0.2",
+    "mini-css-extract-plugin": "^0.4.0",
+    "postcss-font-magician": "^2.1.1",
+    "postcss-loader": "^2.1.4",
+    "postcss-modules-values": "^1.3.0",
     "precss": "^2.0.0",
-    "prettier": "^1.4.4",
-    "react-test-renderer": "^16.0.0",
-    "redux-mock-store": "^1.2.2",
-    "script-ext-html-webpack-plugin": "^1.7.1",
-    "sentry-cli-binary": "^1.8.0",
-    "style-loader": "^0.19.0",
-    "stylelint": "^8.0.0",
-    "stylelint-config-css-modules": "^1.1.0",
-    "stylelint-config-standard": "^17.0.0",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.4.1",
-    "webpack-dev-server": "^2.4.0"
+    "prettier": "^1.11.1",
+    "react-test-renderer": "^16.2.0",
+    "redux-mock-store": "^1.5.1",
+    "script-ext-html-webpack-plugin": "^2.0.1",
+    "style-loader": "^0.20.2",
+    "stylelint": "^9.1.1",
+    "stylelint-config-css-modules": "^1.2.0",
+    "stylelint-config-standard": "^18.2.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.2.0",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0"
   },
   "engines": {
     "node": "^8"
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.js"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.css$": "<rootDir>/__mocks__/stylesheets.js"
-    },
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
-    "setupFiles": [
-      "raf/polyfill",
-      "./jest.js"
-    ],
-    "testRegex": "tests/.*/.*-test.js$"
-  },
   "keywords": [
     "boilerplate",
     "react",
@@ -98,5 +85,5 @@
     "start": "webpack-dev-server",
     "test": "jest --coverage && ./install-test.sh"
   },
-  "version": "0.0.5"
+  "version": "0.1.0"
 }

tests/actions/data-test.js → src/actions/__tests__/data-test.js

@@ -1,19 +1,13 @@
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
-import {
-  GET_DATA_FAILED,
-  GET_DATA_SUCCEEDED,
-  getDataFailed,
-  getDataSucceeded,
-  getDataAsync,
-} from '../../src/actions/data';
-import { LOADING_STARTED, LOADING_ENDED } from '../../src/actions/loading';
-import { getData } from '../../src/services/data';
-import '../../src/services/errors';
+import { GET_DATA_FAILED, GET_DATA_SUCCEEDED, getDataFailed, getDataSucceeded, getDataAsync } from 'actions/data';
+import { LOADING_STARTED, LOADING_ENDED } from 'actions/loading';
+import { getData } from 'services/data';
+import 'services/errors';
 
-jest.mock('../../src/services/data');
-jest.mock('../../src/services/errors');
+jest.mock('services/data');
+jest.mock('services/errors');
 
 const mockStore = configureMockStore([thunk]);
 
@@ -61,7 +55,7 @@ describe('data actions', () => {
       }));
 
     it('calls getData, on fail it dispatches loadingEnded and getDataFailed', () => {
-      getData.mockImplementationOnce(() => Promise.reject('error'));
+      getData.mockImplementationOnce(() => Promise.reject(new Error('error')));
 
       return store.dispatch(getDataAsync()).then(() => {
         expect(store.getActions()).toEqual(

tests/actions/loading-test.js → src/actions/__tests__/loading-test.js

@@ -1,4 +1,4 @@
-import { loadingStarted, loadingEnded, LOADING_STARTED, LOADING_ENDED } from '../../src/actions/loading';
+import { loadingStarted, loadingEnded, LOADING_STARTED, LOADING_ENDED } from 'actions/loading';
 
 describe('loading actions', () => {
   describe('loadingStarted', () => {

src/components/Child.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
+import Link from 'react-router-dom/Link';
 
 import styles from '../stylesheets/child.css';
 import { link } from '../stylesheets/link.css';
@@ -9,9 +9,7 @@ export default class Child extends Component {
     const { match } = this.props;
     return (
       <div>
-        <h3 className={styles.id}>
-          received param: {match.params.id}
-        </h3>
+        <h3 className={styles.id}>received param: {match.params.id}</h3>
         <Link className={link} to="/">
           Home
         </Link>

src/components/Main.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
+import Link from 'react-router-dom/Link';
 
 import styles from '../stylesheets/main.css';
 import { link } from '../stylesheets/link.css';
@@ -25,10 +25,8 @@ class Main extends Component {
     return (
       <div>
         <div className={styles.logo} />
-        <h3 className={styles.data}>
-          {data.text || ''}
-        </h3>
-        <Link className={link} to={'/child/foo'}>
+        <h3 className={styles.data}>{data.text || ''}</h3>
+        <Link className={link} to="/child/foo">
           Routing demo
         </Link>
         <Link className={link} to="/asdf">

src/components/NotFound.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
+import Link from 'react-router-dom/Link';
 
 import styles from '../stylesheets/notFound.css';
 import { link } from '../stylesheets/link.css';

src/components/Routes.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import BrowserRouter from 'react-router-dom/BrowserRouter';
+import Route from 'react-router-dom/Route';
+import Switch from 'react-router-dom/Switch';
 
 import NotFound from './NotFound';
 import Child from './Child';

tests/components/Child-test.js → src/components/__tests__/Child-test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Child from '../../src/components/Child';
+import Child from 'components/Child';
 
 describe('child component', () => {
   it('matches snapshot', () => {

tests/components/Main-test.js → src/components/__tests__/Main-test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Main from '../../src/components/Main';
+import Main from 'components/Main';
 
 describe('main component', () => {
   describe('un-Connected component', () => {

tests/components/NotFound-test.js → src/components/__tests__/NotFound-test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import NotFound from '../../src/components/NotFound';
+import NotFound from 'components/NotFound';
 
 describe('404 component', () => {
   it('matches snapshot', () => {

tests/components/Routes-test.js → src/components/__tests__/Routes-test.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import Routes from '../../src/components/Routes';
-import Analytics from '../../src/services/Analytics';
+import Routes from 'components/Routes';
+import Analytics from 'services/Analytics';
 
-jest.mock('../../src/components/Main');
-jest.mock('../../src/components/Child');
-jest.mock('../../src/components/NotFound');
-jest.mock('../../src/services/Analytics');
+jest.mock('components/Main');
+jest.mock('components/Child');
+jest.mock('components/NotFound');
+jest.mock('services/Analytics');
 
 const setPath = value => {
   // thanks @cpojer! https://github.com/facebook/jest/issues/890#issuecomment-209698782

src/index.js

@@ -1,16 +1,18 @@
-import 'babel-polyfill';
+/* eslint-disable import/first */
+import './polyfills';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware, compose } from 'redux';
+/* eslint-enable import/first */
 
 import reducer from './reducers';
 import Routes from './components/Routes';
 import { SHOW_DEV_TOOLS } from './constants';
 
-const composeEnhancers = (SHOW_DEV_TOOLS && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; // eslint-disable-line max-len, no-underscore-dangle
+const composeEnhancers = (SHOW_DEV_TOOLS && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; // eslint-disable-line no-underscore-dangle
 
 const store = createStore(reducer, {}, composeEnhancers(applyMiddleware(...[thunk])));
 

src/polyfills.js

@@ -0,0 +1,3 @@
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'raf/polyfill';

tests/reducers/data-test.js → src/reducers/__tests__/data-test.js

@@ -1,5 +1,5 @@
-import data from '../../src/reducers/data';
-import { GET_DATA_SUCCEEDED } from '../../src/actions/data';
+import data from 'reducers/data';
+import { GET_DATA_SUCCEEDED } from 'actions/data';
 
 describe('data reducer', () => {
   describe(`action type ${GET_DATA_SUCCEEDED}`, () => {