New: Many UI Updates and Performance Tweaks

frontend/gulp/build.js

@@ -1,15 +1,18 @@
 const gulp = require('gulp');
-const runSequence = require('run-sequence');
 
 require('./clean');
 require('./copy');
+require('./webpack');
+
+gulp.task('build',
+  gulp.series('clean',
+    gulp.parallel(
+      'webpack',
+      'copyHtml',
+      'copyFonts',
+      'copyImages',
+      'copyJs'
+    )
+  )
+);
 
-gulp.task('build', () => {
-  return runSequence('clean', [
-    'webpack',
-    'copyHtml',
-    'copyFonts',
-    'copyImages',
-    'copyJs'
-  ]);
-});

frontend/gulp/copy.js

@@ -1,15 +1,15 @@
-var path = require('path');
-var gulp = require('gulp');
-var print = require('gulp-print').default;
-var cache = require('gulp-cached');
-var livereload = require('gulp-livereload');
-var paths = require('./helpers/paths.js');
+const path = require('path');
+const gulp = require('gulp');
+const print = require('gulp-print').default;
+const cache = require('gulp-cached');
+const livereload = require('gulp-livereload');
+const paths = require('./helpers/paths.js');
 
 gulp.task('copyJs', () => {
   return gulp.src(
     [
       path.join(paths.src.root, 'polyfills.js')
-    ])
+    ], { base: paths.src.root })
     .pipe(cache('copyJs'))
     .pipe(print())
     .pipe(gulp.dest(paths.dest.root))
@@ -17,7 +17,7 @@ gulp.task('copyJs', () => {
 });
 
 gulp.task('copyHtml', () => {
-  return gulp.src(paths.src.html)
+  return gulp.src(paths.src.html, { base: paths.src.root })
     .pipe(cache('copyHtml'))
     .pipe(print())
     .pipe(gulp.dest(paths.dest.root))
@@ -26,20 +26,20 @@ gulp.task('copyHtml', () => {
 
 gulp.task('copyFonts', () => {
   return gulp.src(
-    path.join(paths.src.fonts, '**', '*.*')
+    path.join(paths.src.fonts, '**', '*.*'), { base: paths.src.root }
   )
     .pipe(cache('copyFonts'))
     .pipe(print())
-    .pipe(gulp.dest(paths.dest.fonts))
+    .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });
 
 gulp.task('copyImages', () => {
   return gulp.src(
-    path.join(paths.src.images, '**', '*.*')
+    path.join(paths.src.images, '**', '*.*'), { base: paths.src.root }
   )
     .pipe(cache('copyImages'))
     .pipe(print())
-    .pipe(gulp.dest(paths.dest.images))
+    .pipe(gulp.dest(paths.dest.root))
     .pipe(livereload());
 });

frontend/gulp/gulpFile.js

@@ -1,8 +1,5 @@
 require('./build.js');
 require('./clean.js');
 require('./copy.js');
-require('./imageMin.js');
-require('./start.js');
-require('./stripBom.js');
 require('./watch.js');
 require('./webpack.js');

frontend/gulp/helpers/errorHandler.js

@@ -1,6 +1,6 @@
-const gulpUtil = require('gulp-util');
+const colors = require('ansi-colors');
 
 module.exports = function errorHandler(error) {
-  gulpUtil.log(gulpUtil.colors.red(`Error (${error.plugin}): ${error.message}`));
+  console.log(colors.red(`Error (${error.plugin}): ${error.message}`));
   this.emit('end');
 };

frontend/gulp/helpers/html-annotate-loader.js

@@ -1,15 +0,0 @@
-const path = require('path');
-const rootPath = path.resolve(__dirname + '/../../src/');
-module.exports = function(source) {
-  if (this.cacheable) {
-    this.cacheable();
-  }
-
-  const resourcePath = this.resourcePath.replace(rootPath, '');
-  const wrappedSource =`
-  <!-- begin ${resourcePath} -->
-    ${source}
-  <!-- end ${resourcePath} -->`;
-
-  return wrappedSource;
-};

frontend/gulp/helpers/paths.js

@@ -1,15 +1,15 @@
-const root = './frontend/src/';
+const root = './frontend/src';
 
 const paths = {
   src: {
     root,
-    html: root + '*.html',
-    scripts: root + '**/*.js',
-    content: root + 'Content/',
-    fonts: root + 'Content/Fonts/',
-    images: root + 'Content/Images/',
+    html: `${root}/*.html`,
+    scripts: `${root}/**/*.js`,
+    content: `${root}/Content/`,
+    fonts: `${root}/Content/Fonts/`,
+    images: `${root}/Content/Images/`,
     exclude: {
-      libs: `!${root}JsLibraries/**`
+      libs: `!${root}/JsLibraries/**`
     }
   },
   dest: {

frontend/gulp/imageMin.js

@@ -1,15 +0,0 @@
-var gulp = require('gulp');
-var print = require('gulp-print').default;
-var paths = require('./helpers/paths.js');
-
-gulp.task('imageMin', () => {
-  var imagemin = require('gulp-imagemin');
-  return gulp.src(paths.src.images)
-    .pipe(imagemin({
-      progressive: false,
-      optimizationLevel: 4,
-      svgoPlugins: [{ removeViewBox: false }]
-    }))
-    .pipe(print())
-    .pipe(gulp.dest(paths.src.content + 'Images/'));
-});

frontend/gulp/start.js

@@ -1,104 +0,0 @@
-// will download and run radarr (server) in a non-windows enviroment
-// you can use this if you don't care about the server code and just want to work
-// with the web code.
-
-var http = require('http');
-var gulp = require('gulp');
-var fs = require('fs');
-var targz = require('tar.gz');
-var del = require('del');
-var spawn = require('child_process').spawn;
-
-function download(url, dest, cb) {
-  console.log('Downloading ' + url + ' to ' + dest);
-  var file = fs.createWriteStream(dest);
-  http.get(url, function(response) {
-    response.pipe(file);
-    file.on('finish', function() {
-      console.log('Download completed');
-      file.close(cb);
-    });
-  });
-}
-
-function getLatest(cb) {
-  var branch = 'develop';
-  process.argv.forEach(function(val) {
-    var branchMatch = /branch=([\S]*)/.exec(val);
-    if (branchMatch && branchMatch.length > 1) {
-      branch = branchMatch[1];
-    }
-  });
-
-  var url = 'http://radarr.aeonlucid.com/v1/update/' + branch + '?os=osx';
-
-  console.log('Checking for latest version:', url);
-
-  http.get(url, function(res) {
-    var data = '';
-
-    res.on('data', function(chunk) {
-      data += chunk;
-    });
-
-    res.on('end', function() {
-      var updatePackage = JSON.parse(data).updatePackage;
-      console.log('Latest version available: ' + updatePackage.version + ' Release Date: ' + updatePackage.releaseDate);
-      cb(updatePackage);
-    });
-  }).on('error', function(e) {
-    console.log('problem with request: ' + e.message);
-  });
-}
-
-function extract(source, dest, cb) {
-  console.log('extracting download page to ' + dest);
-  new targz().extract(source, dest, function(err) {
-    if (err) {
-      console.log(err);
-    }
-    console.log('Update package extracted.');
-    cb();
-  });
-}
-
-gulp.task('getSonarr', function() {
-  try {
-    fs.mkdirSync('./_start/');
-  } catch (e) {
-    if (e.code !== 'EEXIST') {
-      throw e;
-    }
-  }
-
-  getLatest(function(updatePackage) {
-    var packagePath = './_start/' + updatePackage.filename;
-    var dirName = './_start/' + updatePackage.version;
-    download(updatePackage.url, packagePath, function() {
-      extract(packagePath, dirName, function() {
-        // clean old binaries
-        console.log('Cleaning old binaries');
-        del.sync(['./_output/*', '!./_output/UI/']);
-        console.log('copying binaries to target');
-        gulp.src(dirName + '/NzbDrone/*.*')
-          .pipe(gulp.dest('./_output/'));
-      });
-    });
-  });
-});
-
-gulp.task('startSonarr', function() {
-  var ls = spawn('mono', ['--debug', './_output/Radarr.exe']);
-
-  ls.stdout.on('data', function(data) {
-    process.stdout.write(data);
-  });
-
-  ls.stderr.on('data', function(data) {
-    process.stdout.write(data);
-  });
-
-  ls.on('close', function(code) {
-    console.log('child process exited with code ' + code);
-  });
-});

frontend/gulp/stripBom.js

@@ -1,13 +0,0 @@
-const gulp = require('gulp');
-const paths = require('./helpers/paths.js');
-const stripbom = require('gulp-stripbom');
-
-function stripBom(dest) {
-  gulp.src([paths.src.scripts, paths.src.exclude.libs])
-    .pipe(stripbom({ showLog: false }))
-    .pipe(gulp.dest(dest));
-}
-
-gulp.task('stripBom', () => {
-  stripBom(paths.src.root);
-});

frontend/gulp/watch.js

@@ -1,27 +1,18 @@
 const gulp = require('gulp');
 const livereload = require('gulp-livereload');
-const watch = require('gulp-watch');
+const gulpWatch = require('gulp-watch');
 const paths = require('./helpers/paths.js');
 
 require('./copy.js');
 require('./webpack.js');
 
-function watchTask(glob, task) {
-  const options = {
-    name: `watch: ${task}`,
-    verbose: true
-  };
-  return watch(glob, options, () => {
-    gulp.start(task);
-  });
-}
-
-gulp.task('watch', ['copyHtml', 'copyFonts', 'copyImages', 'copyJs'], () => {
+function watch() {
   livereload.listen({ start: true });
 
-  gulp.start('webpackWatch');
+  gulp.task('webpackWatch')();
+  gulpWatch(paths.src.html, gulp.series('copyHtml'));
+  gulpWatch(`${paths.src.fonts}**/*.*`, gulp.series('copyFonts'));
+  gulpWatch(`${paths.src.images}**/*.*`, gulp.series('copyImages'));
+}
 
-  watchTask(paths.src.html, 'copyHtml');
-  watchTask(`${paths.src.fonts}**/*.*`, 'copyFonts');
-  watchTask(`${paths.src.images}**/*.*`, 'copyImages');
-});
+gulp.task('watch', gulp.series('build', watch));

frontend/gulp/webpack.js

@@ -4,14 +4,15 @@ const livereload = require('gulp-livereload');
 const path = require('path');
 const webpack = require('webpack');
 const errorHandler = require('./helpers/errorHandler');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const browsers = require('../browsers');
 
 const uiFolder = 'UI';
-const root = path.join(__dirname, '..', 'src');
+const frontendFolder = path.join(__dirname, '..');
+const srcFolder = path.join(frontendFolder, 'src');
 const isProduction = process.argv.indexOf('--production') > -1;
 
-console.log('ROOT:', root);
+console.log('Source Folder:', srcFolder);
 console.log('isProduction:', isProduction);
 
 const cssVarsFiles = [
@@ -21,40 +22,19 @@ const cssVarsFiles = [
   '../src/Styles/Variables/animations'
 ].map(require.resolve);
 
-const extractCSSPlugin = new ExtractTextPlugin({
-  filename: path.join('_output', uiFolder, 'Content', 'styles.css'),
-  allChunks: true,
-  disable: false,
-  ignoreOrder: true
-});
-
 const plugins = [
-  extractCSSPlugin,
-
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'vendor'
-  }),
-
   new webpack.DefinePlugin({
     __DEV__: !isProduction,
     'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
+  }),
+
+  new MiniCssExtractPlugin({
+    filename: path.join('_output', uiFolder, 'Content', 'styles.css')
   })
 ];
 
-if (isProduction) {
-  plugins.push(new UglifyJSPlugin({
-    sourceMap: true,
-    uglifyOptions: {
-      mangle: false,
-      output: {
-        comments: false,
-        beautify: true
-      }
-    }
-  }));
-}
-
 const config = {
+  mode: isProduction ? 'production' : 'development',
   devtool: '#source-map',
 
   stats: {
@@ -73,8 +53,8 @@ const config = {
 
   resolve: {
     modules: [
-      root,
-      path.join(root, 'Shims'),
+      srcFolder,
+      path.join(srcFolder, 'Shims'),
       'node_modules'
     ],
     alias: {
@@ -87,6 +67,10 @@ const config = {
     sourceMapFilename: '[file].map'
   },
 
+  optimization: {
+    chunkIds: 'named'
+  },
+
   plugins,
 
   resolveLoader: {
@@ -101,53 +85,56 @@ const config = {
       {
         test: /\.js?$/,
         exclude: /(node_modules|JsLibraries)/,
-        loader: 'babel-loader',
-        query: {
-          plugins: ['transform-class-properties'],
-          presets: ['es2015', 'decorators-legacy', 'react', 'stage-2'],
-          env: {
-            development: {
-              plugins: ['transform-react-jsx-source']
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              configFile: `${frontendFolder}/babel.config.js`,
+              envName: isProduction ? 'production' : 'development',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    modules: false,
+                    loose: true,
+                    debug: false,
+                    useBuiltIns: 'entry',
+                    targets: browsers
+                  }
+                ]
+              ]
             }
           }
-        }
+        ]
       },
 
       // CSS Modules
       {
         test: /\.css$/,
         exclude: /(node_modules|globals.css)/,
-        use: extractCSSPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-variables-loader',
-              options: {
-                cssVarsFiles
-              }
-            },
-            {
-              loader: 'css-loader',
-              options: {
-                modules: true,
-                importLoaders: 1,
-                localIdentName: '[name]-[local]-[hash:base64:5]',
-                sourceMap: true
-              }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                config: {
-                  ctx: {
-                    cssVarsFiles
-                  },
-                  path: 'frontend/postcss.config.js'
-                }
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              localIdentName: '[name]/[local]/[hash:base64:5]',
+              modules: true
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              config: {
+                ctx: {
+                  cssVarsFiles
+                },
+                path: 'frontend/postcss.config.js'
               }
             }
-          ]
-        })
+          }
+        ]
       },
 
       // Global styles
@@ -195,17 +182,16 @@ const config = {
 };
 
 gulp.task('webpack', () => {
-  return gulp.src('index.js')
-    .pipe(webpackStream(config))
-    .pipe(gulp.dest(''));
+  return webpackStream(config)
+    .pipe(gulp.dest('./'));
 });
 
 gulp.task('webpackWatch', () => {
   config.watch = true;
-  return gulp.src('')
-    .pipe(webpackStream(config))
+
+  return webpackStream(config)
     .on('error', errorHandler)
-    .pipe(gulp.dest(''))
+    .pipe(gulp.dest('./'))
     .on('error', errorHandler)
     .pipe(livereload())
     .on('error', errorHandler);