Add examples and/or documentation for inter-app communication

[joeldenning]

It's one of the most common questions that comes up, so we should address it more directly in documentation and possibly even single-spa-examples.

See #107 (comment)

[mbanting]

Could examples of communication from root application to child apps also be included, specifically during load and mount events? For example, this could be used to pass some initialization parameters from the root to the child app.

I was hoping it would be possible via the lifecycle events. A prop object is passed to the child apps via these lifecycle functions, but the only property in this object is childAppName. Since I couldn't find a way for the root app to specify additional properties, it doesn't seem like this is a possible using this method. For now we implemented a shared API to achieve this:

1. root application sets initialization values for child app
2. root application mounts child app
3. child app reads initialization values

Is there a better way of doing this?

[joeldenning]

Oo interesting, yeah there isn't a way to do that directly in single-spa, but I'm liking your proposed approach of how it could be built into the project. Were you thinking the root app would add additional props when calling declareChildApplication? Or perhaps a way to set props for all child applications at once? Also would those props need to change over time as apps are mounted, unmounted, and then remounted?

Interested to hear your ideas on it.

[mbanting]

Yes and yes!

I was thinking the framework could allow specifying props in declareChildApplication, supporting specific props per child application.

const props = {
  initMessage: "hello child app!"
}
declareChildApplication("childApplicationName", loadingFunction, activityFunction, props)

Then that could get merged into a single props object received by the child in its lifecycle functions

export function bootstrap(props) {
  return Promise
    .resolve()
    .then(() => {
      // This is where you do one-time initialization
      console.log('bootstrapped!')

      // Get the name
      console.log(props.childAppName) // will be "childApplicationName"

      // Get additional props
      console.log(props.initMessage) // will be "hello child app!"
    });
}

I could also see the need for these props to change over time, with the child app receiving the updated props in the other lifecycle functions, in particular mount. Not sure where the best place is for the root app, though, to update these props. Perhaps a new function is needed, like updateChildApplicationProps?

[joeldenning]

Circling back to this now and am thinking about implementing it soon. Also here's another idea for props, proposed by Eugenia W:

By the way, if you do decide to allow additional props, perhaps they could be used to pass the div element ID, rather than hardcoding it in the child app itself (or to override the hardcoded value, if needed)?

Which I think is an awesome idea

[mbanting]

Yes great idea! That's one of the initialization props I'm currently passing via that shared API I mentioned above. We're also specifying the child app's initial view, but that's for a more narrow use case.

[bellerus]

@mbanting Could you share how you're reading initialization values in the child app from the root that you mentioned above?

May need to do something similar. Your suggestion of passing down props into declareChildApplication would likely work for us too 👍

[mbanting]

Hi @bellerus, right now the root app is setting initialization values in global scope right before loading the child app. On mount, the child app reads them. Obviously not ideal, but it's getting us by for now.

[me-12]

We had the same issue, so I made a PR. Would be happy to get feedback:
#156

[me-12]

I have extended my example app with inter-app-communication. It got a bit complicated though. I have also realized that there are probably multiple solutions for communication between apps which depend on the specific use case.

In my example app I found a solution to my use case, which may or may not be exactly what you are looking for. In either case, I still hope it is helpful: https://github.com/me-12/single-spa-portal-example

[joeldenning]

Released custom props passed to lifecycle functions with https://github.com/CanopyTax/single-spa/releases/tag/v3.8.0

Closing this for now -- feel free to reopen for further discussion or questions.