Skip to content

Commit b0a53fe

Browse files
shepmastershepmaster
authored
Merge pull request #278 from integer32llc/frontend-upgrades
Frontend dependency upgrades
2 parents 03fd86d + 821ebeb commit b0a53fe

File tree

5 files changed

+2417
-758
lines changed

5 files changed

+2417
-758
lines changed

‎.travis/compile-frontend.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ docker \
1313
node:8.7 \
1414
bash -c 'yarn && \
1515
yarn test:lint && \
16-
NODE_ENV=production yarn run build'
16+
yarn run build:production'

‎ui/frontend/Output.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Channel } from './types';
99

1010
import Loader from './Loader';
1111

12-
const hasProperties = obj => Object.values(obj).some(val => val);
12+
const hasProperties = obj => Object.values(obj).some(val => !!val);
1313

1414
const Tab: React.SFC<TabProps> = ({ kind, focus, label, onClick, tabProps }) => {
1515
if (hasProperties(tabProps)) {

‎ui/frontend/package.json

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@types/react": "^16.0.0",
3131
"@types/react-dom": "^16.0.0",
3232
"@types/react-redux": "^5.0.5",
33-
"autoprefixer": "^7.1.1",
33+
"autoprefixer": "^8.1.0",
3434
"babel-core": "^6.17.0",
3535
"babel-loader": "^7.0.0",
3636
"babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -39,30 +39,30 @@
3939
"babel-preset-env": "^1.2.2",
4040
"babel-preset-react": "^6.11.1",
4141
"basename": "^0.1.2",
42+
"compression-webpack-plugin": "^1.1.11",
4243
"copy-webpack-plugin": "^4.0.1",
4344
"css-loader": "^0.28.0",
44-
"extract-text-webpack-plugin": "^3.0.0",
4545
"glob": "^7.0.5",
46-
"html-webpack-plugin": "^2.22.0",
46+
"html-webpack-plugin": "^3.0.0",
4747
"json-loader": "^0.5.4",
48+
"mini-css-extract-plugin": "^0.2.0",
4849
"node-sass": "^4.5.0",
49-
"node-zopfli": "^2.0.0",
50-
"normalize.css": "^7.0.0",
50+
"normalize.css": "^8.0.0",
5151
"postcss-loader": "^2.0.5",
5252
"sass-loader": "^6.0.0",
53-
"style-loader": "^0.19.0",
54-
"ts-loader": "^3.0.0",
53+
"style-loader": "^0.20.0",
54+
"ts-loader": "^4.0.0",
5555
"tslint": "^5.7.0",
5656
"tslint-react": "^3.2.0",
5757
"typescript": "^2.5.3",
58-
"webpack": "^3.2.0",
59-
"zopfli-webpack-plugin": "^0.1.0"
58+
"webpack": "^4.1.0",
59+
"webpack-cli": "^2.0.12"
6060
},
6161
"scripts": {
62-
"test": "echo \"Error: no test specified\" && exit 1",
6362
"test:lint": "tslint --config tslint.json --exclude './**/node_modules/**/*' './**/*.ts?(x)'",
64-
"build": "webpack --progress --colors",
65-
"watch": "webpack --progress --colors --watch"
63+
"build": "webpack --progress --colors --mode development",
64+
"build:production": "webpack --progress --colors --mode production",
65+
"watch": "yarn run build --watch"
6666
},
6767
"author": "",
6868
"license": "MIT"

‎ui/frontend/webpack.config.js

Lines changed: 84 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/* global process:false, __dirname:false */
22

33
const webpack = require('webpack');
4-
const HtmlWebpackPlugin = require('html-webpack-plugin');
5-
const CopyWebpackPlugin = require('copy-webpack-plugin');
6-
const ExtractTextPlugin = require("extract-text-webpack-plugin");
7-
const ZopfliPlugin = require("zopfli-webpack-plugin");
4+
const HtmlPlugin = require('html-webpack-plugin');
5+
const CopyPlugin = require('copy-webpack-plugin');
6+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
7+
const CompressionPlugin = require("compression-webpack-plugin");
88
const glob = require('glob');
99
const basename = require('basename');
1010

@@ -18,99 +18,92 @@ const allThemeNames = glob.sync('./node_modules/brace/theme/*.js').map(basename)
1818
const allKeybindings = allKeybindingNames.concat(['ace']).sort();
1919
const allThemes = allThemeNames;
2020

21-
module.exports = {
22-
entry: {
23-
app: ['./index.tsx', './index.scss'],
24-
},
21+
// The name is nicer to debug with, but changing names breaks long-term-caching
22+
const developmentFilenameTemplate = '[name]-[chunkhash]';
23+
const productionFilenameTemplate = '[chunkhash]';
2524

26-
output: {
27-
publicPath: 'assets/',
28-
path: `${__dirname}/build/assets`,
29-
filename: '[name]-[chunkhash].js',
30-
chunkFilename: '[name]-[chunkhash].js',
31-
},
25+
module.exports = function(_, argv) {
26+
console.log(argv.mode);
27+
const isProduction = argv.mode === 'production';
28+
const filenameTemplate =
29+
isProduction ?
30+
productionFilenameTemplate :
31+
developmentFilenameTemplate;
3232

33-
resolve: {
34-
extensions: ['.js', '.jsx', '.ts', '.tsx'],
35-
},
33+
return {
34+
entry: {
35+
app: ['./index.tsx', './index.scss'],
36+
},
3637

37-
module: {
38-
rules: [
39-
{
40-
test: [/\.js$/, /\.jsx$/],
41-
exclude: /node_modules/,
42-
use: 'babel-loader',
43-
},
44-
{
45-
test: [/\.ts$/, /\.tsx$/],
46-
exclude: /node_modules/,
47-
use: ['babel-loader', 'ts-loader'],
48-
},
49-
{
50-
test: /\.scss$/,
51-
use: ExtractTextPlugin.extract({
52-
fallback: 'style-loader',
53-
use: ["css-loader", "postcss-loader", "sass-loader"]
54-
}),
55-
},
56-
{
57-
test: /\.svg$/,
58-
use: {
59-
loader: 'svg-url-loader',
60-
options: {
61-
noquotes: true,
62-
},
63-
},
64-
},
65-
],
66-
},
38+
output: {
39+
publicPath: 'assets/',
40+
path: `${__dirname}/build/assets`,
41+
filename: `${filenameTemplate}.js`,
42+
chunkFilename: `${filenameTemplate}.js`,
43+
},
6744

68-
plugins: [
69-
new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
70-
new webpack.DefinePlugin({
71-
ACE_KEYBINDINGS: JSON.stringify(allKeybindings),
72-
ACE_THEMES: JSON.stringify(allThemes),
73-
}),
74-
new HtmlWebpackPlugin({
75-
title: "Rust Playground",
76-
template: 'index.ejs',
77-
filename: '../index.html',
78-
chunksSortMode: 'dependency',
79-
}),
80-
new CopyWebpackPlugin([
81-
{ from: 'robots.txt', to: '..' },
82-
]),
83-
new ExtractTextPlugin("styles-[chunkhash].css"),
84-
new webpack.optimize.CommonsChunkPlugin({
85-
name: "vendor",
86-
minChunks: module => {
87-
const { context } = module;
88-
if (!context) { return false; }
45+
resolve: {
46+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
47+
},
8948

90-
// Ignore files that are not from a third-party package
91-
if (context.indexOf("node_modules") === -1) { return false; }
49+
module: {
50+
rules: [
51+
{
52+
test: [/\.js$/, /\.jsx$/],
53+
exclude: /node_modules/,
54+
use: 'babel-loader',
55+
},
56+
{
57+
test: [/\.ts$/, /\.tsx$/],
58+
exclude: /node_modules/,
59+
use: ['babel-loader', 'ts-loader'],
60+
},
61+
{
62+
test: /\.scss$/,
63+
use: [
64+
MiniCssExtractPlugin.loader,
65+
"css-loader",
66+
"postcss-loader",
67+
"sass-loader",
68+
],
69+
},
70+
{
71+
test: /\.svg$/,
72+
use: {
73+
loader: 'svg-url-loader',
74+
options: {
75+
noquotes: true,
76+
},
77+
},
78+
},
79+
],
80+
},
9281

93-
// Ignore development dependencies
94-
const isDevDependency = depName => context.indexOf(depName) !== -1;
95-
if (devDependencies.some(isDevDependency)) { return false; }
82+
plugins: [
83+
new webpack.DefinePlugin({
84+
ACE_KEYBINDINGS: JSON.stringify(allKeybindings),
85+
ACE_THEMES: JSON.stringify(allThemes),
86+
}),
87+
new HtmlPlugin({
88+
title: "Rust Playground",
89+
template: 'index.ejs',
90+
filename: '../index.html',
91+
chunksSortMode: 'dependency',
92+
}),
93+
new CopyPlugin([
94+
{ from: 'robots.txt', to: '..' },
95+
]),
96+
new MiniCssExtractPlugin({
97+
filename: `${filenameTemplate}.css`,
98+
chunkFilename: `${filenameTemplate}.css`,
99+
}),
100+
...(isProduction ? [new CompressionPlugin()] : []),
101+
],
96102

97-
return true;
103+
optimization: {
104+
splitChunks: {
105+
chunks: "all",
98106
},
99-
}),
100-
new webpack.optimize.CommonsChunkPlugin({
101-
name: "manifest",
102-
minChunks: Infinity
103-
}),
104-
],
107+
},
108+
};
105109
};
106-
107-
if (process.env.NODE_ENV === 'production') {
108-
module.exports.plugins.push(
109-
new webpack.optimize.UglifyJsPlugin({
110-
compress: {
111-
warnings: false,
112-
},
113-
}),
114-
new ZopfliPlugin(),
115-
);
116-
}

0 commit comments

Comments
 (0)