Props are handled too simply

[Luke S. Phillips]

Currently this plugin takes the props and just makes them data of the root component, this is fine, but a bit simple for my needs. As an example, I use the props to deliver functional objects to the micro frontend that hide implementation detail of the shell e.g. a logger or an identity provider.

These function objects don't change and have no need to be reactive. Furthermore in Vue 3, due to how reactivity works, objects with methods on its prototype simply just break. It makes more sense for objects like these to be provided as props, or better yet as injectables (using provide).

Is it possible that we can introduce a new option for complex cases like these, e.g.

singleSpaVue({
    handleProps (props)
    {
        return {
            provide () {
                 return {
                     logger : props.logger
                 };
            },
            data () {
                return {
                    locale : props.locale
                };
            }
        };
    }
})

The plugin will take the result of this function and simply merge it into the application options that will be passed into Vue. If a handleProps function is not provided it will behave as normal.

The update lifecycle method would need to be a little smarter too by using vm.$data to derive the data keys that are actually reactive and only update those.

I'm happy to submit a PR, I just wanted my thought process to be validated before I dive into the code.

[Joel Denning]

Hi @lsphillips, I'm open to this change, as I don't see a reason to forbid transformation/processing of the single-spa props. The handleProps name matches the pattern set by handleInstance, which is good. I am happy to review a PR implementing it. Please submit a documentation PR for it, as well. The file to modify for the documentation is https://github.com/single-spa/single-spa.js.org/blob/master/website/versioned_docs/version-5.x/ecosystem-vue.md