vite-plugin-single-spa
vite-plugin-single-spa copied to clipboard
WJSoftware
Does this work with sveltekit?
Thanks for your work on this plugin.
I'm using Vite + Sveltekit, and I'm thinking of disabling SSR for a single route, and then using single-spa/import-map to dynamically mount component(s) to the page. In essence, this route will use a micro-frontend, while the others will be handled by Sveltekit.
I will try it out using your plugin; however, do you foresee any issues?
Thank you!
I'll leave some notes here as I work through the experiment.
We could provide an option to specify the location to the index.html file, since SvelteKit's default location is src/app.html.
I seem to be able to inject the import map this way:
src/app.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
%import-map%
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
hooks.server.ts
import importMap from "./importMap.json";
import devImportMap from "./importMap.dev.json";
const buildImportMapScript = (map) => {
return `
<script type="importmap">
${JSON.stringify(map)}
</script>
`
}
export const handle: Handle = async ({ event, resolve }) => {
const response = await resolve(event, {
transformPageChunk: ({ html }) => html.replace('%import-map%', import.meta.env.DEV ? buildImportMapScript(devImportMap) : buildImportMapScript(importMap)),
});
return response;
};
This is mounting a test component (so far, without styles).
routes/(app)/queries/+page.ts
export const ssr = false;
export const prerender = false;
routes/(app)/queries/init.js
import { registerApplication, start } from 'single-spa';
registerApplication({
name: 'ace',
app: async () => await import("ace"),
activeWhen: location => location.pathname.startsWith('/queries'),
});
start();
routes/(app)/queries/+page.svelte
<script context="module">
import "./init.js";
</script>
<div id="editor-container" class="flex flex-col bg-white shadow-sm rounded-lg p-4 w-full h-full relative">
Hello, David.
Funny that you mention Sveltekit. I originally started wanting to use it for my ultimate goal at work. I desisted quickly because of two issues, but I cannot tell you that they are unsurpassable, so don't be discouraged. They might not even be related to this topic. I stopped because:
- I wanted to use SvelteKit with dynamic routes, which it can do of course, but then the resulting application cannot be a static web application. In other words: Building the Sveltekit project cannot be done with the static adapter.
-
single-spa, in its current state, does not play well with SSR.
I know! Both issues are exclusive: Do you want a static site or do you want an SSR site? Make up your mind, ha!
Because I was just starting experimentation, I quickly turned my eyes to using a Svelte project created with npm create vite@latest. After 3 or so months, I haven't revisited Sveltekit.
BTW, the SSR issue has an easy fix. I just don't know where I put that. It was an IF statement around the application registration call(s) to avoid double registration.
Please make a separate issue for each problem, so we can properly track them.
I have created two out of your coments.
Thanks!
Hey WebJose, sorry for the delay, I'm just getting back to this now. Cool, thank you for the additional context! I'll see what I can figure out!
Good news! I think I know now how to support SvelteKit, at least for root config projects. For MFE projects, I don't know if work is actually needed, to be honest. Maybe it works as-is? Will test whenever I have some time.