Add support for FUOC prevention script generation as string for injection in hooks.server.ts
#92
Labels
enhancement
New feature or request
Comments
|
Great find! This might solve the issue of SvelteKit's CSP rules clobbering mode-watcher's inline hash. I've had to choose between living with FOUC or disabling |
|
Usage example in const injectHeadScripts: Handle = async ({ event, resolve }) => {
return resolve(event, {
transformPageChunk: ({ html }) => {
return html.replace("%modewatcher.snippet%", generateSetInitialModeExpression({}));
},
});
};
export const handle = sequence(
injectHeadScripts,
// .....
); |
|
Working on it! Testing some ideas around a |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the feature in detail (code, mocks, or screenshots encouraged)
Per Svelte team, a potential way to handle adding library scripts to the initial page load
<head>is to add a script block withnonce="%sveltekit.nonce%"in your app.html, then inject the library content into that script block in a server hook for rendering. This would avoid the need to manually manipulate CSP response headers to keep a generated nonce in sync with the mode watcher nonce prop, as suggested in #86It would be great to provide a function that would generate and return the script content as a string for use in such a way. (and also add a prop to disable the addition of the FOUC prevention script in
svelte:headin this case, since it will already be added through a hook)What type of pull request would this be?
Enhancement
Provide relevant links or additional information.
I already took a first pass at this in #89
The text was updated successfully, but these errors were encountered: