Add a shared Bootstrap component resolver

The four component init scripts (carousel, modal, popover, tooltip) reached
Bootstrap only through the window.bootstrap global, which ties them to
Extension:Bootstrap's copy. They now obtain the component class from a shared
package module: getComponentClass() resolves it from the window.bootstrap
global that Extension:Bootstrap and most Bootstrap-bundling skins expose, or
from the jQuery plugin bridge that skins such as Tweeki register instead (a
Bootstrap jQuery plugin's Constructor is the native component class). The five
modules involved are ResourceLoader package modules, so the resolver is shared
via require() rather than a page-wide global.

No loading change: the shared module depends on ext.bootstrap.scripts and the
fix modules depend on the shared module, so the load graph and behaviour are
identical on every skin.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: malberts

extension.json

@@ -91,6 +91,10 @@
 		"ext.bootstrapComponents.bootstrap.fix": {
 			"styles": "ext.bootstrapComponents.bootstrap.fix.css"
 		},
+		"ext.bootstrapComponents.bootstrap": {
+			"dependencies": "ext.bootstrap.scripts",
+			"packageFiles": [ "ext.bootstrapComponents.bootstrap.js" ]
+		},
 		"ext.bootstrapComponents.accordion.fix": {
 			"styles": "ext.bootstrapComponents.accordion.fix.css"
 		},
@@ -104,28 +108,28 @@
 			"styles": "ext.bootstrapComponents.card.fix.css"
 		},
 		"ext.bootstrapComponents.carousel.fix": {
-			"dependencies": "ext.bootstrap.scripts",
+			"dependencies": "ext.bootstrapComponents.bootstrap",
 			"styles": "ext.bootstrapComponents.carousel.fix.css",
-			"scripts": "ext.bootstrapComponents.carousel.js"
+			"packageFiles": [ "ext.bootstrapComponents.carousel.js" ]
 		},
 		"ext.bootstrapComponents.modal.fix": {
-			"dependencies": "ext.bootstrap.scripts",
+			"dependencies": "ext.bootstrapComponents.bootstrap",
 			"styles": "ext.bootstrapComponents.modal.fix.css",
-			"scripts": "ext.bootstrapComponents.modal.js"
+			"packageFiles": [ "ext.bootstrapComponents.modal.js" ]
 		},
 		"ext.bootstrapComponents.modal.vector-fix": {
 			"styles": "ext.bootstrapComponents.modal.vector-fix.css"
 		},
 		"ext.bootstrapComponents.popover.fix": {
-			"dependencies": "ext.bootstrap.scripts",
-			"scripts": "ext.bootstrapComponents.popover.js"
+			"dependencies": "ext.bootstrapComponents.bootstrap",
+			"packageFiles": [ "ext.bootstrapComponents.popover.js" ]
 		},
 		"ext.bootstrapComponents.popover.vector-fix": {
 			"styles": "ext.bootstrapComponents.popover.vector-fix.css"
 		},
 		"ext.bootstrapComponents.tooltip.fix": {
-			"dependencies": "ext.bootstrap.scripts",
-			"scripts": "ext.bootstrapComponents.tooltip.js",
+			"dependencies": "ext.bootstrapComponents.bootstrap",
+			"packageFiles": [ "ext.bootstrapComponents.tooltip.js" ],
 			"styles": "ext.bootstrapComponents.tooltip.fix.css"
 		},
 		"ext.bootstrapComponents.vector-fix": {

modules/ext.bootstrapComponents.bootstrap.js

@@ -0,0 +1,17 @@
+'use strict';
+
+// Resolve a Bootstrap component class by name: from the window.bootstrap global that
+// Extension:Bootstrap and most Bootstrap-bundling skins expose, or from the jQuery plugin
+// bridge that some skins (Tweeki) register instead, where a plugin's Constructor is the
+// native component class.
+function getComponentClass( name ) {
+	if ( window.bootstrap && window.bootstrap[ name ] ) {
+		return window.bootstrap[ name ];
+	}
+	const plugin = window.jQuery && window.jQuery.fn[ name.toLowerCase() ];
+	return ( plugin && plugin.Constructor ) || null;
+}
+
+module.exports = {
+	getComponentClass: getComponentClass
+};

modules/ext.bootstrapComponents.carousel.js

@@ -26,6 +26,8 @@
 ( function () {
 	'use strict';
 
+	const { getComponentClass } = require( 'ext.bootstrapComponents.bootstrap' );
+
 	// Wait for DOM to be ready
 	if ( document.readyState === 'loading' ) {
 		document.addEventListener( 'DOMContentLoaded', initCarousels );
@@ -34,14 +36,15 @@
 	}
 
 	function initCarousels() {
-		if ( typeof bootstrap === 'undefined' || !bootstrap.Carousel ) {
+		const Carousel = getComponentClass( 'Carousel' );
+		if ( !Carousel ) {
 			// eslint-disable-next-line no-console
 			console.warn( 'BootstrapComponents: bootstrap.Carousel is not available; carousels will not cycle.' );
 			return;
 		}
 		const carouselElements = document.querySelectorAll( '.carousel' );
 		carouselElements.forEach( function ( element ) {
-			new bootstrap.Carousel( element );
+			new Carousel( element );
 		} );
 	}
 }() );

modules/ext.bootstrapComponents.modal.js

@@ -5,6 +5,8 @@
 ( function () {
 	'use strict';
 
+	const { getComponentClass } = require( 'ext.bootstrapComponents.bootstrap' );
+
 	// Wait for DOM to be ready
 	if ( document.readyState === 'loading' ) {
 		document.addEventListener( 'DOMContentLoaded', initModals );
@@ -13,7 +15,8 @@
 	}
 
 	function initModals() {
-		if ( typeof bootstrap === 'undefined' || !bootstrap.Modal ) {
+		const Modal = getComponentClass( 'Modal' );
+		if ( !Modal ) {
 			// eslint-disable-next-line no-console
 			console.warn( 'BootstrapComponents: bootstrap.Modal is not available; modal triggers will not work.' );
 			return;
@@ -22,7 +25,7 @@
 		// bootstrap.Modal.getOrCreateInstance(el).show()) work as expected.
 		const modalList = document.querySelectorAll( '.modal' );
 		modalList.forEach( function ( modalEl ) {
-			bootstrap.Modal.getOrCreateInstance( modalEl );
+			Modal.getOrCreateInstance( modalEl );
 		} );
 	}
 }() );

modules/ext.bootstrapComponents.popover.js

@@ -26,6 +26,8 @@
 ( function () {
 	'use strict';
 
+	const { getComponentClass } = require( 'ext.bootstrapComponents.bootstrap' );
+
 	// Wait for DOM to be ready
 	if ( document.readyState === 'loading' ) {
 		document.addEventListener( 'DOMContentLoaded', initPopovers );
@@ -34,14 +36,15 @@
 	}
 
 	function initPopovers() {
-		if ( typeof bootstrap === 'undefined' || !bootstrap.Popover ) {
+		const Popover = getComponentClass( 'Popover' );
+		if ( !Popover ) {
 			// eslint-disable-next-line no-console
 			console.warn( 'BootstrapComponents: bootstrap.Popover is not available; popover triggers will not work.' );
 			return;
 		}
 		const popoverTriggerList = document.querySelectorAll( '[data-bs-toggle="popover"]' );
 		popoverTriggerList.forEach( function ( popoverTriggerEl ) {
-			new bootstrap.Popover( popoverTriggerEl, {
+			new Popover( popoverTriggerEl, {
 				html: true
 			} );
 		} );

modules/ext.bootstrapComponents.tooltip.js

@@ -26,6 +26,8 @@
 ( function () {
 	'use strict';
 
+	const { getComponentClass } = require( 'ext.bootstrapComponents.bootstrap' );
+
 	// Wait for DOM to be ready
 	if ( document.readyState === 'loading' ) {
 		document.addEventListener( 'DOMContentLoaded', initTooltips );
@@ -34,14 +36,15 @@
 	}
 
 	function initTooltips() {
-		if ( typeof bootstrap === 'undefined' || !bootstrap.Tooltip ) {
+		const Tooltip = getComponentClass( 'Tooltip' );
+		if ( !Tooltip ) {
 			// eslint-disable-next-line no-console
 			console.warn( 'BootstrapComponents: bootstrap.Tooltip is not available; tooltip triggers will not work.' );
 			return;
 		}
 		const tooltipTriggerList = document.querySelectorAll( '[data-bs-toggle="tooltip"]' );
 		tooltipTriggerList.forEach( function ( tooltipTriggerEl ) {
-			new bootstrap.Tooltip( tooltipTriggerEl );
+			new Tooltip( tooltipTriggerEl );
 		} );
 	}
 }() );