fix: added cjs exports to react package for NextJS projects

Author: favna

package.json

@@ -45,6 +45,7 @@
 		"react": "^18.2.0",
 		"rimraf": "^5.0.5",
 		"tslib": "^2.6.2",
+		"tsup": "^8.0.1",
 		"typescript": "^5.3.3"
 	},
 	"resolutions": {

packages/react/package.json

@@ -4,23 +4,28 @@
 	"description": "React bindings for @skyra/discord-components-core",
 	"author": "@skyra",
 	"license": "MIT",
-	"main": "dist/index.js",
-	"module": "dist/index.js",
-	"typings": "dist/index.d.ts",
+	"main": "dist/cjs/index.cjs",
+	"module": "dist/esm/index.mjs",
+	"typings": "dist/cjs/index.d.cts",
 	"type": "module",
 	"exports": {
 		"import": {
-			"types": "./dist/index.d.ts",
-			"default": "./dist/index.js"
+			"types": "./dist/esm/index.d.mts",
+			"default": "./dist/esm/index.mjs"
+		},
+		"require": {
+			"types": "./dist/cjs/index.d.cts",
+			"default": "./dist/cjs/index.cjs"
 		}
 	},
 	"sideEffects": [
-		"./dist/index.js"
+		"./dist/cjs/index.cjs",
+		"./dist/esm/index.mjs"
 	],
 	"homepage": "https://github.com/skyra-project/discord-components/tree/main/packages/react#readme",
 	"scripts": {
-		"clean": "rimraf dist coverage",
-		"build": "yarn clean && tsc -b src"
+		"build": "tsup && yarn build:rename-esm-index",
+		"build:rename-esm-index": "node scripts/rename-esm-index.mjs"
 	},
 	"dependencies": {
 		"@lit/react": "^1.0.2",
@@ -30,16 +35,15 @@
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.48",
+		"colorette": "^2.0.20",
 		"rimraf": "^5.0.5",
+		"tsup": "^8.0.1",
 		"typescript": "^5.3.3"
 	},
 	"peerDependencies": {
 		"react": "16.8.x || 17.x || 18.x",
 		"react-dom": "16.8.x || 17.x || 18.x"
 	},
-	"directories": {
-		"lib": "src"
-	},
 	"files": [
 		"dist/",
 		"CHANGELOG.md"

packages/react/scripts/rename-esm-index.mjs

@@ -0,0 +1,13 @@
+import { rename } from 'node:fs/promises';
+import { join } from 'node:path';
+import { green } from 'colorette';
+
+const inputPath = 'dist/esm/index.d.ts';
+const outputPath = 'dist/esm/index.d.mts';
+
+const fullInputPathUrl = join(process.cwd(), inputPath);
+const fullOutputPathUrl = join(process.cwd(), outputPath);
+
+await rename(fullInputPathUrl, fullOutputPathUrl);
+
+console.log(green(`✅ Renamed index.d.ts to index.d.mts`));

packages/react/tsup.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, type Options } from 'tsup';
+import { dependencies } from './package.json';
+
+const baseOptions: Options = {
+	clean: true,
+	dts: true,
+	entry: ['src/index.ts'],
+	minify: false,
+	external: Object.keys(dependencies),
+	sourcemap: true,
+	target: 'es2022',
+	tsconfig: 'src/tsconfig.json',
+	keepNames: true,
+	treeshake: true
+};
+
+export default [
+	defineConfig({
+		...baseOptions,
+		outDir: 'dist/cjs',
+		format: 'cjs',
+		outExtension: () => ({ js: '.cjs' })
+	}),
+	defineConfig({
+		...baseOptions,
+		outDir: 'dist/esm',
+		format: 'esm',
+		outExtension: () => ({ js: '.mjs' })
+	})
+];