From 6e8895d075bfe666c75ad870540644ba745724ed Mon Sep 17 00:00:00 2001 From: Jakob Guddas Date: Sun, 13 Aug 2023 22:07:54 +0200 Subject: [PATCH] fix: generate alias files for nextjs import mapping (#1486) * fix: generate alias files for nextjs import mapping * Add entry files in rollup build * improve build flow other packages --------- Co-authored-by: Eric Fennis --- .github/workflows/lucide-angular.yml | 1 + .github/workflows/lucide-font.yml | 1 + .github/workflows/lucide-preact.yml | 1 + .github/workflows/lucide-react-native.yml | 1 + .github/workflows/lucide-react.yml | 1 + .github/workflows/lucide-solid.yml | 1 + .github/workflows/lucide-static.yml | 1 + .github/workflows/lucide-svelte.yml | 1 + .github/workflows/lucide-vue-next.yml | 1 + .github/workflows/lucide-vue.yml | 1 + .github/workflows/lucide.yml | 1 + packages/lucide-react/package.json | 4 +- packages/lucide-react/rollup.config.mjs | 8 ++- .../scripts/getAliasesEntryNames.mjs | 15 +++++ .../building/generateAliasesFile.mjs | 67 ++++++++++++++----- tools/build-icons/main.mjs | 5 +- 16 files changed, 88 insertions(+), 22 deletions(-) create mode 100644 packages/lucide-react/scripts/getAliasesEntryNames.mjs diff --git a/.github/workflows/lucide-angular.yml b/.github/workflows/lucide-angular.yml index 51d373d35..5e20695b6 100644 --- a/.github/workflows/lucide-angular.yml +++ b/.github/workflows/lucide-angular.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-angular/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-font.yml b/.github/workflows/lucide-font.yml index dfb35a4cc..0574c0a5e 100644 --- a/.github/workflows/lucide-font.yml +++ b/.github/workflows/lucide-font.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - icons/** + - tools/build-font/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-preact.yml b/.github/workflows/lucide-preact.yml index 9d76816c0..09835565a 100644 --- a/.github/workflows/lucide-preact.yml +++ b/.github/workflows/lucide-preact.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-preact/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-react-native.yml b/.github/workflows/lucide-react-native.yml index 4674f20e9..a9f26ce36 100644 --- a/.github/workflows/lucide-react-native.yml +++ b/.github/workflows/lucide-react-native.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-react-native/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-react.yml b/.github/workflows/lucide-react.yml index 73962b2ef..c9a078997 100644 --- a/.github/workflows/lucide-react.yml +++ b/.github/workflows/lucide-react.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-react/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-solid.yml b/.github/workflows/lucide-solid.yml index cc351d708..370f7f592 100644 --- a/.github/workflows/lucide-solid.yml +++ b/.github/workflows/lucide-solid.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-solid/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-static.yml b/.github/workflows/lucide-static.yml index 9211a522f..ecc9c81c4 100644 --- a/.github/workflows/lucide-static.yml +++ b/.github/workflows/lucide-static.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-static/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-svelte.yml b/.github/workflows/lucide-svelte.yml index d8c42fa5e..0b6c234a5 100644 --- a/.github/workflows/lucide-svelte.yml +++ b/.github/workflows/lucide-svelte.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-svelte/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-vue-next.yml b/.github/workflows/lucide-vue-next.yml index 352042cea..669afaba0 100644 --- a/.github/workflows/lucide-vue-next.yml +++ b/.github/workflows/lucide-vue-next.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-vue-next/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide-vue.yml b/.github/workflows/lucide-vue.yml index 78678756d..c1782815a 100644 --- a/.github/workflows/lucide-vue.yml +++ b/.github/workflows/lucide-vue.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide-vue/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/.github/workflows/lucide.yml b/.github/workflows/lucide.yml index 315e43bbc..3fa6fd7f9 100644 --- a/.github/workflows/lucide.yml +++ b/.github/workflows/lucide.yml @@ -4,6 +4,7 @@ on: pull_request: paths: - packages/lucide/** + - tools/build-icons/** - pnpm-lock.yaml jobs: diff --git a/packages/lucide-react/package.json b/packages/lucide-react/package.json index a6307e039..c2c427a8f 100644 --- a/packages/lucide-react/package.json +++ b/packages/lucide-react/package.json @@ -1,7 +1,7 @@ { "name": "lucide-react", "description": "A Lucide icon library package for React applications", - "version": "0.263.2-beta.0", + "version": "0.0.1", "license": "ISC", "homepage": "https://lucide.dev", "bugs": "https://github.com/lucide-icons/lucide/issues", @@ -28,7 +28,7 @@ "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm typecheck && pnpm build:bundles", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts && rm -f dynamicIconImports.*", - "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --withDynamicImports --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts", + "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --withDynamicImports --separateAliasesFile --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts", "build:types": "node ./scripts/buildTypes.mjs", "build:bundles": "rollup -c ./rollup.config.mjs", "typecheck": "tsc", diff --git a/packages/lucide-react/rollup.config.mjs b/packages/lucide-react/rollup.config.mjs index 47fb39a90..80ce8ca7b 100644 --- a/packages/lucide-react/rollup.config.mjs +++ b/packages/lucide-react/rollup.config.mjs @@ -1,6 +1,9 @@ import plugins, { replace } from '@lucide/rollup-plugins'; import pkg from './package.json' assert { type: 'json' }; import dts from "rollup-plugin-dts"; +import getAliasesEntryNames from './scripts/getAliasesEntryNames.mjs'; + +const aliasesEntries = await getAliasesEntryNames() const packageName = 'LucideReact'; const outputFileName = 'lucide-react'; @@ -26,7 +29,10 @@ const bundles = [ }, { format: 'esm', - inputs, + inputs: [ + ...inputs, + ...aliasesEntries + ], outputDir, preserveModules: true, aliasesSupport: true, diff --git a/packages/lucide-react/scripts/getAliasesEntryNames.mjs b/packages/lucide-react/scripts/getAliasesEntryNames.mjs new file mode 100644 index 000000000..0930d61fa --- /dev/null +++ b/packages/lucide-react/scripts/getAliasesEntryNames.mjs @@ -0,0 +1,15 @@ +import path from 'path'; +// eslint-disable-next-line import/no-extraneous-dependencies +import getAliases from '@lucide/build-icons/utils/getAliases.mjs'; + +const ICONS_DIR = path.resolve(process.cwd(), '../../icons'); + +export default async function getAliasesEntryNames() { + const metaJsonFiles = await getAliases(ICONS_DIR); + + const iconWithAliases = Object.values(metaJsonFiles).filter(({ aliases }) => aliases != null); + + const aliases = iconWithAliases.flatMap(({ aliases }) => aliases); + + return aliases.map((alias) => path.join('src/icons', `${alias}.ts`)); +} diff --git a/tools/build-icons/building/generateAliasesFile.mjs b/tools/build-icons/building/generateAliasesFile.mjs index f52b060b4..eaaf57d9e 100644 --- a/tools/build-icons/building/generateAliasesFile.mjs +++ b/tools/build-icons/building/generateAliasesFile.mjs @@ -1,17 +1,21 @@ import path from 'path'; +import fs from 'fs'; import { toPascalCase, resetFile, appendFile } from '../../../scripts/helpers.mjs'; const getImportString = (componentName, iconName, aliasImportFileExtension = '') => `export { default as ${componentName} } from './icons/${iconName}${aliasImportFileExtension}';\n`; -export default function generateAliasesFile({ +export default async function generateAliasesFile({ iconNodes, outputDirectory, fileExtension, + iconFileExtension = '.js', aliases, aliasImportFileExtension, + separateAliasesFile = false, showLog = true, }) { + const iconsDistDirectory = path.join(outputDirectory, `icons`); const fileName = path.basename(`aliases${fileExtension}`); const icons = Object.keys(iconNodes); @@ -19,28 +23,55 @@ export default function generateAliasesFile({ resetFile(fileName, outputDirectory); // Generate Import for Icon VNodes - icons.forEach((iconName) => { - const componentName = toPascalCase(iconName); - const iconAliases = aliases[iconName]?.aliases; + await Promise.all( + icons.map(async (iconName) => { + const componentName = toPascalCase(iconName); + const iconAliases = aliases[iconName]?.aliases; - let importString = `// ${componentName} aliases\n`; + let importString = `// ${componentName} aliases\n`; - importString += getImportString(`${componentName}Icon`, iconName, aliasImportFileExtension); - importString += getImportString(`Lucide${componentName}`, iconName, aliasImportFileExtension); + importString += getImportString(`${componentName}Icon`, iconName, aliasImportFileExtension); + importString += getImportString(`Lucide${componentName}`, iconName, aliasImportFileExtension); - if (iconAliases != null && Array.isArray(iconAliases)) { - iconAliases.forEach((alias) => { - const componentNameAlias = toPascalCase(alias); - importString += getImportString(componentNameAlias, iconName, aliasImportFileExtension); - importString += getImportString(`${componentNameAlias}Icon`, iconName, aliasImportFileExtension); - importString += getImportString(`Lucide${componentNameAlias}`, iconName, aliasImportFileExtension); - }); - } + if (iconAliases != null && Array.isArray(iconAliases)) { + await Promise.all( + iconAliases.map(async (alias) => { + const componentNameAlias = toPascalCase(alias); - importString += '\n'; + if (separateAliasesFile) { + const output = `export { default } from "./${iconName}"`; + const location = path.join(iconsDistDirectory, `${alias}${iconFileExtension}`); - appendFile(importString, fileName, outputDirectory); - }); + await fs.promises.writeFile(location, output, 'utf-8'); + } + + const exportFileIcon = separateAliasesFile ? alias : iconName; + + importString += getImportString( + componentNameAlias, + exportFileIcon, + aliasImportFileExtension, + ); + importString += getImportString( + `${componentNameAlias}Icon`, + exportFileIcon, + aliasImportFileExtension, + ); + + importString += getImportString( + `Lucide${componentNameAlias}`, + exportFileIcon, + aliasImportFileExtension, + ); + }), + ); + } + + importString += '\n'; + + appendFile(importString, fileName, outputDirectory); + }), + ); appendFile('\n', fileName, outputDirectory); diff --git a/tools/build-icons/main.mjs b/tools/build-icons/main.mjs index 24bc94585..1207a5d5a 100755 --- a/tools/build-icons/main.mjs +++ b/tools/build-icons/main.mjs @@ -32,6 +32,7 @@ const { exportFileName = 'index.js', withAliases = false, withDynamicImports = false, + separateAliasesFile = false, aliasesFileExtension = '.js', aliasImportFileExtension = '', pretty = true, @@ -62,12 +63,14 @@ async function buildIcons() { if (withAliases) { const aliases = await getAliases(ICONS_DIR); - generateAliasesFile({ + await generateAliasesFile({ iconNodes: icons, aliases, + iconFileExtension, outputDirectory: OUTPUT_DIR, fileExtension: aliasesFileExtension, aliasImportFileExtension, + separateAliasesFile, showLog: !silent, }); }