refactor: cover directory options with tests and remove lodash (#167)

Lodash is quite big and importing whole library is expensive even in
node. Path based imports are also have a big dependency tree.

`camelcase` package covers both pascal and camel cases
`dashify` is a replacement for kebab-case
`merge-deep` covers all `mergeConfigs` tests

packages/cli/package.json

@@ -24,11 +24,15 @@
   },
   "dependencies": {
     "@svgr/core": "^2.2.0",
+    "camelcase": "^5.0.0",
     "chalk": "^2.4.1",
     "commander": "^2.17.1",
+    "dashify": "^1.0.0",
     "glob": "^7.1.3",
-    "lodash": "^4.17.10",
     "output-file-sync": "^2.0.1",
     "recursive-readdir": "^2.2.2"
+  },
+  "devDependencies": {
+    "del": "^3.0.0"
   }
 }

packages/cli/src/__snapshots__/index.test.js.snap

@@ -58,6 +58,48 @@ export default File
 "
 `;
 
+exports[`cli should support custom file extension 1`] = `
+Array [
+  "File.ts",
+]
+`;
+
+exports[`cli should support different filename cases with directory output 1`] = `
+Array [
+  "CamelCase.js",
+  "KebabCase.js",
+  "MultipleDashes.js",
+  "PascalCase.js",
+]
+`;
+
+exports[`cli should support different filename cases with directory output: --filename-case=camel 1`] = `
+Array [
+  "camelCase.js",
+  "kebabCase.js",
+  "multipleDashes.js",
+  "pascalCase.js",
+]
+`;
+
+exports[`cli should support different filename cases with directory output: --filename-case=kebab 1`] = `
+Array [
+  "camel-case.js",
+  "kebab-case.js",
+  "multiple-dashes.js",
+  "pascal-case.js",
+]
+`;
+
+exports[`cli should support different filename cases with directory output: --filename-case=pascal 1`] = `
+Array [
+  "CamelCase.js",
+  "KebabCase.js",
+  "MultipleDashes.js",
+  "PascalCase.js",
+]
+`;
+
 exports[`cli should support various args: --icon 1`] = `
 "import React from 'react'
 

packages/cli/src/dirCommand.js

@@ -2,9 +2,8 @@
 import path from 'path'
 import outputFileSync from 'output-file-sync'
 import readdir from 'recursive-readdir'
-import { pascalCase } from '@svgr/core'
-import camelCase from 'lodash/camelCase'
-import kebabCase from 'lodash/kebabCase'
+import camelcase from 'camelcase'
+import dashify from 'dashify'
 import { stat, convertFile } from './util'
 
 const CASE = {
@@ -16,11 +15,11 @@ const CASE = {
 function transformFilename(filename, filenameCase) {
   switch (filenameCase) {
     case CASE.KEBAB:
-      return kebabCase(filename)
+      return dashify(filename, { condense: true })
     case CASE.CAMEL:
-      return camelCase(filename)
+      return camelcase(filename)
     case CASE.PASCAL:
-      return pascalCase(filename)
+      return camelcase(filename, { pascalCase: true })
     default:
       throw new Error(`Unknown --filename-case ${filenameCase}`)
   }
@@ -55,7 +54,7 @@ async function dirCommand(
     const code = await convertFile(src, options, { filePath: dest })
 
     outputFileSync(dest, code)
-    console.log(`${src} -> ${dest}`)
+    console.info(`${src} -> ${dest}`)
     return true
   }
 

packages/cli/src/index.js

@@ -36,7 +36,7 @@ const parseConfig = name => arg => {
 
 program
   .version(pkg.version)
-  .usage('[options] <file>')
+  .usage('[options] <file|directory>')
   .option('--config <file>', 'specify the path of the svgr config')
   .option('-d, --out-dir <dirname>', 'output files into a directory')
   .option('--ext <ext>', 'specify a custom file extension (default: "js")')

packages/cli/src/index.test.js

@@ -1,7 +1,10 @@
+import 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')
@@ -23,7 +26,7 @@ describe('cli', () => {
   )
 
   it(
-    'should not work with a directory',
+    'should not work with a directory without --out-dir option',
     async () => {
       expect.assertions(1)
       try {
@@ -38,7 +41,7 @@ describe('cli', () => {
   )
 
   it(
-    'should not work with several files',
+    'should not work with several files without destination',
     async () => {
       expect.assertions(1)
       try {
@@ -64,7 +67,7 @@ describe('cli', () => {
   it(
     'should transform a whole directory',
     async () => {
-      await cli('--out-dir __fixtures_build__ __fixtures__')
+      await cli('--out-dir __fixtures_build__/whole __fixtures__')
     },
     10000,
   )
@@ -113,32 +116,55 @@ describe('cli', () => {
     10000,
   )
 
-  const argPresets = [
-    '--no-dimensions',
-    '--no-expand-props',
-    '--icon',
-    '--native',
-    '--native --icon',
-    '--native --no-expand-props',
-    '--native --ref',
-    '--ref',
-    '--replace-attr-values "#063855=currentColor"',
-    '--svg-attributes "focusable=false"',
-    '--no-svgo',
-    '--no-prettier',
-    '--title-prop',
-  ]
+  it.each([
+    ['--no-dimensions'],
+    ['--no-expand-props'],
+    ['--icon'],
+    ['--native'],
+    ['--native --icon'],
+    ['--native --no-expand-props'],
+    ['--native --ref'],
+    ['--ref'],
+    ['--replace-attr-values "#063855=currentColor"'],
+    ['--svg-attributes "focusable=false"'],
+    ['--no-svgo'],
+    ['--no-prettier'],
+    ['--title-prop'],
+  ])(
+    'should support various args',
+    async args => {
+      const result = await cli(`${args} __fixtures__/simple/file.svg`)
+      expect(result).toMatchSnapshot(args)
+    },
+    10000,
+  )
+
+  it.each([
+    [0, ''],
+    [1, '--filename-case=camel'],
+    [2, '--filename-case=pascal'],
+    [3, '--filename-case=kebab'],
+  ])(
+    'should support different filename cases with directory output',
+    async (index, args) => {
+      const inDir = '__fixtures__/cased'
+      const outDir = `__fixtures_build__/filename-case-${index}`
+      await del(outDir)
+      await cli(`${args} ${inDir} --out-dir=${outDir}`)
+      expect(await readdir(outDir)).toMatchSnapshot(args)
+    },
+    10000,
+  )
 
   it(
-    'should support various args',
+    'should support custom file extension',
     async () => {
-      await Promise.all(
-        argPresets.map(async args => {
-          const result = await cli(`${args} __fixtures__/simple/file.svg`)
-          expect(result).toMatchSnapshot(args)
-        }),
-      )
+      const inDir = '__fixtures__/simple'
+      const outDir = '__fixtures_build__/ext'
+      await del(outDir)
+      await cli(`--ext=ts ${inDir} --out-dir=${outDir}`)
+      expect(await readdir(outDir)).toMatchSnapshot()
     },
-    30000,
+    10000,
   )
 })

packages/core/package.json

@@ -22,10 +22,11 @@
     "prepublishOnly": "yarn run build"
   },
   "dependencies": {
+    "camelcase": "^5.0.0",
     "cosmiconfig": "^5.0.6",
     "h2x-core": "^1.0.0",
     "h2x-plugin-jsx": "^1.0.0",
-    "lodash": "^4.17.10",
+    "merge-deep": "^3.0.2",
     "prettier": "^1.14.2",
     "svgo": "^1.0.5"
   }