Merge branch 'next' into master

Author: tomconroy

.gitignore

@@ -1,3 +1,8 @@
 node_modules
 template/yarn.lock
 template/package.json
+template/schema.json
+template/schema.graphql
+yarn-error.log
+.watchmanconfig
+.tern-port

README.md

@@ -1,26 +1,30 @@
 # react-scripts
 
-This provides configuration for FLM's isomorphic React apps.
+Provides configuration for universal React/Relay apps.
 
-## Install
+By default we expect a graphql server to exist as a separate service.
+The default template will query for `{ viewer { id } }` but this is not
+required of the schema.
 
-tl;dr
+## Install
 
 ``` bash
 npm install -g create-react-app
 
 create-react-app --scripts-version=git+ssh://git@github.com/firstlookmedia/react-scripts.git my-app
 cd my-app
-npm start
+yarn update-schema
+yarn start
 ```
 
 ## Usage
 
 `react-scripts` expects at least the following files:
 
 ```
-src/index.js  # entry to the client-side app
-server.js     # entry to the server
+src/index.js    # entry to the client-side app
+server.js       # entry to the server
+schema.graphql  # your graphql schema
 ```
 
 The output will become:
@@ -34,45 +38,21 @@ build/assets/2d0823jd.css   # any other compiled assets (css, images, fonts)
 
 ---
 
