feat(packages): use .mjs for ESM bundles (#4285)

.gitignore

@@ -26,9 +26,11 @@ packages/**/src/utils/*.ts
 packages/**/src/dynamicIconImports.ts
 packages/**/DynamicIcon.d.ts
 packages/**/dynamicIconImports.js
+packages/**/dynamicIconImports.mjs
 packages/**/dynamicIconImports.d.ts
 packages/**/dynamicIconImports.d.mts
 packages/**/dynamicIconImports.js.map
+packages/**/dynamicIconImports.mjs.map
 packages/**/dynamic.d.ts
 packages/**/dynamic.d.mts
 packages/**/dynamic.mjs.map

packages/lucide-preact/package.json

@@ -24,11 +24,11 @@
   "author": "Eric Fennis",
   "amdName": "lucide-preact",
   "main": "dist/cjs/lucide-preact.js",
-  "module": "dist/esm/lucide-preact.js",
+  "module": "dist/esm/lucide-preact.mjs",
   "exports": {
     ".": {
       "types": "./dist/lucide-preact.d.ts",
-      "import": "./dist/esm/lucide-preact.js",
+      "import": "./dist/esm/lucide-preact.mjs",
       "require": "./dist/cjs/lucide-preact.js"
     }
   },

packages/lucide-preact/rollup.config.mjs

@@ -17,11 +17,12 @@ const bundles = [
     inputs,
     outputDir,
     preserveModules: true,
+    extension: 'mjs',
   },
 ];
 
 const configs = bundles
