Is there a way to dynamically alter app.html (for inserting an Import Map)?

[vekunz]

Hello,

Currently, I am trying to use SvelteKit with Import Maps for a micro frontend architecture. Besides Vite hating Import Maps, I managed to get it working in Vite and SvelteKit. My current approach is a Vite plugin that resolves the import to its URLs in the Import Map.
My problem now is that I have the import Map in two places. Once in the app.html and once in the vite.config.ts. I tried to use the transformIndexHtml method in the Vite plugin, but it seems that in a SvelteKit app, this method is not used for the app.html. Then I tried to create a Svelte preprocessor, but there you cannot alter the app.html either.

Is there any way that I can dynamically change the app.html to dynamically insert my Import Map?

[Thiagolino8]

Look the for the transformPageChunk here

[vekunz]

With this, I managed to inject my Import Map into the app.html output. To share my Import Map between the vite.config.ts and the SvelteKit hook, I set the import map inside my Vite plugin to a variable in the global scope, and in the hook I read it from the global scope. But actually, this feels a bit hacky and not very stable. But I guess there is no other way to share objects between these two?

[vekunz]

Ok, this way of sharing the import map obviously does not work with the final node build.

[david-plugge]

What exactly do you mean by having the import map in vite.config.ts? Do you generate it in a vite plugin? If so you might be able to make it available to sveltekit by creating a virtual file in the plugin

[vekunz]

I pass the import map as an object to the settings of my custom Vite plugin. I solved this now by moving the import map object to another file, importing it into the vite.config.ts and the hooks.server.ts.