How to use transformIndexHtml to transform app.html?

[winston0410]

I am writing a Vite plugin, and I notice that transformIndexHtml is never called when using that plugin with SvelteKit. Is there a hook in Vite plugin that I can use to transform app.html?

I prefer not to do the transformation in hooks.server.js, as I want this to be done once in build time, but I cannot find the hook I need right now.

[dominikg]

transformIndexHtml isn't supported by sveletkit at the moment. You can do it at buildtime for prerendered pages via hooks.server.js transformPageChunk 🤔 though when prerendering you probably can also just use .svelte files 😇

[benmccann]

I'm curious what your usecase for it is? We've never bothered implementing it because there's not much you can do with it and it's difficult to use with SSR, but if there were a compelling usecase perhaps we could find a way to solve it

[winston0410]

I have a Vite plugin to generate favicon from a svg in /src (favicon.ico, and png version in 180180, 192192, 512*512). Right now I am generating everything with that plugin, it would be great if the logic of setting these <meta> in head can be done in that plugin, so it encapsulates all favicon logic in one plugin.

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

[david-plugge]

You could make the plugin spit out a virtual svelte component with the HTML contents

[winston0410]

That is something I have not thought of, but then I will have to import it myself in the code, with transformIndexHtml I don't have to do that.

[winston0410]

@benmccann another usecase with transformIndexHtml that I came across today: https://github.com/ZhongxuYang/vite-plugin-version-mark

This can still be done with virtual module, but getting everything done within the plugin is obviously better. Hope this will be put under the roadmap in the future

[Radiergummi]

@benmccann and another use case: The very useful (and popular) vite-plugin-webfont-dl, that will download and configure web fonts automatically and inject them as a style tag into the index.html using that hook: feat-agency/vite-plugin-webfont-dl#38.

[Webbmekanikern]

We're developing SPA applications time to time, and the fact that transformIndexHtml doesn't work is giving me a headache. The use case is similar to the one of @winston0410:

1. Generate favicon files from an SVG.
2. Add the markup to the generated index.html.

The headache:

• I can generate the files at build-time with a Vite plugin, but I can't add the markup to index.html.
• I can add the markup to index.html through a component with <svelte:head>, but that component can't generate the files.

Basically I want to do this:

/** @returns {import('vite').Plugin}  */
export default function myPlugin() {
    return {
        name: 'my-plugin',
        buildStart: {
            order: 'post',
            handler() {
                // Generate favicons
            }
        },
        transformIndexHtml: {
            order: 'post',
            handler() {

                // Return all favicons
                return [
                    {
                        tag: 'link',
                        attrs: {
                            rel: 'icon',
                            type: 'image/png',
                            href: 'path-to-favicon.png'
                        }
                    }
                ];
            }
        }
    };
}