-  .map(({ inputs, outputDir, format, preserveModules }) =>
+  .map(({ inputs, outputDir, format, preserveModules, extension = 'js' }) =>
     inputs.map((input) => ({
       input,
       plugins: plugins({ pkg }),
@@ -31,9 +32,10 @@ const configs = bundles
         ...(preserveModules
           ? {
               dir: `${outputDir}/${format}`,
+              entryFileNames: `[name].${extension}`,
             }
           : {
-              file: `${outputDir}/${format}/${outputFileName}.js`,
+              file: `${outputDir}/${format}/${outputFileName}.${extension}`,
             }),
         preserveModules,
         format,

packages/lucide-react-native/package.json

@@ -24,20 +24,20 @@
   "author": "Eric Fennis",
   "amdName": "lucide-react-native",
   "main": "dist/cjs/lucide-react-native.js",
-  "module": "dist/esm/lucide-react-native.js",
+  "module": "dist/esm/lucide-react-native.mjs",
   "typings": "dist/lucide-react-native.d.ts",
-  "react-native": "dist/esm/lucide-react-native.js",
+  "react-native": "dist/esm/lucide-react-native.mjs",
   "exports": {
     ".": {
       "types": "./dist/lucide-react-native.d.ts",
-      "import": "./dist/esm/lucide-react-native.js",
-      "browser": "./dist/esm/lucide-react-native.js",
+      "import": "./dist/esm/lucide-react-native.mjs",
+      "browser": "./dist/esm/lucide-react-native.mjs",
       "require": "./dist/cjs/lucide-react-native.js"
     },
     "./icons": {
       "types": "./dist/icons.d.ts",
-      "import": "./dist/esm/icons/index.js",
-      "browser": "./dist/esm/icons/index.js",
+      "import": "./dist/esm/icons/index.mjs",
+      "browser": "./dist/esm/icons/index.mjs",
       "require": "./dist/cjs/icons/index.js"
     }
   },

packages/lucide-react-native/rollup.config.mjs

@@ -18,11 +18,12 @@ const bundles = [
     inputs,
     outputDir,
     preserveModules: true,
+    extension: 'mjs',
   },
 ];
 
 const configs = bundles
-  .map(({ inputs, outputDir, format, preserveModules }) =>
+  .map(({ inputs, outputDir, format, preserveModules, extension = 'js' }) =>
     inputs.map((input) => ({
       input,
       plugins: plugins({ pkg }),
@@ -33,9 +34,10 @@ const configs = bundles
           ? {
               dir: `${outputDir}/${format}`,
               exports: 'auto',
+              entryFileNames: `[name].${extension}`,
             }
           : {
-              file: `${outputDir}/${format}/${outputFileName}.js`,
+              file: `${outputDir}/${format}/${outputFileName}.${extension}`,
             }),
         format,
         preserveModules,

packages/lucide-react/dynamicIconImports.mjs

@@ -1 +1 @@
-export { default } from './dist/esm/dynamicIconImports.js';
+export { default } from './dist/esm/dynamicIconImports.mjs';

packages/lucide-react/package.json

@@ -24,18 +24,17 @@
   "author": "Eric Fennis",
   "amdName": "lucide-react",
   "main": "dist/cjs/lucide-react.js",
-  "module": "dist/esm/lucide-react.js",
+  "module": "dist/esm/lucide-react.mjs",
   "typings": "dist/lucide-react.d.ts",
   "sideEffects": false,
   "files": [
     "dist",
     "dynamic.js",
     "dynamic.mjs",
-    "dynamic.js.map",
+    "dynamic.mjs.map",
     "dynamic.d.mts",
     "dynamic.d.ts",
     "dynamicIconImports.mjs",
-    "dynamicIconImports.js.map",
     "dynamicIconImports.d.ts",
     "dynamicIconImports.d.mts"
   ],

packages/lucide-react/rollup.config.mjs

@@ -14,12 +14,14 @@ const bundles = [
     format: 'cjs',
     inputs,
     outputDir: 'dist/cjs',
+    extension: 'js',
   },
   {
     format: 'esm',
     inputs,
     outputDir: 'dist/esm',
     preserveModules: true,
+    extension: 'mjs',
   },
   {
     format: 'esm',
@@ -27,11 +29,12 @@ const bundles = [
     outputDir: 'dist/esm',
     external: [/src/],
     preserveModules: true,
+    extension: 'mjs',
     paths: (id) => {
       if (id.match(/src/)) {
         const [, modulePath] = id.match(/src\/(.*)\.ts/);
 
-        return `./${modulePath}.js`;
+        return `./${modulePath}.mjs`;
       }
     },
   },
@@ -40,11 +43,12 @@ const bundles = [
     inputs: ['src/dynamic.ts'],
     outputFile: 'dynamic.mjs',
     external: [/src/],
+    extension: 'mjs',
     paths: (id) => {
       if (id.match(/src/)) {
         const [, modulePath] = id.match(/src\/(.*)\.ts/);
 
-        return `dist/esm/${modulePath}.js`;
+        return `dist/esm/${modulePath}.mjs`;
       }
     },
   },
@@ -60,6 +64,7 @@ const configs = bundles
       minify,
       preserveModules,
       entryFileNames,
+      extension = 'js',
       external = [],
       paths,
     }) =>
@@ -79,12 +84,12 @@ const configs = bundles
           ...(preserveModules
             ? {
                 dir: outputDir,
+                entryFileNames: entryFileNames ?? `[name].${extension}`,
               }
             : {
-                file: outputFile ?? `${outputDir}/${outputFileName}.js`,
+                file: outputFile ?? `${outputDir}/${outputFileName}.${extension}`,
               }),
           paths,
-          entryFileNames,
           format,
           sourcemap: true,
           preserveModules,

packages/lucide-solid/package.json

@@ -25,7 +25,7 @@
   "author": "Eric Fennis",
   "source": "src/lucide-solid.ts",
   "main": "dist/cjs/lucide-solid.js",
-  "module": "dist/esm/lucide-solid.js",
+  "module": "dist/esm/lucide-solid.mjs",
   "types": "dist/types/lucide-solid.d.ts",
   "files": [
     "dist"
@@ -34,22 +34,22 @@
     ".": {
       "types": "./dist/types/lucide-solid.d.ts",
       "solid": "./dist/source/lucide-solid.jsx",
-      "import": "./dist/esm/lucide-solid.js",
-      "browser": "./dist/esm/lucide-solid.js",
+      "import": "./dist/esm/lucide-solid.mjs",
+      "browser": "./dist/esm/lucide-solid.mjs",
       "require": "./dist/cjs/lucide-solid.js"
     },
     "./icons": {
       "types": "./dist/types/lucide-solid.d.ts",
       "solid": "./dist/source/lucide-solid.jsx",
-      "import": "./dist/esm/lucide-solid.js",
-      "browser": "./dist/esm/lucide-solid.js",
+      "import": "./dist/esm/lucide-solid.mjs",
+      "browser": "./dist/esm/lucide-solid.mjs",
       "require": "./dist/cjs/lucide-solid.js"
     },
     "./icons/*": {
       "types": "./dist/types/icons/*.d.ts",
       "solid": "./dist/source/icons/*.jsx",
-      "import": "./dist/esm/icons/*.js",
-      "browser": "./dist/esm/icons/*.js",
+      "import": "./dist/esm/icons/*.mjs",
+      "browser": "./dist/esm/icons/*.mjs",
       "require": "./dist/cjs/icons/*.js"
     }
   },

packages/lucide-solid/rollup.config.mjs

@@ -23,11 +23,12 @@ const bundles = [
     inputs,
     outputDir,
     preserveModules: true,
+    extension: 'mjs',
   },
 ];
 
 const configs = bundles
-  .map(({ inputs, outputDir, format, preserveModules }) =>
+  .map(({ inputs, outputDir, format, preserveModules, extension = 'js' }) =>
     inputs.map((input) => ({
       input,
       plugins: [
@@ -117,9 +118,10 @@ const configs = bundles
           ? {
               dir: `${outputDir}/${format}`,
               exports: 'auto',
+              entryFileNames: `[name].${extension}`,
             }
           : {
-              file: `${outputDir}/${format}/${outputFileName}.js`,
+              file: `${outputDir}/${format}/${outputFileName}.${extension}`,
             }),
         format: format === 'source' ? 'esm' : format,
         preserveModules,

packages/lucide-static/package.json

@@ -24,7 +24,7 @@
   ],
   "source": "src/lucide-static.js",
   "main": "dist/cjs/lucide-static.js",
-  "module": "dist/esm/lucide-static.js",
+  "module": "dist/esm/lucide-static.mjs",
   "typings": "dist/lucide-static.d.ts",
   "sideEffects": false,
   "scripts": {

packages/lucide-static/rollup.config.mjs

@@ -16,11 +16,12 @@ const bundles = [
     inputs,
     outputDir,
     preserveModules: true,
+    extension: 'mjs',
   },
 ];
 
 const configs = bundles
-  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules, extension = 'js' }) =>
     inputs.map((input) => ({
       input,
       plugins: plugins({ pkg, minify }),
@@ -29,9 +30,10 @@ const configs = bundles
         ...(preserveModules
           ? {
               dir: `${outputDir}/${format}`,
+              entryFileNames: `[name].${extension}`,
             }
           : {
-              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.${extension}`,
             }),
         format,
         sourcemap: true,

packages/lucide/package.json

@@ -25,7 +25,7 @@
   "source": "src/lucide.js",
   "main": "dist/cjs/lucide.js",
   "main:umd": "dist/umd/lucide.js",
-  "module": "dist/esm/lucide.js",
+  "module": "dist/esm/lucide.mjs",
   "unpkg": "dist/umd/lucide.min.js",
   "typings": "dist/lucide.d.ts",
   "sideEffects": false,

packages/lucide/rollup.config.mjs

@@ -53,6 +53,7 @@ const configs = bundles
         ...(preserveModules
           ? {
               dir: `${outputDir}/${format}`,
+              entryFileNames: '[name].mjs',
             }
           : {
               file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,

packages/vue/package.json

@@ -23,7 +23,7 @@
   "amdName": "lucide-vue",
   "source": "build/lucide-vue.js",
   "main": "dist/cjs/lucide-vue.js",
-  "module": "dist/esm/lucide-vue.js",
+  "module": "dist/esm/lucide-vue.mjs",
   "typings": "dist/lucide-vue.d.ts",
   "sideEffects": false,
   "files": [

packages/vue/rollup.config.mjs

@@ -17,11 +17,12 @@ const bundles = [
     inputs,
     outputDir,
     preserveModules: true,
+    extension: 'mjs',
   },
 ];
 
 const configs = bundles
-  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
+  .map(({ inputs, outputDir, format, minify, preserveModules, extension = 'js' }) =>
     inputs.map((input) => ({
       input,
       plugins: plugins({ pkg, minify }),
@@ -31,9 +32,10 @@ const configs = bundles
         ...(preserveModules
           ? {
               dir: `${outputDir}/${format}`,
+              entryFileNames: `[name].${extension}`,
             }
           : {
-              file: `${outputDir}/${format}/${outputFileName}.js`,
+              file: `${outputDir}/${format}/${outputFileName}.${extension}`,
             }),
         format,
         preserveModules,