-#### `npm start`
+#### `yarn start`
 
 Starts the development environment:
 
 - The app server, which auto-reloads on [http://localhost:3232](http://localhost:3232)
 - A webpack dev server, which hot-reloads and proxies requests to the app server,
   on [http://localhost:3233](http://localhost:3233)
 
-#### `npm build`
+#### `yarn build`
 
 Builds the production assets to the `build` folder.
 
-#### `npm test`
-
-You will need `watchman` to use `npm test` without `CI=true`. To install on OSX `brew bundle` in this directory.
-
-Runs mocha tests. `react-scripts` will look for any file named `__spec.js`.
+#### `yarn test`
 
-`react-scripts` adds chai assertion helpers for
-[enzyme](https://github.com/producthunt/chai-enzyme)
-and [sinon](https://github.com/domenic/sinon-chai)
+Runs jest tests. `react-scripts` will look for any file named `__spec.js`.
 
-Example test:
-
-``` javascript
-import React from 'react';
-import { mount } from 'enzyme';
-import { expect } from 'chai';
-
-import Wrapper from '.';
-
-describe('Wrapper', () => {
-  it('renders supplied children', () => {
-    const wrapper = mount(
-      <Wrapper>
-        <div>child</div>
-      </Wrapper>
-    );
-    expect(wrapper).to.contain(<div>child</div>);
-  });
-});
-```
+You will need `watchman` to use `yarn test` without `CI=true`.
+To install on OSX `brew bundle` in this directory.

config/webpack.client.dev.js

@@ -1,25 +1,21 @@
 const webpack = require('webpack');
+const merge = require('webpack-merge');
 const defaults = require('./webpack.defaults');
 
-const config = Object.assign({}, defaults, {
-  devtool: 'source',
-  module: Object.assign({}, defaults.module, {
-    loaders: defaults.module.loaders.map(loader => {
-      if (loader.name === 'css') {
-        return Object.assign({}, loader, {
-          loader: `style-loader!${loader.loader}`,
-        });
-      }
-      return loader;
-    }),
-  }),
-  entry: [
-    require.resolve('webpack-hot-middleware/client'),
-  ].concat(defaults.entry),
-  plugins: defaults.plugins.concat([
-    new webpack.HotModuleReplacementPlugin(),
-  ]),
-  debug: true,
+const config = merge.smart({
+  module: {
+    rules: [{
+      test: /\.css$/,
+      use: ['style-loader'],
+    }, {
+      test: /\.scss$/,
+      use: ['style-loader'],
+    }],
+  },
+}, defaults, {
+  devtool: 'eval-source-map',
+  entry: ['webpack-hot-middleware/client'],
+  plugins: [new webpack.HotModuleReplacementPlugin()],
 });
 
 module.exports = config;

config/webpack.client.prod.js

@@ -1,45 +1,38 @@
 const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
-
+const merge = require('webpack-merge');
+const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const defaults = require('./webpack.defaults');
 
-const config = Object.assign({}, defaults, {
-  output: Object.assign({}, defaults.output, {
+const config = merge.smart({
+  module: {
+    rules: [{
+      test: /\.css$/,
+      use: [MiniCSSExtractPlugin.loader],
+    }, {
+      test: /\.scss$/,
+      use: [MiniCSSExtractPlugin.loader],
+    }],
+  },
+}, defaults, {
+  mode: 'production',
+  output: {
     filename: '[hash].js',
-  }),
-  module: Object.assign({}, defaults.module, {
-    loaders: defaults.module.loaders.map(loader => {
-      if (loader.name === 'css') {
-        return Object.assign({}, loader, {
-          loader: ExtractTextPlugin.extract(
-            'style-loader',
-            loader.loader,
-            { allChunks: true }
-          ),
-        });
-      }
-      return loader;
-    }),
-  }),
-  plugins: defaults.plugins.concat([
+  },
+  plugins: [
     new ManifestPlugin({ fileName: 'manifest.json' }),
     new ManifestPlugin({ fileName: `manifest.${Date.now()}.json` }),
-    new ExtractTextPlugin('[contenthash].css'),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"production"',
     }),
-    new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: {
-        warnings: false,
-      },
-      mangle: true,
-    }),
     new ProgressBarPlugin(),
-  ]),
+    new MiniCSSExtractPlugin({
+      filename: '[contenthash].css',
+    }),
+    new OptimizeCSSAssetsPlugin({}),
+  ],
 });
 
 module.exports = config;

config/webpack.defaults.js

@@ -1,11 +1,21 @@
 const path = require('path');
-const precss = require('precss');
 const autoprefixer = require('autoprefixer');
+const precss = require('precss');
 const postcssCalc = require('postcss-calc');
 
+const cssOptions = {
+  sourceMap: true,
+  modules: true,
+  importLoaders: 1,
+  context: 'src/components',
+  localIdentName: '[path][local]',
+};
+
 module.exports = {
+  mode: 'development',
+  context: __dirname,
   entry: [
-    require.resolve('babel-polyfill'),
+    'babel-polyfill',
     path.resolve('src/index.js'),
   ],
   output: {
@@ -15,51 +25,106 @@ module.exports = {
   },
   plugins: [],
   resolve: {
-    extensions: ['', '.js', '.json'],
-  },
-  resolveLoader: {
-    root: path.resolve(__dirname, '../node_modules'),
+    modules: ['node_modules'],
   },
   module: {
-    loaders: [{
+    rules: [{
       test: /\.js$/,
-      loader: 'babel-loader',
       include: [path.resolve('src'), path.resolve('server.js')],
-      query: {
-        passPerPreset: true,
-        presets: [
-          'babel-preset-react',
-          'babel-preset-es2015',
-          'babel-preset-stage-0',
-        ].map(require.resolve),
-        plugins: [
-          'babel-plugin-transform-runtime',
-        ].map(require.resolve),
-      },
+      use: [{
+        loader: 'babel-loader',
+        options: {
+          passPerPreset: true,
+          presets: [
+            'babel-preset-react',
+            'babel-preset-env',
+            'babel-preset-stage-0',
+          ],
+          plugins: [
+            'babel-plugin-transform-runtime',
+            'react-hot-loader/babel',
+          ],
+        },
+      }],
     }, {
-      name: 'css',
       test: /\.css$/,
-      loader: 'css?modules&importLoaders=1&context=src/components&localIdentName=[path][local]&-autoprefixer!postcss',
+      use: [
+        {
+          loader: 'css-loader',
+          options: cssOptions,
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            sourceMap: true,
+            ident: 'postcss',
+            plugins: [
+              autoprefixer(),
+              postcssCalc(),
+              precss(),
+            ],
+          },
+        },
+      ],
     }, {
-      test: /\.(jpe?g|png|gif|svg)$/i,
-      loaders: [
-        'file?hash=sha512&digest=hex&name=[hash].[ext]',
-        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false',
+      test: /\.scss$/,
+      use: [
+        {
+          loader: 'css-loader',
+          options: { ...cssOptions, importLoaders: 3 },
+        },
+        'resolve-url-loader',
+        {
+          loader: 'postcss-loader',
+          options: {
+            sourceMap: true,
+
+            // needed to have two different postcss configs
+            // without this, it just silently fails
+            ident: 'postcss-sass',
+
+            plugins: [
+              autoprefixer(),
+            ],
+          },
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            sourceMap: true,
+          },
+        },
       ],
     }, {
-      test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=application/font-woff',
+      test: /\.(jpe?g|png|gif|svg)$/i,
+      use: [
+        {
+          loader: 'file-loader',
+          options: {
+            hash: 'sha512',
+            digest: 'hex',
+            name: '[hash].[ext]',
+          },
+        },
+        {
+          loader: 'image-webpack-loader',
+          options: {
+            bypassOnDebug: true,
+          },
+        },
+      ],
     }, {
-      test: /\.json$/,
-      loader: 'json',
+      test: /\.woff2?$/,
+      use: [{
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          mimetype: 'application/font-woff',
+        },
+      }],
     }, {
       test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
-      loader: 'imports?define=>false&this=>window',
+      use: 'imports-loader?define=>false&this=>window',
     }],
   },
-  postcss: () => [
-    precss,
-    autoprefixer,
-    postcssCalc,
-  ],
 };

config/webpack.server.dev.js

@@ -1,5 +1,3 @@
 const defaults = require('./webpack.server');
 
-module.exports = Object.assign({}, defaults, {
-  debug: true,
-});
+module.exports = Object.assign({}, defaults, {});