Skip to content

Commit

Permalink
Upgrade stack (#545)
Browse files Browse the repository at this point in the history
* Upgrade stack

I wanted to upgrade only babel but everything else was broken so I
upgraded babel, webpack, eslint and karma.

Disabled a lot of eslint rules to not change existing code. Maybe it's
better to migrate to prettier later.

This changes will unblock me from providing smaller output.

* Fix flow
  • Loading branch information
TrySound authored and chenglou committed Jul 5, 2018
1 parent 8a094af commit d74daba
Show file tree
Hide file tree
Showing 11 changed files with 8,139 additions and 135 deletions.
16 changes: 6 additions & 10 deletions .babelrc
@@ -1,12 +1,8 @@
{
"stage": 0,
"loose": "all",
"env": {
"production": {
"optional": [
"optimisation.react.inlineElements",
"optimisation.react.constantElements"
]
}
}
"presets": [
"@babel/env",
"@babel/stage-3",
"@babel/flow",
"@babel/react"
]
}
17 changes: 16 additions & 1 deletion .eslintrc
Expand Up @@ -14,7 +14,20 @@
"prefer-const": 0,
"no-multiple-empty-lines": 0,
"no-useless-escape": 0,
"no-else-return": 0,
"comma-dangle": 0,
"lines-between-class-members": 0,
"indent": 0,
"operator-linebreak": 0,
"object-curly-newline": 0,
"function-paren-newline": 0,
"prefer-destructuring": 0,

"react/jsx-wrap-multilines": 0,
"react/jsx-one-expression-per-line": 0,
"react/no-unused-state": 0,
"react/require-default-props": 0,
"react/destructuring-assignment": 0,
"react/no-did-mount-set-state": 2,
"react/no-multi-comp": 0,
"react/jsx-boolean-value": [2, "always"],
Expand Down Expand Up @@ -64,6 +77,8 @@
"object-curly-spacing": 0,
"import/imports-first": 0,
"import/no-unresolved": 0,
"import/no-extraneous-dependencies": 0
"import/no-extraneous-dependencies": 0,
"import/order": 0,
"import/no-webpack-loader-syntax": 0,
}
}
2 changes: 2 additions & 0 deletions .flowconfig
Expand Up @@ -11,6 +11,8 @@
.*/node_modules/kefir/kefir.js.flow
.*/node_modules/kefir/dist/kefir.js.flow
.*/test/.*
.*/node_modules/@webassemblyjs/.*
.*/node_modules/eslint-plugin-jsx-a11y/.*

[include]

Expand Down
35 changes: 17 additions & 18 deletions karma.conf.js
@@ -1,45 +1,44 @@
'use strict';

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var path = require('path');
var webpack = require('webpack');

var withCoverage = process.argv.indexOf('coverage') !== -1 || process.env.COVERAGE;

