Switch to packageFiles

Author: malberts

src/BootstrapManager.php

@@ -104,7 +104,7 @@ public function addBootstrapModule( $modules ) {
 				}
 
 				$this->addFilesToGlobalResourceModules( 'styles', $description );
-				$this->addFilesToGlobalResourceModules( 'scripts', $description );
+				$this->addFilesToGlobalResourceModules( 'packageFiles', $description );
 
 			}
 		}
@@ -188,6 +188,12 @@ public function addCacheTriggerFile( $files ) {
 	 */
 	protected function adjustArrayElementOfResourceModuleDescription( $key, $value,
 		$filetype = 'styles' ) {
+
+		// TODO: handle better
+		if ( $filetype === 'packageFiles' ) {
+			$filetype = 'scripts';
+		}
+
 		if ( !isset( $GLOBALS[ 'wgResourceModules' ][ 'ext.bootstrap.' . $filetype ][ $key ] ) ) {
 			$GLOBALS[ 'wgResourceModules' ][ 'ext.bootstrap.' . $filetype ][ $key ] = [];
 		}

src/Definition/V5ModuleDefinition.php

@@ -53,7 +53,7 @@ class V5ModuleDefinition implements ModuleDefinition {
 		'forms'             => [ 'styles' => 'forms' ],
 		'buttons'           => [ 'styles' => 'buttons' ],
 		'transitions'       => [ 'styles' => 'transitions' ],
-		'dropdown'          => [ 'styles' => 'dropdown', 'scripts' => 'dropdown.js', 'dependencies' => [ 'popper', 'base-component' ] ],
+		'dropdown'          => [ 'styles' => 'dropdown', 'packageFiles' => 'dropdown.js', 'dependencies' => [ 'popper', 'base-component' ] ],
 		'button-group'      => [ 'styles' => 'button-group', 'dependencies' => [ 'buttons' ] ],
 		'nav'               => [ 'styles' => 'nav' ],
 		'navbar'            => [ 'styles' => 'navbar' ],
@@ -66,41 +66,42 @@ class V5ModuleDefinition implements ModuleDefinition {
 		'progress'          => [ 'styles' => 'progress' ],
 		'list-group'        => [ 'styles' => 'list-group' ],
 		'close'             => [ 'styles' => 'close' ],
-		'toasts'            => [ 'styles' => 'toasts', 'scripts' => 'toast.js', 'dependencies' => 'base-component' ],
-		'modal'             => [ 'styles' => 'modal', 'scripts' => 'modal.js', 'dependencies' => 'base-component' ],
-		'tooltip'           => [ 'styles' => 'tooltip', 'scripts' => 'tooltip.js', 'dependencies' => [ 'popper', 'base-component' ] ],
-		'popover'           => [ 'styles' => 'popover', 'scripts' => 'popover.js', 'dependencies' => [ 'popper', 'tooltip', 'base-component' ] ],
-		'carousel'          => [ 'styles' => 'carousel', 'scripts' => 'carousel.js', 'dependencies' => 'base-component' ],
+		'toasts'            => [ 'styles' => 'toasts', 'packageFiles' => 'toast.js', 'dependencies' => 'base-component' ],
+		'modal'             => [ 'styles' => 'modal', 'packageFiles' => 'modal.js', 'dependencies' => 'base-component' ],
+		'tooltip'           => [ 'styles' => 'tooltip', 'packageFiles' => 'tooltip.js', 'dependencies' => [ 'popper', 'base-component' ] ],
+		'popover'           => [ 'styles' => 'popover', 'packageFiles' => 'popover.js', 'dependencies' => [ 'popper', 'tooltip', 'base-component' ] ],
+		'carousel'          => [ 'styles' => 'carousel', 'packageFiles' => 'carousel.js', 'dependencies' => 'base-component' ],
 		'spinners'          => [ 'styles' => 'spinners' ],
-		'offcanvas'         => [ 'styles' => 'offcanvas', 'scripts' => 'offcanvas.js' ],
+		'offcanvas'         => [ 'styles' => 'offcanvas', 'packageFiles' => 'offcanvas.js' ],
 		'placeholders'      => [ 'styles' => 'placeholders' ],
 
 		// Helpers
 		'helpers'           => [ 'styles' => 'helpers' ],
 
 		// Helpers
-		'utilities/api'           => [ 'styles' => 'utilities/api' ],
-
-		// Javascript
-		'active-buttons'    => [ 'scripts' => 'button.js', 'dependencies' => [ 'buttons', 'js-util' ] ],
-		'dismissable-alert' => [ 'scripts' => 'alert.js', 'dependencies' => [ 'alert', 'base-component' ] ],
-		'collapse'          => [ 'scripts' => 'collapse.js', 'dependencies' => [ 'js-util' ] ],
-		'scrollspy'         => [ 'scripts' => 'scrollspy.js', 'dependencies' => [ 'popper', 'js-util' ] ],
-		'tab'               => [ 'scripts' => 'tab.js', 'dependencies' => [ 'list-group', 'js-util' ] ],
-		'popper'            => [ 'scripts' => 'popper.js', 'dependencies' => [ 'js-util' ] ],
-
-		'base-component'    => [ 'scripts' => 'base-component.js', 'dependencies' => [ 'js-util' ] ],
-
+		'utilities/api'     => [ 'styles' => 'utilities/api' ],
+
+		// Component JavaScript requirements
+		'base-component'    => [ 'packageFiles' => 'base-component.js', 'dependencies' => [ 'js-util' ] ],
+		'active-buttons'    => [ 'packageFiles' => 'button.js', 'dependencies' => [ 'buttons', 'js-util' ] ],
+		'dismissable-alert' => [ 'packageFiles' => 'alert.js', 'dependencies' => [ 'alert', 'base-component' ] ],
+		'collapse'          => [ 'packageFiles' => 'collapse.js', 'dependencies' => [ 'js-util' ] ],
+		'scrollspy'         => [ 'packageFiles' => 'scrollspy.js', 'dependencies' => [ 'popper', 'js-util' ] ],
+		'tab'               => [ 'packageFiles' => 'tab.js', 'dependencies' => [ 'list-group', 'js-util' ] ],
+		// TODO: this needs to be included via ResourceLoader module
+		'popper'            => [ 'packageFiles' => 'popper.js', 'dependencies' => [ 'js-util' ] ],
+
+		// General JavaScript requirements
 		'js-dom' => [
-			'scripts' => [
+			'packageFiles' => [
 				'dom/data.js',
 				'dom/event-handler.js',
 				'dom/manipulator.js',
 				'dom/selector-engine.js'
 			]
 		],
 		'js-util'  => [
-			'scripts' => [
+			'packageFiles' => [
 				'util/config.js',
 				'util/backdrop.js',
 				'util/component-functions.js',
@@ -114,6 +115,7 @@ class V5ModuleDefinition implements ModuleDefinition {
 			'dependencies' => ['js-dom' ]
 		],
 
+		// Pre-defined collections
 		'bs-core'   => [ 'dependencies' => [ 'variables', 'variables-dark', 'maps', 'mixins', 'utilities' ] ],
 		'bs-reboot' => [ 'dependencies' => [ 'bs-core', 'reboot' ] ],
 		'bs-grid'   => [ 'styles' => 'bootstrap-grid' ],

src/Hooks/SetupAfterCache.php

@@ -108,12 +108,27 @@ protected function registerResourceLoaderModules( $localBasePath, $remoteBasePat
 			[
 				'localBasePath'  => $localBasePath . '/js',
 				'remoteBasePath' => $remoteBasePath . '/js',
-				'scripts' => [],
+				'es6' => true,
+				'packageFiles'=> [],
+				'dependencies' => [
+					// TODO: should be conditional
+					'@popperjs/core',
+				]
 			],
 			array_key_exists( 'ext.bootstrap.scripts', $GLOBALS[ 'wgResourceModules' ] ) ?
 				$GLOBALS[ 'wgResourceModules' ][ 'ext.bootstrap.scripts' ] : []
 		);
 
+		// Separate module because Bootstrap JavaScript calls require('@popperjs/core')
+		$GLOBALS[ 'wgResourceModules' ][ '@popperjs/core' ] = [
+			'localBasePath' => $localBasePath . '/js',
+			'remoteBasePath' => $remoteBasePath . '/js',
+			'es6' => true,
+			'packageFiles' => [
+				'popper.js'
+			]
+		];
+
 		$GLOBALS[ 'wgResourceModules' ][ 'ext.bootstrap' ] = [
 			'dependencies' => [ 'ext.bootstrap.styles', 'ext.bootstrap.scripts' ],
 		];