perf(cli): use fs.promises (#459)

* Use fs.promises in svgr cli

Node v10 got fs.promises support with already promisified api. See here https://nodejs.org/docs/latest-v10.x/api/fs.html#fs_fs_promises_api

Also we get helpful mkdir recursive flag which replaces mkdirp and
make-dir packages.

In this diff I replaced util.promisify with fs.promises where possible
and output-file-sync with combination of promisified fs.mkdir and fs.writeFile.

Author: TrySound

packages/cli/package.json

@@ -39,8 +39,7 @@
     "chalk": "^4.0.0",
     "commander": "^5.1.0",
     "dashify": "^2.0.0",
-    "glob": "^7.1.4",
-    "output-file-sync": "^2.0.1"
+    "glob": "^7.1.4"
   },
   "devDependencies": {
     "del": "^5.0.0"

packages/cli/src/dirCommand.js

@@ -1,18 +1,13 @@
 /* eslint-disable no-underscore-dangle, no-console */
-import fs from 'fs'
-import { promisify } from 'util'
+import { promises as fs } from 'fs'
 import path from 'path'
 import chalk from 'chalk'
-import outputFileSync from 'output-file-sync'
 import { loadConfig } from '@svgr/core'
-import { convertFile, stat, transformFilename, CASE, politeWrite } from './util'
-
-const access = promisify(fs.access)
-const readdir = promisify(fs.readdir)
+import { convertFile, transformFilename, CASE, politeWrite } from './util'
 
 async function exists(file) {
   try {
-    await access(file)
+    await fs.access(file)
     return true
   } catch (error) {
     return false
@@ -67,7 +62,8 @@ export default async function dirCommand(
       return { transformed: false, dest }
     }
 
-    outputFileSync(dest, code)
+    await fs.mkdir(path.dirname(dest), { recursive: true })
+    await fs.writeFile(dest, code)
     politeWrite(program, chalk.white(logOutput))
     return { transformed: true, dest }
   }
@@ -76,15 +72,15 @@ export default async function dirCommand(
     const indexFile = path.join(dest, `index.${ext}`)
     const config = loadConfig.sync(options, { filePath: indexFile })
     const indexTemplate = config.indexTemplate || defaultIndexTemplate
-    fs.writeFileSync(indexFile, indexTemplate(files))
+    await fs.writeFile(indexFile, indexTemplate(files))
   }
 
   async function handle(filename, root) {
-    const stats = await stat(filename)
+    const stats = await fs.stat(filename)
 
     if (stats.isDirectory()) {
       const dirname = filename
-      const files = await readdir(dirname)
+      const files = await fs.readdir(dirname)
       const results = await Promise.all(
         files.map(async (relativeFile) => {
           const absFile = path.join(dirname, relativeFile)
@@ -106,7 +102,7 @@ export default async function dirCommand(
 
   await Promise.all(
     filenames.map(async (file) => {
-      const stats = await stat(file)
+      const stats = await fs.stat(file)
       const root = stats.isDirectory() ? file : path.dirname(file)
       await handle(file, root)
     }),

packages/cli/src/fileCommand.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-underscore-dangle */
-import { stat, convert, convertFile, exitError } from './util'
+import { promises as fs } from 'fs'
+import { convert, convertFile, exitError } from './util'
 
 async function output(promise) {
   process.stdout.write(`${await promise}\n`)
@@ -38,7 +39,7 @@ async function fileCommand(program, filenames, config) {
   }
 
   const [filename] = filenames
-  const stats = await stat(filename)
+  const stats = await fs.stat(filename)
 
   if (stats.isDirectory()) {
     exitError('Directory are not supported without `--out-dir` option instead.')

packages/cli/src/index.js

@@ -2,12 +2,12 @@
 import program from 'commander'
 import path from 'path'
 import glob from 'glob'
-import fs from 'fs'
+import fs, { promises as fsPromises } from 'fs'
 import { loadConfig } from '@svgr/core'
 import pkg from '../package.json'
 import fileCommand from './fileCommand'
 import dirCommand from './dirCommand'
-import { stat, exitError } from './util'
+import { exitError } from './util'
 
 function noUndefinedKeys(obj) {
   return Object.entries(obj).reduce((obj, [key, value]) => {
@@ -129,7 +129,7 @@ async function run() {
   await Promise.all(
     filenames.map(async (filename) => {
       try {
-        await stat(filename)
+        await fsPromises.stat(filename)
       } catch (error) {
         errors.push(`${filename} does not exist`)
       }

packages/cli/src/index.test.js

@@ -1,10 +1,9 @@
-import fs from 'fs'
+import { promises as fs } from 'fs'
 import path from 'path'
 import childProcess from 'child_process'
 import util from 'util'
 import del from 'del'
 
-const readdir = util.promisify(fs.readdir)
 const exec = util.promisify(childProcess.exec)
 
 const svgr = path.join(__dirname, 'index.js')
@@ -152,7 +151,7 @@ describe('cli', () => {
       const outDir = `__fixtures_build__/filename-case-${index}`
       await del(outDir)
       await cli(`${args} ${inDir} --out-dir=${outDir}`)
-      expect(await readdir(outDir)).toMatchSnapshot(args)
+      expect(await fs.readdir(outDir)).toMatchSnapshot(args)
     },
     10000,
   )
@@ -162,14 +161,14 @@ describe('cli', () => {
     const outDir = '__fixtures_build__/ext'
     await del(outDir)
     await cli(`--ext=ts ${inDir} --out-dir=${outDir}`)
-    expect(await readdir(outDir)).toMatchSnapshot()
+    expect(await fs.readdir(outDir)).toMatchSnapshot()
   }, 10000)
 
   it('should support "--ignore-existing"', async () => {
     const inDir = '__fixtures__/simple'
     const outDir = '__fixtures__/simple-existing'
     await cli(`${inDir} --out-dir=${outDir} --ignore-existing`)
-    const content = fs.readFileSync(path.join(outDir, 'File.js'), 'utf-8')
+    const content = await fs.readFile(path.join(outDir, 'File.js'), 'utf-8')
     expect(content).toBe('// nothing')
   }, 10000)
 
@@ -185,7 +184,7 @@ describe('cli', () => {
     const outDir = `__fixtures_build__/prefix-exports`
     await del(outDir)
     await cli(`${inDir} --out-dir=${outDir}`)
-    const content = fs.readFileSync(path.join(outDir, 'index.js'), 'utf-8')
+    const content = await fs.readFile(path.join(outDir, 'index.js'), 'utf-8')
     expect(content).toMatchSnapshot()
   }, 10000)
 
@@ -196,7 +195,7 @@ describe('cli', () => {
     await cli(
       `${inDir} --out-dir=${outDir} --config-file=__fixtures__/custom-index.config.js`,
     )
-    const content = fs.readFileSync(path.join(outDir, 'index.js'), 'utf-8')
+    const content = await fs.readFile(path.join(outDir, 'index.js'), 'utf-8')
     expect(content).toMatchSnapshot()
   }, 10000)
 
@@ -207,7 +206,7 @@ describe('cli', () => {
     await cli(
       `${inDir} --out-dir=${outDir} --index-template=__fixtures__/custom-index-template.js`,
     )
-    const content = fs.readFileSync(path.join(outDir, 'index.js'), 'utf-8')
+    const content = await fs.readFile(path.join(outDir, 'index.js'), 'utf-8')
     expect(content).toMatchSnapshot()
   }, 10000)
 })

packages/cli/src/util.js

@@ -1,17 +1,13 @@
 /* eslint-disable no-console */
-import fs from 'fs'
+import { promises as fs } from 'fs'
 import chalk from 'chalk'
-import util from 'util'
 import svgrConvert from '@svgr/core'
 import svgo from '@svgr/plugin-svgo'
 import jsx from '@svgr/plugin-jsx'
 import prettier from '@svgr/plugin-prettier'
 import camelcase from 'camelcase'
 import dashify from 'dashify'
 
-export const readFile = util.promisify(fs.readFile)
-export const stat = util.promisify(fs.stat)
-
 export const CASE = {
   KEBAB: 'kebab', // kebab-case
   CAMEL: 'camel', // camelCase
@@ -42,7 +38,7 @@ export function convert(code, config, state) {
 }
 
 export async function convertFile(filePath, config = {}) {
-  const code = await readFile(filePath, 'utf-8')
+  const code = await fs.readFile(filePath, 'utf-8')
   return convert(code, config, { filePath })
 }
 

yarn.lock

@@ -8212,15 +8212,6 @@ osenv@^0.1.4, osenv@^0.1.5:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-output-file-sync@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-2.0.1.tgz#f53118282f5f553c2799541792b723a4c71430c0"
-  integrity sha512-mDho4qm7WgIXIGf4eYU1RHN2UU5tPfVYVSRwDJw0uTmj35DQUt/eNp19N7v6T3SrR0ESTEf2up2CGO73qI35zQ==
-  dependencies:
-    graceful-fs "^4.1.11"
-    is-plain-obj "^1.1.0"
-    mkdirp "^0.5.1"
-
 p-cancelable@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.4.1.tgz#35f363d67d52081c8d9585e37bcceb7e0bbcb2a0"