Externalize inline JS in order to have tighter CSP

[AlanBreck]

I'm trying to use a hook to extract the inline scripts and externalize into a file in order to have a tighter CSP. I'm using a function modified from a suggestion by Rich Harris:

// HT: @Rich_Harris https://twitter.com/Rich_Harris/status/1422594746825023492/photo/1
/** @type {import('@sveltejs/kit').Handle} */
export async function handle ({ event, resolve }) {
    const response = await resolve(event, {
        transformPageChunk: ({ html, done }) => {
            if (!done) return html;
            return html.replace(
                /<script type="module".*?>([\s\S]+?)<\/script>/,
                (match, content) => {
                    const hash = get_hash(content);
    console.log(hash);
                    fs.writeFileSync(`build/js/boot/${hash}.js`, content);
                    return `<script type="module" src="/js/boot/${hash}.js"></script>`;
                }
            );
        }       
    });

    return response;
}

My problem is that as soon as this finishes running, all the files which were written to the build folder are blown away, ostensibly because the static assets doesn't have them and overwrites it.

I've tried adding them to static/js/boot instead, but while it creates them correctly, they don't copy over.

Any suggestions?

[AlanBreck]

Hoping to give this a bump.

[Rich-Harris]

Can you elaborate on where https://kit.svelte.dev/docs/configuration#csp falls short?

[AlanBreck]

Not sure that there are any inherent shortcomings, but my team's preference is definitely to keep scripts external as much as possible, so I'm hoping for parity with how we've had it post-upgrade.

Another interest is wanting to understand how hooks have changed, and what's preventing the original behavior from working.