refactor: 🎨 improve code structure

Author: luthfimasruri

scripts/buildAssets.ts

@@ -10,11 +10,13 @@ npm run assets:build -- vue-quill
 ;(async () => {
   const fs = require('fs-extra')
   const path = require('path')
+  const chalk = require('chalk')
   const execa = require('execa')
   const logger = require('./logger')
   const {
-    targetAssets: allTargets,
+    targets: allTargets,
     getPackageDir,
+    getAssetsConfigJson,
     fuzzyMatchTarget,
     checkAssetsSize,
     runParallel,
@@ -36,11 +38,14 @@ npm run assets:build -- vue-quill
     await fs.remove(path.resolve(__dirname, '../node_modules/.rts2_cache'))
   }
   if (!targets.length) {
+    logger.header(allTargets, 'BUILD ASSETS')
     await buildAll(allTargets)
     checkAllSizes(allTargets)
   } else {
-    await buildAll(fuzzyMatchTarget(allTargets, targets, buildAllMatching))
-    checkAllSizes(fuzzyMatchTarget(allTargets, targets, buildAllMatching))
+    const matchedTargets = fuzzyMatchTarget(allTargets, targets, buildAllMatching)
+    logger.header(matchedTargets, 'BUILD ASSETS')
+    await buildAll(matchedTargets)
+    checkAllSizes(matchedTargets)
   }
 
   async function buildAll(targets: string[]) {
@@ -49,13 +54,21 @@ npm run assets:build -- vue-quill
 
   async function buildAssets(target: string) {
     const pkgDir = getPackageDir(target)
-    const assets = require(path.resolve(pkgDir, 'assets.config.json'))
+    const assets = getAssetsConfigJson(target)
 
     // only build published packages for release
     if (isRelease && assets.private) return
-    if (!assets.css.length) return
+    if (!assets || !assets.css.length) {
+      logger.warning(
+        target,
+        `Can't find assets configuration or file configuration ${chalk.underline(
+          target + '/assets.config.json'
+        )}`
+      )
+      return
+    }
 
-    logger.header(target, 'BUILD ASSETS')
+    logger.info(target, 'Compiling assets...')
 
     for (const css of assets.css) {
       const input: string = path.resolve(pkgDir, css.input)

scripts/dev.ts

@@ -17,14 +17,20 @@ __DEV__=false npm run dev
 */
 ;(async () => {
   const execa = require('execa')
-  const { fuzzyMatchTarget } = require('./utils')
+  const logger = require('./logger')
+  const { targets: allTargets, fuzzyMatchTarget } = require('./utils')
 
   const args = require('minimist')(process.argv.slice(2))
-  const target: string = args._.length ? fuzzyMatchTarget(args._)[0] : 'vue-quill'
+  const target: string = args._.length ? fuzzyMatchTarget(allTargets, args._)[0] : ''
   const formats: string[] = args.formats || args.f
   const sourceMap: boolean = args.sourcemap || args.s
   const commit = execa.sync('git', ['rev-parse', 'HEAD']).stdout.slice(0, 7)
 
+  if (target === '') {
+    logger.warning('', 'You must specify the target e.g. npm run dev -- vue-quill')
+    return
+  }
+
   await execa(
     'rollup',
     [

scripts/devAssets.ts

@@ -8,56 +8,42 @@ npm run assets:build -- vue-quill
 ```
 */
 ;(async () => {
-  const fs = require('fs-extra')
   const path = require('path')
   const execa = require('execa')
   const logger = require('./logger')
-  const {
-    targetAssets: allTargets,
-    getPackageDir,
-    fuzzyMatchTarget,
-    runParallel,
-  } = require('./utils')
+  const { targets: allTargets, getPackageDir, fuzzyMatchTarget } = require('./utils')
 
   const args = require('minimist')(process.argv.slice(2))
-  const targets: string[] = args._
+  const target: string = args._.length ? fuzzyMatchTarget(allTargets, args._)[0] : ''
   const sourceMap = args.sourcemap || args.s
-  const isRelease: boolean = args.release
-  const buildAllMatching: boolean = args.all || args.a
 
-  if (isRelease) {
-    // remove build cache for release builds to avoid outdated enum values
-    await fs.remove(path.resolve(__dirname, '../node_modules/.rts2_cache'))
-  }
-  if (!targets.length) {
-    await buildAll(allTargets)
-  } else {
-    await buildAll(fuzzyMatchTarget(allTargets, targets, buildAllMatching))
-  }
-
-  async function buildAll(targets: string[]) {
-    await runParallel(require('os').cpus().length, targets, build)
+  if (target === '') {
+    logger.warning('', 'You must specify the target e.g. npm run assets:dev -- vue-quill')
+    return
   }
 
-  async function build(target: string) {
-    const pkgDir = getPackageDir(target)
-    const assets = require(path.resolve(pkgDir, 'assets.config.json'))
+  const pkgDir = getPackageDir(target)
+  const assets = require(path.resolve(pkgDir, 'assets.config.json'))
 
-    if (assets.css) {
-      logger.info(target, `Waiting for changes...`)
-      assets.css.forEach((css: any) => {
-        const input = path.resolve(pkgDir, css.input)
-        const output = path.resolve(pkgDir, css.output)
-        const inputExt = path.extname(input)
+  if (assets.css) {
+    const inputs: string[] = []
+    const outputs: string[] = []
 
-        if (inputExt === '.styl' || inputExt === '.css') {
-          const commands: string[] = ['stylus', '-w', input, '-o', output]
-          if (sourceMap) commands.push('--sourcemap')
-          execa('npx', commands)
-        } else {
-          logger.error(target, `File extention not supported: ${input}`)
-        }
-      })
+    for (const css of assets.css) {
+      const input = path.resolve(pkgDir, css.input)
+      const output = path.resolve(pkgDir, css.output)
+      const inputExt = path.extname(input)
+      if (inputExt === '.styl' || inputExt === '.css') {
+        inputs.push(input)
+        outputs.push(output)
+      } else {
+        logger.error(target, `File extention not supported: ${input}`)
+      }
     }
+    const commands: string[] = ['stylus', '-w', ...inputs, '-o', ...outputs]
+    if (sourceMap) commands.push('--sourcemap')
+    await execa('npx', commands, { stdio: 'inherit' })
   }
+
+  logger.info(target, `${new Date().getUTCDate()} Waiting for changes...`)
 })()

scripts/utils.ts

@@ -23,31 +23,24 @@ const targets: string[] = fs.readdirSync(packagesDir).filter((targetDir: string)
   return true
 })
 
-const targetAssets: string[] = fs.readdirSync(packagesDir).filter((targetDir: string) => {
-  const pkgDir = path.resolve(packagesDir, targetDir)
-  if (!fs.statSync(pkgDir).isDirectory()) {
-    return false
-  }
-  const assetsPath = path.resolve(pkgDir, 'assets.config.json')
-  if (!fs.existsSync(assetsPath)) {
-    return false
-  }
-  const assets = require(assetsPath)
-  if (assets.private && !assets.css) {
-    return false
-  }
-  return true
-})
-
 function getPackageDir(target: string) {
   return path.resolve(packagesDir, target)
 }
 
 function getPackageJson(target = '') {
-  if (target === '') {
-    return require(path.resolve(rootDir, 'package.json'))
-  }
-  return require(path.resolve(packagesDir, target, 'package.json'))
+  const pkgPath =
+    target === ''
+      ? path.resolve(rootDir, 'package.json')
+      : path.resolve(packagesDir, target, 'package.json')
+
+  if (!fs.existsSync(pkgPath)) return null
+  return require(pkgPath)
+}
+
+function getAssetsConfigJson(target = '') {
+  const pkgPath = path.resolve(packagesDir, target, 'assets.config.json')
+  if (!fs.existsSync(pkgPath)) return null
+  return require(pkgPath)
 }
 
 function fuzzyMatchTarget(
@@ -115,7 +108,7 @@ function checkAssetsSize(target: string, ext = '.css') {
         tableSizes.push(getTableSize(path.resolve(distDir, file)))
       }
     })
-    logger.table(tableSizes)
+    if (tableSizes.length) logger.table(tableSizes)
   })
 }
 
@@ -184,9 +177,9 @@ module.exports = {
   rootDir,
   packagesDir,
   targets,
-  targetAssets,
   getPackageDir,
   getPackageJson,
+  getAssetsConfigJson,
   fuzzyMatchTarget,
   runParallel,
   checkBuildSize,