piral-ng 0.15.0-beta.4803 → 0.15.0-beta.4812

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-ng",
-  "version": "0.15.0-beta.4803",
+  "version": "0.15.0-beta.4812",
   "description": "Plugin for integrating Angular components in Piral.",
   "keywords": [
     "piral",
@@ -79,7 +79,7 @@
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
-    "piral-core": "0.15.0-beta.4803",
+    "piral-core": "0.15.0-beta.4812",
     "rxjs": "^7.3.0"
   },
   "peerDependencies": {
@@ -90,5 +90,5 @@
     "@angular/router": "^2.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
     "rxjs": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
-  "gitHead": "38c4b5994e2235e20d6aa6d4b188d98a5cedf85c"
+  "gitHead": "96956ad19ce349b35acd7992979466f911d33156"
 }

package/src/RoutingService.ts

@@ -2,6 +2,34 @@ import type { Subscription } from 'rxjs';
 import type { ComponentContext, Disposable } from 'piral-core';
 import { Inject, Injectable, NgZone, OnDestroy, Optional } from '@angular/core';
 import { NavigationError, Router, Scroll } from '@angular/router';
+import { ɵBrowserPlatformLocation } from '@angular/common';
+
+const noop = function () {};
+
+// deactivates the usual platform behavior; all these operations are performed via the RoutingService
+// to avoid any conflict, e.g., double-booking URL changes in React and Angular
+ɵBrowserPlatformLocation.prototype.pushState = noop;
+ɵBrowserPlatformLocation.prototype.replaceState = noop;
+ɵBrowserPlatformLocation.prototype.forward = noop;
+ɵBrowserPlatformLocation.prototype.back = noop;
+ɵBrowserPlatformLocation.prototype.historyGo = noop;
+
+function normalize(url: string) {
+  const search = url.indexOf('?');
+  const hash = url.indexOf('#');
+
+  if (search !== -1 || hash !== -1) {
+    if (search === -1) {
+      return url.substring(0, hash);
+    } else if (hash === -1) {
+      return url.substring(0, search);
+    } else {
+      return url.substring(0, Math.min(search, hash));
+    }
+  }
+
+  return url;
+}
 
 @Injectable()
 export class RoutingService implements OnDestroy {
@@ -29,23 +57,27 @@ export class RoutingService implements OnDestroy {
         const path = location.pathname;
 
         if (!this.invalidRoutes.includes(path)) {
-          const url = path + location.search + location.hash;
+          const url = `${path}${location.search}${location.hash}`;
           this.zone.run(() => this.router.navigateByUrl(url));
         }
       });
 
       this.subscription = this.router.events.subscribe((e: NavigationError | Scroll) => {
         if (e instanceof NavigationError) {
-          const path = e.url;
+          const routerUrl = e.url;
+          const path = normalize(routerUrl);
+          const locationUrl = nav.url;
 
           if (!this.invalidRoutes.includes(path)) {
             this.invalidRoutes.push(path);
           }
 
-          nav.push(path);
+          if (routerUrl !== locationUrl) {
+            nav.push(routerUrl);
+          }
         } else if (e.type === 15) {
           // consistency check to avoid #535 and other Angular-specific issues
-          const locationUrl = nav.path;
+          const locationUrl = nav.url;
           const routerUrl = e.routerEvent.url;
 
           if (routerUrl !== locationUrl) {

package/src/bootstrap.ts

@@ -1,28 +1,55 @@
 import type { BaseComponentProps, ComponentContext, Disposable, PiletApi } from 'piral-core';
 import type { BehaviorSubject } from 'rxjs';
-import type { PrepareBootstrapResult } from './types';
+import type { Type } from '@angular/core';
+import type { NgLazyType, PrepareBootstrapResult } from './types';
+import { createModuleInstance, getModuleInstance, defineModule, findModule, activateModuleInstance } from './module';
+import { getAnnotations, hasSelector } from './utils';
 import { startup } from './startup';
-import { getAnnotations } from './utils';
-import { createModuleInstance, getModuleInstance, defineModule } from './module';
-
-export function prepareBootstrap(moduleOrComponent: any, piral: PiletApi): PrepareBootstrapResult {
-  const [annotation] = getAnnotations(moduleOrComponent);
-  const standalone = annotation?.standalone;
-
-  // first way is to directly use a module, which is the legacy way
-  // second way is to find a previously defined Angular module
-  if (annotation && annotation.bootstrap) {
-    // usually contains things like imports, exports, declarations, ...
-    const [component] = annotation.bootstrap;
-    annotation.exports = [component];
-    defineModule(moduleOrComponent);
-    return [...getModuleInstance(component, standalone, piral), component];
+
+export async function prepareBootstrap(
+  moduleOrComponent: Type<any> | NgLazyType,
+  piral: PiletApi,
+): Promise<PrepareBootstrapResult> {
+  if ('module' in moduleOrComponent && typeof moduleOrComponent.module === 'function') {
+    if (!(moduleOrComponent.state.current instanceof Promise)) {
+      moduleOrComponent.state.current = moduleOrComponent.module().then((result) => {
+        if (typeof result !== 'object' || !('default' in result)) {
+          throw new Error('The lazy loaded module does not `default` export a NgModule class.');
+        }
+
+        defineModule(result.default, moduleOrComponent.opts);
+        return findModule(result.default);
+      });
+    }
+
+    const moduleDef = await moduleOrComponent.state.current;
+    const { components } = moduleDef;
+    const component = components.find((m) => hasSelector(m, moduleOrComponent.selector));
+
+    if (!component) {
+      throw new Error(`No component matching the selector "${moduleOrComponent.selector}" has been found.`);
+    }
+
+    return [...activateModuleInstance(moduleDef, piral), component];
   } else {
-    // usually contains things like selector, template or templateUrl, changeDetection, ...
-    const result =
-      getModuleInstance(moduleOrComponent, standalone, piral) ||
-      createModuleInstance(moduleOrComponent, standalone, piral);
-    return [...result, moduleOrComponent];
+    const [annotation] = getAnnotations(moduleOrComponent);
+    const standalone = annotation?.standalone;
+
+    // first way is to directly use a module, which is the legacy way
+    // second way is to find a previously defined Angular module
+    if (annotation && annotation.bootstrap) {
+      // usually contains things like imports, exports, declarations, ...
+      const [component] = annotation.bootstrap;
+      annotation.exports = [component];
+      defineModule(moduleOrComponent);
+      return [...getModuleInstance(component, standalone, piral), component];
+    } else {
+      // usually contains things like selector, template or templateUrl, changeDetection, ...
+      const result =
+        getModuleInstance(moduleOrComponent, standalone, piral) ||
+        createModuleInstance(moduleOrComponent, standalone, piral);
+      return [...result, moduleOrComponent];
+    }
   }
 }
 

package/src/converter.ts

@@ -1,5 +1,6 @@
 import type { ForeignComponent, BaseComponentProps, Disposable } from 'piral-core';
-import type { NgModuleDefiner, PrepareBootstrapResult } from './types';
+import type { Type } from '@angular/core';
+import type { NgLazyType, NgModuleDefiner, PrepareBootstrapResult } from './types';
 import { BehaviorSubject } from 'rxjs';
 import { NgExtension } from './NgExtension';
 import { enqueue } from './queue';
@@ -22,14 +23,10 @@ interface NgState<TProps> {
 
 export function createConverter(_: NgConverterOptions = {}): NgConverter {
   const registry = new Map<any, PrepareBootstrapResult>();
-  const convert = <TProps extends BaseComponentProps>(component: any): ForeignComponent<TProps> => ({
+  const convert = <TProps extends BaseComponentProps>(component: Type<any> | NgLazyType): ForeignComponent<TProps> => ({
     mount(el, props, ctx, locals: NgState<TProps>) {
       locals.active = true;
 
-      if (!registry.has(component)) {
-        registry.set(component, prepareBootstrap(component, props.piral));
-      }
-
       if (!locals.props) {
         locals.props = new BehaviorSubject(props);
       }
@@ -39,7 +36,15 @@ export function createConverter(_: NgConverterOptions = {}): NgConverter {
       }
 
       locals.queued = locals.queued.then(() =>
-        enqueue(() => locals.active && bootstrap(registry.get(component), el, locals.props, ctx)),
+        enqueue(async () => {
+          if (!registry.has(component)) {
+            registry.set(component, await prepareBootstrap(component, props.piral));
+          }
+
+          if (locals.active) {
+            bootstrap(registry.get(component), el, locals.props, ctx);
+          }
+        }),
       );
     },
     update(el, props, ctx, locals: NgState<TProps>) {
@@ -47,7 +52,7 @@ export function createConverter(_: NgConverterOptions = {}): NgConverter {
     },
     unmount(el, locals: NgState<TProps>) {
       locals.active = false;
-      locals.queued = locals.queued.then((dispose) => dispose && dispose());
+      locals.queued = locals.queued.then((dispose) => dispose && enqueue(dispose));
     },
   });
   convert.defineModule = defineModule;

package/src/module.ts

@@ -11,6 +11,7 @@ import {
   NgModule,
   NgZone,
 } from '@angular/core';
+import { teardown } from './startup';
 import { RoutingService } from './RoutingService';
 import { SharedModule } from './SharedModule';
 import { findComponents, getAnnotations } from './utils';
@@ -78,21 +79,29 @@ function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) {
           this.refs.splice(i, 1);
         }
       }
+
+      if (this.refs.length === 0) {
+        teardown(BootstrapModule);
+      }
     }
   }
 
   return BootstrapModule;
 }
 
-export function getModuleInstance(component: any, standalone: boolean, piral: PiletApi): ModuleInstanceResult {
+export function activateModuleInstance(moduleDef: ModuleDefinition, piral: PiletApi): ModuleInstanceResult {
+  if (!moduleDef.active) {
+    moduleDef.active = instantiateModule(moduleDef, piral);
+  }
+
+  return [moduleDef.active, moduleDef.opts];
+}
+
+export function getModuleInstance(component: any, standalone: boolean, piral: PiletApi) {
   const [moduleDef] = availableModules.filter((m) => m.components.includes(component));
 
   if (moduleDef) {
-    if (!moduleDef.active) {
-      moduleDef.active = instantiateModule(moduleDef, piral);
-    }
-
-    return [moduleDef.active, moduleDef.opts];
+    return activateModuleInstance(moduleDef, piral);
   }
 
   if (process.env.NODE_ENV === 'development') {
@@ -126,12 +135,27 @@ export function createModuleInstance(component: any, standalone: boolean, piral:
   return getModuleInstance(component, standalone, piral);
 }
 
+export function findModule(module: any) {
+  return availableModules.find(m => m.module === module);
+}
+
 export function defineModule(module: any, opts: NgOptions = undefined) {
-  const [annotation] = getAnnotations(module);
-  availableModules.push({
-    active: undefined,
-    components: findComponents(annotation.exports),
-    module,
-    opts,
-  });
+  if (typeof module !== 'function') {
+    const [annotation] = getAnnotations(module);
+    availableModules.push({
+      active: undefined,
+      components: findComponents(annotation.exports),
+      module,
+      opts,
+    });
+  } else {
+    const state = {
+      current: undefined,
+    };
+
+    return (selector: string) => ({
+      component: { selector, module, opts, state },
+      type: 'ng' as const,
+    });
+  }
 }

package/src/queue.ts

@@ -1,6 +1,6 @@
 let queue = Promise.resolve();
 
-export function enqueue<T>(callback: () => Promise<T>) {
+export function enqueue<T>(callback: () => T | Promise<T>) {
   const next = queue.then(callback);
   queue = next.then(() => {});
   return next;

package/src/startup.ts

@@ -1,9 +1,9 @@
 import type { ComponentContext } from 'piral-core';
 import type { NgOptions } from './types';
-import { enableProdMode, NgModuleRef, NgZone } from '@angular/core';
+import { enableProdMode, NgModuleRef, NgZone, PlatformRef } from '@angular/core';
 import { APP_BASE_HREF } from '@angular/common';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { getNgVersion } from './utils';
+import { getId, getNgVersion } from './utils';
 
 function getVersionHandler(versions: Record<string, () => void>) {
   const major = getNgVersion();
@@ -11,10 +11,60 @@ function getVersionHandler(versions: Record<string, () => void>) {
   return versions[version];
 }
 
-const runningModules: Array<[any, NgModuleInt]> = [];
+const runningModules: Array<[any, NgModuleInt, PlatformRef]> = [];
+
+function startNew(BootstrapModule: any, context: ComponentContext, ngOptions?: NgOptions) {
+  const path = context.publicPath || '/';
+  const platform = platformBrowserDynamic([
+    { provide: 'Context', useValue: context },
+    { provide: APP_BASE_HREF, useValue: path },
+  ]);
+  const id = getId();
+  const zoneIdentifier = `piral-ng:${id}`;
+
+  // This is a hack, since NgZone doesn't allow you to configure the property that identifies your zone.
+  // See:
+  // - https://github.com/PlaceMe-SAS/single-spa-angular-cli/issues/33
+  // - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L144
+  // - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L257
+  // @ts-ignore
+  NgZone.isInAngularZone = () => window.Zone.current._properties[zoneIdentifier] === true;
+
+  return platform
+    .bootstrapModule(BootstrapModule, ngOptions)
+    .catch((err) => console.log(err))
+    .then((instance: NgModuleInt) => {
+      if (instance) {
+        const zone = instance.injector.get(NgZone);
+        // @ts-ignore
+        const z = zone?._inner ?? zone?.inner;
+
+        if (z && '_properties' in z) {
+          z._properties[zoneIdentifier] = true;
+        }
+
+        runningModules.push([BootstrapModule, instance, platform]);
+      }
+
+      return instance;
+    });
+}
 
 export type NgModuleInt = NgModuleRef<any> & { _destroyed: boolean };
 
+export function teardown(BootstrapModule: any) {
+  const runningModuleIndex = runningModules.findIndex(([ref]) => ref === BootstrapModule);
+
+  if (runningModuleIndex !== -1) {
+    const [, , platform] = runningModules[runningModuleIndex];
+    runningModules.splice(runningModuleIndex, 1);
+
+    if (!platform.destroyed) {
+      platform.destroy();
+    }
+  }
+}
+
 export function startup(
   BootstrapModule: any,
   context: ComponentContext,
@@ -23,44 +73,16 @@ export function startup(
   const runningModule = runningModules.find(([ref]) => ref === BootstrapModule);
 
   if (runningModule) {
-    const [, instance] = runningModule;
-    return Promise.resolve(instance);
-  } else {
-    const path = context.publicPath || '/';
-    const platform = platformBrowserDynamic([
-      { provide: 'Context', useValue: context },
-      { provide: APP_BASE_HREF, useValue: path },
-    ]);
-    const id = Math.random().toString(36);
-    const zoneIdentifier = `piral-ng:${id}`;
-
-    // This is a hack, since NgZone doesn't allow you to configure the property that identifies your zone.
-    // See:
-    // - https://github.com/PlaceMe-SAS/single-spa-angular-cli/issues/33
-    // - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L144
-    // - https://github.com/angular/angular/blob/a14dc2d7a4821a19f20a9547053a5734798f541e/packages/core/src/zone/ng_zone.ts#L257
-    // @ts-ignore
-    NgZone.isInAngularZone = () => window.Zone.current._properties[zoneIdentifier] === true;
-
-    return platform
-      .bootstrapModule(BootstrapModule, ngOptions)
-      .catch((err) => console.log(err))
-      .then((instance: NgModuleInt) => {
-        if (instance) {
-          const zone = instance.injector.get(NgZone);
-          // @ts-ignore
-          const z = zone?._inner ?? zone?.inner;
-
-          if (z && '_properties' in z) {
-            z._properties[zoneIdentifier] = true;
-          }
-
-          runningModules.push([BootstrapModule, instance]);
-        }
+    const [, instance, platform] = runningModule;
 
-        return instance;
-      });
+    if (platform.destroyed) {
+      teardown(BootstrapModule);
+    } else {
+      return Promise.resolve(instance);
+    }
   }
+
+  return startNew(BootstrapModule, context, ngOptions);
 }
 
 if (process.env.NODE_ENV === 'development') {

package/src/types.ts

@@ -1,5 +1,6 @@
 import type { PlatformRef, NgModuleRef } from '@angular/core';
 import type { ForeignComponent } from 'piral-core';
+import type { Type } from '@angular/core';
 
 declare module 'piral-core/lib/types/custom' {
   interface PiletCustomApi extends PiletNgApi {}
@@ -23,6 +24,24 @@ export type PrepareBootstrapResult = [...ModuleInstanceResult, any];
 
 export type NgModuleInt = NgModuleRef<any> & { _destroyed: boolean };
 
+/**
+ * Gives you the ability to use a component from a lazy loaded module.
+ */
+export interface NgComponentLoader {
+  /**
+   * Uses a component from a lazy loaded module.
+   * @param selector The selector defined for the component to load.
+   */
+  (selector: string): NgComponent;
+}
+
+export interface NgLazyType {
+  selector: string;
+  module: () => Promise<{ default: Type<any> }>;
+  opts: NgOptions;
+  state: any;
+}
+
 /**
  * Represents the interface implemented by a module definer function.
  */
@@ -32,14 +51,21 @@ export interface NgModuleDefiner {
    * @param ngModule The module to use for running Angular.
    * @param opts The options to pass when bootstrapping.
    */
-  (module: any, opts?: NgOptions): void;
+  <T>(module: Type<T>, opts?: NgOptions): void;
+  /**
+   * Defines the module to lazy load for bootstrapping the Angular pilet.
+   * @param getModule The module lazy loader to use for running Angular.
+   * @param opts The options to pass when bootstrapping.
+   * @returns The module ID to be used to reference components.
+   */
+  <T>(getModule: () => Promise<{ default: Type<T> }>, opts?: NgOptions): NgComponentLoader;
 }
 
 export interface NgComponent {
   /**
    * The component root.
    */
-  component: any;
+  component: Type<any> | NgLazyType;
   /**
    * The type of the Angular component.
    */
@@ -62,7 +88,7 @@ export interface PiletNgApi {
    * @param component The component root.
    * @returns The Piral Ng component.
    */
-  fromNg(component: any): NgComponent;
+  fromNg<T>(component: Type<T>): NgComponent;
   /**
    * Angular component for displaying extensions of the given name.
    */

package/src/utils.ts

@@ -12,6 +12,10 @@ export interface NgAnnotation {
   selector: string;
 }
 
+export function getId() {
+  return Math.random().toString(36);
+}
+
 export function getNgVersion() {
   return VERSION.major || VERSION.full.split('.')[0];
 }
@@ -39,6 +43,11 @@ export function getAnnotations(component: any): Array<NgAnnotation> {
   return annotations || [];
 }
 
+export function hasSelector(component: any, selector: string) {
+  const [annotation] = getAnnotations(component);
+  return annotation && annotation.selector === selector;
+}
+
 export function findComponents(exports: Array<any>): Array<any> {
   const components = [];