From c652723b3273bc8b286328ed964cb5517613bfbf Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Wed, 6 Sep 2023 09:26:02 +0200 Subject: [PATCH] Generated aliases for Weird NextJS Case transformations (#1549) * add script * Create script to generate the aliases Nextjs * Apply aliases to the icon meta files * Make sure duplicated imports are not added * add command to lint-staged --- .github/workflows/lucide-react.yml | 1 + icons/arrow-down-0-1.json | 3 ++ icons/arrow-down-1-0.json | 3 ++ icons/arrow-down-a-z.json | 3 ++ icons/arrow-down-z-a.json | 3 ++ icons/arrow-up-0-1.json | 3 ++ icons/arrow-up-1-0.json | 3 ++ icons/arrow-up-a-z.json | 3 ++ icons/arrow-up-z-a.json | 3 ++ icons/axis-3d.json | 3 ++ icons/file-axis-3d.json | 3 ++ icons/grid-2x2.json | 3 ++ icons/grid-3x3.json | 3 +- icons/move-3d.json | 3 ++ icons/rotate-3d.json | 3 ++ icons/scale-3d.json | 3 ++ package.json | 6 ++- scripts/generateNextJSAliases.mjs | 46 +++++++++++++++++++ .../building/generateAliasesFile.mjs | 5 ++ 19 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 scripts/generateNextJSAliases.mjs diff --git a/.github/workflows/lucide-react.yml b/.github/workflows/lucide-react.yml index c9a078997..ae54da36f 100644 --- a/.github/workflows/lucide-react.yml +++ b/.github/workflows/lucide-react.yml @@ -5,6 +5,7 @@ on: paths: - packages/lucide-react/** - tools/build-icons/** + - scripts/generateNextJSAliases.mjs - pnpm-lock.yaml jobs: diff --git a/icons/arrow-down-0-1.json b/icons/arrow-down-0-1.json index f2ad523a2..8b9f6666d 100644 --- a/icons/arrow-down-0-1.json +++ b/icons/arrow-down-0-1.json @@ -13,5 +13,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-down-01" ] } \ No newline at end of file diff --git a/icons/arrow-down-1-0.json b/icons/arrow-down-1-0.json index f93766ce7..102dc6438 100644 --- a/icons/arrow-down-1-0.json +++ b/icons/arrow-down-1-0.json @@ -13,5 +13,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-down-10" ] } \ No newline at end of file diff --git a/icons/arrow-down-a-z.json b/icons/arrow-down-a-z.json index ae41e9ed4..3f95924cf 100644 --- a/icons/arrow-down-a-z.json +++ b/icons/arrow-down-a-z.json @@ -13,5 +13,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-down-az" ] } \ No newline at end of file diff --git a/icons/arrow-down-z-a.json b/icons/arrow-down-z-a.json index 3807f3037..fdf206aef 100644 --- a/icons/arrow-down-z-a.json +++ b/icons/arrow-down-z-a.json @@ -14,5 +14,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-down-za" ] } \ No newline at end of file diff --git a/icons/arrow-up-0-1.json b/icons/arrow-up-0-1.json index f2ad523a2..7c4d4153f 100644 --- a/icons/arrow-up-0-1.json +++ b/icons/arrow-up-0-1.json @@ -13,5 +13,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-up-01" ] } \ No newline at end of file diff --git a/icons/arrow-up-1-0.json b/icons/arrow-up-1-0.json index f93766ce7..63edc499a 100644 --- a/icons/arrow-up-1-0.json +++ b/icons/arrow-up-1-0.json @@ -13,5 +13,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-up-10" ] } \ No newline at end of file diff --git a/icons/arrow-up-a-z.json b/icons/arrow-up-a-z.json index ae41e9ed4..41e7a6d44 100644 --- a/icons/arrow-up-a-z.json +++ b/icons/arrow-up-a-z.json @@ -13,5 +13,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-up-az" ] } \ No newline at end of file diff --git a/icons/arrow-up-z-a.json b/icons/arrow-up-z-a.json index 3807f3037..93b301203 100644 --- a/icons/arrow-up-z-a.json +++ b/icons/arrow-up-z-a.json @@ -14,5 +14,8 @@ "text", "layout", "arrows" + ], + "aliases": [ + "arrow-up-za" ] } \ No newline at end of file diff --git a/icons/axis-3d.json b/icons/axis-3d.json index 0c266bc54..e92d8a811 100644 --- a/icons/axis-3d.json +++ b/icons/axis-3d.json @@ -11,5 +11,8 @@ ], "categories": [ "design" + ], + "aliases": [ + "axis-3-d" ] } \ No newline at end of file diff --git a/icons/file-axis-3d.json b/icons/file-axis-3d.json index 46097b0fc..da6023e37 100644 --- a/icons/file-axis-3d.json +++ b/icons/file-axis-3d.json @@ -12,5 +12,8 @@ "categories": [ "design", "files" + ], + "aliases": [ + "file-axis-3-d" ] } \ No newline at end of file diff --git a/icons/grid-2x2.json b/icons/grid-2x2.json index f9e2f7af1..53baa92d2 100644 --- a/icons/grid-2x2.json +++ b/icons/grid-2x2.json @@ -26,5 +26,8 @@ "design", "shapes", "maths" + ], + "aliases": [ + "grid-2-x-2" ] } \ No newline at end of file diff --git a/icons/grid-3x3.json b/icons/grid-3x3.json index 30da871df..2bf565169 100644 --- a/icons/grid-3x3.json +++ b/icons/grid-3x3.json @@ -18,6 +18,7 @@ "design" ], "aliases": [ - "grid" + "grid", + "grid-3-x-3" ] } \ No newline at end of file diff --git a/icons/move-3d.json b/icons/move-3d.json index 9f462f8fc..faab60531 100644 --- a/icons/move-3d.json +++ b/icons/move-3d.json @@ -14,5 +14,8 @@ ], "categories": [ "design" + ], + "aliases": [ + "move-3-d" ] } \ No newline at end of file diff --git a/icons/rotate-3d.json b/icons/rotate-3d.json index b7eaf906f..9761efba3 100644 --- a/icons/rotate-3d.json +++ b/icons/rotate-3d.json @@ -11,5 +11,8 @@ ], "categories": [ "design" + ], + "aliases": [ + "rotate-3-d" ] } \ No newline at end of file diff --git a/icons/scale-3d.json b/icons/scale-3d.json index 2af9c06e3..ad7892eaa 100644 --- a/icons/scale-3d.json +++ b/icons/scale-3d.json @@ -12,5 +12,8 @@ ], "categories": [ "design" + ], + "aliases": [ + "scale-3-d" ] } \ No newline at end of file diff --git a/package.json b/package.json index 15944bf36..4322c414c 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "categories2icons": "node scripts/migrateCategoriesToIcons.mjs --presets @babel/env", "generate:changelog": "node ./scripts/generateChangelog.mjs", "generate:contributors": "node ./scripts/updateContributors.mjs icons/*.svg", + "generate:nextJSAliases": "node ./scripts/generateNextJSAliases.mjs", "postinstall": "husky install", "lint": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}", "prepare": "husky install", @@ -50,7 +51,10 @@ "svgson": "^5.2.1" }, "lint-staged": { - "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs" + "icons/*.svg":[ + "node ./scripts/optimizeStagedSvgs.mjs", + "node ./scripts/generateNextJSAliases.mjs" + ] }, "packageManager": "pnpm@7.14.0", "pnpm": { diff --git a/scripts/generateNextJSAliases.mjs b/scripts/generateNextJSAliases.mjs new file mode 100644 index 000000000..332ae7fe2 --- /dev/null +++ b/scripts/generateNextJSAliases.mjs @@ -0,0 +1,46 @@ +import path from 'path'; +import { promises as fs } from 'fs'; +import { getCurrentDirPath, readSvgDirectory } from './helpers.mjs'; + +// This is a special case convertion NextJS uses for their modularize imports. We try to follow the same convention, to generate the same imports. +function pascalToKebabNextJSFlavour(str) { + return str + .replace(/([a-z])([A-Z])/g, '$1-$2') + .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') + .replace(/([a-z])-?([0-9]+|[A-Z])/g, '$1-$2') + .replace(/([0-9]+)-?([a-zA-Z])/g, '$1-$2') + .replace(/([0-9])-([0-9])/g, '$1$2') + .split('-') + .map((word) => word.toLowerCase()) + .join('-'); +} + +const currentDir = getCurrentDirPath(import.meta.url); +const ICONS_DIR = path.resolve(currentDir, '../icons'); + +const svgFiles = readSvgDirectory(ICONS_DIR); + +const iconNames = svgFiles.map((icon) => icon.split('.')[0]).reverse(); + +console.log('Creating aliases for NextJS imports: '); + +Promise.all( + iconNames.map(async (iconName) => { + const pascalCaseName = iconName.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); + + const iconNameKebabCaseNextjsFlavour = pascalToKebabNextJSFlavour(pascalCaseName); + + if (iconName !== iconNameKebabCaseNextjsFlavour) { + console.log(iconName, '➡️', iconNameKebabCaseNextjsFlavour); + + const metaJson = await fs.readFile(path.resolve(ICONS_DIR, `${iconName}.json`), 'utf-8'); + const iconMetaData = JSON.parse(metaJson); + + const aliases = iconMetaData.aliases ?? []; + aliases.push(iconNameKebabCaseNextjsFlavour); + + const output = JSON.stringify({ ...iconMetaData, aliases }, null, 2); + fs.writeFile(path.resolve(ICONS_DIR, `${iconName}.json`), output, 'utf-8'); + } + }), +); diff --git a/tools/build-icons/building/generateAliasesFile.mjs b/tools/build-icons/building/generateAliasesFile.mjs index eaaf57d9e..53957da41 100644 --- a/tools/build-icons/building/generateAliasesFile.mjs +++ b/tools/build-icons/building/generateAliasesFile.mjs @@ -45,6 +45,11 @@ export default async function generateAliasesFile({ await fs.promises.writeFile(location, output, 'utf-8'); } + // Don't import the same icon twice + if (componentName === componentNameAlias) { + return; + } + const exportFileIcon = separateAliasesFile ? alias : iconName; importString += getImportString(