var webpackConfig = {
devtool: 'eval',
resolve: {
extensions: ['', '.js'],
},
mode: 'development',
module: {
loaders: withCoverage ?
rules: withCoverage ?
[
{test: /\.js$/, loader: 'babel', include: [path.resolve('./test')]},
{test: /\.js$/, loader: 'isparta', include: [path.resolve('./src')]},
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.resolve('./test')]
},
{
test: /\.js$/,
loader: 'isparta-loader',
include: [path.resolve('./src')]
},
] :
[
{
test: /\.js$/, loader: 'babel', include: [path.resolve('./src'), path.resolve('./test')],
test: /\.js$/,
loader: 'babel-loader',
include: [path.resolve('./src'), path.resolve('./test')],
},
],
},
stats: {
colors: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
}
};

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'node_modules/babel-core/browser-polyfill.js',
'./node_modules/@babel/polyfill/browser.js',
'test/index.js',
],
webpack: webpackConfig,
Expand Down
55 changes: 30 additions & 25 deletions package.json
Expand Up @@ -7,38 +7,43 @@
"react": "^0.14.9 || ^15.3.0 || ^16.0.0"
},
"devDependencies": {
"babel": "^5.8.23",
"babel-browser-transform": "^0.1.0",
"babel-core": "^5.6.18",
"babel-eslint": "^6.1.2",
"babel-loader": "^5.3.1",
"@babel/cli": "^7.0.0-beta.51",
"@babel/core": "^7.0.0-beta.51",
"@babel/polyfill": "^7.0.0-beta.51",
"@babel/preset-env": "^7.0.0-beta.51",
"@babel/preset-flow": "^7.0.0-beta.51",
"@babel/preset-react": "^7.0.0-beta.51",
"@babel/preset-stage-3": "^7.0.0-beta.51",
"babel-eslint": "^8.2.5",
"babel-loader": "^8.0.0-beta.4",
"codemirror": "^5.5.0",
"css-loader": "^0.19.0",
"eslint": "^3.5.0",
"eslint-config-airbnb": "^11.1.0",
"eslint-loader": "^1.1.0",
"eslint-plugin-import": "^1.15.0",
"eslint-plugin-jsx-a11y": "^2.2.2",
"eslint-plugin-react": "^6.3.0",
"css-loader": "^0.28.11",
"eslint": "^5.0.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-flowtype": "^2.49.3",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.0",
"eslint-plugin-react": "^7.10.0",
"flow-bin": "^0.53.1",
"inject-loader": "^2.0.1",
"isparta-loader": "^0.2.0",
"jasmine-core": "^2.3.4",
"karma": "^0.13.10",
"karma-coverage": "^0.5.2",
"karma-jasmine": "^0.3.6",
"karma-jasmine-diff-reporter": "^0.3.2",
"inject-loader": "^4.0.1",
"isparta-loader": "^2.0.0",
"jasmine-core": "^3.1.0",
"karma": "^2.0.4",
"karma-coverage": "^1.1.2",
"karma-jasmine": "^1.1.2",
"karma-jasmine-diff-reporter": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-webpack": "^1.7.0",
"karma-webpack": "^3.0.0",
"lodash.range": "^3.0.1",
"phantomjs": "^1.9.17",
"phantomjs": "^2.1.7",
"react": ">=15.5.0",
"react-codemirror": ">=0.1.2",
"react-dom": ">=15.5.0",
"react-hot-loader": "^1.2.8",
"style-loader": "^0.12.4",
"webpack": "^1.10.1",
"webpack-dev-server": "^1.10.1"
"style-loader": "^0.21.0",
"webpack": "^4.14.0",
"webpack-command": "^0.4.0",
"webpack-dev-server": "^3.1.4"
},
"scripts": {
"start": "node server.js",
Expand Down
6 changes: 3 additions & 3 deletions test/Motion-test.js
Expand Up @@ -6,7 +6,7 @@ import TestUtils from 'react-dom/test-utils';

const {createSpy} = global.jasmine;

const injector = require('inject!../src/Motion');
const injector = require('inject-loader!../src/Motion');

// temporarily putting the animation loop test here
// TODO: put it in the correct file
Expand All @@ -19,7 +19,7 @@ describe('animation loop', () => {
Motion = injector({
raf: mockRaf.raf,
'performance-now': mockRaf.now,
});
}).default;
});

it('should interpolate correctly when the timer is perfect', () => {
Expand Down Expand Up @@ -136,7 +136,7 @@ describe('Motion', () => {
Motion = injector({
raf: mockRaf.raf,
'performance-now': mockRaf.now,
});
}).default;
});

