Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does this work with sveltekit? #1

Open
davidhaley opened this issue Aug 22, 2023 · 9 comments
Open

Does this work with sveltekit? #1

davidhaley opened this issue Aug 22, 2023 · 9 comments
Labels
question Further information is requested

Comments

@davidhaley
Copy link

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!
@davidhaley
Copy link
Author

davidhaley commented Aug 22, 2023 •
edited
Loading

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.

@davidhaley
Copy link
Author

davidhaley commented Aug 22, 2023 •
edited
Loading

transformIndexHtml is not compatible with SvelteKit.

@davidhaley
Copy link
Author

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;
};

@davidhaley
Copy link
Author

davidhaley commented Aug 22, 2023 •
edited
Loading

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">

@webJose
Copy link
Contributor

webJose commented Aug 23, 2023

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:

  1. 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.
  2. 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.

@webJose
Copy link
Contributor

webJose commented Aug 23, 2023

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.

@webJose webJose mentioned this issue Aug 23, 2023
Open
@webJose
Copy link
Contributor

webJose commented Aug 23, 2023

Please make a separate issue for each problem, so we can properly track them.

I have created two out of your coments.

Thanks!

@webJose webJose mentioned this issue Aug 23, 2023
Closed
@webJose webJose added the question Further information is requested label Aug 23, 2023
@davidhaley
Copy link
Author

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!

@webJose
Copy link
Contributor

webJose commented Jun 17, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@davidhaley @webJose