Initial Commit Rework

frontend/gulp/build.js

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

frontend/gulp/clean.js

@@ -0,0 +1,8 @@
+const gulp = require('gulp');
+const del = require('del');
+
+const paths = require('./helpers/paths');
+
+gulp.task('clean', () => {
+  return del([paths.dest.root]);
+});

frontend/gulp/copy.js

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

frontend/gulp/gulpFile.js

@@ -0,0 +1,8 @@
+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

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

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,23 @@
+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/',
+    exclude: {
+      libs: `!${root}JsLibraries/**`
+    }
+  },
+  dest: {
+    root: './_output/UI/',
+    content: './_output/UI/Content/',
+    fonts: './_output/UI/Content/Fonts/',
+    images: './_output/UI/Content/Images/'
+  }
+};
+
+module.exports = paths;

frontend/gulp/imageMin.js

@@ -0,0 +1,15 @@
+var gulp = require('gulp');
+var print = require('gulp-print');
+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

@@ -0,0 +1,104 @@
+// will download and run sonarr (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://services.sonarr.tv/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/NzbDrone.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

@@ -0,0 +1,13 @@
+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

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

frontend/gulp/webpack.js

@@ -0,0 +1,159 @@
+const _ = require('lodash');
+const gulp = require('gulp');
+const simpleVars = require('postcss-simple-vars');
+const nested = require('postcss-nested');
+const autoprefixer = require('autoprefixer');
+const webpackStream = require('webpack-stream');
+const livereload = require('gulp-livereload');
+const path = require('path');
+const webpack = require('webpack');
+const errorHandler = require('./helpers/errorHandler');
+const reload = require('require-nocache')(module);
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const uiFolder = 'UI';
+const root = path.join(__dirname, '..', 'src');
+const isProduction = process.argv.indexOf('--production') > -1;
+
+console.log('ROOT:', root);
+console.log('isProduction:', isProduction);
+
+const cssVariables = [
+  '../src/Styles/Variables/colors',
+  '../src/Styles/Variables/dimensions',
+  '../src/Styles/Variables/fonts',
+  '../src/Styles/Variables/animations'
+].map(require.resolve);
+
+const config = {
+  devtool: '#source-map',
+  stats: {
+    children: false
+  },
+  watchOptions: {
+    ignored: /node_modules/
+  },
+  entry: {
+    preload: 'preload.js',
+    vendor: 'vendor.js',
+    index: 'index.js'
+  },
+  resolve: {
+    root: [
+      root,
+      path.join(root, 'Shims'),
+      path.join(root, 'JsLibraries')
+    ]
+  },
+  output: {
+    filename: path.join('_output', uiFolder, '[name].js'),
+    sourceMapFilename: '[file].map'
+  },
+  plugins: [
+    new ExtractTextPlugin(path.join('_output', uiFolder, 'Content', 'styles.css'), { allChunks: true }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor'
+    }),
+    new webpack.DefinePlugin({
+      __DEV__: !isProduction,
+      'process.env': {
+        NODE_ENV: isProduction ? JSON.stringify('production') : JSON.stringify('development')
+      }
+    })
+  ],
+  resolveLoader: {
+    modulesDirectories: [
+      'node_modules',
+      'gulp/webpack/'
+    ]
+  },
+  eslint: {
+    formatter: function(results) {
+      return JSON.stringify(results);
+    }
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        exclude: /(node_modules|JsLibraries)/,
+        loader: 'babel',
+        query: {
+          plugins: ['transform-class-properties'],
+          presets: ['es2015', 'decorators-legacy', 'react', 'stage-2'],
+          env: {
+            development: {
+              plugins: ['transform-react-jsx-source']
+            }
+          }
+        }
+      },
+
+      // CSS Modules
+      {
+        test: /\.css$/,
+        exclude: /(node_modules|globals.css)/,
+        loader: ExtractTextPlugin.extract('style', 'css-loader?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
+      },
+
+      // Global styles
+      {
+        test: /\.css$/,
+        include: /(node_modules|globals.css)/,
+        loader: 'style!css-loader'
+      },
+
+      // Fonts
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url?limit=10240&mimetype=application/font-woff&emitFile=false&name=Content/Fonts/[name].[ext]'
+      },
+      {
+        test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'file-loader?emitFile=false&name=Content/Fonts/[name].[ext]'
+      }
+    ]
+  },
+  postcss: function(wpack) {
+    cssVariables.forEach(wpack.addDependency);
+
+    return [
+      simpleVars({
+        variables: function() {
+          return cssVariables.reduce(function(obj, vars) {
+            return _.extend(obj, reload(vars));
+          }, {});
+        }
+      }),
+      nested(),
+      autoprefixer({
+        browsers: [
+          'Chrome >= 30',
+          'Firefox >= 30',
+          'Safari >= 6',
+          'Edge >= 12',
+          'Explorer >= 10',
+          'iOS >= 7',
+          'Android >= 4.4'
+        ]
+      })
+    ];
+  }
+};
+
+gulp.task('webpack', () => {
+  return gulp.src('index.js')
+    .pipe(webpackStream(config))
+    .pipe(gulp.dest(''));
+});
+
+gulp.task('webpackWatch', () => {
+  config.watch = true;
+  return gulp.src('')
+    .pipe(webpackStream(config))
+    .on('error', errorHandler)
+    .pipe(gulp.dest(''))
+    .on('error', errorHandler)
+    .pipe(livereload())
+    .on('error', errorHandler);
+});