Revert .mjs modules in build for Lucide React (#1471)

* switch to different build strategy for dynamicIconImports * add remove for dynamicIconImports files
lucide-icons · Aug 6, 2023 · 9463b2e · 9463b2e
1 parent 0221022
commit 9463b2e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,6 +18,9 @@ packages/**/src/icons/*.ts
 packages/**/src/icons/*.tsx
 packages/**/src/aliases.ts
 packages/**/src/dynamicIconImports.ts
+packages/**/dynamicIconImports.js
+packages/**/dynamicIconImports.d.ts
+packages/**/dynamicIconImports.js.map
 packages/**/LICENSE
 categories.json
 tags.json

diff --git 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.0.1",
+  "version": "0.263.2-beta.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -10,45 +10,24 @@
     "url": "https://github.com/lucide-icons/lucide.git",
     "directory": "packages/lucide-react"
   },
-  "type": "module",
   "author": "Eric Fennis",
   "amdName": "lucide-react",
-  "exports": {
-    ".": {
-      "import": "./dist/esm/lucide-react.mjs",
-      "require": "./dist/cjs/lucide-react.cjs",
-      "types": "./dist/lucide-react.d.ts"
-    },
-    "./icons": {
-      "import": "./dist/esm/icons/index.mjs",
-      "require": "./dist/cjs/lucide-react.cjs"
-    },
-    "./dynamicIconImports": {
-      "import": "./dist/esm/dynamicIconImports.mjs",
-      "types": "./dist/dynamicIconImports.d.ts"
-    },
-    "./src/createLucideIcon": {
-      "import": "./src/createLucideIcon.ts"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      "dynamicIconImports": ["./dist/dynamicIconImports.d.ts"]
-    }
-  },
-  "main": "dist/cjs/lucide-react.cjs",
+  "main": "dist/cjs/lucide-react.js",
   "main:umd": "dist/umd/lucide-react.js",
-  "module": "dist/esm/lucide-react.mjs",
+  "module": "dist/esm/lucide-react.js",
   "unpkg": "dist/umd/lucide-react.min.js",
   "typings": "dist/lucide-react.d.ts",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "dynamicIconImports.js",
+    "dynamicIconImports.js.map",
+    "dynamicIconImports.d.ts"
   ],
   "scripts": {
     "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",
+    "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:types": "node ./scripts/buildTypes.mjs",
     "build:bundles": "rollup -c ./rollup.config.mjs",

diff --git a/packages/lucide-react/rollup.config.mjs b/packages/lucide-react/rollup.config.mjs
@@ -9,39 +9,46 @@ const inputs = [`src/lucide-react.ts`];
 const bundles = [
   {
     format: 'umd',
-    extension: 'js',
     inputs,
     outputDir,
     minify: true,
   },
   {
     format: 'umd',
-    extension: 'js',
     inputs,
     outputDir,
   },
   {
     format: 'cjs',
-    extension: 'cjs',
     inputs,
     outputDir,
     aliasesSupport: true,
   },
   {
     format: 'esm',
-    extension: 'mjs',
-    inputs: [
-      ...inputs,
-      'src/dynamicIconImports.ts',
-    ],
+    inputs,
     outputDir,
     preserveModules: true,
     aliasesSupport: true,
   },
+  {
+    format: 'esm',
+    inputs: ['src/dynamicIconImports.ts'],
+    outputFile: 'dynamicIconImports.js',
+    aliasesSupport: true,
+    external: [/src/],
+    paths: (id) => {
+      if (id.match(/src/)) {
+        const [, modulePath] = id.match(/src\/(.*)\.ts/)
+
+        return `dist/esm/${modulePath}.js`
+      }
+    }
+  },
 ];
 
 const configs = bundles
-  .map(({ inputs, outputDir, format, minify, preserveModules, aliasesSupport, extension }) =>
+  .map(({ inputs, outputDir, outputFile, format, minify, preserveModules, aliasesSupport, entryFileNames, external = [], paths }) =>
     inputs.map(input => ({
       input,
       plugins: [
@@ -57,17 +64,22 @@ const configs = bundles
         ),
         ...plugins(pkg, minify)
       ],
-      external: ['react', 'prop-types'],
+      external: [
+        'react',
+        'prop-types',
+        ...external
+      ],
       output: {
         name: packageName,
         ...(preserveModules
           ? {
-              dir: `${outputDir}/${format}`,
-              entryFileNames: `[name].${extension}`,
+              dir:`${outputDir}/${format}`,
             }
           : {
-              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.${extension}`,
+              file: outputFile ?? `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
             }),
+        paths,
+        entryFileNames,
         format,
         sourcemap: true,
         preserveModules,
@@ -84,7 +96,7 @@ export default [
   {
     input: 'src/dynamicIconImports.ts',
     output: [{
-      file: `dist/dynamicIconImports.d.ts`, format: "es"
+      file: `dynamicIconImports.d.ts`, format: "es"
     }],
     plugins: [dts()],
   },