feat!: build as ESM-Only, drop CJS (#348)

* feat!: build as ESM-Only, drop CJS

Author: ghiscoding

.github/workflows/main.yml

@@ -73,9 +73,6 @@ jobs:
       - name: Build Library
         run: pnpm build:lib
 
-      - name: validate "Are the Types Wrong"
-        run: pnpm are-types-wrong
-
       - name: Build Website (GitHub demo site)
         run: pnpm build:demo
 

README.md

@@ -98,27 +98,22 @@ with this code in place, we can now use the following CSP meta tag (which is wha
 There are multiple ways to install and use the library, you can see below the folder structure of the distribution files
 1. `dist/browser`: Standalone build which assigns `multipleSelect` on the `window.multipleSelect` object
    - browser standalone means that you can simply load it with `<script></script>` and then `multipleSelect('#mySelect')`
-   - 2 builds are available CJS (`.cjs`) and ESM (`.js`) and for the latter you will need to load it with `<script type="module">`
-2. `cjs`: to use as CommonJS with `require('multiple-select-vanilla')`
-3. `esm`: to use as ESM with `import from 'multiple-select-vanilla'`
+   - only ESM build (`.js`) are provided, you will need to load it with `<script type="module">`
+2. `esm`: to use as ESM with `import from 'multiple-select-vanilla'`
 
 ```
 dist/
   browser/
     multiple-select.js              # ESM build, use with: window.multipleSelect
-    multiple-select.cjs             # CJS (CommonJS) build, use with: window.multipleSelect
   locales/
-    multiple-select-all-locales.cjs # all-in-1 locales as CJS
     multiple-select-all-locales.js  # all-in-1 locales as ESM
     ..
-    multiple-select-fr-FR.cjs       # French locale as CJS
     multiple-select-fr-FR.js        # French locale as ESM
     ...
   styles/                           # CSS and SASS Stylings
     css/
     sass/
   index.d.ts                        # d.ts Type Definitions
-  multiple-select.cjs               # CJS (CommonJS), used by: require()
   multiple-select.js                # ESM, used by: import from
 ```
 

packages/demo/src/getting-started.html

@@ -22,8 +22,8 @@ <h5>CDN</h5>
       including Multiple-Select-Vanilla. Just use the following CDN links.
     </p>
     <p>
-      The project now ships its <code>.js</code> files as ESM by default, if you still wish to use the legacy CommonJS (CJS) format with <code>require()</code>,
-      then you will have to use <code>.cjs</code> file extension.
+      The project now ships as ESM-Only, if you still wish to use the legacy CommonJS (CJS) format with <code>require()</code>,
+      then use previous 3.x version.
     </p>
 
     <div style="background: #f7f7f7; padding: 10px">
@@ -33,9 +33,6 @@ <h5>CDN</h5>
 
 &lt;!-- (ESM requires <span style="color:#d63384">type=&quot;module&quot;</span>) Latest compiled and minified JavaScript --&gt;
 &lt;script type=&quot;module&quot; src=&quot;<span style="color:#0a3069">https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/multiple-select.js</span>&quot;&gt;&lt;/script&gt;
-
-&lt;!-- (CJS requires <span style="color:#d63384">.cjs</span> extension) Latest compiled and minified JavaScript --&gt;
-&lt;script src=&quot;<span style="color:#0a3069">https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/multiple-select.cjs</span>&quot;&gt;&lt;/script&gt;</pre>
     </div>
 
     <quote>
@@ -52,16 +49,12 @@ <h5>NPM</h5>
     </div>
   </section>
 
-  <h5>CommonJS <code>require()</code> / ESM <code>import from</code></h5>
+  <h5>ESM <code>import from</code></h5>
     <p>
       The library provides both CommonJS or ESM, see the example below:
     </p>
     <div style="background: #f7f7f7; padding: 10px">
 <pre>
-// CommonJS
-<span style="color:#cf222e">const</span> { multipleSelect } = <span style="color:#6639ba">require</span>(<span style="color:#0a3069">'multiple-select-vanilla'</span>);
-<span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.multiple-select'</span>, {<span style="color:#a0a1a7">/*...*/</span>});
-
 // ESM
 <span style="color:#cf222e">import</span> { multipleSelect } <span style="color:#cf222e">from</span> <span style="color:#0a3069">'multiple-select-vanilla'</span>;
 <span style="color:#6639ba">multipleSelect</span>(<span style="color:#0a3069">'.multiple-select'</span>, {<span style="color:#a0a1a7">/*...*/</span>});

packages/demo/vite.config.mts

@@ -2,6 +2,13 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
   base: './',
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true,
+      },
+    },
+  },
   server: {
     port: 4000,
     cors: true,

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

@@ -1,7 +1,7 @@
 import { buildSync } from 'esbuild';
 import { globSync } from 'tinyglobby';
 
-const buildFormats = ['cjs', 'esm'];
+const buildFormats = ['esm'];
 const localeFiles = globSync('src/locales/**/*.ts');
 const localeEntryPoints = [];
 

packages/multiple-select-vanilla/clone-dts.mjs

@@ -21,18 +21,11 @@
   "homepage": "https://github.com/ghiscoding/multiple-select-vanilla",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./dist/browser/*": "./dist/browser/*",
     "./dist/locales/*": "./dist/locales/*",
@@ -57,7 +50,7 @@
   "scripts": {
     "are-types-wrong": "pnpx @arethetypeswrong/cli --pack .",
     "clean": "rimraf dist",
-    "build": "pnpm build:all && pnpm build:types:prod && pnpm clone:dts",
+    "build": "pnpm build:all && pnpm build:types:prod",
     "postbuild": "pnpm sass:build && pnpm sass:copy",
     "dev:init": "pnpm sass:build && pnpm sass:copy && pnpm build:all",
     "build:all": "node build-prod.mjs",
@@ -66,7 +59,6 @@
     "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",
-    "clone:dts": "node clone-dts.mjs",
     "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",