feat: make index template more flexible (#861)

BREAKING CHANGE: index template now receives an array of objects containing both the created
component path (`path`) and the original SVG path (`originalPath`)

Author: balsick

__fixtures__/custom-index-template.js

@@ -1,7 +1,7 @@
 const path = require('path')
 
 function indexTemplate(files) {
-  const exportEntries = files.map(file => {
+  const exportEntries = files.map(({path: file}) => {
     const basename = path.basename(file, path.extname(file))
     return `export { ${basename} } from './${basename}';`
   })

packages/cli/src/dirCommand.ts

@@ -35,11 +35,16 @@ export const isCompilable = (filename: string): boolean => {
 }
 
 export interface IndexTemplate {
-  (paths: string[]): string
+  (paths: FileInfo[]): string
 }
 
-const defaultIndexTemplate: IndexTemplate = (paths) => {
-  const exportEntries = paths.map((filePath) => {
+interface FileInfo {
+  path: string
+  originalPath: string
+}
+
+const defaultIndexTemplate: IndexTemplate = (paths: FileInfo[]) => {
+  const exportEntries = paths.map(({ path: filePath }) => {
     const basename = path.basename(filePath, path.extname(filePath))
     const exportName = formatExportName(basename)
     return `export { default as ${exportName} } from './${basename}'`
@@ -92,7 +97,7 @@ export const dirCommand: SvgrCommand = async (
 
   const generateIndex = async (
     dest: string,
-    files: string[],
+    files: FileInfo[],
     opts: Options,
   ) => {
     const ext = resolveExtension(opts, extOpt, false)
@@ -119,17 +124,27 @@ export const dirCommand: SvgrCommand = async (
     if (stats.isDirectory()) {
       const dirname = filename
       const files = await fs.readdir(dirname)
-      const results = await Promise.all(
+      const results = (await Promise.all(
         files.map(async (relativeFile) => {
           const absFile = path.join(dirname, relativeFile)
-          return handle(absFile, root)
+          return [absFile, await handle(absFile, root)]
         }),
-      )
-      const transformed = results.filter((result) => result.transformed)
+      )) as [
+        string,
+        {
+          dest: string | null
+          transformed: boolean
+        },
+      ][]
+      const transformed = results.filter(([, result]) => result.transformed)
       if (transformed.length) {
         const destFiles = results
-          .map((result) => result.dest)
-          .filter(Boolean) as string[]
+          .filter(([, result]) => result.dest)
+          .map(([originalPath, result]) => ({
+            path: result.dest,
+            originalPath,
+          }))
+          .filter(({ path }) => path) as FileInfo[]
         const dest = path.resolve(
           outDir as string,
           path.relative(root, dirname),

website/pages/docs/cli.mdx

@@ -99,7 +99,7 @@ Advanced use cases could lead you to customize the index template. The `--index-
 const path = require('path')
 
 function defaultIndexTemplate(filePaths) {
-  const exportEntries = filePaths.map((filePath) => {
+  const exportEntries = filePaths.map(({ path: filePath }) => {
     const basename = path.basename(filePath, path.extname(filePath))
     const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
     return `export { default as ${exportName} } from './${basename}'`

website/pages/docs/custom-templates.mdx

@@ -40,7 +40,7 @@ ${variables.interfaces};
 const ${variables.componentName} = (${variables.props}) => (
   ${variables.jsx}
 );
- 
+
 ${variables.exports};
 `
 }
@@ -105,7 +105,7 @@ The customization is the same, a file that exports a function:
 const path = require('path')
 
 function defaultIndexTemplate(filePaths) {
-  const exportEntries = filePaths.map((filePath) => {
+  const exportEntries = filePaths.map(({ path: filePath }) => {
     const basename = path.basename(filePath, path.extname(filePath))
     const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
     return `export { default as ${exportName} } from './${basename}'`