gioboa / svelte-microfrontend-demo

Svelte+Vite with Module Federation is now possible
35 stars 9 forks source link

Question: sveltekit with routing? #7

Open gerhardcit opened 1 week ago

gerhardcit commented 1 week ago

Would it make sense to have a remote as a sveltekit app that uses static adapter? One can build sveltekit apps to run on a base "./" so you can mount it anywhere.. (theoretically)

(not sure if I'm smoking something, but it would open up a ton of options, especially if the sveltekit app is SSR and it has it's own api?)

If so? what would you expose to the federation.exposes property?

// vite.config.ts
import { federation } from "@module-federation/vite";
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        sveltekit(),
        federation({
            filename: "remoteEntry.js",
            name: "remote",
            exposes: {
                "./remote-app2": "./src/????? what will this be",
            },
            remotes: {},
        }),

    ],

    server: {
        port: 5000
    }
});
gioboa commented 1 week ago

Hi, I created this example for SvelteKit There are a lot of possibilities, you have to try to mix and match things

gerhardcit commented 1 week ago

excellent!.. thank you. this is the piece I was looking for. I trust other's will find value from it

exposes: {
   './remote-app': './src/routes/+page.svelte',
},

You are so right, "There are a lot of possibilities" Having vite supported in Module Federation has opened soooo many doors for us.

Support for "vite dev" is not there yet. Do you have insights to what it will take for that to work? (Technically you don't want to develop apps like that, but architectural prototyping would benefit greatly from that.

gerhardcit commented 1 week ago

If I may, (since we are on the subject), any idea what this would look like in svelte5?

I changed to

import { mount } from "svelte";
const app = await import('remote/remote-app');
  // new app.default({     svelte 4 used this
  mount(app, {
        target: remoteAppTarget,
      })

and to bind I use this:

{#if remoteAppTarget}
  <div ref={remoteAppTarget}></div>
{/if}

but I'm probably missing something obvious. Wonder if any one with svelte 5 expertise have some ideas?

my suspicion is snippets and @render might have be at play here?

gioboa commented 1 week ago

@gerhardcit would you like to drop a PR to use Svelte 5? I didn't deep dive into it yet

gioboa commented 1 week ago

Do you have insights to what it will take for that to work?

We are working to solve the issues of the SvelteKit example here Feel free to join the conversation there