it('should allow returning null from children function', () => {
Expand Down
4 changes: 2 additions & 2 deletions test/StaggeredMotion-test.js
Expand Up @@ -4,7 +4,7 @@ import {spring} from '../src/react-motion';
import createMockRaf from './createMockRaf';
import TestUtils from 'react-dom/test-utils';

const injector = require('inject!../src/StaggeredMotion');
const injector = require('inject-loader!../src/StaggeredMotion');

describe('StaggeredMotion', () => {
let StaggeredMotion;
Expand All @@ -15,7 +15,7 @@ describe('StaggeredMotion', () => {
StaggeredMotion = injector({
raf: mockRaf.raf,
'performance-now': mockRaf.now,
});
}).default;
});

it('should allow returning null from children function', () => {
Expand Down
4 changes: 2 additions & 2 deletions test/TransitionMotion-test.js
Expand Up @@ -4,7 +4,7 @@ import {spring} from '../src/react-motion';
import createMockRaf from './createMockRaf';
import TestUtils from 'react-dom/test-utils';

const injector = require('inject!../src/TransitionMotion');
const injector = require('inject-loader!../src/TransitionMotion');

describe('TransitionMotion', () => {
let TransitionMotion;
Expand All @@ -15,7 +15,7 @@ describe('TransitionMotion', () => {
TransitionMotion = injector({
raf: mockRaf.raf,
'performance-now': mockRaf.now,
});
}).default;
});

it('should allow returning null from children function', () => {
Expand Down
97 changes: 29 additions & 68 deletions webpack.config.js
@@ -1,82 +1,43 @@
'use strict';

process.env.NODE_ENV = process.env.NODE_ENV || 'production';

// Temporary fix for css-loader/post-css
// 'Module build failed: ReferenceError: Promise is not defined'
require('babel/polyfill');

var webpack = require('webpack');
var path = require('path');

var loaders = ['babel'];
var port = process.env.PORT || 3000;

var devtool;
var plugins = [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
];
var entry = {
'demo0-simple-transition': './demos/demo0-simple-transition/index.jsx',
'demo1-chat-heads': './demos/demo1-chat-heads/index.jsx',
'demo2-draggable-balls': './demos/demo2-draggable-balls/index.jsx',
'demo3-todomvc-list-transition': './demos/demo3-todomvc-list-transition/index.jsx',
'demo4-photo-gallery': './demos/demo4-photo-gallery/index.jsx',
'demo5-spring-parameters-chooser': './demos/demo5-spring-parameters-chooser/index.jsx',
'demo7-water-ripples': './demos/demo7-water-ripples/index.jsx',
'demo8-draggable-list': './demos/demo8-draggable-list/index.jsx',
};

if (process.env.NODE_ENV === 'development') {
devtool ='eval-source-map';
loaders = ['react-hot'].concat(loaders);
plugins = plugins.concat([
new webpack.HotModuleReplacementPlugin()
]);
entry = Object.keys(entry).reduce(function (result, key) {
result[key] = [
'webpack-dev-server/client?http://0.0.0.0:' + port,
'webpack/hot/only-dev-server',
entry[key]
];
return result;
}, {});
} else {
devtool ='source-map';
plugins = plugins.concat([
new webpack.optimize.OccurenceOrderPlugin()
]);
}

module.exports = {
devtool: devtool,
entry: entry,
mode: "development",
devtool:
process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'source-map',
entry: {
'demo0-simple-transition': './demos/demo0-simple-transition/index.jsx',
'demo1-chat-heads': './demos/demo1-chat-heads/index.jsx',
'demo2-draggable-balls': './demos/demo2-draggable-balls/index.jsx',
'demo3-todomvc-list-transition': './demos/demo3-todomvc-list-transition/index.jsx',
'demo4-photo-gallery': './demos/demo4-photo-gallery/index.jsx',
'demo5-spring-parameters-chooser': './demos/demo5-spring-parameters-chooser/index.jsx',
'demo7-water-ripples': './demos/demo7-water-ripples/index.jsx',
'demo8-draggable-list': './demos/demo8-draggable-list/index.jsx',
},
output: {
filename: '[name]/all.js',
publicPath: '/demos/',
path: __dirname + '/demos/',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /build|lib|bower_components|node_modules/,
loaders: loaders
}, {
test: /\.css$/,
loaders: ['style', 'css']
}],
preLoaders: [
{test: /\.jsx?$/, loader: 'eslint', exclude: /build|lib|bower_components|node_modules/},
],
noParse: [
path.join(__dirname, 'node_modules', 'babel-core', 'browser.min.js')
rules: [
{
test: /\.jsx?$/,
exclude: /build|lib|bower_components|node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.jsx?$/,
loader: 'eslint-loader',
exclude: /build|lib|bower_components|node_modules/
},
],
},
resolve: {
extensions: ['', '.js', '.jsx']
extensions: ['.js', '.jsx']
},
plugins: plugins,
eslint: {configFile: '.eslintrc'},
};
11 changes: 5 additions & 6 deletions webpack.prod.config.js
Expand Up @@ -6,7 +6,8 @@ var webpack = require('webpack');
var path = require('path');

// currently, this is for bower
var config = {
module.exports = {
mode: 'development',
devtool: 'sourcemap',
entry: {
index: './src/react-motion.js'
Expand All @@ -20,14 +21,14 @@ var config = {
libraryTarget: 'umd'
},
module: {
loaders: [{
rules: [{
test: /\.(js|jsx)/,
loader: 'babel'
loader: 'babel-loader'
}]
},
plugins: [],
resolve: {
extensions: ['', '.js', '.jsx']
extensions: ['.js', '.jsx']
},
externals: {
'react': {
Expand All @@ -38,5 +39,3 @@ var config = {
}
},
};

module.exports = config;

0 comments on commit d74daba

Please sign in to comment.