Merge pull request #18276 from overleaf/td-bs5-load-js

Load correct JS for the active Bootstrap version, second attempt

GitOrigin-RevId: ad8748a941691d745db5cd3e986e9c7b188b3ecb

services/web/app/views/_mixins/bootstrap_js.pug

@@ -0,0 +1,3 @@
+mixin bootstrap-js(bootstrapVersion)
+	each file in (entrypointScripts(bootstrapVersion === 5 ? 'bootstrap-5' : 'bootstrap-3'))
+		script(type="text/javascript", nonce=scriptNonce, src=file)

services/web/app/views/layout-base.pug

@@ -4,7 +4,7 @@ html(
 	class=(fixedSizeDocument ? 'fixed-size-document' : undefined)
 )
 	- metadata = metadata || {}
-	- bootstrap5EnabledPage = false
+	- let bootstrap5EnabledPage = false
 
 	block entrypointVar
 
@@ -13,7 +13,7 @@ html(
 	head
 		include ./_metadata.pug
 			
-		- var bootstrapVersion = bootstrap5EnabledPage && splitTestVariants['bootstrap-5'] === 'enabled' ? 5 : 3
+		- const bootstrapVersion = bootstrap5EnabledPage && splitTestVariants['bootstrap-5'] === 'enabled' ? 5 : 3
 
 		//- Stylesheet
 		link(rel='stylesheet', href=buildCssPath(getCssThemeModifier(userSettings, brandVariation), bootstrapVersion), id="main-stylesheet")

services/web/app/views/layout-marketing.pug

@@ -1,6 +1,7 @@
 extends ./layout-base
 
 include ./_mixins/formMessages
+include ./_mixins/bootstrap_js
 
 block entrypointVar
 	- entrypoint = 'marketing'
@@ -21,3 +22,6 @@ block body
 		include _cookie_banner
 
 	!= moduleIncludes("contactModal-marketing", locals)
+
+block prepend foot-scripts
+	+bootstrap-js(bootstrapVersion)

services/web/app/views/layout-website-redesign.pug

@@ -1,6 +1,7 @@
 extends ./layout-base
 
 include ./_mixins/formMessages
+include ./_mixins/bootstrap_js
 
 block entrypointVar
 	- entrypoint = 'marketing'
@@ -21,3 +22,6 @@ block body
 		include _cookie_banner
 
 	!= moduleIncludes("contactModal-marketing", locals)
+
+block prepend foot-scripts
+	+bootstrap-js(bootstrapVersion)

services/web/app/views/subscriptions/interstitial-payment.pug

@@ -1,6 +1,7 @@
 extends ../layout
 
 include ./plans/_mixins
+include ../_mixins/bootstrap_js
 
 block vars
 	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
@@ -65,3 +66,6 @@ block content
 					| #{translate("continue_with_free_plan")}			
 
 	!= moduleIncludes("contactModalGeneral-marketing", locals)
+
+block prepend foot-scripts
+	+bootstrap-js(bootstrapVersion)

services/web/frontend/js/bootstrap-3.ts

@@ -0,0 +1,5 @@
+import 'jquery'
+import 'bootstrap'
+
+$('[data-ol-lang-selector-tooltip]').tooltip({ trigger: 'hover' })
+$('[data-toggle="tooltip"]').tooltip()

services/web/frontend/js/bootstrap-5.ts

@@ -0,0 +1 @@
+import 'bootstrap-5'

services/web/frontend/js/marketing.js

@@ -1,7 +1,5 @@
 import './utils/webpack-public-path'
 import './infrastructure/error-reporter'
-import 'jquery'
-import 'bootstrap'
 import './features/form-helpers/hydrate-form'
 import './features/form-helpers/password-visibility'
 import './features/link-helpers/slow-link'
@@ -13,6 +11,3 @@ import './features/multi-submit'
 import './features/cookie-banner'
 import './features/autoplay-video'
 import './features/mathjax'
-
-$('[data-ol-lang-selector-tooltip]').tooltip({ trigger: 'hover' })
-$('[data-toggle="tooltip"]').tooltip()

services/web/frontend/js/pages/project-list.jsx

@@ -1,5 +1,3 @@
-import 'jquery'
-import 'bootstrap'
 import './../utils/meta'
 import './../utils/webpack-public-path'
 import './../infrastructure/error-reporter'

services/web/frontend/js/pages/token-access.tsx

@@ -1,5 +1,3 @@
-import 'jquery'
-import 'bootstrap'
 import './../utils/meta'
 import './../utils/webpack-public-path'
 import './../infrastructure/error-reporter'

services/web/frontend/js/pages/user/subscription/base.js

@@ -1,5 +1,3 @@
-import 'jquery'
-import 'bootstrap'
 import './../../../utils/meta'
 import './../../../utils/webpack-public-path'
 import './../../../infrastructure/error-reporter'

services/web/webpack.config.js

@@ -17,6 +17,8 @@ invalidateBabelCacheIfNeeded()
 // Generate a hash of entry points, including modules
 const entryPoints = {
   tracing: './frontend/js/tracing.js',
+  'bootstrap-3': './frontend/js/bootstrap-3.ts',
+  'bootstrap-5': './frontend/js/bootstrap-5.ts',
   devToolbar: './frontend/js/dev-toolbar.js',
   main: './frontend/js/main.js',
   ide: './frontend/js/ide.js',