Ability to control CSS and JS includes within HTML template #419
Labels
enhancement ✨
New feature or request
Comments
spacedawwwg
changed the title
|
How about this? import { escapeInject, injectAssets, dangerouslySkipEscape } from 'vite-plugin-ssr'
export { render }
function render(pageContext) {
return escapeInject`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
${injectAssets(() => pageContext.pageAssets.filter(asset => asset.type==='style'))}
<title>Vite App</title>
</head>
<body>
<div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
${injectAssets(() => pageContext.pageAssets.filter(asset => asset.type==='script'))}
</body>
</html>`
} |
|
This would be perfect! |
brillout
added a commit
that referenced
this issue
Nov 20, 2022
…com/injectPreloadAssets (closes #262, closes #419, closes #420, closes #510)
brillout
added a commit
that referenced
this issue
Nov 22, 2022
|
https://vite-plugin-ssr.com/preload Released in In case your company is up for it: https://github.com/sponsors/brillout. Some of what you said is still not possible though.
Why?
What's a use case for that? I originally went for the design of my previous comment, but it didn't work out for various reasons. |
brillout
added a commit
to Csszabi98/vite-plugin-ssr
that referenced
this issue
Mar 10, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
It would be nice to fine tune the positioning of asset includes within the HTML.
As a front-end developer, I want to be in charge, in very fine detail, where specific tags are included. Currently all CSS is prepended to the
<head>and scripts appended to<body>.In the case of CSS, the CSS its standard practice to be at least included after a charset meta tag.
In the case of Javascript, there could be blocking scripts that need to be included after the vite compiled injections.
Currently, we currently doing this via a "post-build" script that loops over all the statically generated files - but this is not suitable for any pages using SSR.
Suggestion
A template tag (e.g.
{{CSS_PLACEHOLDER}}{{JS_PLACEHOLDER}}) that can be utilised within the templates and if they do not exist, fall back to current implementation.The text was updated successfully, but these errors were encountered: