fix: use ESM modules for dev/build tools

.github/workflows/ci.yml

@@ -13,51 +13,54 @@ jobs:
     timeout-minutes: 10
 
     steps:
-    - uses: actions/checkout@v2
-
-    - name: Install npm dependencies
-      run: yarn install
-
-    - name: Build
-      run: yarn build
-
-    - name: Run linters
-      run: yarn lint
-
-    - name: Check types
-      run: yarn check-types
-
-    - name: Run tests in Chrome
-      run: yarn test --browser chrome
-
-    - name: Run tests in Firefox
-      if: github.event_name == 'push'
-      run: yarn test --browser firefox
-
-    - name: Test in node
-      run: node test/require-in-node
-
-    - name: Check TypeScript
-      run: |
-        tsc --lib dom,es6 --noEmit test/ts/simple-usage.ts sweetalert2.d.ts
-        tsc --lib dom,es6 --noEmit test/ts/dist-sweetalert2.ts sweetalert2.d.ts
-        tsc --lib dom,es6 --noEmit test/ts/src-sweetalert2.ts sweetalert2.d.ts
-
-    - name: Run automated release process with semantic-release
-      if: github.event_name == 'push'
-      uses: cycjimmy/semantic-release-action@v2
-      with:
-        extra_plugins: |
-          @semantic-release/changelog
-          @semantic-release/git
-          @semantic-release/exec
-      env:
-        GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-    - name: Report bundlezise to bundlewatch.io
-      env:
-        BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
-      run: |
-        yarn add --dev bundlewatch
-        ./node_modules/.bin/bundlewatch
+      - uses: actions/checkout@v2
+
+      - name: Install npm dependencies
+        run: yarn install
+
+      - name: Build
+        run: yarn build
+
+      - name: Run linters
+        run: yarn lint
+
+      - name: Check types
+        run: yarn check-types
+
+      - name: Run tests in Chrome
+        run: yarn test --browser chrome
+
+      - name: Run tests in Firefox
+        if: github.event_name == 'push'
+        run: yarn test --browser firefox
+
+      - name: Test in CommonJS
+        run: |
+          cp dist/sweetalert2.js dist/sweetalert2.cjs
+          cp dist/sweetalert2.all.js dist/sweetalert2.all.cjs
+          node test/require-in-commonjs.cjs
+
+      - name: Check TypeScript
+        run: |
+          tsc --lib dom,es6 --noEmit test/ts/simple-usage.ts sweetalert2.d.ts
+          tsc --lib dom,es6 --noEmit test/ts/dist-sweetalert2.ts sweetalert2.d.ts
+          tsc --lib dom,es6 --noEmit test/ts/src-sweetalert2.ts sweetalert2.d.ts
+
+      - name: Run automated release process with semantic-release
+        if: github.event_name == 'push'
+        uses: cycjimmy/semantic-release-action@v2
+        with:
+          extra_plugins: |
+            @semantic-release/changelog
+            @semantic-release/git
+            @semantic-release/exec
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Report bundlezise to bundlewatch.io
+        env:
+          BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
+        run: |
+          yarn add --dev bundlewatch
+          ./node_modules/.bin/bundlewatch

gulpfile.js

