Working example

[CarlOfHoly]

Is there a working example with a vite root config and vite parcel. I am looking for an example that includes routing and parcel integrations if possible.

[webJose]

Hello, Carl. I have not had time to create a comprehensive example. I do have one in the works, but it is not presentable yet. In the meantime, you should scout this project's dependents to see if anything there fits what you're looking for.

Regardless of what you find, you are welcome to try things out for yourself and post any questions or requests for help here in the Discussions section. I reply within 24 hours, as it is in my best interest for people to try the plug-in out and report bugs back to me. This makes my life easier, and it is fun for me, since I enjoy programming very much.

Getting Started

You say you want a Vite root config. No problem. I don't have one ready but any Vite + XXX project created with npm create vite@latest should work just fine. Want to get rid of the "+ XXX" (the framework) part? No problem! If a root config that has no framework is what you need, create a new Vite + Svelte project and get rid of all the Svelte things. I choose Svelte because it is very simple to clean up, probably more than most others. SolidJS is probably another good choice. After you remove the framework part, you can proceed with the vite-plugin-single-spa as per usual because the plug-in is framework-independent.

Parcels

Parcels are also super easy: Create a Vite + <Framework of choice>, add vite-plugin-single-spa and configure as mife as you would any other project and you can start coding your parcels. The only thing different is that you probably want to export more than one component. Maybe you want to export 2 or 3 pieces of UI from a single project. That's fine and doable. How? There are a few choices and honestly I don't know if one is better than the other.

Single Export File, Multiple Parcels

This way would involve having, say, spa.ts in the /src folder export single-spa lifecycle factory functions for each of the pieces of UI (parcels) that you want to expose. I say factories because in my experience, single-spa is in desperate need of the factory pattern.

Here's a Svelte sample (I love Svelte):

import MyParcelA from './lib/MyParcelA.svelte';
import MyParcelB from './lib/MyParcelB.svelte';
import MyParcelC from './lib/MyParcelC.svelte';
import { cssLifecycleFactory } from 'vite-plugin-single-spa/ex';
// @ts-expect-error
import singleSpaSvelte from 'single-spa-svelte';

const cssLc = cssLifecycleFactory('spa');

export function ParcelAFactory() {
    const lc = singleSpaSvelte({ component: MyParcelA });
    return {
        bootstrap: [cssLc.bootstrap, lc.bootstrap],
        mount: [cssLc.mount, lc.mount],
        unmount: [cssLc.unmount, lc.unmount],
        update: lc.update
    };
};

// Similar factories for MyParcelB and MyParcelC

How to Consume

Normally, the single-spa docs tell you to export the lifecycle directly. That doesn't work and doesn't scale. This is why we did factories. But then consumption is not how the docs tells us anymore. Refer to this issue I raised some time ago for a full example using the <Parcel> component available in single-spa-react. The process is rather simple: Instead of returning the result of the dynamic import() call, we dynamically import the module, get to the factory function of interest, and then return the result of calling said factory function. The linked issue shows this.

Multiple Export Files, One Parcel per Export File

The other way one can export parcels from a project is to creating multiple entry point files. You could create parcelA.ts, parcelB.ts and parcelC.ts in the /src folder and then pretty much repeat the code above but one parcel per file:

import MyParcelA from './lib/MyParcelA.svelte';
import { cssLifecycleFactory } from 'vite-plugin-single-spa/ex';
// @ts-expect-error
import singleSpaSvelte from 'single-spa-svelte';

const cssLc = cssLifecycleFactory('parcelA');

// Since there will only be one export in this file, you could opt to change the below to "export default function() {... }" instead.
export function ParcelAFactory() {
    const lc = singleSpaSvelte({ component: MyParcelA });
    return {
        bootstrap: [cssLc.bootstrap, lc.bootstrap],
        mount: [cssLc.mount, lc.mount],
        unmount: [cssLc.unmount, lc.unmount],
        update: lc.update
    };
};

Then you create the other entry points for parcels B and C. For this approach then we must deviate from the plug-in's default configuration: Now we have 3 entry points that must be specified in vite.config.ts:

...
return defineConfig({
    plugins: [svelte(), vitePluginSingleSpa({
        serverPort: 4111,
        spaEntryPoints: ['src/parcelA.ts', 'src/parcelB.ts', 'src/parcelC.ts']
    }],
...

Differences?

As far as recommending one or the other, I probably couldn't. I'll just state this fact: Multiple entry points will most likely create more JS and CSS splits during bundling.

[CarlOfHoly]

Thank you for your comprehensive response! The factory pattern combined with the consumption example was the missing piece in my puzzle. One last question, is there a recommended way of serving / registering another application when the user navigates to a route? Would you handle that through the factory pattern and do the routing through react-router-dom for example in the root vite application?

The Applications API shows from the documentation a perhaps different solution:

singleSpa.registerApplication(
  "appName",
  () => System.import("appName"),
  (location) => location.pathname.startsWith("appName"),
);```

[webJose]

The recommended thing to do from the single-spa team is:

A. Handle micro-frontend mounting and unmounting using single-spa's routing capabilities.
B. Handle parcel mounting and unmounting using whatever framework-specific router you have.

That's the recommendation, in a nutshell.