Switch to string constants. (#30490)

This allows the minifier to mangle the constants. It also allows the linter to find unused strings properly. While at it, remove a few unused properties. File Before After Diff -------------------------------------------------------- bootstrap.bundle.min.js 22.09 kB 21.13 kB -0.96 kB (-4.35 %) bootstrap.min.js 15.4 kB 14.46 kB -0.94 kB (-3.86 %)
twbs · Mar 31, 2020 · f7ed579 · f7ed579
1 parent 0225c11
commit f7ed579
Show file tree

Hide file tree

Showing 12 changed files with 469 additions and 551 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -30,15 +30,15 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "22.25 kB"
+      "maxSize": "21.5 kB"
     },
     {
       "path": "./dist/js/bootstrap.js",
       "maxSize": "25 kB"
     },
     {
       "path": "./dist/js/bootstrap.min.js",
-      "maxSize": "15.75 kB"
+      "maxSize": "14.75 kB"
     }
   ]
 }
diff --git a/js/src/alert.js b/js/src/alert.js
@@ -21,21 +21,15 @@ const EVENT_KEY           = `.${DATA_KEY}`
 const DATA_API_KEY        = '.data-api'
 const JQUERY_NO_CONFLICT  = $.fn[NAME]
 
-const Selector = {
-  DISMISS : '[data-dismiss="alert"]'
-}
+const SELECTOR_DISMISS = '[data-dismiss="alert"]'
 
