Use TypeScript in Stories with HTML-Template

[uncut hill]

Hi! I want to add some functionality to my components with TypeScript. Something like open a modal dialog on the page.
In Version 6.X I did this by adding a decorator to my Story and use it like so:

export const loadScript = (StoryFn, context) => {
  const scriptUrl = "/frontend/js/index.js";

  const script = document.createElement("script");
  script.src = scriptUrl;
  script.async = true;

  script.onload = () => {
    console.log("Script loaded");
  };

  script.onerror = () => {
    console.error("Script failed to load");
  };

  document.body.appendChild(script);

  return StoryFn(context);
};

This works with precompiled JS code. But how do I add TypeScript to my Stories?
There is a lack of documentation for using StoryBook without any Framework.

[cyan silo]

Do you mean that you wish to author the /frontend/js/index.js script using TypeScript, but have it compiled to JS so that the browser can understand it?

[uncut hill]

For a customer, I'm implementing an atomic design system. A part of that will be a JavaScript library written in TypeScript, that adds some function to the later website like opening modal dialogs or showing a menu. The TypeScript code lays somewhere in the storybook project and I want to test isolated parts of that library in my stories.
I need to know how I can bring JavaScript / TypeScript functions into my stories.

[cyan silo]

Thanks for the additional info. I think you need to find where vite is building your compiled file to and reference that location for scriptUrl.

[uncut hill]

Thanks for the reply. So there is no official way of doing this?