feat!: default .js as ESM, CJS to .cjs & build target ES2021 (#171)

* feat!: default `.js` as ESM, CJS to `.cjs` & build target ES2021

demo/package.json

@@ -28,7 +28,7 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.0-beta.18"
+    "typescript": "^5.3.2",
+    "vite": "^5.0.0"
   }
 }

demo/src/examples/example09.ts

@@ -5,7 +5,7 @@ import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla'
 // import 'multiple-select-vanilla/dist/locales/multiple-select-es-ES';
 
 // 2. or load all locales at once
-import 'multiple-select-vanilla/dist/multiple-select-all-locales';
+import 'multiple-select-vanilla/dist/locales/multiple-select-all-locales';
 
 export default class Example {
   ms1?: MultipleSelectInstance;

demo/src/getting-started.html

@@ -21,15 +21,26 @@ <h5>CDN</h5>
       <a href="https://www.jsdelivr.com/" target="__blank">jsDelivr</a> graciously provide CDNs for many JavaScript libraries
       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 old CommonJS (CJS) format with <code>require()</code>,
+      then you will have to use <code>.cjs</code> file extension.
+    </p>
 
     <div style="background: #f7f7f7; padding: 10px">
       <pre>
 &lt;!-- Latest compiled and minified CSS --&gt;
-&lt;link href=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/multiple-select-vanilla@0.6.3/dist/styles/css/multiple-select.css</span>&quot; rel=&quot;<span style="color:#880000">stylesheet</span>&quot;&gt;
+&lt;link href=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/multiple-select-vanilla@1.0.0/dist/styles/css/multiple-select.css</span>&quot; rel=&quot;<span style="color:#880000">stylesheet</span>&quot;&gt;
 
-&lt;!-- Latest compiled and minified JavaScript --&gt;
-&lt;script src=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected]/dist/multiple-select.js</span>&quot;&gt;&lt;/script&gt;</pre>
+&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:#880000">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:#880000">https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/multiple-select.cjs</span>&quot;&gt;&lt;/script&gt;</pre>
     </div>
+
+    <quote>
+      <b>Note:</b> the <code>dist/browser</code> location is the only one providing the <code>MultipleSelect</code> on the <code>window</code> object.
+    </quote>
   </section>
 
   <section>

lib/build-prod.mjs

@@ -6,39 +6,42 @@ const localeFiles = globSync('src/locales/**/*.ts');
 const localeEntryPoints = [];
 
 for (const format of buildFormats) {
+  const extension = format === 'cjs' ? 'cjs' : 'js';
   // multiple-select.js
-  runBuild({ format, outfile: `dist/${format}/multiple-select.js` });
-  // runBuild({ format, outfile: `dist/multiple-select.${format === 'esm' ? 'mjs' : 'cjs'}` });
-}
+  runBuild({
+    format,
+    outfile: `dist/${format}/multiple-select.${extension}`,
+  });
 
