I am working with SvelteKit v1.20.4 with Typescript.
I am trying to modify the HTML response for each incoming request in hooks.server.ts. I followed the docs walkthrough.
Here's how the src/hooks.server.ts looks like -
import type { Handle } from '@sveltejs/kit';
export const handle: Handle = async ({ event, resolve }) => {
const time = "time-" + new Date().getHours() // set up a custom class based on time of the day
console.log("run hooks.server.ts"); // called on every request
return await resolve(event, {
transformPageChunk: ({ html }) => {
console.log("Inside the transformPageChunk"); // not being called
return html.replace(`%time%`, time);
}
});
};
Here's what src/app.html looks like -
<html lang="en" class="%time%">
...
On every request to the server - the outer console.log executes printing run hooks.server.ts but the transformPageChunk callback does not execute.
I want to make sure that the resolve callback is executed on every request. Only on manually refreshing the page the resolve callback runs.
How to solve this issue?