Docs: fix Bootstrap bundle loading consistency between dev and static builds (#42237)

julien-deramond · mdo · web-flow · commit c23e9133fca7 · 2026-04-21T18:51:52.000-07:00
* Docs: fix Bootstrap bundle loading consistency between dev and static builds

* Finish the fix for loading single copy of Bootstrap JS

---------

Co-authored-by: Mark Otto &lt;markdotto@gmail.com&gt;
diff --git a/site/src/assets/application.js b/site/src/assets/application.js
@@ -14,7 +14,9 @@ import snippets from './partials/snippets.js'
 import stickyNav from './partials/sticky.js'
 import tocDrawer from './partials/toc.js'
 
-sidebarScroll()
-snippets()
-stickyNav()
-tocDrawer()
+export default () => {
+  sidebarScroll()
+  snippets()
+  stickyNav()
+  tocDrawer()
+}
diff --git a/site/src/assets/search.js b/site/src/assets/search.js
@@ -11,7 +11,7 @@
 
 import docsearch from '@docsearch/js'
 
-(() => {
+export default () => {
   // These values will be replaced by Astro's Vite plugin
   const CONFIG = {
     apiKey: '__API_KEY__',
@@ -56,4 +56,4 @@ import docsearch from '@docsearch/js'
       })
     }
   })
-})()
+}
diff --git a/site/src/assets/stackblitz.js b/site/src/assets/stackblitz.js
@@ -22,19 +22,21 @@ const CONFIG = {
 }
 
 // Open in StackBlitz logic
-document.querySelectorAll('.btn-edit').forEach(btn => {
-  btn.addEventListener('click', event => {
-    const codeSnippet = event.target.closest('.bd-code-snippet')
-    const exampleEl = codeSnippet.querySelector('.bd-example')
+export default () => {
+  document.querySelectorAll('.btn-edit').forEach(btn => {
+    btn.addEventListener('click', event => {
+      const codeSnippet = event.target.closest('.bd-code-snippet')
+      const exampleEl = codeSnippet.querySelector('.bd-example')
 
-    const htmlSnippet = exampleEl.innerHTML
-    const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
-    // Get extra classes for this example
-    const classes = Array.from(exampleEl.classList).join(' ')
+      const htmlSnippet = exampleEl.innerHTML
+      const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
+      // Get extra classes for this example
+      const classes = Array.from(exampleEl.classList).join(' ')
 
-    openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
+      openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
+    })
   })
-})
+}
 
 const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
   const indexHtml = `<!doctype html>
diff --git a/site/src/components/DocsScripts.astro b/site/src/components/DocsScripts.astro
@@ -1,4 +1,8 @@
 ---
 ---
 
-<script src="../assets/stackblitz.js"></script>
+<script>
+  import stackblitz from '../assets/stackblitz.js'
+
+  stackblitz()
+</script>
diff --git a/site/src/components/Scripts.astro b/site/src/components/Scripts.astro
@@ -9,7 +9,12 @@ interface Props {
 const { layout } = Astro.props
 ---
 
-<script src="../assets/application.js"></script>
-<script src="../assets/search.js"></script>
+<script>
+  import application from '../assets/application.js'
+  import search from '../assets/search.js'
+
+  application()
+  search()
+</script>
 
 {layout === 'docs' && <DocsScripts />}
