Local styles and scripts: Rewrite components to accept shared base, utilities, and config such as CSS class prefix

Author: eliot-akira

alert.ts

@@ -1,80 +1,85 @@
-import BaseComponent, { DATA_PREFIX } from './base-component'
-import EventHandler from './dom/event-handler'
-import { enableDismissTrigger } from './utilities/component-functions'
-import { defineJQueryPlugin } from './utilities'
-
-/**
- * Constants
- */
-
-const NAME = 'alert'
-const DATA_KEY = `${DATA_PREFIX}.alert`
-const EVENT_KEY = `.${DATA_KEY}`
-
-const EVENT_CLOSE = `close${EVENT_KEY}`
-const EVENT_CLOSED = `closed${EVENT_KEY}`
-const CLASS_NAME_FADE = 'fade'
-const CLASS_NAME_SHOW = 'show'
-
-/**
- * Class definition
- */
-
-class Alert extends BaseComponent {
-  // Getters
-  static get NAME() {
-    return NAME
-  }
-
-  // Public
-  close() {
-    const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE)
-
-    if (closeEvent.defaultPrevented) {
-      return
+export default function createAlert({
+  BaseComponent,
+  CLASS_PREFIX,
+  DATA_PREFIX,
+  enableDismissTrigger,
+  EventHandler,
+}) {
+  /**
+   * Constants
+   */
+
+  const NAME = 'alert'
+  const DATA_KEY = `${DATA_PREFIX}.alert`
+  const EVENT_KEY = `.${DATA_KEY}`
+
+  const EVENT_CLOSE = `close${EVENT_KEY}`
+  const EVENT_CLOSED = `closed${EVENT_KEY}`
+  const CLASS_NAME_FADE = `${CLASS_PREFIX}fade`
+  const CLASS_NAME_SHOW = `${CLASS_PREFIX}show`
+
+  /**
+   * Class definition
+   */
+
+  class Alert extends BaseComponent {
+    // Getters
+    static get NAME() {
+      return NAME
     }
 
-    this._element.classList.remove(CLASS_NAME_SHOW)
-
-    const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
-    this._queueCallback(() => this._destroyElement(), this._element, isAnimated)
-  }
-
-  // Private
-  _destroyElement() {
-    this._element.remove()
-    EventHandler.trigger(this._element, EVENT_CLOSED)
-    this.dispose()
-  }
-
-  // Static
-  static jQueryInterface(config) {
-    return this.each(function () {
-      const data = Alert.getOrCreateInstance(this)
+    // Public
+    close() {
+      const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE)
 
-      if (typeof config !== 'string') {
+      if (closeEvent.defaultPrevented) {
         return
       }
 
-      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
-        throw new TypeError(`No method named "${config}"`)
-      }
+      this._element.classList.remove(CLASS_NAME_SHOW)
 
-      data[config](this)
-    })
-  }
-}
+      const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
+      this._queueCallback(
+        () => this._destroyElement(),
+        this._element,
+        isAnimated,
+      )
+    }
 
-/**
- * Data API implementation
- */
+    // Private
+    _destroyElement() {
+      this._element.remove()
+      EventHandler.trigger(this._element, EVENT_CLOSED)
+      this.dispose()
+    }
 
-enableDismissTrigger(Alert, 'close')
+    // Static
+    static jQueryInterface(config) {
+      return this.each(function () {
+        const data = Alert.getOrCreateInstance(this)
+
+        if (typeof config !== 'string') {
+          return
+        }
+
+        if (
+          data[config] === undefined ||
+          config.startsWith('_') ||
+          config === 'constructor'
+        ) {
+          throw new TypeError(`No method named "${config}"`)
+        }
+
+        data[config](this)
+      })
+    }
+  }
 
-/**
- * jQuery
- */
+  /**
+   * Data API implementation
+   */
 
-// defineJQueryPlugin(Alert)
+  enableDismissTrigger(Alert, 'close')
 
-export default Alert
+  return Alert
+}

all.ts

@@ -0,0 +1,32 @@
+import { create } from './index'
+
+// These can be imported individually
+import Alert from './alert'
+import Button from './button'
+import Carousel from './carousel'
+import Collapse from './collapse'
+import Dropdown from './dropdown'
+import Modal from './modal'
+import Offcanvas from './offcanvas'
+import Popover from './popover'
+import ScrollSpy from './scrollspy'
+import Tab from './tab'
+import Toast from './toast'
+import Tooltip from './tooltip'
+
+create({
+  components: {
+    Alert,
+    Button,
+    Carousel,
+    Collapse,
+    Dropdown,
+    Modal,
+    Offcanvas,
+    Popover,
+    ScrollSpy,
+    Tab,
+    Toast,
+    Tooltip,
+  },
+})

base-component.ts

@@ -0,0 +1,97 @@
+import Data from './dom/data'
+import EventHandler from './dom/event-handler'
+// import Config from './utilities/config'
+import { executeAfterTransition, getElement } from './utilities'
+
+/**
+ * Constants
+ */
+
+const VERSION = '2024.09.18' // Fork of Bootstrap 5.3.3
+
+export default function createBaseComponent({
+  Config,
+  DATA_PREFIX,
+  DATA_PREFIX_BASE,
+}) {
+  /**
+   * Class definition
+   */
+
+  class BaseComponent extends Config {
+    constructor(element, config) {
+      super()
+
+      element = getElement(element)
+      if (!element) {
+        return
+      }
+
+      this._element = element
+      this._config = this._getConfig(config)
+
+      Data.set(this._element, this.constructor.DATA_KEY, this)
+    }
+
+    // Public
+    dispose() {
+      Data.remove(this._element, this.constructor.DATA_KEY)
+      EventHandler.off(this._element, this.constructor.EVENT_KEY)
+
+      for (const propertyName of Object.getOwnPropertyNames(this)) {
+        this[propertyName] = null
+      }
+    }
+
+    _queueCallback(callback, element, isAnimated = true) {
+      executeAfterTransition(callback, element, isAnimated)
+    }
+
+    _getConfig(config) {
+      config = this._mergeConfigObj(config, this._element)
+      config = this._configAfterMerge(config)
+      this._typeCheckConfig(config)
+      return config
+    }
+
+    // Static
+    static getInstance(element) {
+      return Data.get(getElement(element), this.DATA_KEY)
+    }
+
+    static getOrCreateInstance(element, config = {}) {
+      return (
+        this.getInstance(element) ||
+        new this(element, typeof config === 'object' ? config : null)
+      )
+    }
+
+    static get VERSION() {
+      return VERSION
+    }
+
+    static get DATA_PREFIX() {
+      return DATA_PREFIX
+    }
+
+    static set DATA_PREFIX(_prefix: string) {
+      let prefix = _prefix.replace(/\-$/, '')
+      DATA_PREFIX_BASE = prefix
+      DATA_PREFIX = `${prefix}-`
+    }
+
+    static get DATA_KEY() {
+      return `${this.DATA_PREFIX}.${this.NAME}`
+    }
+
+    static get EVENT_KEY() {
+      return `.${this.DATA_KEY}`
+    }
+
+    static eventName(name) {
+      return `${name}${this.EVENT_KEY}`
+    }
+  }
+
+  return BaseComponent
+}