feat: web client refresh (#1476)

Give the web client a major overhaul.

User-visible highlights include:

* Mobile is now fully supported.
* Added fullscreen support on mobile.
* Better support for dark mode.
* Added mime icons to the torrent list.
* Improved theme consistency across the app.

Maintainer highlights include:

* Updated code to use ES6 APIs.
* No longer uses jQuery UI.
* No longer uses jQuery.
* Use Webpack to bundle the Javascript, CSS, and assets together -- the entire bundle size is now 68K gzipped.
* Added eslint / prettier / stylelint tooling.
* Uses torrent-get's 'table' mode for more efficient RPC calls.
This commit is contained in:
Charles Kerr
2020-10-23 20:04:25 -05:00
committed by GitHub
parent b28839bd6d
commit cd453764b1
137 changed files with 16708 additions and 11543 deletions

71
web/webpack.config.js Normal file
View File

@@ -0,0 +1,71 @@
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
const mode = process.env.WEBPACK_MODE || 'production';
module.exports = {
devtool: 'source-map',
entry: './src/main.js',
mode,
module: {
rules: [
{
test: /\.s(a|c)ss$/,
use: [
'style-loader', // create 'style' nodes from JS strings
'css-loader', // translate css into commonjs
'sass-loader', // compile sass into css
],
},
{
test: /\.css$/i,
use: [ 'style-loader', 'css-loader' ],
},
{
test: /\.(png|jpe?g|)$/i,
use: [
'url-loader',
],
},
{
test: /\.svg$/i,
use: [
'url-loader',
'svgo-loader'
],
},
],
},
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
],
},
output: {
filename: 'transmission-app.js' ,
path: path.resolve(__dirname, 'public_html'),
sourceMapFilename: 'transmission-app.js.map'
},
plugins: [
new MiniCssExtractPlugin({
chunkFilename: '[id].css',
filename: '[name].css'
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
],
resolve: {
extensions: ['.js', '.scss']
},
};