Render Code Component using Plasmic ComponentLoader

Developer Support
1

Hi, I would like to ask about the right way to use Code Component with PlasmicComponent. I have created a few Code Components which I would like to share to multiple services.

PLASMIC.registerComponent(HelloWorld, {
    name: 'SharedAuthentication',
    displayName: 'Shared Authentication',
});

<PlasmicComponent component="SharedAuthentication" componentProps={{...}} />

However, I kept getting Component not found with name "SharedAuthentication". I can only make it work by inserting the SharedAuthentication into another component in Plasmic (like AuthenticationWrapper) then load that component like <PlasmicComponent component="AuthenticationWrapper" /> but this is very time consuming as I will have to duplicate this Wrapper component in all services I am building, also I will have to pass a lot of props from the Wrapper into the SharedAuthentication component.

Can someone advise me on how to use Code Component with Loader?

Thank you

2

@jack_vo PlasmicComponent can only load components created in a Plasmic project.

If you just want to register your own code components, you should just render them directly:

<HelloWorld/>

Let me know if that helps.

3

Hi @yang , as usual, thank you for your quick reply. I really appreciate that.
It’s not a blocker but IMO that will be a nice to have feature in the future if possible.

I was testing a shared (micro-frontend) services package built with Plasmic and that package would be reused in different apps.
The concept here is:

  • Using Plasmic to control all the UI states of shared services
  • Create Code component out of those Plasmic UI Component to add the code logic. This way UI of each Code Component can be updated directly through Plasmic easily.
  • Import this Shared service into other apps and start consuming them.
    This way I will not have to publish another private node_module just to consume my Code Component in another codebase.

It’s not really a blocker as I can still reuse my Code Component inside other project by wrapping them in another component.
I just wanted to understand the limitation of PlasmicComponent and you gave e the answer :slight_smile:
Thanks