BREAKING CHANGE: remove withNoNewKeyword enhancer (#1372)

From now on the recommended way to use SweetAlert2 is:

Swal.fire({...options})

README.md

@@ -80,7 +80,7 @@ const Swal = require('sweetalert2')
 It's possible to import JS and CSS separately, e.g. if you need to customize styles:
 
 ```js
-import swal from 'sweetalert2/dist/sweetalert2.js'
+import Swal from 'sweetalert2/dist/sweetalert2.js'
 
 import 'sweetalert2/src/sweetalert2.scss'
 ```
@@ -94,19 +94,19 @@ Examples
 The most basic message:
 
 ```js
-Swal('Hello world!')
+Swal.fire('Hello world!')
 ```
 
 A message signaling an error:
 
 ```js
-Swal('Oops...', 'Something went wrong!', 'error')
+Swal.fire('Oops...', 'Something went wrong!', 'error')
 ```
 
 Handling the result of SweetAlert2 modal:
 
 ```js
-Swal({
+Swal.fire({
   title: 'Are you sure?',
   text: 'You will not be able to recover this imaginary file!',
   type: 'warning',
@@ -115,15 +115,15 @@ Swal({
   cancelButtonText: 'No, keep it'
 }).then((result) => {
   if (result.value) {
-    Swal(
+    Swal.fire(
       'Deleted!',
       'Your imaginary file has been deleted.',
       'success'
     )
   // For more information about handling dismissals please visit
   // https://sweetalert2.github.io/#handling-dismissals
   } else if (result.dismiss === Swal.DismissReason.cancel) {
-    Swal(
+    Swal.fire(
       'Cancelled',
       'Your imaginary file is safe :)',
       'error'

src/enhancers.js

@@ -1,2 +1 @@
-export * from './enhancers/withNoNewKeyword.js'
 export * from './enhancers/withGlobalDefaults.js'

src/enhancers/withNoNewKeyword.js

@@ -1,21 +0,0 @@
-/**
- * Extends a Swal class making it able to be instantiated without the `new` keyword (and thus without `Swal.fire`)
- * @param ParentSwal
- * @returns {NoNewKeywordSwal}
- */
-export function withNoNewKeyword (ParentSwal) {
-  const NoNewKeywordSwal = function (...args) {
-    if (!(this instanceof NoNewKeywordSwal)) {
-      return new NoNewKeywordSwal(...args)
-    }
-    Object.getPrototypeOf(NoNewKeywordSwal).apply(this, args)
-  }
-  NoNewKeywordSwal.prototype = Object.assign(
-    Object.create(ParentSwal.prototype),
-    { constructor: NoNewKeywordSwal }
-  )
-
-  Object.setPrototypeOf(NoNewKeywordSwal, ParentSwal)
-
-  return NoNewKeywordSwal
-}

src/privateProps.js

@@ -1,5 +1,5 @@
 /**
- * This module containts `WeakMap`s for each effectively-"private  property" that a `swal` has.
+ * This module containts `WeakMap`s for each effectively-"private  property" that a `Swal` has.
  * For example, to set the private property "foo" of `this` to "bar", you can `privateProps.foo.set(this, 'bar')`
  * This is the approach that Babel will probably take to implement private methods/fields
  *   https://github.com/tc39/proposal-private-methods

src/staticMethods/dom.js

@@ -18,7 +18,7 @@ export {
 } from '../utils/dom/index.js'
 
 /*
- * Global function to determine if swal2 popup is shown
+ * Global function to determine if SweetAlert2 popup is shown
  */
 export const isVisible = () => {
   return !!dom.getPopup()

src/staticMethods/mixin.js

@@ -1,5 +1,3 @@
-import { withNoNewKeyword } from '../enhancers.js'
-
 /**
  * Returns an extended version of `Swal` containing `params` as defaults.
  * Useful for reusing Swal configuration.
@@ -8,8 +6,8 @@ import { withNoNewKeyword } from '../enhancers.js'
  *
  * Before:
  * const textPromptOptions = { input: 'text', showCancelButton: true }
- * const {value: firstName} = await Swal({ ...textPromptOptions, title: 'What is your first name?' })
- * const {value: lastName} = await Swal({ ...textPromptOptions, title: 'What is your last name?' })
+ * const {value: firstName} = await Swal.fire({ ...textPromptOptions, title: 'What is your first name?' })
+ * const {value: lastName} = await Swal.fire({ ...textPromptOptions, title: 'What is your last name?' })
  *
  * After:
  * const TextPrompt = Swal.mixin({ input: 'text', showCancelButton: true })
@@ -19,11 +17,11 @@ import { withNoNewKeyword } from '../enhancers.js'
  * @param mixinParams
  */
 export function mixin (mixinParams) {
-  return withNoNewKeyword(
-    class MixinSwal extends this {
-      _main (params) {
-        return super._main(Object.assign({}, mixinParams, params))
-      }
+  class MixinSwal extends this {
+    _main (params) {
+      return super._main(Object.assign({}, mixinParams, params))
     }
-  )
+  }
+
+  return MixinSwal
 }

src/staticMethods/queue.js

@@ -5,7 +5,7 @@ let currentSteps = []
  * Global function for chaining sweetAlert popups
  */
 export const queue = function (steps) {
-  const swal = this
+  const Swal = this
   currentSteps = steps
   const resetQueue = () => {
     currentSteps = []
@@ -17,7 +17,7 @@ export const queue = function (steps) {
       if (i < currentSteps.length) {
         document.body.setAttribute('data-swal2-queue-step', i)
 
-        swal(currentSteps[i]).then((result) => {
+        Swal.fire(currentSteps[i]).then((result) => {
           if (typeof result.value !== 'undefined') {
             queueResult.push(result.value)
             step(i + 1, callback)

src/sweetalert2.js

@@ -1,7 +1,7 @@
 import SweetAlert from './SweetAlert.js'
-import { withGlobalDefaults, withNoNewKeyword } from './enhancers.js'
+import { withGlobalDefaults } from './enhancers.js'
 
-const Swal = withNoNewKeyword(withGlobalDefaults(SweetAlert))
+const Swal = withGlobalDefaults(SweetAlert)
 Swal.default = Swal
 
 export default Swal

sweetalert2.d.ts

@@ -1,47 +1,47 @@
 declare module 'sweetalert2' {
-    /**
-     * Shorthand function to display a simple SweetAlert modal.
-     *
-     * ex.
-     *   import swal from 'sweetalert2';
-     *   swal('The Internet?', 'That thing is still around?', 'question');
-     */
-    function swal(title: string, message?: string, type?: SweetAlertType): Promise<SweetAlertResult>;
-
-    /**
-     * Function to display a SweetAlert modal, with an object of options, all being optional.
-     * See the SweetAlertOptions interface for the list of accepted fields and values.
-     *
-     * ex.
-     *   import swal from 'sweetalert2';
-     *   swal({
-     *     title: 'Auto close alert!',
-     *     text: 'I will close in 2 seconds.',
-     *     timer: 2000
-     *   })
-     */
-    function swal(settings: SweetAlertOptions): Promise<SweetAlertResult>;
-
     /**
      * A namespace inside the default function, containing utility function for controlling the currently-displayed
      * modal.
      *
      * ex.
-     *   import swal from 'sweetalert2';
+     *   import Swal from 'sweetalert2';
      *
-     *   swal('Hey user!', 'I don\'t like you.', 'warning');
+     *   Swal.fire('Hey user!', 'I don\'t like you.', 'warning');
      *
-     *   if(swal.isVisible()) { // instant regret
-     *     swal.close();
+     *   if(Swal.isVisible()) { // instant regret
+     *     Swal.close();
      *   }
      */
-    namespace swal {
+    namespace Swal {
+        /**
+         * Function to display a simple SweetAlert2 modal.
+         *
+         * ex.
+         *   import Swal from 'sweetalert2';
+         *   Swal.fire('The Internet?', 'That thing is still around?', 'question');
+         */
+        function fire(title: string, message?: string, type?: SweetAlertType): Promise<SweetAlertResult>;
+
+        /**
+         * Function to display a SweetAlert2 modal, with an object of options, all being optional.
+         * See the SweetAlertOptions interface for the list of accepted fields and values.
+         *
+         * ex.
+         *   import Swal from 'sweetalert2';
+         *   Swal.fire({
+         *     title: 'Auto close alert!',
+         *     text: 'I will close in 2 seconds.',
+         *     timer: 2000
+         *   })
+         */
+        function fire(settings: SweetAlertOptions): Promise<SweetAlertResult>;
+
         /**
-         * Reuse configuration by creating a swal instance.
+         * Reuse configuration by creating a Swal instance.
          *
          * @param options the default options to set for this instance.
          */
-        function mixin(options?: SweetAlertOptions): typeof swal;
+        function mixin(options?: SweetAlertOptions): typeof Swal;
 
         /**
          * Determines if a modal is shown.
@@ -238,7 +238,7 @@ declare module 'sweetalert2' {
         /**
          * Inserts a modal in the queue.
          *
-         * @param step  The step configuration (same object as in the swal() call).
+         * @param step  The step configuration (same object as in the Swal.fire() call).
          * @param index The index to insert the step at.
          *              By default a modal will be added to the end of a queue.
          */
@@ -281,10 +281,10 @@ declare module 'sweetalert2' {
         function isValidParameter(paramName: string): boolean;
 
         /**
-         * Normalizes the arguments you can give to swal() in an object of type SweetAlertOptions.
+         * Normalizes the arguments you can give to Swal.fire() in an object of type SweetAlertOptions.
          * ex:
-         *     swal.argsToParams(['title', 'text']); //=> { title: 'title', text: 'text' }
-         *     swal.argsToParams({ title: 'title', text: 'text' }); //=> { title: 'title', text: 'text' }
+         *     Swal.argsToParams(['title', 'text']); //=> { title: 'title', text: 'text' }
+         *     Swal.argsToParams({ title: 'title', text: 'text' }); //=> { title: 'title', text: 'text' }
          *
          * @param params The array of arguments to normalize.
          */
@@ -302,7 +302,7 @@ declare module 'sweetalert2' {
 
     export interface SweetAlertResult {
         value?: any;
-        dismiss?: swal.DismissReason;
+        dismiss?: Swal.DismissReason;
     }
 
     type SyncOrAsync<T> = T | Promise<T>;
@@ -584,7 +584,7 @@ declare module 'sweetalert2' {
         cancelButtonAriaLabel?: string;
 
         /**
-         * Whether to apply the default swal2 styling to buttons.
+         * Whether to apply the default SweetAlert2 styling to buttons.
          * If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false.
          *
          * @default true
@@ -637,7 +637,7 @@ declare module 'sweetalert2' {
          * Function to execute before confirm, may be async (Promise-returning) or sync.
          *
          * ex.
-         *   swal({
+         *   Swal.fire({
          *    title: 'Multiple inputs',
          *    html:
          *      '<input id="swal-input1" class="swal2-input">' +
@@ -647,7 +647,7 @@ declare module 'sweetalert2' {
          *      document.querySelector('#swal-input1').value,
          *      document.querySelector('#swal-input2').value
          *    ]
-         *  }).then(result => swal(JSON.stringify(result));
+         *  }).then(result => Swal.fire(JSON.stringify(result));
          *
          * @default null
          */
@@ -720,7 +720,7 @@ declare module 'sweetalert2' {
          * HTML input attributes (e.g. min, max, step, accept...), that are added to the input field.
          *
          * ex.
-         *   swal({
+         *   Swal.fire({
          *     title: 'Select a file',
          *     input: 'file',
          *     inputAttributes: {
@@ -736,7 +736,7 @@ declare module 'sweetalert2' {
          * Validator for input field, may be async (Promise-returning) or sync.
          *
          * ex.
-         *   swal({
+         *   Swal.fire({
          *     title: 'Select color',
          *     input: 'radio',
          *     inputValidator: result => !result && 'You need to select something!'
@@ -750,7 +750,7 @@ declare module 'sweetalert2' {
          * A custom validation message for default validators (email, url).
          *
          * ex.
-         *   swal({
+         *   Swal.fire({
          *     input: 'email',
          *     validationMessage: 'Adresse e-mail invalide'
          *   })
@@ -776,7 +776,7 @@ declare module 'sweetalert2' {
         /**
          * Current active progress step.
          *
-         * @default swal.getQueueStep()
+         * @default Swal.getQueueStep()
          */
         currentProgressStep?: string;
 
@@ -816,7 +816,7 @@ declare module 'sweetalert2' {
         onClose?: (modalElement: HTMLElement) => void;
     }
 
-    export default swal;
+    export default Swal;
 }
 
 /**