Skip to content

Commit

Permalink
feat: make index template more flexible (#861)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: index template now receives an array of objects containing both the created
component path (`path`) and the original SVG path (`originalPath`)
  • Loading branch information
balsick authored May 9, 2023
1 parent fd27c1c commit 003009c
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 14 deletions.
2 changes: 1 addition & 1 deletion __fixtures__/custom-index-template.js
Original file line number Diff line number Diff line change
@@ -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}';`
})
Expand Down
35 changes: 25 additions & 10 deletions packages/cli/src/dirCommand.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}'`
Expand Down Expand Up @@ -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)
Expand All @@ -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),
Expand Down
2 changes: 1 addition & 1 deletion website/pages/docs/cli.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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}'`
Expand Down
4 changes: 2 additions & 2 deletions website/pages/docs/custom-templates.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ ${variables.interfaces};
const ${variables.componentName} = (${variables.props}) => (
${variables.jsx}
);
${variables.exports};
`
}
Expand Down Expand Up @@ -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}'`
Expand Down

1 comment on commit 003009c

@vercel
Copy link

@vercel vercel bot commented on 003009c May 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

svgr – ./

api.react-svgr.com
svgr-gregberge.vercel.app
svgr-git-main-gregberge.vercel.app

Please sign in to comment.