Skip to content

Commit

Permalink
Move everything to client
Browse files Browse the repository at this point in the history
  • Loading branch information
Ives van Hoorne committed Nov 20, 2016
0 parents commit c5f4378
Show file tree
Hide file tree
Showing 115 changed files with 24,078 additions and 0 deletions.
15 changes: 15 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"extends": "airbnb",
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true,
"mocha": true,
"es6": true
},
"rules": {
"react/jsx-filename-extension": 0,
"react/sort-comp": 0,
"import/no-extraneous-dependencies": 0
}
}
10 changes: 10 additions & 0 deletions .flowconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
[ignore]
.*/node_modules/fbjs/.*

[include]

[libs]
flow-typed/

[options]
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
Binary file added First_Concept.sketch
Binary file not shown.
920 changes: 920 additions & 0 deletions README.md

Large diffs are not rendered by default.

38 changes: 38 additions & 0 deletions config/babel.dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
var path = require('path');

module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in OS temporary directory for faster rebuilds.
cacheDirectory: true,
presets: [
// Latest stable ECMAScript features
require.resolve('babel-preset-latest'),
// JSX, Flow
require.resolve('babel-preset-react')
],
plugins: [
// To split lodash modules
require.resolve('babel-plugin-lodash'),
// class { handleClick = () => { } }
require.resolve('babel-plugin-transform-class-properties'),
// { ...todo, completed: true }
require.resolve('babel-plugin-transform-object-rest-spread'),
// function* () { yield 42; yield 43; }
[require.resolve('babel-plugin-transform-regenerator'), {
// Async functions are converted to generators by babel-preset-latest
async: false
}],
// Polyfills the runtime needed for async/await and generators
[require.resolve('babel-plugin-transform-runtime'), {
helpers: false,
polyfill: false,
regenerator: true,
// Resolve the Babel runtime relative to the config.
// You can safely remove this after ejecting:
moduleName: path.dirname(require.resolve('babel-runtime/package'))
}],
require.resolve('react-hot-loader/babel'),
]
};
40 changes: 40 additions & 0 deletions config/babel.prod.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
var path = require('path');

module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
// Latest stable ECMAScript features
require.resolve('babel-preset-latest'),
// JSX, Flow
require.resolve('babel-preset-react')
],
plugins: [
// To split lodash modules
require.resolve('babel-plugin-lodash'),
// class { handleClick = () => { } }
require.resolve('babel-plugin-transform-class-properties'),
// { ...todo, completed: true }
require.resolve('babel-plugin-transform-object-rest-spread'),
// function* () { yield 42; yield 43; }
[require.resolve('babel-plugin-transform-regenerator'), {
// Async functions are converted to generators by babel-preset-latest
async: false
}],
// Polyfills the runtime needed for async/await and generators
[require.resolve('babel-plugin-transform-runtime'), {
helpers: false,
polyfill: false,
regenerator: true,
// Resolve the Babel runtime relative to the config.
// You can safely remove this after ejecting:
moduleName: path.dirname(require.resolve('babel-runtime/package'))
}],
// Optimization: hoist JSX that never changes out of render()
// Disabled because of issues:
// * https://github.com/facebookincubator/create-react-app/issues/525
// * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/
// TODO: Enable again when these issues are resolved.
// require.resolve('babel-plugin-transform-react-constant-elements')
]
};
15 changes: 15 additions & 0 deletions config/env.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.

var REACT_APP = /^REACT_APP_/i;
var NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'development');

module.exports = Object
.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce((env, key) => {
env['process.env.' + key] = JSON.stringify(process.env[key]);
return env;
}, {
'process.env.NODE_ENV': NODE_ENV
});
1 change: 1 addition & 0 deletions config/flow/css.js.flow
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// @flow
2 changes: 2 additions & 0 deletions config/flow/file.js.flow
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// @flow
declare export default string;
1 change: 1 addition & 0 deletions config/jest/CSSStub.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = {};
1 change: 1 addition & 0 deletions config/jest/FileStub.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = "test-file-stub";
4 changes: 4 additions & 0 deletions config/jest/transform.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
const babelDev = require('../babel.dev');
const babelJest = require('babel-jest');

module.exports = babelJest.createTransformer(babelDev);
33 changes: 33 additions & 0 deletions config/paths.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
var path = require('path');

// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebookincubator/create-react-app/issues/253.

// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders

// We will export `nodePaths` as an array of absolute paths.
// It will then be used by Webpack configs.
// Jest doesn’t need this because it already handles `NODE_PATH` out of the box.

var nodePaths = (process.env.NODE_PATH || '')
.split(process.platform === 'win32' ? ';' : ':')
.filter(Boolean)
.map(p => path.resolve(p));

