Approach to embedding Kit

[iltimasd]

My primary question is what is the best approach to embedding SvelteKit into another page. I'm part of a team working to implement Svelte into our website, however we can only really do it in pieces and convert our site page-by-page.

We have a Svelte app embedded in another framework. In the template of the page holding the Svelte app, we have a div that we target using the client-side component api as well as a script tag that, on local points, to localhost:8000/build/build.js

We're looking to migrate to SvelteKit as this particular app has grown, however we're facing problems understanding a path forward to have SvelteKit live inside another page.

Currently I've prototyped 2 solutions

1. using hooks
2. using an iframe

Approach 1: Modify Bootstrap HTML to emulate targeting a div to hydrate with SK

Currently not working, but:

On the page, working off the original Svelte implementation, we have a script tag and target div.

{...}
<div id="#target">
<script type="module" src="http://localhost:8000/index.js" crossorigin=""></script>
{...}

On the SK side, we're using adapter-static and use hooks to convert the HTML with bootstrapping script to just be the JS content, so it can be used as the src for our script tag.

// src/hook.js
export async function handle({ event, resolve }) {
  const htmlToJs = ({ html }) => {
    return html
      .replace('<script type="module" data-hydrate="45h">', "")
      .replace("</script>", "")
      .replace('[data-hydrate="45h"]', "#target");
  };
  const response = await resolve(event, {
    ssr: false,
    transformPage: event.url.pathname.endsWith("/") ? htmlToJs : (x) => x,
  });
  if (event.url.pathname.endsWith("/")) {
    console.log("page");

    response.headers.set("content-type", "text/javascript");
  }

  return response;
}

Approach 2: use an iframe

This seems to work great, however i think SK being in an iframe breaks client-side routing and is doing browser controlled navigation.

Not much to say about the code still using adater-static and using just an iframe:

<iframe src=" http://localhost:8000">

I'm still working on seeing what the problem with CSR, but i also imagine I would need a layer between the top most window and the iframe to sync URL and Location History.

EDIT: still confirming whether or not iframe CSR is actually broken

In any case, if anyone has ideas on how to embed SK into a larger framework/page with CSR/SPA behavior would love some input or leads

[iltimasd]

I haven't really used GitHub discussions, but actually this one about micro-frontends (tbh the first time hearing the term) is pretty similar to what our problem is, we're a vertical dedicated to building a particular chunk of the site via a Svelte/SK app within a large ecosystem sharing the site with other teams.

[fdagostino]

Hi @iltimasd, how are you? Have you made any progress on this? I'm facing a similar situation!

[t2y]

@iltimasd Hi, I'm also interested in this topic.

I tried to embed a kit app within another kit app. It works with physical appearance but doesn't work with living the scripts together. I made a sample application repository as below.

• https://github.com/t2y/sveltekit-apps-integration-sample