Interaction with Vite `transformIndexHtml` plugin

[fcrozatier]

Describe the bug

I'm not sure if this is desired or not or a documentation thing. For some reason Vite transformIndexHtml plugins do not run.

Reproduction

Just paste this inside a vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, type Plugin } from 'vite';

const htmlPlugin = () => {
 console.log('plugin init');
 return {
  name: 'html-transform',
  transformIndexHtml(html) {
   console.log('plugin transform'); // Never runs
   return html.replace(/<title>(.*?)<\/title>/, `<title>Title replaced!</title>`);
   }
  } satisfies Plugin;
};

export default defineConfig({
 plugins: [htmlPlugin(), sveltekit()]
});

Logs

No response

System Info

System:
    OS: macOS 14.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 16.11 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
  Browsers:
    Brave Browser: 126.1.67.119
    Chrome: 126.0.6478.63
    Safari: 17.5

Severity

annoyance

Additional Information

Why is this happening?

[dominikg]

not a bug, kit handles html itself. see https://github.com/sveltejs/kit/discussions/8269

Maybe we could log a warning if we detect plugins with that hook?

[fcrozatier]

But isn't kit just a Vite plugin, how come it can intercept other plugins / prevents them from running?

In a raw Vite project we can have a sequence of plugins with the same hook, and have for example many transformIndexHtml plugins doing each their own thing. So in principle even if kit handles html, this should not prevent further transformation right?

[benmccann]

Kit doesn't prevent it from running, but Vite never tries to invoke it. The problem with that hook is that it's meant for a different app type: https://vitejs.dev/config/shared-options.html#apptype. Perhaps Vite's docs should be updated with regards to that plugin hook. Your plugin is attempting to modify the title at build time, but the title is generated at runtime so that won't work. You should use SvelteKit's handle instead.

[fcrozatier]

Oh I see so Kit modifies Vite config's appType to custom which implies that transformIndexHtml doesn't run since for this app type it's expected that the html transforms are handled at the framework level (the "html middlewares").

Then it's definitely a documentation thing, maybe a quick note on the plugin API side could explain this.

Which also means we can't benefit from framework agnostic transformIndexHtml hooks from the ecosystem. Too bad!

Thank you for the explanation!

[fcrozatier]

@benmccann I'm a bit confused, here's the answer on the related Vite PR:

appType doesn't affect if transformIndexHtml is called, it's up to the frameworks if they call server.transformIndexHtml. If they don't, then the hook will not be called

So it seems there could still be something to do on kit's end? We could choose to support this hook or just document that it's not supported.

• pros: let's us benefit from the ecosystem of framework independant vite html transforms
• cons: we can do something similar in handle

[el-schneider]

I would love to see this supported, as for example handling favicons is painful every time I'm building a site with SvelteKit and there are really lots of different use-cases and plugins. A couple of useful ones gathered from other issues here: https://github.com/josh-hemphill/vite-plugin-favicon https://github.com/ZhongxuYang/vite-plugin-version-mark https://www.npmjs.com/package/vite-plugin-webfont-dlg