function resolveApp(relativePath) {
return path.resolve(relativePath);
}

// config after eject: we're in ./config/
module.exports = {
appBuild: resolveApp('build'),
appHtml: resolveApp('index.html'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
testsSetup: resolveApp('src/setupTests.js'),
appNodeModules: resolveApp('node_modules'),
ownNodeModules: resolveApp('node_modules'),
nodePaths: nodePaths
};
14 changes: 14 additions & 0 deletions config/polyfills.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
if (typeof Promise === 'undefined') {
// Rejection tracking prevents a common issue where React gets into an
// inconsistent state due to an error, but it gets swallowed by a Promise,
// and the user has no idea what causes React's erratic future behavior.
require('promise/lib/rejection-tracking').enable();
window.Promise = require('promise/lib/es6-extensions.js');
}

// fetch() polyfill for making API calls.
require('whatwg-fetch');

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');
208 changes: 208 additions & 0 deletions config/webpack.config.dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
var paths = require('./paths');
var env = require('./env');

// This is the development configuration.
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
// This makes the bundle appear split into separate modules in the devtools.
// We don't use source maps here because they can be confusing:
// https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
// You may want 'cheap-module-source-map' instead if you prefer source maps.
devtool: 'eval',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [
// Hot module reloading, is only enabled for dev server
require.resolve('react-hot-loader/patch'),
// Include WebpackDevServer client. It connects to WebpackDevServer via
// sockets and waits for recompile notifications. When WebpackDevServer
// recompiles, it sends a message to the client by socket. If only CSS
// was changed, the app reload just the CSS. Otherwise, it will refresh.
// The "?/" bit at the end tells the client to look for the socket at
// the root path, i.e. /sockjs-node/. Otherwise visiting a client-side
// route like /todos/42 would make it wrongly request /todos/42/sockjs-node.
// The socket server is a part of WebpackDevServer which we are using.
// The /sockjs-node/ path I'm referring to is hardcoded in WebpackDevServer.
require.resolve('webpack-dev-server/client') + '?/',
// Include Webpack hot module replacement runtime. Webpack is pretty
// low-level so we need to put all the pieces together. The runtime listens
// to the events received by the client above, and applies updates (such as
// new CSS) to the running application.
require.resolve('webpack/hot/dev-server'),
// We ship a few polyfills by default.
require.resolve('./polyfills'),
// Finally, this is your app's code:
path.join(paths.appSrc, 'index')
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
output: {
// Next line is not used in dev but WebpackDevServer crashes without it:
path: paths.appBuild,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js',
// In development, we always serve from the root. This makes config easier.
publicPath: '/'
},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
// We use `fallback` instead of `root` because we want `node_modules` to "win"
// if there any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
fallback: paths.nodePaths,
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
extensions: ['.js', '.json', '.jsx', ''],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web'
}
},
// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
// directory of `react-scripts` itself rather than the project directory.
// You can remove this after ejecting.
resolveLoader: {
root: paths.ownNodeModules,
moduleTemplates: ['*-loader']
},
module: {
// First, run the linter.
// It's important to do this before Babel processes the JS.
preLoaders: [
{
test: /\.(js|jsx)$/,
loader: 'eslint',
include: paths.appSrc,
}
],
loaders: [
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
{
test: /eval-component\.js$/,
include: paths.appSrc,
loader: 'babel',
query: (() => {
const config = Object.assign({}, require('./babel.dev'));

config.plugins.push(require.resolve('babel-plugin-transform-remove-strict-mode'));
return config;
})()
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.s?css$/,
loaders: [
'style',
'css',
'postcss'
]
},
// JSON is not enabled by default in Webpack but both Node and Browserify
// allow it implicitly so we also enable it.
{
test: /\.json$/,
loader: 'json'
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /\/favicon.ico$/,
loader: 'file',
query: {
name: 'static/media/[name].[hash:8].[ext]'
}
},
// A special case for favicon.ico to place it into build root directory.
{
test: /\/favicon.ico$/,
include: [paths.appSrc],
loader: 'file',
query: {
name: 'favicon.ico?[hash:8]'
}
},
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
test: /\.(mp4|webm)(\?.*)?$/,
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
// "html" loader is used to process template page (index.html) to resolve
// resources linked with <link href="./relative/path"> HTML tags.
{
test: /\.html$/,
loader: 'html',
query: {
attrs: ['link:href'],
}
}
]
},
// We use PostCSS for autoprefixing only.
postcss: function() {
return [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
]
}),
];
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.
new webpack.DefinePlugin(env),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules)
]
};
Loading

0 comments on commit c5f4378

Please sign in to comment.