A non-working example with parcels.

[lencys]

In the repository https://github.com/lencys/poc-single-spa, I have 2 directories: ReactRoot and SvelteParcels. I can't get them to work according to your guide so that they do what you describe. Also, you wrote to me last time that it is enough to write links in the form of, for example, localhost:4101/spa.js and not localhost:4101/dist/spa.js. But that doesn't work for me. Would you be willing to look at my code and possibly guide me on the proper functioning of single spa with your plugin? Thank you.

[webJose]

Hello, @lencys. I'll have a look after work. Thanks for the interest.

[webJose]

Hello again. I created a pull request that corrects the issues you have in your reproduction.

Summary:

1. An incorrect file name.
2. Incorrect name in the call of cssLifecycleFactory.
3. Incorrect export: You were exporting an object named welcomeParcel but the code in the React project expected it to be a function.
4. Since you didn't have a function, you couldn't possibly have a correct implementation of the factory pattern. The PR exports the welcomeParcel() function correctly and when called it creates a new instance of the Svelte component as expected.
5. The default CSS strategy is singleMife, which is inadequate for parcels that are meant to be instantiated multiple times (like the example in the article).

[webJose]

Hello, @lencys. If your problem is resolved, please mark the answer for other users to see. Thanks.

[lencys]

Thank you, you are amazing. Everything works. I have another question. How to deal with components that are used in multiple applications. Should I make them as parcels and each parcel will be in a separate repository, or should all the parcels be in one? What is the best architecture for assembling a Micro Frontends app?

[webJose]

I don't think there is a correct answer here. I think either works, so choose according to your circumstances.

[lencys]

One more question. This implementation is for the root application, how is the implementation done into the application?

[webJose]

I don't understand your question. The root application is part of the application, and contains part of the implementation. Other MFE's provide the rest of the implementation, and I would call the sum of all these projects the "complete implementation". So I don't think I'm understanding your question.

[lencys]

When we look at the documentation from Single SPA, specifically at https://single-spa.js.org/docs/parcels-overview, they talk about two types of mounts: mountRootParcel and mountParcel. One is for the application and the other for the root. You used mountRootParcel. How to use mountParcel.

[webJose]

The "regular" mountParcel() function is passed by the single-spa library to any micro-frontend or parcel that is mounted as a component prop. The official documentation assumes that you have a root config project created with create-single-spa, which is something I don't do or have because of the reasons I explain in my series of articles.

This means that mountParcel() is only available to micro-frontend or parcels that get mounted. Is this clear enough?