Big various updates

README.md

@@ -48,20 +48,17 @@ module.exports = buildWebpackConfig([
 ])
 ```
 
-To add a loader, for example, TypeScript Loader:
-
+For example, this is the way to customize the webpack-dev-server options.
 ```js
 const buildWebpackConfig = require('webpack-preset-accurapp')
-
-function tsLoader() {
-  return (context, { addLoader }) => addLoader({
-    test: /\.tsx?$/,
-    loader: 'ts-loader',
-  })
-}
+const { env, devServer } = require('webpack-blocks')
 
 module.exports = buildWebpackConfig([
-  tsLoader(),
+  env('development', [
+    devServer({
+      // your custom options here
+    }),
+  ]),
 ])
 ```
 

packages/accurapp-scripts/bin/scripts.js

@@ -1,27 +1,29 @@
 #!/usr/bin/env node
-if (parseFloat(process.versions.node) < 6.5) throw new Error('Sorry, Node 6.5+ is required! Tip: use `nvm` for painless upgrades.')
+if (parseFloat(process.versions.node) < 7) throw new Error('Sorry, Node 7+ is required! Tip: use `nvm` for painless upgrades.')
 
 // warn if any accurapp package is outdated
-const latestVersion = require('latest-version')
-const semver = require('semver')
-const { createOutdatedMessage, yellowBox } = require('../scripts/_utils')
+if (!process.env.CI) {
+  const latestVersion = require('latest-version')
+  const semver = require('semver')
+  const { createOutdatedMessage, yellowBox } = require('../scripts/_utils')
 
-const currentDeps = [
-  require('../package.json'),
-  require('../../eslint-config-accurapp/package.json'),
-  require('../../webpack-preset-accurapp/package.json'),
-]
+  const currentDeps = [
+    require('../package.json'),
+    require('../../eslint-config-accurapp/package.json'),
+    require('../../webpack-preset-accurapp/package.json'),
+  ]
 
-Promise.all(currentDeps.map((dep) => latestVersion(dep.name)))
-  .then((npmVersions) => {
-    const latestDeps = npmVersions.map((version, i) => Object.assign({}, currentDeps[i], { version }))
-    const outdatedDeps = currentDeps.filter((dep, i) => semver.lt(dep.version, latestDeps[i].version))
+  Promise.all(currentDeps.map((dep) => latestVersion(dep.name)))
+    .then((npmVersions) => {
+      const latestDeps = npmVersions.map((version, i) => Object.assign({}, currentDeps[i], { version }))
+      const outdatedDeps = currentDeps.filter((dep, i) => semver.lt(dep.version, latestDeps[i].version))
 
-    if (outdatedDeps.length > 0) {
-      const message = createOutdatedMessage(outdatedDeps, latestDeps)
-      console.log(yellowBox(message))
-    }
-  })
+      if (outdatedDeps.length > 0) {
+        const message = createOutdatedMessage(outdatedDeps, latestDeps)
+        console.log(yellowBox(message))
+      }
+    })
+}
 
 // start the designated script
 const script = process.argv[2]

packages/accurapp-scripts/package.json

@@ -1,11 +1,11 @@
 {
   "name": "accurapp-scripts",
   "version": "3.2.10",
-  "description": "Scripts for AccurApp.",
+  "description": "Scripts for AccurApp",
   "repository": "accurat/accurapp",
   "license": "MIT",
   "engines": {
-    "node": ">=6.5"
+    "node": ">=7"
   },
   "files": [
     "bin",
@@ -15,18 +15,23 @@
     "accurapp-scripts": "./bin/scripts.js"
   },
   "dependencies": {
-    "boxen": "^1.2.1",
-    "chalk": "^2.1.0",
-    "cross-spawn": "^5.1.0",
-    "detect-port": "^1.2.0",
+    "boxen": "^1.3.0",
+    "chalk": "^2.3.0",
+    "columnify": "^1.5.4",
+    "cross-spawn": "^6.0.3",
+    "detect-port": "^1.2.2",
     "dotenv": "^4.0.0",
     "figlet": "^1.2.0",
-    "fs-extra": "^4.0.1",
+    "filesize": "^3.5.11",
+    "fs-extra": "^5.0.0",
+    "gzip-size": "^4.1.0",
+    "indent-string": "^3.2.0",
     "latest-version": "^3.1.0",
+    "outdent": "^0.4.1",
     "path": "^0.12.7",
-    "react-dev-utils": "^4.0.1",
-    "semver": "^5.4.1",
-    "webpack": "^3.5.6",
-    "webpack-dev-server": "^2.7.1"
+    "react-dev-utils": "6.0.0-next.9754a231",
+    "semver": "^5.5.0",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.11.1"
   }
 }

packages/accurapp-scripts/scripts/_utils.js

@@ -1,8 +1,14 @@
 const path = require('path')
+const fs = require('fs')
 const webpack = require('webpack')
 const chalk = require('chalk')
 const figlet = require('figlet')
 const boxen = require('boxen')
+const outdent = require('outdent')
+const filesize = require('filesize')
+const gzipSize = require('gzip-size').sync
+const indentString = require('indent-string')
+const columnify = require('columnify')
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
 
 const log = {
@@ -15,6 +21,11 @@ const log = {
 function noop() {}
 
 function coloredBanner(text, colors = ['blue', 'red']) {
+  // If the console is small, we show only the logo
+  if (text.includes(' accurapp') && process.stdout.columns < 125) {
+    text = text.slice(0, -' accurapp'.length)
+  }
+
   const bannerText = text.replace(/\|/g, 'l') // In BigMoney font, 'l' (lowercase L) are much nicer than '|' (pipes)
   const bannerColors = { '$': colors[0], '_': colors[1], '|': colors[1], '\\': colors[1], '/': colors[1] }
   const banner = figlet.textSync(bannerText, { font: 'Big Money-nw' })
@@ -38,11 +49,11 @@ function createOutdatedMessage(outdatedDeps, latestDeps) {
     return `${chalk.blue(dep.name)} ${chalk.gray(dep.version)} → ${chalk.green(updatedDep.version)}`
   })
 
-  return `
-${chalk.yellow('Hey, an update for accurapp is available!')}
-${outdatedMessages.join('\n')}
-${chalk.yellow('Run')} ${chalk.cyan('yarn upgrade-interactive --latest')} ${chalk.yellow('to update')}
-`
+  return outdent`
+    ${chalk.yellow('Hey, an update for accurapp is available!')}
+    ${outdatedMessages.join('\n')}
+    ${chalk.yellow('Run')} ${chalk.cyan('yarn upgrade-interactive --latest')} ${chalk.yellow('to update')}
+  `
 }
 
 function indent(text, prepend = '  ', firstLinePrepend = prepend) {
@@ -108,6 +119,60 @@ function createWebpackCompiler(onFirstReadyCallback = noop, onError = noop) {
   return compiler
 }
 
+function printFileSizes(webpackStats, appBuild, maxBundleGzipSize = 512 * 1024) {
+  const assets = (webpackStats.stats || [webpackStats])
+    .map(stats =>
+      stats
+        .toJson()
+        .assets.filter(asset => /\.(js|css)$/.test(asset.name))
+        .map(asset => {
+          const fileContents = fs.readFileSync(path.join(appBuild, asset.name))
+          const size = fs.statSync(path.join(appBuild, asset.name)).size
+          const sizeGzip = gzipSize(fileContents)
+
+          return {
+            folder: path.join(path.basename(appBuild), path.dirname(asset.name)),
+            name: path.basename(asset.name),
+            size,
+            sizeGzip,
+          }
+        })
+    )
+    .reduce((single, all) => all.concat(single), [])
+
+  assets.sort((a, b) => b.size - a.size)
+
+  const isLarge = asset => path.extname(asset.name) === '.js' && asset.size > maxBundleGzipSize
+
+  const columnData = assets.reduce((columnObj, asset) => {
+    const sizeLabel = `${filesize(asset.size)} ${chalk.dim(`(${filesize(asset.sizeGzip)} gzipped)`)}`
+    const firstColumn = isLarge(asset) ? chalk.yellow(sizeLabel) : sizeLabel
+    const secondColumn = `${chalk.dim(`${asset.folder}${path.sep}`)}${chalk.cyan(asset.name)}`
+
+    columnObj[firstColumn] = secondColumn
+    return columnObj
+  }, {})
+
+  console.log(
+    indentString(
+      columnify(columnData, {
+        showHeaders: false,
+        columnSplitter: '   ',
+      }),
+      3
+    )
+  )
+
+  if (assets.some(isLarge)) {
+    console.log()
+    console.log(chalk.yellow(outdent`
+      The bundle size is significantly larger than recommended.
+      Consider reducing it with code splitting: https://goo.gl/9VhYWB
+      You can also analyze the project dependencies: https://goo.gl/sDmR4n
+    `))
+  }
+}
+
 module.exports = {
   log,
   noop,
@@ -118,4 +183,5 @@ module.exports = {
   listLine,
   readWebpackConfig,
   createWebpackCompiler,
+  printFileSizes,
 }

packages/accurapp-scripts/scripts/build.js

@@ -11,8 +11,7 @@ require('dotenv').config({ silent: true })
 const chalk = require('chalk')
 const path = require('path')
 const fs = require('fs-extra')
-const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = require('react-dev-utils/FileSizeReporter')
-const { log, createWebpackCompiler, readWebpackConfig, coloredBanner } = require('./_utils')
+const { log, createWebpackCompiler, readWebpackConfig, coloredBanner, printFileSizes } = require('./_utils')
 
 const appDir = process.cwd()
 const config = readWebpackConfig()
@@ -57,15 +56,12 @@ function build() {
 
 console.log(coloredBanner('/||||/| accurapp', ['cyan', 'magenta']))
 
-measureFileSizesBeforeBuild(appBuild)
-  .then((previousFileSizes) => {
-    clearBuildFolder()
-    copyPublicFolder()
-    build()
-      .then((stats) => {
-        log.info('File sizes after gzip:')
-        console.log()
-        printFileSizesAfterBuild(stats, previousFileSizes, appBuild)
-        console.log()
-      })
+clearBuildFolder()
+copyPublicFolder()
+build()
+  .then((stats) => {
+    log.info('File sizes:')
+    console.log()
+    printFileSizes(stats, appBuild)
+    console.log()
   })

packages/accurapp-scripts/scripts/start.js

@@ -9,41 +9,35 @@ const detect = require('detect-port')
 const WebpackDevServer = require('webpack-dev-server')
 const openOrRefreshBrowser = require('react-dev-utils/openBrowser')
 const { prepareUrls } = require('react-dev-utils/WebpackDevServerUtils')
-const { log, createWebpackCompiler, coloredBanner } = require('./_utils')
+const { log, createWebpackCompiler, readWebpackConfig, coloredBanner } = require('./_utils')
 
 const HOST = process.env.HOST || '0.0.0.0'
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000
 
-function buildDevServerConfig(lanUrl) {
-  return {
-    compress: true,
-    clientLogLevel: 'none',
-    historyApiFallback: true,
-    hot: true,
-    contentBase: './public/',
-    quiet: true,
-    watchOptions: {
-      ignored: /node_modules/,
-    },
-    host: HOST,
-    overlay: false,
-    public: lanUrl,
-  }
-}
-
 function runDevServer(port) {
   const urls = prepareUrls('http', HOST, port)
   const compiler = createWebpackCompiler(() => {
     log.info(`The app is running at: ${chalk.cyan(urls.localUrlForTerminal)}`)
     log.info(`Or on your network at: ${chalk.cyan(urls.lanUrlForTerminal)}`)
   })
-  const devServerConfig = buildDevServerConfig(urls.lanUrlForConfig)
+
+  const devServerConfig = Object.assign({
+    host: HOST,
+    public: urls.lanUrlForConfig,
+  }, readWebpackConfig().devServer)
   const devServer = new WebpackDevServer(compiler, devServerConfig)
   devServer.listen(port, HOST, err => {
     if (err) return log.err(err)
     log.info('Starting the development server...')
     openOrRefreshBrowser(urls.localUrlForBrowser)
   })
+
+  const shutDownServer = () => {
+    devServer.close()
+    process.exit()
+  }
+  process.on('SIGINT', shutDownServer)
+  process.on('SIGTERM', shutDownServer)
 }
 
 console.log(coloredBanner('/||||/| accurapp'))

packages/create-accurapp/index.js

@@ -123,6 +123,10 @@ const packageJson = {
     start: 'accurapp-scripts start',
     build: 'accurapp-scripts build',
   },
+  browserslist: {
+    production: ['last 2 versions', 'ie 11'],
+    development: ['last 1 Chrome version'],
+  },
 }
 if (isRealRun) writePackageJson(appDir, packageJson)
 

packages/create-accurapp/package.json

@@ -5,7 +5,7 @@
   "repository": "accurat/accurapp",
   "license": "MIT",
   "engines": {
-    "node": ">=6.5"
+    "node": ">=7"
   },
   "files": [
     "index.js",

packages/eslint-config-accurapp/package.json

@@ -4,6 +4,12 @@
   "description": "ESLint configuration used by Accurat",
   "repository": "accurat/accurapp",
   "license": "MIT",
+  "engines": {
+    "node": ">=7"
+  },
+  "files": [
+    "index.js"
+  ],
   "dependencies": {
     "babel-eslint": "^7.2.2",
     "eslint": "^3.19.0",

packages/webpack-preset-accurapp/index.js

@@ -3,6 +3,7 @@ const {
   createConfig,
   addPlugins,
   customConfig,
+  devServer,
   entryPoint,
   setOutput,
   env,
@@ -91,10 +92,19 @@ function accuPreset(config = []) {
     //
     env('development', [
       prependEntry('react-dev-utils/webpackHotDevClient'),
+      devServer({
+        compress: true,
+        clientLogLevel: 'none',
+        contentBase: './public/',
+        watchContentBase: true,
+        quiet: true,
+        watchOptions: {
+          ignored: /node_modules/,
+        },
+        overlay: false,
+      }),
       eslintLoader(),
       addPlugins([
-        // This is necessary to emit hot updates (currently CSS only)
-        new webpack.HotModuleReplacementPlugin(),
         // Automatic rediscover of packages after `npm install`
         new WatchMissingNodeModulesPlugin('node_modules'),
       ]),