Docs: ensure stackblitz.js loads conditionally as intended

[louismaximepiton]

Description & Motivation & Context

During backporting the Astro commit to our doc, there was an issue regarding the Scripts bundled by Astro. I couldn't spot it on Bootstrap side but on our side. The stackblitz.js is loaded on the landing page (main branch) and not the application.js contrary at what is specified in Scripts.astro.

Special thanks to @vprothais !

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-41482--twbs-bootstrap.netlify.app/

Related issues

NA

[julien-deramond]

Good catch @louismaximepiton — and nice patch here Orange-OpenSource/Orange-Boosted-Bootstrap@a91f7d3 @vprothais! I'll add both of you in the final commit as co-authors.

I can confirm that prior to your change, adding a simple console.log() in assets/stackblitz.js shows it being loaded on the homepage, docs, and examples — which it shouldn't. That confirms the script is being included globally, and the conditional logic isn't working as intended.

I haven't reviewed the entire Astro issues, but this one seems closely related: withastro/astro#13550. It mentions:

When you put it in a separate component, the script belongs permanently with that component. Then you are conditionally rendering the component here. That aligns with how Astro works.

This lines up well with the behavior we're seeing — so yes, moving this into a component makes sense.

Could you please extract the other fix @louismaximepiton into a separate PR? That way I can merge this one right away, and review the second fix independently later on. 🙏

[Sahil3378]

const eventRegistry = {};

let uidCounter = 1;
function makeEventUid(element) {
  return element.uidEvent || (element.uidEvent = `uid-${uidCounter++}`);
}

function getElementEvents(element) {
  const uid = makeEventUid(element);
  element.uidEvent = uid;
  eventRegistry[uid] = eventRegistry[uid] || {};
  return eventRegistry[uid];
}

function hydrateObj(obj, props) {
  for (const key in props) {
    obj[key] = props[key];
  }
}

const EventHandler = {
  off: function (element, eventType, fn) {
    element.removeEventListener(eventType, fn);
  }
};

function bootstrapHandler(element, fn) {
  return function handler(event) {
    hydrateObj(event, {
      delegateTarget: element
    });
    if (handler.oneOff) {
      EventHandler.off(element, event.type, fn);
    }
    return fn.apply(element, [event]);
  };
}