[FEATURE] add browsers cmd to show browserslist info to the cli

Author: dmh

lib/args/args.js

@@ -6,6 +6,7 @@ import minimist from 'minimist'
 const commands = [
   'info',
   'init',
+  'browsers',
   'build',
   'watch',
   'fetch',

lib/args/help.js

@@ -16,8 +16,9 @@ function help (data) {
   console.log(`CLI Commands:
 rh info          Info about the current project
 rh init          Initialize a new project based on a predefined config
+rh browsers      Show supported browsers and audience coverage
   `)
-  console.log(`CMS Lib Commands:
+  console.log(`HubSpot CMS Lib Commands:
 rh upload        Upload all
 rh fetch         Fetch all
 rh fetchModules  Fetch modules

lib/cmd/browsers.js

@@ -0,0 +1,66 @@
+/// <reference path="../types/types.js" />
+import browserslist from 'browserslist'
+import { isFileDirExists } from '../utils/fs.js'
+import chalk from 'chalk'
+
+/**
+ * #### get browserslist info from ${cwdPath}/.browserlistrc
+ * @async
+ * @param {LOCALDATA} data - local data
+ * @returns undefined
+ */
+async function browsers (data) {
+  if (await isFileDirExists(`${data.cwd.path}/.browserslistrc`)) {
+    const browsrs = browserslist(undefined, {
+      path: `${data.cwd.path}/.browserslistrc`,
+      config: '.browserslistrc'
+    })
+    const browserslistConfig = browserslist.readConfig(`${data.cwd.path}/.browserslistrc`)
+    const configToString = browserslistConfig.defaults.join('__NEWLINE__').replace(/ /g, '+')
+    const encodedString = encodeURI(configToString)
+    const browserslistLink = encodedString.replace(/__NEWLINE__/g, '%0A') + '%0A'
+    const global = browserslist.coverage(browserslist(browserslistConfig.defaults))
+    const eu = browserslist.coverage(browserslist(browserslistConfig.defaults), 'alt-EU')
+    const se = browserslist.coverage(browserslist(browserslistConfig.defaults), 'SE')
+    const chromeFirst = browsrs.find(e => e.includes('chrome'))
+    const chromeLast = browsrs.slice().reverse().find(e => e.includes('chrome'))
+    const firefoxFirst = browsrs.find(e => e.includes('firefox'))
+    const firefoxLast = browsrs.slice().reverse().find(e => e.includes('firefox'))
+    const iosSafFirst = browsrs.find(e => e.includes('ios_saf'))
+    const iosSafLast = browsrs.slice().reverse().find(e => e.includes('ios_saf'))
+    const safariFirst = browsrs.find(e => e.includes('safari'))
+    const safariLast = browsrs.slice().reverse().find(e => e.includes('safari'))
+    const edgeFirst = browsrs.find(e => e.includes('edge'))
+    const edgeLast = browsrs.slice().reverse().find(e => e.includes('edge'))
+    const samsungFirst = browsrs.find(e => e.includes('samsung'))
+    const samsungLast = browsrs.slice().reverse().find(e => e.includes('samsung'))
+    const andChrFirst = browsrs.find(e => e.includes('and_chr'))
+    const andChrLast = browsrs.slice().reverse().find(e => e.includes('and_chr'))
+    console.log(chalk.green('\nSupported browsers:'))
+    console.log(`Chrome ${chromeLast?.split(' ')[1]}-${chromeFirst?.split(' ')[1]}`)
+    console.log(`Firefox ${firefoxLast?.split(' ')[1]}-${firefoxFirst?.split(' ')[1]}`)
+    console.log(`iOS Safari ${iosSafLast?.split(' ')[1]}-${iosSafFirst?.split(' ')[1]}`)
+    console.log(`Safari ${safariLast?.split(' ')[1]}-${safariFirst?.split(' ')[1]}`)
+    console.log(`Edge ${edgeLast?.split(' ')[1]}-${edgeFirst?.split(' ')[1]}`)
+    if (samsungFirst === samsungLast) {
+      console.log(`Samsung ${samsungFirst?.split(' ')[1]}`)
+    } else {
+      console.log(`Samsung ${samsungLast?.split(' ')[1]}-${samsungFirst?.split(' ')[1]}`)
+    }
+    if (andChrFirst === andChrLast) {
+      console.log(`Android Chrome ${andChrFirst?.split(' ')[1]}`)
+    } else {
+      console.log(`Android Chrome ${andChrLast?.split(' ')[1]}-${andChrFirst?.split(' ')[1]}`)
+    }
+    console.log(chalk.bold('\nAudience coverage:'))
+    console.log(`Global: ${chalk.green(`${Math.ceil(global)}%`)}`)
+    console.log(`Europe: ${chalk.green(`${Math.ceil(eu)}%`)}`)
+    console.log(`Sweden: ${chalk.green(`${Math.ceil(se)}%`)}`)
+
+    console.log(`\nClick to open the browser compatibility list:\n${chalk.cyan(`https://browsersl.ist/?results#q=${browserslistLink}`)}`)
+  } else {
+    console.log(`No .browserslistrc found in ${data.cwd.path}`)
+  }
+}
+
+export { browsers }

lib/cmd/info.js

@@ -1,5 +1,6 @@
 /// <reference path="../types/types.js" />
 import chalk from 'chalk'
+import { isFileDirExists } from '../utils/fs.js'
 
 /**
  * #### theme info
@@ -18,14 +19,18 @@ function themeInfo (data) {
 /**
  * #### possible commands to run
  * @private
+ * @async
  * @param {LOCALDATA} data - env variables
- * @returns {string} theme info
+ * @returns {Promise<string>} possible commands
  */
-function possibleCmds (data) {
+async function possibleCmds (data) {
   const cmds = []
   if (Array.isArray(data.env) && data.env.includes('GITHUB_TOKEN')) {
     cmds.push('rh init')
   }
+  if (await isFileDirExists(`${data.cwd.path}/.browserslistrc`)) {
+    cmds.push('rh browsers')
+  }
   if (data.theme && data.theme instanceof Object && data.theme.name) {
     cmds.push('rh upload', 'rh fetch', 'rh fetchModules', 'rh build', 'rh watch', 'rh validate', 'rh fields', 'rh fetchDb', 'rh uploadDb', 'rh lighthouse')
   }
@@ -39,14 +44,15 @@ function possibleCmds (data) {
 /**
  * #### Show info about the current project
  * @param {LOCALDATA} data - local data
+ * @async
  * @returns undefined
  */
-function info (data) {
+async function info (data) {
   console.log(`Folder name: ${chalk.cyan(data.cwd.name)}
 Git repository: ${data.git.isRepo || chalk.red('not found')}
 ${themeInfo(data)}
 `)
-  console.log(possibleCmds(data))
+  console.log(await possibleCmds(data))
 }
 
 export { info }

lib/init.js

@@ -10,6 +10,7 @@ import {
 import { collectLocalData } from './localdata.js'
 import { info } from './cmd/info.js'
 import { init } from './cmd/init.js'
+import { browsers } from './cmd/browsers.js'
 import { help } from './args/help.js'
 import { debug } from './args/debug.js'
 import { debugV } from './args/debug-verbose.js'
@@ -75,11 +76,14 @@ async function cliInit () {
     switch (args._[0]) {
       case 'info':
         // show info about the current project
-        info(data)
+        await info(data)
         break
       case 'init':
         await init(data)
         break
+      case 'browsers':
+        await browsers(data)
+        break
       case 'upload':
         // upload files to HubSpot
         checkIsHubSpotCmsTheme(data)

package-lock.json

@@ -42,6 +42,7 @@
     "@inquirer/select": "2.3.10",
     "@octokit/request": "9.1.3",
     "@resultify/hubspot-cms-lib": "3.4.1",
+    "browserslist": "4.23.2",
     "chalk": "5.3.0",
     "cli-table3": "0.6.5",
     "del": "7.1.0",