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 <eric.fennis@gmail.com>

.github/workflows/lucide-angular.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide-angular/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

.github/workflows/lucide-font.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - icons/**
+      - tools/build-font/**
       - pnpm-lock.yaml
 
 jobs:

.github/workflows/lucide-preact.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide-preact/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

.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:

.github/workflows/lucide-react.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide-react/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

.github/workflows/lucide-solid.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide-solid/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

.github/workflows/lucide-static.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide-static/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

.github/workflows/lucide-svelte.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide-svelte/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

.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:

.github/workflows/lucide-vue.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

.github/workflows/lucide.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     paths:
       - packages/lucide/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:

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",

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,

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`));
+}

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);
 

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,
     });
   }