feat(config): improve runtime config

- Add "runtimeConfig" option to enable or disable runtime configuration

BREAKING CHANGE:

- Runtime configuration is always loaded (even with Node API `convert`)
- In CLI, "--config" is now "--config-file"; this new option can be used
everywhere

Closes #192

Author: gregberge

README.md

@@ -24,6 +24,7 @@ npx @svgr/cli
 ## Supporting SVGR
 
 SVGR is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to the support of these awesome [backers](/BACKERS.md). If you'd like to join them, please consider:
+
 - [Become a backer or sponsor on OpenCollective](https://opencollective.com/svgr).
 
 ### Gold Sponsors
@@ -93,12 +94,13 @@ powerful and configurable HTML transpiler. It uses AST (like
 ## Command line usage
 
 ```
-Usage: npx @svgr/cli [options] <file|directory>
+Usage: svgr [options] <file|directory>
 
 Options:
 
   -V, --version                      output the version number
-  --config <file>                    specify the path of the svgr config
+  --config-file <file>               specify the path of the svgr config
+  --no-runtime-config                disable runtime config (.svgrrc, .svgo.yml, .prettierrc)
   -d, --out-dir <dirname>            output files into a directory
   --ext <ext>                        specify a custom file extension (default: "js")
   --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")
@@ -265,6 +267,22 @@ Even if it is not recommended, you can also use `svgoConfig` option to specify y
 SVGR ships with a handful of customizable options, usable in both the CLI and
 API.
 
+### Config file
+
+Specify a custom config file.
+
+| Default | CLI Override    | API Override           |
+| ------- | --------------- | ---------------------- |
+| `null`  | `--config-file` | `configFile: <string>` |
+
+### Runtime config
+
+Disable runtime config (`.svgrrc`, `.svgo.yml`, `.prettierrc`).
+
+| Default | CLI Override    | API Override           |
+| ------- | --------------- | ---------------------- |
+| `null`  | `--config-file` | `configFile: <string>` |
+
 ### File extension
 
 Specify a custom extension for generated files.

packages/cli/README.md

@@ -18,7 +18,8 @@ Usage: svgr [options] <file|directory>
 Options:
 
   -V, --version                      output the version number
-  --config <file>                    specify the path of the svgr config
+  --config-file <file>               specify the path of the svgr config
+  --no-runtime-config                disable runtime config (.svgrrc, .svgo.yml, .prettierrc)
   -d, --out-dir <dirname>            output files into a directory
   --ext <ext>                        specify a custom file extension (default: "js")
   --filename-case <case>             specify filename case (pascal, kebab, camel) (default: "pascal")

packages/cli/src/dirCommand.js

@@ -51,7 +51,7 @@ async function dirCommand(
     relative = rename(relative, ext, filenameCase)
 
     const dest = path.join(program.outDir, relative)
-    const code = await convertFile(src, options, { filePath: dest })
+    const code = await convertFile(src, options)
 
     outputFileSync(dest, code)
     console.info(`${src} -> ${dest}`)

packages/cli/src/index.js

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

packages/cli/src/index.test.js

@@ -12,7 +12,7 @@ const babelNode = path.join(__dirname, '../../../node_modules/.bin/babel-node')
 
 describe('cli', () => {
   const cli = async args => {
-    const { stdout } = await exec(`${babelNode} ${svgr} ${args}`)
+    const { stdout } = await exec(`${babelNode} -- ${svgr} ${args}`)
     return stdout
   }
 
@@ -173,7 +173,7 @@ describe('cli', () => {
     'should not override config with cli defaults',
     async () => {
       const result = await cli(
-        '__fixtures__/simple/file.svg --config=__fixtures__/overrides.config.js',
+        '__fixtures__/simple/file.svg --config-file=__fixtures__/overrides.config.js',
       )
       expect(result).toMatchSnapshot()
     },

packages/cli/src/util.js

@@ -2,15 +2,14 @@
 import fs from 'fs'
 import chalk from 'chalk'
 import util from 'util'
-import convert, { resolveConfig } from '@svgr/core'
+import convert from '@svgr/core'
 
 export const readFile = util.promisify(fs.readFile)
 export const stat = util.promisify(fs.stat)
 
-export async function convertFile(filePath, { config, ...options } = {}) {
+export async function convertFile(filePath, config = {}) {
   const code = await readFile(filePath, 'utf-8')
-  const rcConfig = await resolveConfig(filePath, config)
-  return convert(code, { ...rcConfig, ...options }, { filePath })
+  return convert(code, config, { filePath })
 }
 
 export function exitError(error) {

packages/cli/src/util.test.js

@@ -14,7 +14,7 @@ describe('util', () => {
     it('should support a custom config path', async () => {
       const file = path.join(FIXTURES, 'simple/file.svg')
       const result = await convertFile(file, {
-        config: '__fixtures__/withSvgrRc/.svgrrc',
+        configFile: '__fixtures__/withSvgrRc/.svgrrc',
       })
       expect(result).toMatchSnapshot()
     })

packages/core/src/__fixtures__/svgr/icon.svg

@@ -16,6 +16,7 @@ export const DEFAULT_CONFIG = {
   svgoConfig: null,
   template: null,
   titleProp: false,
+  runtimeConfig: true,
 }
 
 const explorer = cosmiconfig('svgr', {
@@ -37,3 +38,11 @@ export async function resolveConfigFile(filePath) {
   const result = await explorer.search(filePath)
   return result ? result.filepath : null
 }
+
+export async function loadConfig({ configFile, ...baseConfig }, state = {}) {
+  const rcConfig =
+    state.filePath && baseConfig.runtimeConfig !== false
+      ? await resolveConfig(state.filePath, configFile)
+      : {}
+  return { ...DEFAULT_CONFIG, ...rcConfig, ...baseConfig }
+}

packages/core/src/config.js

@@ -1,5 +1,5 @@
 import path from 'path'
-import { resolveConfig, resolveConfigFile } from './config'
+import { resolveConfig, resolveConfigFile, loadConfig } from './config'
 
 describe('config', () => {
   describe('#resolveConfig', () => {
@@ -33,4 +33,130 @@ describe('config', () => {
       expect(config).toMatch(/__fixtures__(\/|\\)svgr(\/|\\)\.svgrrc$/)
     })
   })
+
+  describe('#loadConfig', () => {
+    it('should use default config without state.filePath', async () => {
+      const config = await loadConfig({ dimensions: false })
+      expect(config).toMatchInlineSnapshot(`
+Object {
+  "dimensions": false,
+  "expandProps": true,
+  "h2xConfig": null,
+  "icon": false,
+  "native": false,
+  "prettier": true,
+  "prettierConfig": null,
+  "ref": false,
+  "replaceAttrValues": null,
+  "runtimeConfig": true,
+  "svgAttributes": null,
+  "svgProps": null,
+  "svgo": true,
+  "svgoConfig": null,
+  "template": null,
+  "titleProp": false,
+}
+`)
+    })
+
+    it('should load config using filePath', async () => {
+      const config = await loadConfig(
+        {},
+        { filePath: path.join(__dirname, '__fixtures__/svgr/icon.svg') },
+      )
+      expect(config).toMatchInlineSnapshot(`
+Object {
+  "dimensions": true,
+  "expandProps": true,
+  "h2xConfig": null,
+  "icon": true,
+  "native": false,
+  "noSemi": true,
+  "prettier": true,
+  "prettierConfig": null,
+  "ref": false,
+  "replaceAttrValues": Array [
+    Array [
+      "#063855",
+      "currentColor",
+    ],
+  ],
+  "runtimeConfig": true,
+  "svgAttributes": null,
+  "svgProps": null,
+  "svgo": true,
+  "svgoConfig": null,
+  "template": null,
+  "titleProp": false,
+}
+`)
+    })
+
+    it('should not load config with "runtimeConfig: false', async () => {
+      const config = await loadConfig(
+        { useRuntimeConfig: false },
+        { filePath: path.join(__dirname, '__fixtures__/svgr/icon.svg') },
+      )
+      expect(config).toMatchInlineSnapshot(`
+Object {
+  "dimensions": true,
+  "expandProps": true,
+  "h2xConfig": null,
+  "icon": true,
+  "native": false,
+  "noSemi": true,
+  "prettier": true,
+  "prettierConfig": null,
+  "ref": false,
+  "replaceAttrValues": Array [
+    Array [
+      "#063855",
+      "currentColor",
+    ],
+  ],
+  "runtimeConfig": true,
+  "svgAttributes": null,
+  "svgProps": null,
+  "svgo": true,
+  "svgoConfig": null,
+  "template": null,
+  "titleProp": false,
+  "useRuntimeConfig": false,
+}
+`)
+    })
+
+    it('should work with custom config path', async () => {
+      const config = await loadConfig(
+        { configFile: path.join(__dirname, '__fixtures__/svgr/.svgrrc') },
+        { filePath: __dirname },
+      )
+      expect(config).toMatchInlineSnapshot(`
+Object {
+  "dimensions": true,
+  "expandProps": true,
+  "h2xConfig": null,
+  "icon": true,
+  "native": false,
+  "noSemi": true,
+  "prettier": true,
+  "prettierConfig": null,
+  "ref": false,
+  "replaceAttrValues": Array [
+    Array [
+      "#063855",
+      "currentColor",
+    ],
+  ],
+  "runtimeConfig": true,
+  "svgAttributes": null,
+  "svgProps": null,
+  "svgo": true,
+  "svgoConfig": null,
+  "template": null,
+  "titleProp": false,
+}
+`)
+    })
+  })
 })