fixes for docs after going ESM

mdo · mdo · commit 047812b8be00 · 2026-03-08T21:15:56.000-07:00
diff --git a/build/rollup.config.mjs b/build/rollup.config.mjs
@@ -23,8 +23,8 @@ const plugins = [
 
 if (BUNDLE) {
   destinationFile += '.bundle'
-  // Remove Floating UI from externals to bundle it
-  external.splice(external.indexOf('@floating-ui/dom'), 1)
+  // Bundle all dependencies (Floating UI, Vanilla Calendar Pro, etc.)
+  external.length = 0
   plugins.push(
     replace({
       'process.env.NODE_ENV': '"production"',
diff --git a/dist/js/bootstrap.bundle.js b/dist/js/bootstrap.bundle.js
diff --git a/dist/js/bootstrap.bundle.js.map b/dist/js/bootstrap.bundle.js.map
diff --git a/site/src/assets/partials/snippets.js b/site/src/assets/partials/snippets.js
@@ -11,7 +11,14 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global bootstrap: false */
+/* eslint-disable import/namespace */
+import {
+  Tooltip,
+  Popover,
+  Toast,
+  Carousel
+} from '../../../../dist/js/bootstrap.bundle.js'
+/* eslint-enable import/namespace */
 
 export default () => {
   // --------
@@ -20,7 +27,7 @@ export default () => {
   // Instantiate all tooltips in a docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="tooltip"]')
     .forEach(tooltip => {
-      new bootstrap.Tooltip(tooltip)
+      new Tooltip(tooltip)
     })
 
   // --------
@@ -29,7 +36,7 @@ export default () => {
   // Instantiate all popovers in docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="popover"]')
     .forEach(popover => {
-      new bootstrap.Popover(popover)
+      new Popover(popover)
     })
 
   // -------------------------------
@@ -50,7 +57,7 @@ export default () => {
   // Instantiate all toasts in docs pages only
   document.querySelectorAll('.bd-example .toast')
     .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
+      const toast = new Toast(toastNode, {
         autohide: false
       })
 
@@ -63,7 +70,7 @@ export default () => {
   const toastLiveExample = document.getElementById('liveToast')
 
   if (toastTrigger) {
-    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
+    const toastBootstrap = Toast.getOrCreateInstance(toastLiveExample)
     toastTrigger.addEventListener('click', () => {
       toastBootstrap.show()
     })
@@ -103,7 +110,7 @@ export default () => {
   // Instantiate all non-autoplaying carousels in docs or StackBlitz
   document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
     .forEach(carousel => {
-      bootstrap.Carousel.getOrCreateInstance(carousel)
+      Carousel.getOrCreateInstance(carousel)
     })
 
   // -------------------------------
diff --git a/site/src/components/Scripts.astro b/site/src/components/Scripts.astro
@@ -1,5 +1,4 @@
 ---
-import { getVersionedBsJsProps } from '@libs/bootstrap'
 import type { Layout } from '@libs/layout'
 import DocsScripts from './DocsScripts.astro'
 
@@ -10,8 +9,6 @@ interface Props {
 const { layout } = Astro.props
 ---
 
-<script is:inline {...getVersionedBsJsProps()}></script>
-
 <script src="../assets/application.js"></script>
 <script src="../assets/search.js"></script>
 
diff --git a/site/src/components/shortcodes/ButtonPlayground.astro b/site/src/components/shortcodes/ButtonPlayground.astro
@@ -155,6 +155,8 @@ const rounded = ['default', 'pill', 'square']
 />
 
 <script>
+  import { Dropdown } from '../../../../dist/js/bootstrap.bundle.js'
+
   const colorDropdownButton = document.querySelector('#btn-color-dropdown') as HTMLButtonElement
   const colorDropdownItems = document.querySelectorAll('#btn-color-dropdown + .dropdown-menu .dropdown-item')
   const sizeDropdownButton = document.querySelector('#btn-size-dropdown') as HTMLButtonElement
@@ -260,7 +262,7 @@ const rounded = ['default', 'pill', 'square']
 
   // Initialize Bootstrap dropdowns
   if (colorDropdownButton) {
-    const colorDropdown = bootstrap.Dropdown.getOrCreateInstance(colorDropdownButton)
+    const colorDropdown = Dropdown.getOrCreateInstance(colorDropdownButton)
 
     // Handle dropdown item clicks
     colorDropdownItems.forEach((item) => {
@@ -292,7 +294,7 @@ const rounded = ['default', 'pill', 'square']
   }
 
   if (sizeDropdownButton) {
-    const sizeDropdown = bootstrap.Dropdown.getOrCreateInstance(sizeDropdownButton)
+    const sizeDropdown = Dropdown.getOrCreateInstance(sizeDropdownButton)
 
     // Handle dropdown item clicks
     sizeDropdownItems.forEach((item) => {
diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro
@@ -233,14 +233,15 @@ if (highlightedCode) {
 ---
 
 <script>
+  import { Tooltip } from '../../../../dist/js/bootstrap.bundle.js'
   import ClipboardJS from 'clipboard'
 
   const btnTitle = 'Copy to clipboard'
   const btnEdit = 'Edit on StackBlitz'
 
   function snippetButtonTooltip(selector: string, title: string) {
     document.querySelectorAll(selector).forEach((btn) => {
-      bootstrap.Tooltip.getOrCreateInstance(btn, { title })
+      Tooltip.getOrCreateInstance(btn, { title })
     })
   }
 
@@ -288,7 +289,7 @@ if (highlightedCode) {
 
   clipboard.on('success', (event) => {
     const iconFirstChild = event.trigger.querySelector('.bi')?.firstElementChild
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+    const tooltipBtn = Tooltip.getInstance(event.trigger)
     const namespace = 'http://www.w3.org/1999/xlink'
     const originalXhref = iconFirstChild?.getAttributeNS(namespace, 'href')
     const isCheckIconVisible = originalXhref === '#check2'
@@ -323,7 +324,7 @@ if (highlightedCode) {
   clipboard.on('error', (event) => {
     const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
     const fallbackMsg = `Press ${modifierKey}C to copy`
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+    const tooltipBtn = Tooltip.getInstance(event.trigger)
 
     tooltipBtn?.setContent({ '.tooltip-inner': fallbackMsg })
 
diff --git a/site/src/components/shortcodes/CodeCopy.astro b/site/src/components/shortcodes/CodeCopy.astro
@@ -74,14 +74,15 @@ highlightedCode = highlightedCode.replace(/shiki-themes/g, 'astro-code-themes')
 ---
 
 <script>
+  import { Tooltip } from '../../../../dist/js/bootstrap.bundle.js'
   import ClipboardJS from 'clipboard'
 
   const btnTitle = 'Copy to clipboard'
 
   document.querySelectorAll('.code-copy').forEach((container) => {
     const btn = container.querySelector('.btn-clipboard')
     if (btn) {
-      bootstrap.Tooltip.getOrCreateInstance(btn, { title: btnTitle })
+      Tooltip.getOrCreateInstance(btn, { title: btnTitle })
     }
   })
 
@@ -93,7 +94,7 @@ highlightedCode = highlightedCode.replace(/shiki-themes/g, 'astro-code-themes')
 
   clipboard.on('success', (event) => {
     const iconFirstChild = event.trigger.querySelector('.bi')?.firstElementChild
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+    const tooltipBtn = Tooltip.getInstance(event.trigger)
     const namespace = 'http://www.w3.org/1999/xlink'
     const originalXhref = iconFirstChild?.getAttributeNS(namespace, 'href')
     const isCheckIconVisible = originalXhref === '#check2'
@@ -128,7 +129,7 @@ highlightedCode = highlightedCode.replace(/shiki-themes/g, 'astro-code-themes')
   clipboard.on('error', (event) => {
     const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
     const fallbackMsg = `Press ${modifierKey}C to copy`
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+    const tooltipBtn = Tooltip.getInstance(event.trigger)
 
     tooltipBtn?.setContent({ '.tooltip-inner': fallbackMsg })
 
diff --git a/site/src/components/shortcodes/DropdownPlacementPlayground.astro b/site/src/components/shortcodes/DropdownPlacementPlayground.astro
@@ -118,6 +118,8 @@ const logicalPlacements = [
 />
 
 <script>
+  import { Dropdown } from '../../../../dist/js/bootstrap.bundle.js'
+
   const placementDropdownButton = document.querySelector('#placement-dropdown') as HTMLButtonElement
   const placementDropdownItems = document.querySelectorAll('#placement-dropdown + .dropdown-menu .dropdown-item')
   const placementTypeInputs = document.querySelectorAll('input[name="placement-type"]')
@@ -165,11 +167,11 @@ const logicalPlacements = [
     previewToggle.setAttribute('data-bs-placement', placement)
 
     // Dispose and recreate the dropdown instance to pick up new placement
-    const instance = bootstrap.Dropdown.getInstance(previewToggle)
+    const instance = Dropdown.getInstance(previewToggle)
     if (instance) {
       instance.dispose()
     }
-    bootstrap.Dropdown.getOrCreateInstance(previewToggle)
+    Dropdown.getOrCreateInstance(previewToggle)
 
     // Update code snippet
     updateCodeSnippet(placement)
@@ -199,7 +201,7 @@ const logicalPlacements = [
 
   // Initialize placement dropdown
   if (placementDropdownButton) {
-    const placementDropdown = bootstrap.Dropdown.getOrCreateInstance(placementDropdownButton)
+    const placementDropdown = Dropdown.getOrCreateInstance(placementDropdownButton)
 
     placementDropdownItems.forEach(item => {
       item.addEventListener('click', (e) => {
diff --git a/site/src/components/shortcodes/NavbarPlacementPlayground.astro b/site/src/components/shortcodes/NavbarPlacementPlayground.astro
@@ -54,6 +54,8 @@ const placements = [
 />
 
 <script>
+  import { Dropdown } from '../../../../dist/js/bootstrap.bundle.js'
+
   const placementDropdownButton = document.querySelector('#navbar-placement-dropdown') as HTMLButtonElement
   const placementDropdownItems = document.querySelectorAll('#navbar-placement-dropdown + .dropdown-menu .dropdown-item')
   const previewContainer = document.querySelector('#navbar-placement-preview') as HTMLElement
@@ -128,7 +130,7 @@ const placements = [
 
   // Initialize dropdown
   if (placementDropdownButton) {
-    const placementDropdown = bootstrap.Dropdown.getOrCreateInstance(placementDropdownButton)
+    const placementDropdown = Dropdown.getOrCreateInstance(placementDropdownButton)
 
     placementDropdownItems.forEach(item => {
       item.addEventListener('click', (e) => {
diff --git a/site/src/components/shortcodes/StepperPlayground.astro b/site/src/components/shortcodes/StepperPlayground.astro
@@ -153,6 +153,8 @@ const stepCounts = [3, 4, 5, 6]
 />
 
 <script>
+  import { Dropdown } from '../../../../dist/js/bootstrap.bundle.js'
+
   const orientationInputs = document.querySelectorAll('input[name="stepper-orientation"]')
   const breakpointDropdownButton = document.querySelector('#stepper-breakpoint-dropdown') as HTMLButtonElement
   const breakpointDropdownItems = document.querySelectorAll('#stepper-breakpoint-dropdown + .dropdown-menu .dropdown-item')
@@ -306,7 +308,7 @@ const stepCounts = [3, 4, 5, 6]
 
   // Initialize dropdowns
   if (breakpointDropdownButton) {
-    const breakpointDropdown = bootstrap.Dropdown.getOrCreateInstance(breakpointDropdownButton)
+    const breakpointDropdown = Dropdown.getOrCreateInstance(breakpointDropdownButton)
 
     breakpointDropdownItems.forEach((item) => {
       item.addEventListener('click', (e) => {
@@ -328,7 +330,7 @@ const stepCounts = [3, 4, 5, 6]
   }
 
   if (countDropdownButton) {
-    const countDropdown = bootstrap.Dropdown.getOrCreateInstance(countDropdownButton)
+    const countDropdown = Dropdown.getOrCreateInstance(countDropdownButton)
 
     countDropdownItems.forEach((item) => {
       item.addEventListener('click', (e) => {
@@ -349,7 +351,7 @@ const stepCounts = [3, 4, 5, 6]
   }
 
   if (activeDropdownButton) {
-    const activeDropdown = bootstrap.Dropdown.getOrCreateInstance(activeDropdownButton)
+    const activeDropdown = Dropdown.getOrCreateInstance(activeDropdownButton)
 
     activeDropdownItems.forEach((item) => {
       item.addEventListener('click', (e) => {
diff --git a/site/src/layouts/ExamplesLayout.astro b/site/src/layouts/ExamplesLayout.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
-import { getVersionedBsJsProps } from '@libs/bootstrap'
+import { getBsJsGlobalShim } from '@libs/bootstrap'
 import { getConfig } from '@libs/config'
 import type { ExampleFrontmatter } from '@libs/examples'
 import { getVersionedDocsPath } from '@libs/path'
@@ -134,10 +134,11 @@ const htmlProps: HTMLAttributes<'html'> = direction === 'rtl' ? { lang: 'ar', di
     {
       include_js !== false && (
         <Fragment>
-          <script is:inline {...getVersionedBsJsProps()} />
+          <script is:inline type="module" set:html={getBsJsGlobalShim()} />
           {extra_js?.map((js) => (
             <script
               is:inline
+              type="module"
               async={js.async}
               src={js.src}
               integrity={js.integrity}
diff --git a/site/src/libs/bootstrap.ts b/site/src/libs/bootstrap.ts
@@ -33,6 +33,7 @@ export function getVersionedBsJsProps() {
   bsJsScriptSrc = `${bsJsScriptSrc}.js`
 
   const bsJsLinkProps: HTMLAttributes<'script'> = {
+    type: 'module',
     src: getVersionedDocsPath(bsJsScriptSrc)
   }
 
@@ -42,3 +43,15 @@ export function getVersionedBsJsProps() {
 
   return bsJsLinkProps
 }
+
+export function getBsJsGlobalShim() {
+  let bsJsScriptSrc = '/dist/js/bootstrap.bundle'
+
+  if (import.meta.env.PROD) {
+    bsJsScriptSrc = `${bsJsScriptSrc}.min`
+  }
+
+  bsJsScriptSrc = `${bsJsScriptSrc}.js`
+
+  return `import * as bootstrap from '${getVersionedDocsPath(bsJsScriptSrc)}'; window.bootstrap = bootstrap;`
+}
