fix(deps): update rollup to v3 (#221)

* chore(deps): update dependency rollup to v3 * chore: use rollup --bundleConfigAsCjs * chore: simplify banner * chore: test dist files Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Limon Monte <limon.monte@gmail.com>
sweetalert2 · Oct 19, 2022 · 387b662 · 387b662
1 parent d93ca81
commit 387b662
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 21 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -10,17 +10,16 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
-      - name: Install npm dependencies
-        run: yarn install
+      - run: yarn install
 
       - run: yarn lint
 
-      - run: yarn test
-
       - run: yarn check-dts
 
       - run: yarn build
 
+      - run: yarn test
+
       - name: Run automated release process with semantic-release
         if: github.event_name == 'push'
         uses: cycjimmy/semantic-release-action@v2

diff --git a/cypress/e2e/dist.cy.js b/cypress/e2e/dist.cy.js
@@ -0,0 +1,153 @@
+/// <reference types="cypress" />
+
+import React from 'react'
+import Swal from 'sweetalert2'
+import withReactContentCjs from '../../dist/sweetalert2-react-content.cjs'
+import withReactContentEs from '../../dist/sweetalert2-react-content.es'
+import withReactContentUmd from '../../dist/sweetalert2-react-content.umd'
+
+const entries = {
+  distCjs: withReactContentCjs,
+  distEs: withReactContentEs,
+  distUmd: withReactContentUmd,
+}
+
+for (const [name, withReactContent] of Object.entries(entries)) {
+  context(`SweetAlert2 React Content: ${name}`, () => {
+    describe('rendering React elements for each supported option', () => {
+      it('works via .fire', (done) => {
+        const MySwal = withReactContent(Swal)
+        MySwal.fire({
+          ...reactParams,
+          didOpen: () => {
+            checkReactOptions(MySwal)
+            done()
+          },
+        })
+      })
+
+      it('works via .mixin', (done) => {
+        const MySwal = withReactContent(Swal)
+        const MyConfiguredSwal = MySwal.mixin({ ...reactParams })
+        MyConfiguredSwal.fire({
+          didOpen: () => {
+            checkReactOptions(MySwal)
+            done()
+          },
+        })
+      })
+
+      const reactParams = {
+        title: React.createElement('span', {}, 'title'),
+        html: React.createElement('span', {}, 'html'),
+        iconHtml: React.createElement('span', {}, '@'),
+        loaderHtml: React.createElement('span', {}, '%'),
+        confirmButtonText: React.createElement('span', {}, 'confirmButtonText'),
+        denyButtonText: React.createElement('span', {}, 'denyButtonText'),
+        cancelButtonText: React.createElement('span', {}, 'cancelButtonText'),
+        closeButtonHtml: React.createElement('span', {}, 'closeButtonHtml'),
+        footer: React.createElement('span', {}, 'footer'),
+      }
+
+      const checkReactOptions = (MySwal) => {
+        expect(MySwal.getTitle().innerHTML).to.eq('<span>title</span>')
+        expect(MySwal.getHtmlContainer().innerHTML).to.eq('<span>html</span>')
+        expect(MySwal.getConfirmButton().innerHTML).to.eq('<span>confirmButtonText</span>')
+        expect(MySwal.getDenyButton().innerHTML).to.eq('<span>denyButtonText</span>')
+        expect(MySwal.getCancelButton().innerHTML).to.eq('<span>cancelButtonText</span>')
+        expect(MySwal.getIcon().innerHTML).to.eq('<div class="swal2-icon-content"><span>@</span></div>')
+        expect(MySwal.getFooter().innerHTML).to.eq('<span>footer</span>')
+        expect(MySwal.getCloseButton().innerHTML).to.eq('<span>closeButtonHtml</span>')
+        expect(MySwal.getLoader().innerHTML).to.eq('<span>%</span>')
+      }
+    })
+
+    it('can mix React and non-React params', (done) => {
+      const MySwal = withReactContent(Swal)
+      MySwal.fire({
+        title: <span>React element</span>,
+        footer: 'plain text',
+        didOpen: () => {
+          expect(MySwal.getTitle().innerHTML).to.eq('<span>React element</span>')
+          expect(MySwal.getFooter().innerHTML).to.eq('plain text')
+          done()
+        },
+      })
+    })
+
+    it('can fire twice without crashing', (done) => {
+      const MySwal = withReactContent(Swal)
+      MySwal.fire({
+        title: <span>React element</span>,
+        footer: 'plain text',
+      })
+      MySwal.fire({
+        title: <span>React element</span>,
+        footer: 'plain text',
+        didOpen: () => {
+          expect(MySwal.getTitle().innerHTML).to.eq('<span>React element</span>')
+          expect(MySwal.getFooter().innerHTML).to.eq('plain text')
+          done()
+        },
+      })
+    })
+
+    it('returns a class with the same instance & static properties as Swal', async () => {
+      const MySwal = withReactContent(Swal)
+      Object.keys(Swal).forEach((key) => {
+        expect(typeof MySwal[key]).to.eq(typeof Swal[key])
+      })
+      Object.keys(Swal.prototype).forEach((key) => {
+        expect(typeof MySwal.prototype[key]).to.eq(typeof Swal.prototype[key])
+      })
+    })
+
+    it('works with shorthand Swal calls', (done) => {
+      const MySwal = withReactContent(Swal)
+      const swal = MySwal.fire(<span>title</span>, <span>html</span>, 'info')
+      cy.wait(100).then(async () => {
+        expect(MySwal.getTitle().innerHTML).to.eq('<span>title</span>')
+        expect(MySwal.getHtmlContainer().innerHTML).to.eq('<span>html</span>')
+        expect(MySwal.getIcon().classList.contains('swal2-info')).to.be.true
+        MySwal.clickConfirm()
+        await swal
+        done()
+      })
+    })
+
+    it('has no effect on normal shorthand Swal calls', (done) => {
+      const MySwal = withReactContent(Swal)
+      const swal = MySwal.fire('my title', 'my html', 'error')
+      cy.wait(100).then(async () => {
+        expect(MySwal.getTitle().innerHTML).to.eq('my title')
+        expect(MySwal.getHtmlContainer().innerHTML).to.eq('my html')
+        expect(MySwal.getIcon().classList.contains('swal2-error')).to.be.true
+        MySwal.clickConfirm()
+        await swal
+        done()
+      })
+    })
+
+    it('can update params via .update()', (done) => {
+      const MySwal = withReactContent(Swal)
+      const swal = MySwal.fire(<span>title</span>, <span>html</span>, 'error')
+      cy.wait(100).then(() => {
+        MySwal.update({
+          title: <span>new title</span>,
+          html: <span>new html</span>,
+          icon: 'success',
+        })
+        // read more about why this setTimeout is needed here:
+        // https://github.com/reactwg/react-18/discussions/5 (What about the render callback?)
+        setTimeout(async () => {
+          expect(MySwal.getTitle().innerHTML).to.eq('<span>new title</span>')
+          expect(MySwal.getHtmlContainer().innerHTML).to.eq('<span>new html</span>')
+          expect(MySwal.getIcon().classList.contains('swal2-success')).to.be.true
+          MySwal.clickConfirm()
+          await swal
+          done()
+        })
+      })
+    })
+  })
+}
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "lint": "eslint . --ext .js,.jsx,.d.ts && prettier . --check",
     "lint-fix": "eslint . --ext .js,.jsx,.d.ts --fix && prettier . --write",
     "test": "cypress run --headless",
-    "build": "rollup --config",
+    "build": "rollup --config --bundleConfigAsCjs",
     "prepublishOnly": "npm run build"
   },
   "repository": {
@@ -65,7 +65,7 @@
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.79.0",
+    "rollup": "^3.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "sweetalert2": "^11.5.2",
     "typescript": "^4.8.3",

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,17 +1,11 @@
-import { nodeResolve } from '@rollup/plugin-node-resolve'
+import nodeResolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
-import { babel } from '@rollup/plugin-babel'
+import babel from '@rollup/plugin-babel'
 import { terser } from 'rollup-plugin-terser'
 import pkg from './package.json'
 
-const getBanner = (file) => `\
-/** @preserve
-  * package: ${pkg.name} v${pkg.version}
-  * file: ${file}
-  * homepage: ${pkg.homepage}
-  * license: ${pkg.license}
-  **/\n`
+const banner = `// ${pkg.name} v${pkg.version}\n`
 
 export default [false, true].map((minify) => {
   const plugins = [
@@ -30,7 +24,7 @@ export default [false, true].map((minify) => {
     plugins.push(
       terser({
         output: {
-          comments: (_, { value }) => /@preserve/.test(value),
+          comments: (_, { value }) => /sweetalert2-react-content v/.test(value),
         },
       })
     )
@@ -61,7 +55,7 @@ export default [false, true].map((minify) => {
         format,
         file,
         sourcemap: true,
-        banner: getBanner(file),
+        banner,
         exports: 'auto',
         ...rest,
       }

diff --git a/yarn.lock b/yarn.lock
@@ -3546,10 +3546,10 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup@^2.79.0:
-  version "2.79.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
-  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
+rollup@^3.0.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.2.3.tgz#67d894c981ad50cc811779748e52c05742560c64"
+  integrity sha512-qfadtkY5kl0F5e4dXVdj2D+GtOdifasXHFMiL1SMf9ADQDv5Eti6xReef9FKj+iQPR2pvtqWna57s/PjARY4fg==
   optionalDependencies:
     fsevents "~2.3.2"