fix: full CJS/ESM hybrid support with tsup (#303)

* fix: full CJS/ESM hybrid support with tsup

* chore: update lock file

Author: ghiscoding

packages/multiple-select-vanilla/build-prod.mjs

@@ -1,17 +1,20 @@
 import { buildSync } from 'esbuild';
-import { globSync } from 'glob';
+import { globSync } from 'tinyglobby';
 
 const buildFormats = ['cjs', 'esm'];
 const localeFiles = globSync('src/locales/**/*.ts');
 const localeEntryPoints = [];
 
 for (const format of buildFormats) {
   const extension = format === 'cjs' ? 'cjs' : 'js';
-  // multiple-select.js
+
+  // - let's use TSUP to get valid hybrid (CJS/ESM) approach with are-the-types-wrong, however keep the rest of the build
+  /*
   runBuild({
     format,
-    outfile: `dist/multiple-select.${extension}`,
+    outfile: `dist/index.${extension}`,
   });
+  */
 
   // build all locales
   for (const localeFile of localeFiles) {

packages/multiple-select-vanilla/package.json

@@ -20,14 +20,20 @@
   ],
   "homepage": "https://github.com/ghiscoding/multiple-select-vanilla",
   "license": "MIT",
-  "main": "./dist/multiple-select.cjs",
-  "module": "./dist/multiple-select.js",
-  "types": "dist/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/multiple-select.js",
-      "require": "./dist/multiple-select.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./dist/browser/*": "./dist/browser/*",
     "./dist/locales/*": "./dist/locales/*",
@@ -50,16 +56,19 @@
     "url": "https://ko-fi.com/ghiscoding"
   },
   "scripts": {
+    "are-type-wrong": "attw --pack .",
     "clean": "rimraf dist",
-    "build": "pnpm build:all && pnpm build:types:prod",
-    "postbuild": "pnpm sass:build && pnpm sass:copy",
+    "esbuild:prod": "node build-prod.mjs",
+    "build": "pnpm clean && node build-prod.mjs && pnpm build:types:prod && tsup && pnpm sass:build && pnpm sass:copy",
+    "build:esbuild": "pnpm build:all && pnpm build:types:prod",
+    "postbuild:esbuild": "pnpm sass:build && pnpm sass:copy",
     "dev:init": "pnpm sass:build && pnpm sass:copy && pnpm build:all",
     "build:all": "node build-prod.mjs && pnpm build:types:prod",
     "build:watch": "cross-env NODE_ENV='development' node build-watch.mjs",
     "build:locales": "esbuild src/locales/all-locales-index.ts --bundle --minify --format=iife --target=es2021 --sourcemap --outfile=dist/locales/multiple-select-all-locales.js",
     "build:esm": "esbuild src/index.ts --bundle --minify --format=esm --target=es2021 --sourcemap --outfile=dist/multiple-select.js",
     "build:types": "tsc --emitDeclarationOnly --incremental --declarationMap false --outDir dist",
-    "build:types:prod": "tsc --emitDeclarationOnly --incremental --declarationMap --outDir dist",
+    "build:types:prod": "tsc --emitDeclarationOnly --declarationMap --outDir dist",
     "sass:build": "sass src/styles:dist/styles/css --style=compressed --quiet-deps --no-source-map",
     "postsass:build": "postcss dist/styles/css/**/* --dir dist/styles/css --base dist/styles/css --no-map --use cssnano --use autoprefixer --style=compressed",
     "sass:watch": "sass src/styles:dist/styles/css --watch --style=compressed --quiet-deps --no-source-map",
@@ -69,16 +78,19 @@
     "@types/trusted-types": "^2.0.7"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.16.4",
     "autoprefixer": "^10.4.20",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "cssnano": "^7.0.6",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.0",
+    "esbuild-plugin-d.ts": "^1.3.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.4.5",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "sass": "^1.79.3",
+    "tinyglobby": "^0.2.9",
+    "tsup": "^8.3.0",
     "typescript": "5.6.2"
   }
 }

packages/multiple-select-vanilla/tsup.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig(options => [
+  // for bundlers like vite, rollup, esbuild, webpack etc
+  {
+    entry: ['src/**.ts'],
+    format: ['esm'],
+    splitting: false,
+    sourcemap: true,
+    // clean: true,
+    dts: !options.watch,
+    outExtension: ({ format }) => ({ js: format === 'cjs' ? '.cjs' : '.mjs' }),
+  },
+  // common js for node and other backend runtimes
+  {
+    entry: ['src/index.ts'],
+    format: ['cjs'],
+    splitting: false,
+    sourcemap: true,
+    // clean: true,
+    dts: !options.watch,
+    outExtension: ({ format }) => ({
+      js: format === 'cjs' ? '.cjs' : '.mjs',
+    }),
+  },
+
+  // IIFE bundle js for cdn (window object for legacy <script>)
+  // {
+  //   entry: {
+  //     'multiple-select': 'src/index.ts',
+  //   },
+  //   format: ['iife'],
+  //   globalName: 'MultipleSelect',
+  //   splitting: false,
+  //   sourcemap: true,
+  //   clean: true,
+  //   outExtension: ({ format }) => ({
+  //     js: '.iife.js',
+  //   }),
+  // },
+]);