Disable minification and mangling for all code or some part of it

[rough cipher]

I m rebuilding an old documentation website with astro, and so far i m here: https://fabricjs.github.io/
I want to have examples in the pages that are created by the code that run the example itself, and so far i have skipped any interactive editor plugins because i m trying to move as fast as possible.
This is in brief what i do:
https://github.com/fabricjs/fabricjs.github.io/blob/main/src/content/docs/docs/old-docs/clippath-part1.jsx
I create the simple example, and then i have a utility that wrap the example code and return a component.
The component takes the function, makes a toString, and on top of running it, it will display it. That's it.

In development is all good and looks like in the nicer attached picture.

In production i already disabled minification by doing:

export default defineConfig({
  integrations: [...],
  vite: {
    build: {
      minify: false,
    }
  },
});

But it is still mangling imports and names ( see the image with short names ).

What bother me most is that if it would just minify the import as i wrote them:

var clipPath = new fabric.Circle({ radius: 100, top: -100, left: -100 });

would become

var clipPath = new ml.Circle({ radius: 100, top: -100, left: -100 });

And that would be fine.
But instead we are getting:

var clipPath = new Ln({ radius: 100, top: -100, left: -100 });

That makes a tad too much to move forward.

I understand is not a minification issue but more an import/export rewrapping and optimization that i would like to disable or even just force to not happen with some tweak in the code.

link to one of the affected pages:
https://fabricjs.github.io/docs/old-docs/clippath-part2/
Help appreciated.
Thanks

[past star]

This might take a bit of refactoring, so I’m not sure if you’d rather avoid that for now to focus on the docs migration (which I totally would understand), but I think I might suggest a slightly different approach.

Vite has support for importing the raw contents of files using the ?raw suffix, which makes it possible to get the exact authored function instead of relying on calling toString() at runtime. We have a small example of that here: https://starlight.astro.build/guides/components/#imported-code

Of course if you have many many of these examples, this could be a bit time consuming. By far the easiest would be to have each example in its own file, but not sure if that is possible in your case?

[rough cipher]

I ll look into this thanks. As you see in some other examples i tried the opposite, i write code as a text string and then i eval it at runtime. that is even worse. Can i run the code i import with raw? or can i import it raw and normal? The raw one is purely presentational most of the time

[past star]

You can import both depending on the use:

import exampleCodeAsAString from './some-module?raw';
import exampleCode from './some-module';

The first one is literally just the original module content as a plain string

[rough cipher]

oh this is great. didn't have time to work on this on weekdays, should have time today