-const Event = {
-  CLOSE          : `close${EVENT_KEY}`,
-  CLOSED         : `closed${EVENT_KEY}`,
-  CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
-}
+const EVENT_CLOSE          = `close${EVENT_KEY}`
+const EVENT_CLOSED         = `closed${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
-const ClassName = {
-  ALERT : 'alert',
-  FADE  : 'fade',
-  SHOW  : 'show'
-}
+const CLASS_NAME_ALERT = 'alert'
+const CLASS_NAME_FADE  = 'fade'
+const CLASS_NAME_SHOW  = 'show'
 
 /**
  * ------------------------------------------------------------------------
@@ -87,23 +81,23 @@ class Alert {
     }
 
     if (!parent) {
-      parent = $(element).closest(`.${ClassName.ALERT}`)[0]
+      parent = $(element).closest(`.${CLASS_NAME_ALERT}`)[0]
     }
 
     return parent
   }
 
   _triggerCloseEvent(element) {
-    const closeEvent = $.Event(Event.CLOSE)
+    const closeEvent = $.Event(EVENT_CLOSE)
 
     $(element).trigger(closeEvent)
     return closeEvent
   }
 
   _removeElement(element) {
-    $(element).removeClass(ClassName.SHOW)
+    $(element).removeClass(CLASS_NAME_SHOW)
 
-    if (!$(element).hasClass(ClassName.FADE)) {
+    if (!$(element).hasClass(CLASS_NAME_FADE)) {
       this._destroyElement(element)
       return
     }
@@ -118,7 +112,7 @@ class Alert {
   _destroyElement(element) {
     $(element)
       .detach()
-      .trigger(Event.CLOSED)
+      .trigger(EVENT_CLOSED)
       .remove()
   }
 
@@ -158,8 +152,8 @@ class Alert {
  */
 
 $(document).on(
-  Event.CLICK_DATA_API,
-  Selector.DISMISS,
+  EVENT_CLICK_DATA_API,
+  SELECTOR_DISMISS,
   Alert._handleDismiss(new Alert())
 )
 

diff --git a/js/src/button.js b/js/src/button.js
@@ -20,28 +20,22 @@ const EVENT_KEY           = `.${DATA_KEY}`
 const DATA_API_KEY        = '.data-api'
 const JQUERY_NO_CONFLICT  = $.fn[NAME]
 
-const ClassName = {
-  ACTIVE : 'active',
-  BUTTON : 'btn',
-  FOCUS  : 'focus'
-}
-
-const Selector = {
-  DATA_TOGGLE_CARROT   : '[data-toggle^="button"]',
-  DATA_TOGGLES         : '[data-toggle="buttons"]',
-  DATA_TOGGLE          : '[data-toggle="button"]',
-  DATA_TOGGLES_BUTTONS : '[data-toggle="buttons"] .btn',
-  INPUT                : 'input:not([type="hidden"])',
-  ACTIVE               : '.active',
-  BUTTON               : '.btn'
-}
-
-const Event = {
-  CLICK_DATA_API      : `click${EVENT_KEY}${DATA_API_KEY}`,
-  FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` +
-                          `blur${EVENT_KEY}${DATA_API_KEY}`,
-  LOAD_DATA_API       : `load${EVENT_KEY}${DATA_API_KEY}`
-}
+const CLASS_NAME_ACTIVE = 'active'
+const CLASS_NAME_BUTTON = 'btn'
+const CLASS_NAME_FOCUS  = 'focus'
+
+const SELECTOR_DATA_TOGGLE_CARROT   = '[data-toggle^="button"]'
+const SELECTOR_DATA_TOGGLES         = '[data-toggle="buttons"]'
+const SELECTOR_DATA_TOGGLE          = '[data-toggle="button"]'
+const SELECTOR_DATA_TOGGLES_BUTTONS = '[data-toggle="buttons"] .btn'
+const SELECTOR_INPUT                = 'input:not([type="hidden"])'
+const SELECTOR_ACTIVE               = '.active'
+const SELECTOR_BUTTON               = '.btn'
+
+const EVENT_CLICK_DATA_API      = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_FOCUS_BLUR_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY} ` +
+                          `blur${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_LOAD_DATA_API       = `load${EVENT_KEY}${DATA_API_KEY}`
 
 /**
  * ------------------------------------------------------------------------
@@ -66,30 +60,30 @@ class Button {
     let triggerChangeEvent = true
     let addAriaPressed = true
     const rootElement = $(this._element).closest(
-      Selector.DATA_TOGGLES
+      SELECTOR_DATA_TOGGLES
     )[0]
 
     if (rootElement) {
-      const input = this._element.querySelector(Selector.INPUT)
+      const input = this._element.querySelector(SELECTOR_INPUT)
 
       if (input) {
         if (input.type === 'radio') {
           if (input.checked &&
-            this._element.classList.contains(ClassName.ACTIVE)) {
+            this._element.classList.contains(CLASS_NAME_ACTIVE)) {
             triggerChangeEvent = false
           } else {
-            const activeElement = rootElement.querySelector(Selector.ACTIVE)
+            const activeElement = rootElement.querySelector(SELECTOR_ACTIVE)
 
             if (activeElement) {
-              $(activeElement).removeClass(ClassName.ACTIVE)
+              $(activeElement).removeClass(CLASS_NAME_ACTIVE)
             }
           }
         }
 
         if (triggerChangeEvent) {
           // if it's not a radio button or checkbox don't add a pointless/invalid checked property to the input
           if (input.type === 'checkbox' || input.type === 'radio') {
-            input.checked = !this._element.classList.contains(ClassName.ACTIVE)
+            input.checked = !this._element.classList.contains(CLASS_NAME_ACTIVE)
           }
           $(input).trigger('change')
         }
@@ -102,11 +96,11 @@ class Button {
     if (!(this._element.hasAttribute('disabled') || this._element.classList.contains('disabled'))) {
       if (addAriaPressed) {
         this._element.setAttribute('aria-pressed',
-          !this._element.classList.contains(ClassName.ACTIVE))
+          !this._element.classList.contains(CLASS_NAME_ACTIVE))
       }
 
       if (triggerChangeEvent) {
-        $(this._element).toggleClass(ClassName.ACTIVE)
+        $(this._element).toggleClass(CLASS_NAME_ACTIVE)
       }
     }
   }
@@ -141,18 +135,18 @@ class Button {
  */
 
 $(document)
-  .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
+  .on(EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, (event) => {
     let button = event.target
     const initialButton = button
 
-    if (!$(button).hasClass(ClassName.BUTTON)) {
-      button = $(button).closest(Selector.BUTTON)[0]
+    if (!$(button).hasClass(CLASS_NAME_BUTTON)) {
+      button = $(button).closest(SELECTOR_BUTTON)[0]
     }
 
     if (!button || button.hasAttribute('disabled') || button.classList.contains('disabled')) {
       event.preventDefault() // work around Firefox bug #1540995
     } else {
-      const inputBtn = button.querySelector(Selector.INPUT)
+      const inputBtn = button.querySelector(SELECTOR_INPUT)
 
       if (inputBtn && (inputBtn.hasAttribute('disabled') || inputBtn.classList.contains('disabled'))) {
         event.preventDefault() // work around Firefox bug #1540995
@@ -165,34 +159,34 @@ $(document)
       Button._jQueryInterface.call($(button), 'toggle')
     }
   })
-  .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
-    const button = $(event.target).closest(Selector.BUTTON)[0]
-    $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
+  .on(EVENT_FOCUS_BLUR_DATA_API, SELECTOR_DATA_TOGGLE_CARROT, (event) => {
+    const button = $(event.target).closest(SELECTOR_BUTTON)[0]
+    $(button).toggleClass(CLASS_NAME_FOCUS, /^focus(in)?$/.test(event.type))
   })
 
-$(window).on(Event.LOAD_DATA_API, () => {
+$(window).on(EVENT_LOAD_DATA_API, () => {
   // ensure correct active class is set to match the controls' actual values/states
 
   // find all checkboxes/readio buttons inside data-toggle groups
-  let buttons = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLES_BUTTONS))
+  let buttons = [].slice.call(document.querySelectorAll(SELECTOR_DATA_TOGGLES_BUTTONS))
   for (let i = 0, len = buttons.length; i < len; i++) {
     const button = buttons[i]
-    const input = button.querySelector(Selector.INPUT)
+    const input = button.querySelector(SELECTOR_INPUT)
     if (input.checked || input.hasAttribute('checked')) {
-      button.classList.add(ClassName.ACTIVE)
+      button.classList.add(CLASS_NAME_ACTIVE)
     } else {
-      button.classList.remove(ClassName.ACTIVE)
+      button.classList.remove(CLASS_NAME_ACTIVE)
     }
   }
 
   // find all button toggles
-  buttons = [].slice.call(document.querySelectorAll(Selector.DATA_TOGGLE))
+  buttons = [].slice.call(document.querySelectorAll(SELECTOR_DATA_TOGGLE))
   for (let i = 0, len = buttons.length; i < len; i++) {
     const button = buttons[i]
     if (button.getAttribute('aria-pressed') === 'true') {
-      button.classList.add(ClassName.ACTIVE)
+      button.classList.add(CLASS_NAME_ACTIVE)
     } else {
-      button.classList.remove(ClassName.ACTIVE)
+      button.classList.remove(CLASS_NAME_ACTIVE)
     }
   }
 })