Docs are missing new script injection tools

[fnimick]

Change Type

Addition

Proposed Changes

Should ideally have an example of how to do this in hooks.server.ts, and add docs to the new generateSetInitialModeExpression function.

I can take a stab at this later if you'd like.

[huntabyte]

I was actually thinking of creating a more complete helper that can just be dropped into the sequence. it would use generateSetInitialModeExpression under the hood but would take care of the other stuff.

If you'd like to take a stab at that given you have experience implementing it in user land, that would be great!

[fnimick]

@huntabyte well, it requires manual changes to app.html, so I'm not sure a "drop this in your hook sequence" is a great UX since the failure mode when you haven't modified it is not obvious.

Out of curiosity, are there any other use cases that you know of for JS injection into the initially rendered script, like the FOUC here? I wonder if there should be a community standard for these things that you could then use in a hook like this one, with a single app.html modification for all of them.

[huntabyte]

Why would it require manual changes to app.html? We should be able to add the appropriate class/theme via the html prop on the transformPageChunk no?

[fnimick]

I don't think that works, since we need to inject javascript to run to read the client's local storage and set the class correctly, no? We don't have access to this at initial render time.

My solution is to add the following to app.html:

    <script nonce="%sveltekit.nonce%">
      %modewatcher.snippet%
    </script>

And the following server-side hook:

const injectHeadScripts: Handle = async ({ event, resolve }) => {
  return resolve(event, {
    transformPageChunk: ({ html }) => {
      return html.replace("%modewatcher.snippet%", generateSetInitialModeExpression({}));
    },
  });
};

[huntabyte]

We'd use a cookie for the server side instead.

[huntabyte]

@fnimick does the solution you proposed work for you consistently? As in you don't have FOUC or anything of that sort?

[jprinaldi]

@huntabyte I've been using this solution for several projects and so far it's been working flawlessly.

[huntabyte]

Awesome, will add it to the docs then!