Embedding Hype documents in Svelte/SvelteKit

Browser & Compatibility
1

Hi, I was wondering there's any examples or proven path for embedding Hype documents in Svelte/SveltKit apps ?

Is there anything that would stop this from working if I follow the standard way to embed Hype into a page.

2

Not an answer to your question but embedding Svelte components in Hype projects has worked well in all my attempts to date. It is particularly helpful in the way it allows you to bundle and compartmentalize HTML, CSS & JS into a single package that is easily inserted into an empty Hype element.

It’s also important to distinguish between Svelte, which is a component framework, and SvelteKit, which is an application framework. In my mind, embedding Svelte components in Hype projects is potentially very useful. But it is not obvious to me why you would want to insert a SvelteKit app inside a Hype project.

1 Like
3

I just had to figure this out. I first tried just pasting in the content of the body of the exported html file and putting the .hyperesources in the project 'static' folder. This worked while I was developing locally. However, it didn't work for the build, the Hype javascript wouldn't execute. What did work for me was loading the Hype javascript in the onMount function like so:

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

	onMount(() => {
		// Load the Hype document script
		const script = document.createElement('script');
		script.src = '/mobile-show-comments.hyperesources/mobileshowcomments_hype_generated_script.js';
		script.async = true;
		document.body.appendChild(script);
	});
</script>
3 Likes