Using SvelteKit with external templates

[fboulnois]

I have a SvelteKit app with the following route at hello.svelte:

<script>
	export const hydrate = false;
</script>

<svelte:head>
	<title>hello world</title>
</svelte:head>

<div>hello [[ name ]] world</div>

I compile this app using the static adapter and deploy it using a webserver in Rust, which replaces [[ name ]] dynamically with a string such as foobar, so the output becomes hello foobar world.

Since hydrate = false, I would expect this content to not be overwritten by Sveltekit, but during the call to initialize in start.js, the content is overwritten by [[ name ]] again.

This issue can be simulated if you run a SvelteKit app in dev mode, set a breakpoint on const file = "src/routes/hello.svelte"; in hello.svelte and replace the div content with hello foobar world. When you continue script execution, the div content is ultimately replaced by hello [[ name ]] world again.

I have a workaround which looks like this:

<script>
	import { beforeUpdate, onMount } from 'svelte';

	let div;
	let txt;
	let tid = 'template';

	beforeUpdate(async () => {
		txt = document.getElementById(tid).textContent;
	});

	onMount(async () => {
		div.textContent = txt;
	});
</script>

<svelte:head>
	<title>hello world</title>
</svelte:head>

<div id={tid} bind:this={div}>hello [[ name ]] world</div>

This works, however it seems hacky. Is there another way to do this?

[b2m9]

Not sure whether it makes any difference in your scenario, but to deactivate hydration for a page, you must use context="module" like this:

<script context="module">
  export const hydrate = false;
</script>

[fboulnois]

Interesting. That seems to work if hello.svelte doesn't import any other components and is itself not imported as a component, which my example doesn't include. I'm wondering how to solve the more general case where it would import other components / is imported as a component.

[b2m9]

Note that you can only deactivate hydration for pages, not components or layouts.