Parcel support

[purcebr]

Hi!
Is there plan for supporting using parcels in the single-spa-angularjs package? I see how it might be done, but it doesn't look like it's implemented in this package yet?

[joeldenning]

You can always use parcels by calling the mountParcel function manually, but we also try to provide framework-specific components/directives that do that for you. You are right that we do not have a directive/component for AngularJS yet. Do you have interest in submitting a pull request adding support? If so, I can guide you on an implementation approach.

[purcebr]

Yes! I would very much be interested in adding support. As you recommend, I'll work on integrating it into my app with mountParcel function to get familiar with the concepts.

[joeldenning]

I think that an element directive would make the most sense, since they work in all versions of AngularJS, whereas AngularJS components only are supported in newer versions.

I think that modifying the bootstrap function might make the most sense:

single-spa-angularjs/src/single-spa-angularjs.js

Lines 51 to 53 in 372a5c7

	function bootstrap(opts) {
	return Promise.resolve();
	}

Here's a rough idea of what the implementation could look like

function bootstrap(opts, applicationProps) {
  return Promise.resolve().then(() => {
    const module = opts.angular.module('single-spa-angularjs', [])
    module.directive('singleSpaParcel', {
      restrict: 'E',
      template: "<div></div>",
      controller: ['$scope', '$element', function ($scope, $element) {
        const parcel = applicationProps.mountParcel($scope.parcelConfig, getParcelProps())

        $scope.$on('$destroy', () => {
          parcel.unmount()
        })

        $scope.$watch('props', () => {
          parcel.update(getParcelProps())
        })

        function getParcelProps() {
          return {
           domElement: $element[0],
            ...scope.props
          }
        }
      })]
    })
  })
}

This is a rough implementation and my AngularJS is a bit rusty, so I might be missing something.

[joeldenning]

A couple other notes from this:

1. We'd need to update teh documentation to instruct people to add the single-spa-angularjs module as an AngularJS dependency to their main module.
2. It is possible that calling opts.angular.module('single-spa-angularjs', []) inside of bootstrap is too late for Angular dependency injection to work. If that's the case, we'd want to move it into the singleSpaAngularJs function that creates the lifecycles. Doing it synchronously there would be early enough for most setups to work well.

[joeldenning]

I've implemented this in #55

[joeldenning]

This is released in https://github.com/single-spa/single-spa-angularjs/releases/tag/v4.2.0