Replies: 3 comments
-
|
I think you should be able to do this with vite only by adding your plugin after sveltekit, use vite's transformIndexHTML - also for plugins there's a flag to only run on build. |
Beta Was this translation helpful? Give feedback.
-
|
sveltekit does not support transformIndexHtml hook of vite as it uses it's own implementation for building the html. To manipulate the final html during SSR, you can use transformPageChunk of resolve, see https://kit.svelte.dev/docs/accessibility#the-lang-attribute for an example. In case of head, you can also explore using svelte:head in appropriate layouts. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the info.
Yeah that is unfortunately bad news. I hope that in the future SvelteKit will provide an API to support external solutions such as This is essential for plugin authors/contributors because if we can't manipulate with the content outside of user's workspace, such plugins are practically useless (of course, not entirely). The main goal of external plugins is to simplify user workflow and share a great development experience across multiple projects. Plug & Play 👍 For example, it's easier to create plugin and publish it on the npm and later import it in every project. Others can contribute and help with usage. It's not practical to have hooks.js files inside every projects just for common tasks. Also, maintaining it could become quite difficult.
Can we use Alternative solutionSo far I've managed to solve it with a workaround. Not ideal, but works ok. Of course, this is a simplified example just for demonstration. const Plugin = () => {
return {
name: 'vite-plugin',
apply(config, { command }) {
// apply only on build but not for SSR
return command === 'build' && !config.build.ssr
},
/**
* Opens the app.html file and injects the link into the <head>
*/
buildStart() {
let appTemplate = 'src/app.html'
let link = `<link /></head>`
let appContent = readFileSync(appTemplate, 'utf-8')
let injectLink = appContent.replace(/<\/head>/, link)
writeFileSync(appTemplate, injectLink)
},
/**
* When building is done, opens the app.html file
* and removes the link from the <head>
*/
closeBundle() {
let appTemplate = 'src/app.html'
let link = `<link />`
let appContent = readFileSync(appTemplate, 'utf-8')
let removeLink = appContent.replace(link, '')
writeFileSync(appTemplate, removeLink)
}
}
}Comments and advice are welcome. |
Beta Was this translation helpful? Give feedback.
-
Hi,
Is it possible to inject data into the
<head></head>section during the build process, but from thevite-plugin?Specifically, I'm building a custom
vite-pluginfor SvelteKit static projects.Plugin will start only during build process (so when user want to generate static project for production, it would run
npm run buildand plugin will start only then). I will manage this by viteconfigResolvewith simple conditionally check inside of hook, nothing special.I just need to know how to access to SvelteKit html content during build so the plugin can automatically inject
<link>tag to<head>section for all pages.If it will help, this is a
manifest.jsonthat will be automatically generated with all dynamic content during thebuildprocess as it is not needed in dev mode.The tricky part is that the manifest need to be linked inside
<head>and I just need to inject that link through plugin.I want to simplify the use, so the user will install the plugin and activate it and that's it. Plug & Play.
Additional info:
layout.sveltebut then would need some conditionally check if is thedevorbuildmode, it can be messy or confusing for the user)Vite solution
I think that for Vite's vanilla projects, there is
transformIndexHtmlhook. So this would replace</head>end tag with new<link /></head>tags:Is something like this posible in SvelteKit but from
vite-plugin?Maybe some Vite or RollUp hook? I think that someone is already ask something similar on Github and Rich is reply that SvelteKit uses internal building system for static rendering in adapter-static.
Any advice?
Beta Was this translation helpful? Give feedback.
All reactions