-// build all locales
-for (const localeFile of localeFiles) {
-  // eslint-disable-next-line no-unused-vars
-  const [_, locale] = localeFile.match(/multiple-select-(.*)\.ts$/) || [];
-  if (locale && locale.length === 5) {
-    localeEntryPoints.push(`src/locales/multiple-select-${locale}.ts`);
-    runBuild({
-      entryPoints: [`src/locales/multiple-select-${locale}.ts`],
-      format: 'iife',
-      outfile: `dist/locales/multiple-select-${locale}.js`,
-    });
+  // build all locales
+  for (const localeFile of localeFiles) {
+    // eslint-disable-next-line no-unused-vars
+    const [_, locale] = localeFile.match(/multiple-select-(.*)\.ts$/) || [];
+    if (locale && locale.length === 5) {
+      localeEntryPoints.push(`src/locales/multiple-select-${locale}.ts`);
+      runBuild({
+        entryPoints: [`src/locales/multiple-select-${locale}.ts`],
+        format,
+        outfile: `dist/locales/multiple-select-${locale}.${extension}`,
+      });
+    }
   }
-}
 
-// also merge all Locales into a single file "multiple-select-all-locales.js"
-runBuild({
-  entryPoints: ['./src/locales/all-locales-index.ts'],
-  format: 'iife',
-  outfile: `dist/multiple-select-all-locales.js`,
-});
+  // also merge all Locales into a single file "multiple-select-all-locales.js"
+  runBuild({
+    entryPoints: ['./src/locales/all-locales-index.ts'],
+    format,
+    outfile: `dist/locales/multiple-select-all-locales.${extension}`,
+  });
 
-// finally, create a regular bundle as a standalone which will be accessible as MultipleSelect from the global window object
-// this file is basically a legacy alternative to import via a <script> tag
-runBuild({
-  format: 'iife',
-  globalName: 'MultipleSelect',
-  outfile: `dist/multiple-select.js`,
-});
+  // finally, create a regular bundle as a standalone which will be accessible as MultipleSelect from the global window object
+  // this file is basically a legacy alternative to import via a <script> tag
+  runBuild({
+    format,
+    globalName: 'MultipleSelect',
+    outfile: `dist/browser/multiple-select.${extension}`,
+  });
+}
 
 function runBuild(options) {
   const startTime = new Date().getTime();
@@ -48,7 +51,7 @@ function runBuild(options) {
       entryPoints: ['./src/index.ts'],
       bundle: true,
       minify: true,
-      target: 'es2020',
+      target: 'es2021',
       sourcemap: true,
       logLevel: 'error',
     },

lib/build-watch.mjs

@@ -19,7 +19,7 @@ function runBuild(options) {
       bundle: true,
       minify: env === 'production',
       format: 'esm',
-      target: 'es2020',
+      target: 'es2021',
       sourcemap: false,
       logLevel: 'error',
       // outfile: env === 'production' ? './dist/multiple-select.min.js' : './dist/multiple-select.js',

lib/package.json

@@ -1,7 +1,8 @@
 {
   "name": "multiple-select-vanilla",
   "version": "0.6.4-beta.1",
-  "main": "./dist/cjs/multiple-select.js",
+  "type": "module",
+  "main": "./dist/cjs/multiple-select.cjs",
   "module": "./dist/esm/multiple-select.js",
   "types": "index.d.ts",
   "typesVersions": {
@@ -14,12 +15,11 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "node": "./dist/cjs/multiple-select.js",
-      "require": "./dist/cjs/multiple-select.js",
+      "node": "./dist/cjs/multiple-select.cjs",
+      "require": "./dist/cjs/multiple-select.cjs",
       "default": "./dist/esm/multiple-select.js"
     },
-    "./dist/multiple-select-all-locales": "./dist/multiple-select-all-locales",
-    "./dist/multiple-select": "./dist/multiple-select",
+    "./dist/browser/*": "./dist/browser/*",
     "./dist/locales/*": "./dist/locales/*",
     "./dist/styles/*": "./dist/styles/*",
     "./package.json": "./package.json"
@@ -56,10 +56,8 @@
     "dev:init": "pnpm sass:build && pnpm build:locales && pnpm sass:copy && pnpm build:types && pnpm build:esm",
     "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=es2018 --sourcemap --outfile=dist/multiple-select-all-locales.js",
-    "build:web": "esbuild src/index.ts --bundle --minify --format=iife --target=es2018 --global-name=MultipleSelect --sourcemap --outfile=dist/multiple-select.min.js",
-    "build:cjs": "esbuild src/index.ts --bundle --minify --format=cjs --target=es2018 --outfile=dist/cjs/multiple-select.js",
-    "build:esm": "esbuild src/index.ts --bundle --minify --format=esm --target=es2018 --outfile=dist/esm/multiple-select.js",
+    "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 --outfile=dist/esm/multiple-select.js",
     "build:types": "tsc --emitDeclarationOnly --incremental --declarationMap false --outDir dist/types",
     "build:types:prod": "tsc --emitDeclarationOnly --incremental --declarationMap --outDir dist/types",
     "sass:build": "sass src/styles:dist/styles/css --style=compressed --quiet-deps --no-source-map",
@@ -68,20 +66,20 @@
     "sass:copy": "cross-env copyfiles -u 2 src/styles/**/*.scss dist/styles/sass"
   },
   "dependencies": {
-    "@types/trusted-types": "^2.0.6"
+    "@types/trusted-types": "^2.0.7"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.16",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "cssnano": "^6.0.1",
-    "esbuild": "^0.19.5",
+    "esbuild": "^0.19.7",
     "fs-extra": "^11.1.1",
     "glob": "^10.3.10",
     "npm-run-all2": "^6.1.1",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "sass": "^1.69.5",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   }
 }

package.json

@@ -56,24 +56,24 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@lerna-lite/cli": "^2.7.0",
-    "@lerna-lite/publish": "^2.7.0",
-    "@lerna-lite/watch": "^2.7.0",
-    "@playwright/test": "^1.39.0",
-    "@types/node": "^20.9.0",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@lerna-lite/cli": "^2.7.2",
+    "@lerna-lite/publish": "^2.7.2",
+    "@lerna-lite/watch": "^2.7.2",
+    "@playwright/test": "^1.40.0",
+    "@types/node": "^20.9.3",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "npm-run-all2": "^6.1.1",
-    "pnpm": "^8.10.3",
+    "pnpm": "^8.10.5",
     "prettier": "^3.1.0",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   }
 }