feat: support function as options.template (#568)

Allow `template` to accept a function `(props: AppProps) => string` in
addition to a plain string. This enables dynamic template generation
based on single-spa props at mount time.

- Update `BaseSingleSpaAngularOptions` type to accept `string | ((props: AppProps) => string)`
- Call the function with `props` in `getContainerElementAndSetTemplate` if `template` is a function
- Update validation error message in `singleSpaAngular` to reflect both accepted types
- Update navbar example app to use the new function form

Author: arturovt

apps/navbar/src/main.single-spa.ts

@@ -10,7 +10,7 @@ const lifecycles = singleSpaAngular({
     const platformRef = platformBrowser(provideSingleSpaPlatform());
     return bootstrapApplication(AppComponent, appConfig, { platformRef });
   },
-  template: '<navbar-root />',
+  template: () => '<navbar-root />',
   NgZone: 'noop',
   Router,
   NavigationStart,

libs/single-spa-community-angular/internals/src/dom.ts

@@ -14,8 +14,12 @@ export function getContainerElementAndSetTemplate<T extends BaseSingleSpaAngular
     );
   }
 
+  // If the template is a function, we call it with the props to get the string template.
+  const template =
+    typeof options.template === 'function' ? options.template(props) : options.template;
+
   const containerElement = getContainerElement(domElementGetter, props);
-  containerElement.innerHTML = options.template;
+  containerElement.innerHTML = template;
   return containerElement;
 }
 

libs/single-spa-community-angular/internals/src/types.ts

@@ -4,7 +4,7 @@ import { ApplicationRef, NgModuleRef } from '@angular/core';
 export type DomElementGetter = (props: any) => HTMLElement;
 
 export interface BaseSingleSpaAngularOptions {
-  template: string;
+  template: string | ((props: AppProps) => string);
   domElementGetter?: DomElementGetter;
   bootstrapFunction(props: AppProps): Promise<NgModuleRef<any> | ApplicationRef>;
 }

libs/single-spa-community-angular/src/single-spa-angular.ts

@@ -31,8 +31,8 @@ export function singleSpaAngular<T>(userOptions: SingleSpaAngularOptions<T>): Li
     throw Error('single-spa-angular must be passed an options.bootstrapFunction');
   }
 
-  if (typeof options.template !== 'string') {
-    throw Error('single-spa-angular must be passed options.template string');
+  if (typeof options.template !== 'string' && typeof options.template !== 'function') {
+    throw Error('single-spa-angular must be passed options.template string or function');
   }
 
   if (!options.NgZone) {