@@ -1,21 +1,21 @@
-/* eslint @typescript-eslint/no-var-requires: 0 */
-const gulp = require('gulp')
-const rollup = require('gulp-rollup')
-const gulpif = require('gulp-if')
-const uglify = require('gulp-uglify')
-const rename = require('gulp-rename')
-const css2js = require('gulp-css2js')
-const concat = require('gulp-concat')
-const autoprefixer = require('gulp-autoprefixer')
-const cleanCss = require('gulp-clean-css')
-const babel = require('rollup-plugin-babel')
-const json = require('@rollup/plugin-json')
-const merge = require('merge2')
-const sass = require('sass')
-const browserSync = require('browser-sync').create()
-const packageJson = require('./package.json')
-const log = require('fancy-log')
-const fs = require('fs')
+import gulp from 'gulp'
+import rollup from 'gulp-rollup'
+import gulpif from 'gulp-if'
+import uglify from 'gulp-uglify'
+import rename from 'gulp-rename'
+import css2js from 'gulp-css2js'
+import concat from 'gulp-concat'
+import autoprefixer from 'gulp-autoprefixer'
+import cleanCss from 'gulp-clean-css'
+import babel from 'rollup-plugin-babel'
+import json from '@rollup/plugin-json'
+import merge from 'merge2'
+import sass from 'sass'
+import browserSync from 'browser-sync'
+import log from 'fancy-log'
+import fs from 'fs'
+
+const packageJson = JSON.parse(fs.readFileSync('package.json'))
 const version = process.env.VERSION || packageJson.version
 
 const banner = `/*!

package.json

@@ -8,6 +8,7 @@
   "browser": "dist/sweetalert2.all.js",
   "module": "src/sweetalert2.js",
   "types": "sweetalert2.d.ts",
+  "type": "module",
   "devDependencies": {
     "@babel/core": "^7.16.7",
     "@babel/preset-env": "^7.16.7",

release.config.js

@@ -5,7 +5,7 @@ module.exports = {
   prepare: [
     {
       path: '@semantic-release/exec',
-      cmd: 'VERSION=${nextRelease.version} node tools/build-dist', // eslint-disable-line no-template-curly-in-string
+      cmd: 'VERSION=${nextRelease.version} node tools/build-dist.js',
     },
     '@semantic-release/changelog',
     '@semantic-release/npm',
@@ -31,7 +31,7 @@ module.exports = {
     '@semantic-release/github',
     {
       path: '@semantic-release/exec',
-      cmd: 'node tools/purge-jsdelivr',
+      cmd: 'node tools/purge-jsdelivr.js',
     },
   ],
 }

test/require-in-commonjs.cjs

@@ -0,0 +1,2 @@
+require('../dist/sweetalert2.cjs')
+require('../dist/sweetalert2.all.cjs')

test/sandbox.html

@@ -1,40 +1,39 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="../dist/sweetalert2.js"></script>
+    <link rel="stylesheet" href="../dist/sweetalert2.css" />
+    <style>
+      @import url('https://fonts.googleapis.com/css?family=Montserrat');
 
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="../dist/sweetalert2.js"></script>
-  <link rel="stylesheet" href="../dist/sweetalert2.css">
-  <style>
-    @import url('https://fonts.googleapis.com/css?family=Montserrat');
-
-    * {
-      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    }
-  </style>
-</head>
-
-<body>
-  <script>
-    Swal.fire({
-      title: 'Test modal with input',
-      html: 'custom <strong>content</strong>',
-      input: 'text',
-      icon: 'success',
-      showCloseButton: true,
-      showCancelButton: true,
-      preConfirm: function (value) {
-        if (!value) {
-          Swal.showValidationMessage('Should not be empty!')
-        }
-      },
-      didOpen: function (modal) {
-        console.log(modal)
+      * {
+        font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+          'Helvetica Neue', Helvetica, Arial, sans-serif;
       }
-    }).then(function (result) {
-      console.log(result)
-    })
-  </script>
-</body>
+    </style>
+  </head>
 
+  <body>
+    <script>
+      Swal.fire({
+        title: 'Test modal with input',
+        html: 'custom <strong>content</strong>',
+        input: 'text',
+        icon: 'success',
+        showCloseButton: true,
+        showCancelButton: true,
+        preConfirm: function (value) {
+          if (!value) {
+            Swal.showValidationMessage('Should not be empty!')
+          }
+        },
+        didOpen: function (modal) {
+          console.log(modal)
+        },
+      }).then(function (result) {
+        console.log(result)
+      })
+    </script>
+  </body>
 </html>

tools/build-dist.js

@@ -1,10 +1,9 @@
-/* eslint @typescript-eslint/no-var-requires: 0 */
-const pify = require('pify')
-const rimraf = require('rimraf')
-const execute = require('@sweetalert2/execute')
-const replaceInFile = require('replace-in-file')
+import pify from 'pify'
+import rimraf from 'rimraf'
+import execute from '@sweetalert2/execute'
+import replaceInFile from 'replace-in-file'
 
-const log = console.log // eslint-disable-line
+const log = console.log // eslint-disable-line no-console
 const removeDir = pify(rimraf)
 
 ;(async () => {