Add --min-density / --max-density options

Fixes #405

Author: nhoizey

src/adjustDensitiesAndViewportsWithStats.js

@@ -0,0 +1,70 @@
+const color = require('ansi-colors')
+const logger = require('./logger')
+
+module.exports = function adjustDensitiesAndViewportsWithStats(stats, opt) {
+  let result = {}
+
+  // check screen densities
+  const statsMinDensity = stats.reduce(
+    (min, p) => (p.density < min ? p.density : min),
+    stats[0].density,
+  )
+  const statsMaxDensity = stats.reduce(
+    (max, p) => (p.density > max ? p.density : max),
+    stats[0].density,
+  )
+  logger.info(
+    `\nScreen densities in stats go from ${color.green(
+      statsMinDensity,
+    )} to ${color.green(statsMaxDensity)}`,
+  )
+  result.minDensity = statsMinDensity
+  result.maxDensity = statsMaxDensity
+
+  if (opt.minDensity || opt.maxDensity) {
+    if (opt.minDensity) {
+      result.minDensity = Math.max(statsMinDensity, opt.minDensity)
+    }
+    if (opt.maxDensity) {
+      result.maxDensity = Math.min(statsMaxDensity, opt.maxDensity)
+    }
+    logger.info(
+      `Screen densities will be limited from ${color.green(
+        result.minDensity,
+      )} to ${color.green(result.maxDensity)}`,
+    )
+  }
+
+  // check viewports
+  const statsMinViewport = stats.reduce(
+    (min, p) => (p.viewport < min ? p.viewport : min),
+    stats[0].viewport,
+  )
+  const statsMaxViewport = stats.reduce(
+    (max, p) => (p.viewport > max ? p.viewport : max),
+    stats[0].viewport,
+  )
+  logger.info(
+    `\nViewports in stats go from ${color.green(
+      statsMinViewport + 'px',
+    )} to ${color.green(statsMaxViewport + 'px')}`,
+  )
+  result.minViewport = statsMinViewport
+  result.maxViewport = statsMaxViewport
+
+  if (opt.minViewport || opt.maxViewport) {
+    if (opt.minViewport) {
+      result.minViewport = Math.max(statsMinViewport, opt.minViewport)
+    }
+    if (opt.maxViewport) {
+      result.maxViewport = Math.min(statsMaxViewport, opt.maxViewport)
+    }
+    logger.info(
+      `Viewports will be limited from ${color.green(
+        result.minViewport + 'px',
+      )} to ${color.green(result.maxViewport + 'px')}`,
+    )
+  }
+
+  return result
+}

src/adjustViewportsWithStats.js

@@ -33,6 +33,14 @@ const argv = yargs
       describe: 'Maximum viewport width to check',
       type: 'number',
     },
+    minDensity: {
+      describe: 'Minimum screen density to consider',
+      type: 'number',
+    },
+    maxDensity: {
+      describe: 'Maximum screen density to consider',
+      type: 'number',
+    },
     url: {
       alias: 'u',
       describe: 'Page URL',
@@ -83,7 +91,10 @@ const argv = yargs
     ['minViewport', 'maxViewport'],
     'Global: limit viewport widths, for example for Art Direction (see docs)',
   )
-  .group(['statsFile'], 'Step 1: get actual stats of site visitors')
+  .group(
+    ['statsFile', 'minDensity', 'maxDensity'],
+    'Step 1: get actual stats of site visitors',
+  )
   .group(
     ['url', 'selector', 'delay', 'variationsFile'],
     'Step 2: get variations of image width across viewport widths',
@@ -118,6 +129,30 @@ const argv = yargs
         ),
       )
     }
+    if (argv.minDensity !== undefined && isNaN(argv.minDensity)) {
+      throw new Error(
+        color.red(`Error: ${color.redBright('minDensity')} must be a number`),
+      )
+    }
+    if (argv.minDensity < 0) {
+      throw new Error(
+        color.red(`Error: ${color.redBright('minDensity')} must be >= 0`),
+      )
+    }
+    if (argv.maxDensity !== undefined && isNaN(argv.maxDensity)) {
+      throw new Error(
+        color.red(`Error: ${color.redBright('maxDensity')} must be a number`),
+      )
+    }
+    if (argv.maxDensity < argv.minDensity) {
+      throw new Error(
+        color.red(
+          `Error: ${color.redBright(
+            'maxDensity',
+          )} must be greater than minDensity`,
+        ),
+      )
+    }
     if (isNaN(argv.delay)) {
       throw new Error(
         color.red(`Error: ${color.redBright('delay')} must be a number`),

src/cli.js

@@ -2,7 +2,7 @@ const fs = require('fs')
 const util = require('util')
 const path = require('path')
 const color = require('ansi-colors')
-const adjustViewportsWithStats = require('./adjustViewportsWithStats')
+const adjustDensitiesAndViewportsWithStats = require('./adjustDensitiesAndViewportsWithStats')
 const getStats = require('./getStats')
 const browse = require('./browse')
 const logger = require('./logger')
@@ -16,6 +16,8 @@ const defaultOptions = {
   selector: 'img',
   statsFile: null,
   variationsFile: null,
+  minDensity: null,
+  maxDensity: null,
   minViewport: null,
   maxViewport: null,
   delay: 5,
@@ -41,7 +43,7 @@ module.exports = async function main(settings) {
     path.resolve(options.basePath, options.statsFile),
     options,
   )
-  Object.assign(options, adjustViewportsWithStats(stats, options))
+  Object.assign(options, adjustDensitiesAndViewportsWithStats(stats, options))
 
   /* ======================================================================== */
   logger.info(
@@ -72,6 +74,8 @@ module.exports = async function main(settings) {
   let totalViews = 0
   stats.map((value) => {
     if (
+      value.density >= options.minDensity &&
+      value.density <= options.maxDensity &&
       value.viewport >= options.minViewport &&
       value.viewport <= options.maxViewport
     ) {
@@ -179,7 +183,7 @@ module.exports = async function main(settings) {
         options.widthsNumber
       } best widths, ${color.green('no computation necessary')}`,
     )
-    optimalWidths = perfectWidthsByDecreasingViews.values()
+    optimalWidths = [...perfectWidthsByDecreasingViews.keys()]
   } else {
     // Get all possible subset combinations in an array, with minimum and maximum lengths
     // Adapted from https://www.w3resource.com/javascript-exercises/javascript-function-exercise-21.php
@@ -312,7 +316,7 @@ module.exports = async function main(settings) {
   /* -------------------------- */
 
   let srcset = []
-  optimalWidths.forEach((width) => {
+  optimalWidths.sort().forEach((width) => {
     srcset.push(`your/image/path.ext ${width}w`)
   })