From c15a9ba759bf54d2d70521094cd77761ccff62c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 3 Dec 2023 16:08:07 +0100
Subject: [PATCH] feat!: move to ESM first with dual esm/cjs package exports
 (#720)

* feat!: move to ESM first with dual esm/cjs package exports

* docs: update readme for webpack, vue-cli, rspack and esbuild

* chore: include only code snippets for the latest version
---
 README.md            | 22 +++++++++++++++----
 package.json         | 52 +++++++++++++++++++-------------------------
 scripts/postbuild.ts | 21 ------------------
 3 files changed, 40 insertions(+), 55 deletions(-)
 delete mode 100644 scripts/postbuild.ts

diff --git a/README.md b/README.md
index f78a384b..6c245384 100644
--- a/README.md
+++ b/README.md
@@ -74,7 +74,7 @@ export default {
 module.exports = {
   /* ... */
   plugins: [
-    require('unplugin-vue-components/webpack')({ /* options */ }),
+    require('unplugin-vue-components/webpack').default({ /* options */ }),
   ],
 }
 ```
@@ -89,7 +89,7 @@ module.exports = {
 module.exports = {
   /* ... */
   plugins: [
-    require('unplugin-vue-components/rspack')({ /* options */ }),
+    require('unplugin-vue-components/rspack').default({ /* options */ }),
   ],
 }
 ```
@@ -109,9 +109,22 @@ You might not need this plugin for Nuxt. Use [`@nuxt/components`](https://github
 ```ts
 // vue.config.js
 module.exports = {
+  /* ... */
+  plugins: [
+    require('unplugin-vue-components/webpack').default({ /* options */ }),
+  ],
+}
+```
+
+You can also rename the Vue configuration file to `vue.config.mjs` and use static import syntax (you should use latest `@vue/cli-service ^5.0.8`):
+```ts
+// vue.config.mjs
+import Components from 'unplugin-vue-components/webpack'
+
+export default {
   configureWebpack: {
     plugins: [
-      require('unplugin-vue-components/webpack')({ /* options */ }),
+      Components({ /* options */ }),
     ],
   },
 }
@@ -125,11 +138,12 @@ module.exports = {
 ```ts
 // esbuild.config.js
 import { build } from 'esbuild'
+import Components from 'unplugin-vue-components/esbuild'
 
 build({
   /* ... */
   plugins: [
-    require('unplugin-vue-components/esbuild')({
+    Components({
       /* options */
     }),
   ],
diff --git a/package.json b/package.json
index f32a4b56..7d44718b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "unplugin-vue-components",
+  "type": "module",
   "version": "0.25.4",
   "packageManager": "pnpm@8.7.5",
   "description": "Components auto importing for Vue",
@@ -14,54 +15,45 @@
   "bugs": "https://github.com/unplugin/unplugin-vue-components/issues",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./nuxt": {
-      "types": "./dist/nuxt.d.ts",
-      "import": "./dist/nuxt.mjs",
-      "require": "./dist/nuxt.js"
+      "import": "./dist/nuxt.js",
+      "require": "./dist/nuxt.cjs"
     },
     "./resolvers": {
-      "types": "./dist/resolvers.d.ts",
-      "import": "./dist/resolvers.mjs",
-      "require": "./dist/resolvers.js"
+      "import": "./dist/resolvers.js",
+      "require": "./dist/resolvers.cjs"
     },
     "./rollup": {
-      "types": "./dist/rollup.d.ts",
-      "import": "./dist/rollup.mjs",
-      "require": "./dist/rollup.js"
+      "import": "./dist/rollup.js",
+      "require": "./dist/rollup.cjs"
     },
     "./types": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/types.mjs",
-      "require": "./dist/types.js"
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
     },
     "./vite": {
-      "types": "./dist/vite.d.ts",
-      "import": "./dist/vite.mjs",
-      "require": "./dist/vite.js"
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs"
     },
     "./webpack": {
-      "types": "./dist/webpack.d.ts",
-      "import": "./dist/webpack.mjs",
-      "require": "./dist/webpack.js"
+      "import": "./dist/webpack.js",
+      "require": "./dist/webpack.cjs"
     },
     "./rspack": {
-      "types": "./dist/rspack.d.ts",
-      "import": "./dist/rspack.mjs",
-      "require": "./dist/rspack.js"
+      "import": "./dist/rspack.js",
+      "require": "./dist/rspack.cjs"
     },
     "./esbuild": {
-      "types": "./dist/esbuild.d.ts",
-      "import": "./dist/esbuild.mjs",
-      "require": "./dist/esbuild.js"
+      "import": "./dist/esbuild.js",
+      "require": "./dist/esbuild.cjs"
     },
     "./*": "./*"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "types": "index.d.ts",
   "typesVersions": {
     "*": {
@@ -77,7 +69,7 @@
     "node": ">=14"
   },
   "scripts": {
-    "build": "tsup && esno scripts/postbuild.ts",
+    "build": "tsup",
     "dev": "tsup --watch src",
     "example:build": "npm -C examples/vite-vue3 run build",
     "example:dev": "npm -C examples/vite-vue3 run dev",
diff --git a/scripts/postbuild.ts b/scripts/postbuild.ts
deleted file mode 100644
index 158191ff..00000000
--- a/scripts/postbuild.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { basename, resolve } from 'node:path'
-import { promises as fs } from 'node:fs'
-import fg from 'fast-glob'
-
-async function run() {
-  // fix cjs exports
-  const files = await fg('*.js', {
-    ignore: ['index.js', 'chunk-*'],
-    absolute: true,
-    cwd: resolve(__dirname, '../dist'),
-  })
-  for (const file of files) {
-    console.log('[postbuild]', basename(file))
-    let code = await fs.readFile(file, 'utf8')
-    code = code.replace('exports.default =', 'module.exports =')
-    code += 'exports.default = module.exports;'
-    await fs.writeFile(file, code)
-  }
-}
-
-run()