piral-ng 1.0.0-pre.2196 → 1.0.0

package/src/RoutingService.ts

@@ -0,0 +1,114 @@
+import type { Subscription } from 'rxjs';
+import type { ComponentContext, Disposable } from 'piral-core';
+import { Inject, Injectable, NgZone, OnDestroy, Optional } from '@angular/core';
+import { NavigationError, NavigationStart, Router, Scroll } from '@angular/router';
+import { BrowserPlatformLocation as ɵBrowserPlatformLocation } from '@angular/common';
+
+let skipNavigation = false;
+const noop = function () {};
+const navigateByUrl = Router.prototype.navigateByUrl;
+
+// 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;
+
+// required to detect / react to hidden URL change (see #554 for details)
+Router.prototype.navigateByUrl = function (url, extras) {
+  skipNavigation = extras?.skipLocationChange ?? false;
+  const result = navigateByUrl.call(this, url, extras);
+  skipNavigation = false;
+  return result;
+};
+
+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 {
+  private dispose: Disposable | undefined;
+  private subscription: Subscription | undefined;
+  private invalidRoutes: Array<string> = [];
+
+  constructor(
+    @Inject('Context') public context: ComponentContext,
+    @Optional() private router: Router,
+    @Optional() private zone: NgZone,
+  ) {
+    if (this.router) {
+      this.router.errorHandler = (error: Error) => {
+        if (error.message.match('Cannot match any routes')) {
+          // ignore this special error
+          return undefined;
+        }
+        throw error;
+      };
+
+      const skipIds: Array<number> = [];
+      const nav = this.context.navigation;
+
+      this.dispose = nav.listen(({ location }) => {
+        const path = location.pathname;
+
+        if (!this.invalidRoutes.includes(path)) {
+          const url = `${path}${location.search}${location.hash}`;
+          this.zone.run(() => navigateByUrl.call(this.router, url));
+        }
+      });
+
+      this.subscription = this.router.events.subscribe((e: NavigationError | NavigationStart | Scroll) => {
+        if (e instanceof NavigationError) {
+          const routerUrl = e.url;
+          const path = normalize(routerUrl);
+          const locationUrl = nav.url;
+
+          if (!this.invalidRoutes.includes(path)) {
+            this.invalidRoutes.push(path);
+          }
+
+          if (routerUrl !== locationUrl) {
+            nav.push(routerUrl);
+          }
+        } else if (e.type === 0 && skipNavigation) {
+          skipIds.push(e.id);
+        } else if (e.type === 15) {
+          const index = skipIds.indexOf(e.routerEvent.id);
+
+          if (index === -1) {
+            // consistency check to avoid #535 and other Angular-specific issues
+            const locationUrl = nav.url;
+            const routerUrl = e.routerEvent.url;
+
+            if (routerUrl !== locationUrl) {
+              nav.push(routerUrl);
+            }
+          } else {
+            skipIds.splice(index, 1);
+          }
+        }
+      });
+    }
+  }
+
+  ngOnDestroy() {
+    this.dispose?.();
+    this.subscription?.unsubscribe();
+  }
+}

package/src/bootstrap.ts

@@ -1,118 +1,71 @@
-import { NgModule, NgModuleRef } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BaseComponentProps } from 'piral-core';
+import type { BaseComponentProps, ComponentContext, Disposable, PiletApi } from 'piral-core';
+import type { BehaviorSubject } from 'rxjs';
+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';
 
-function sanatize(id: string) {
-  return id.replace(/\W/g, '_');
-}
-
-function getPlatformProps(context: any, props: any) {
-  return [
-    { provide: 'Props', useValue: props },
-    { provide: 'Context', useValue: context },
-  ];
-}
-
-function setComponentSelector(component: any, id: string) {
-  const annotations = component && component.__annotations__;
-  const annotation = annotations?.[0];
-
-  if (annotation && !annotation.selector) {
-    annotation.selector = `#${id}`;
-  }
-}
+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.');
+        }
 
-function startup<T>(context: any, props: T, BootstrapModule: any, node: HTMLElement) {
-  const values = getPlatformProps(context, props);
-  const platform = platformBrowserDynamic(values);
+        defineModule(result.default, moduleOrComponent.opts);
+        return findModule(result.default);
+      });
+    }
 
-  return platform
-    .bootstrapModule(BootstrapModule)
-    .catch((err) => console.log(err))
-    .then((bootstrapModule) => {
-      node.removeAttribute('id');
-      return bootstrapModule;
-    });
-}
+    const moduleDef = await moduleOrComponent.state.current;
+    const { components } = moduleDef;
+    const component = components.find((m) => hasSelector(m, moduleOrComponent.selector));
 
-export function bootstrap<T extends BaseComponentProps>(
-  context: any,
-  props: T,
-  moduleOrComponent: any,
-  node: HTMLElement,
-  id: string,
-) {
-  const annotations = moduleOrComponent.__annotations__;
-  const annotation = annotations?.[0];
+    if (!component) {
+      throw new Error(`No component matching the selector "${moduleOrComponent.selector}" has been found.`);
+    }
 
-  if (annotation && annotation.bootstrap) {
-    // usually contains things like imports, exports, declarations, ...
-    return bootstrapModule(context, props, moduleOrComponent, node, id);
+    return [...activateModuleInstance(moduleDef, piral), component];
   } else {
-    // usually contains things like selector, template or templateUrl, changeDetection, ...
-    return bootstrapComponent(context, props, moduleOrComponent, node, id);
-  }
-}
-
-export function bootstrapComponent<T extends BaseComponentProps>(
-  context: any,
-  props: T,
-  component: any,
-  node: HTMLElement,
-  id: string,
-): Promise<void | NgModuleRef<any>> {
-  const { piral } = props;
-  const declarations = [component, piral.NgExtension];
-  node.id = sanatize(id);
-  setComponentSelector(component, node.id);
+    const [annotation] = getAnnotations(moduleOrComponent);
+    const standalone = annotation?.standalone;
 
-  @NgModule({
-    imports: [BrowserModule],
-    providers: [
-      {
-        provide: 'piral',
-        useValue: piral,
-      },
-    ],
-    declarations,
-    bootstrap: [component],
-  })
-  class BootstrapModule {}
-
-  return startup(context, props, BootstrapModule, node);
+    // 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];
+    }
+  }
 }
 
-export function bootstrapModule<T extends BaseComponentProps>(
-  context: any,
-  props: T,
-  BootstrapModule: any,
+export async function bootstrap<TProps extends BaseComponentProps>(
+  result: PrepareBootstrapResult,
   node: HTMLElement,
-  id: string,
-): Promise<void | NgModuleRef<any>> {
-  const { piral } = props;
-  const annotations = BootstrapModule.__annotations__;
-  const annotation = annotations?.[0];
-  node.id = sanatize(id);
+  props: BehaviorSubject<TProps>,
+  context: ComponentContext,
+): Promise<Disposable> {
+  const [selectedModule, ngOptions, component] = result;
+  const ref = await startup(selectedModule, context, ngOptions);
 
-  if (annotation) {
-    const providers = annotation.providers || [];
-    const declarations = annotation.declarations || [];
-    const [component] = annotation.bootstrap || [];
-    annotation.providers = [
-      ...providers,
-      {
-        provide: 'piral',
-        useValue: piral,
-      },
-    ];
-    annotation.declarations = [...declarations, piral.NgExtension];
-
-    if (component) {
-      setComponentSelector(component, node.id);
-      annotation.bootstrap = [component];
-    }
+  if (ref) {
+    ref.instance.attach(component, node, props);
+    return () => ref.instance.detach(component, node);
   }
 
-  return startup(context, props, BootstrapModule, node);
+  return () => {};
 }

package/src/common/NgExtension.ts

@@ -0,0 +1,33 @@
+import type { PiletApi } from 'piral-core';
+import { Component, ElementRef, Input, Inject, OnChanges } from '@angular/core';
+
+const selector = 'extension-component';
+
+@Component({
+  selector,
+  template: '',
+})
+export class NgExtension implements OnChanges {
+  @Input('name') public name: string | undefined;
+  @Input('params') public params: object | undefined;
+
+  constructor(private elRef: ElementRef<HTMLElement>, @Inject('piral') private piral: PiletApi) {}
+
+  ngOnChanges() {
+    this.elRef.nativeElement.dispatchEvent(
+      new CustomEvent('extension-props-changed', {
+        detail: {
+          name: this.name,
+          params: this.params,
+        },
+      }),
+    );
+  }
+
+  ngAfterContentInit() {
+    this.piral.renderHtmlExtension(this.elRef.nativeElement, {
+      name: this.name,
+      params: this.params,
+    });
+  }
+}

package/src/common/ResourceUrlPipe.ts

@@ -0,0 +1,12 @@
+import type { PiletApi } from 'piral-core';
+import { Inject, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'resourceUrl' })
+export class ResourceUrlPipe implements PipeTransform {
+  constructor(@Inject('piral') private piral: PiletApi) {}
+
+  transform(value: string): string {
+    const { basePath = '/' } = this.piral.meta;
+    return basePath + value;
+  }
+}

package/src/common/SharedModule.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NgExtension } from './NgExtension';
+import { ResourceUrlPipe } from './ResourceUrlPipe';
+
+const declarationsDef = [NgExtension, ResourceUrlPipe];
+const exportsDef = [NgExtension, ResourceUrlPipe];
+const importsDef = [CommonModule];
+
+@NgModule({
+  declarations: declarationsDef,
+  providers: [],
+  imports: importsDef,
+  exports: exportsDef,
+})
+export class SharedModule {
+  static props = {};
+}

package/src/common/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/src/common/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://raw.githubusercontent.com/ng-packagr/ng-packagr/main/src/ng-package.schema.json",
+  "dest": "../../common",
+  "assets": [
+    "index.d.ts",
+    "piral-ng-common.js"
+  ],
+  "lib": {
+    "entryFile": "./public_api.ts"
+   }
+}

package/src/common/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "piral-ng-common",
+  "version": "0.15.0",
+  "description": "Common module for piral-ng.",
+  "keywords": [],
+  "author": "smapiot",
+  "main": "piral-ng-common.js",
+  "homepage": "https://piral.io",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smapiot/piral.git"
+  },
+  "bugs": {
+    "url": "https://github.com/smapiot/piral/issues"
+  },
+  "devDependencies": {},
+  "peerDependencies": {}
+}

package/src/common/piral-ng-common.js

@@ -0,0 +1,3 @@
+exports.NgExtension = class {};
+exports.SharedModule = class {};
+exports.ResourceUrlPipe = class {};

package/src/common/public_api.ts

@@ -0,0 +1,3 @@
+export * from './SharedModule';
+export * from './NgExtension';
+export * from './ResourceUrlPipe';

package/src/converter.ts

@@ -1,23 +1,61 @@
-import { NgModuleRef } from '@angular/core';
-import { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ForeignComponent, BaseComponentProps, Disposable } from 'piral-core';
+import type { Type } from '@angular/core';
+import type { NgLazyType, NgModuleDefiner, PrepareBootstrapResult } from './types';
+import { BehaviorSubject } from 'rxjs';
 import { enqueue } from './queue';
-import { bootstrap } from './bootstrap';
-
-let next = ~~(Math.random() * 10000);
-
-export function createConverter(selectId = () => `ng-${next++}`) {
-  const convert = <TProps extends BaseComponentProps>(component: any): ForeignComponent<TProps> => {
-    const id = selectId();
-    let result: Promise<void | NgModuleRef<any>> = Promise.resolve();
-
-    return {
-      mount(el, props, ctx) {
-        result = enqueue(() => bootstrap(ctx, props, component, el, id));
-      },
-      unmount() {
-        result.then((ngMod) => ngMod && ngMod.destroy());
-      },
-    };
-  };
+import { defineModule } from './module';
+import { bootstrap, prepareBootstrap } from './bootstrap';
+import { NgExtension } from '../common';
+
+export interface NgConverterOptions {}
+
+export interface NgConverter {
+  <TProps extends BaseComponentProps>(component: any): ForeignComponent<TProps>;
+  defineModule: NgModuleDefiner;
+  Extension: any;
+}
+
+interface NgState<TProps> {
+  queued: Promise<void | Disposable>;
+  props: BehaviorSubject<TProps>;
+  active: boolean;
+}
+
+export function createConverter(_: NgConverterOptions = {}): NgConverter {
+  const registry = new Map<any, PrepareBootstrapResult>();
+  const convert = <TProps extends BaseComponentProps>(component: Type<any> | NgLazyType): ForeignComponent<TProps> => ({
+    mount(el, props, ctx, locals: NgState<TProps>) {
+      locals.active = true;
+
+      if (!locals.props) {
+        locals.props = new BehaviorSubject(props);
+      }
+
+      if (!locals.queued) {
+        locals.queued = Promise.resolve();
+      }
+
+      locals.queued = locals.queued.then(() =>
+        enqueue(async () => {
+          if (!registry.has(component)) {
+            registry.set(component, await prepareBootstrap(component, props.piral));
+          }
+
+          if (locals.active) {
+            return await bootstrap(registry.get(component), el, locals.props, ctx);
+          }
+        }),
+      );
+    },
+    update(el, props, ctx, locals: NgState<TProps>) {
+      locals.props.next(props);
+    },
+    unmount(el, locals: NgState<TProps>) {
+      locals.active = false;
+      locals.queued = locals.queued.then((dispose) => dispose && enqueue(dispose));
+    },
+  });
+  convert.defineModule = defineModule;
+  convert.Extension = NgExtension;
   return convert;
 }

package/src/create.ts

@@ -1,41 +1,24 @@
 import type { PiralPlugin } from 'piral-core';
-import { createConverter } from './converter';
-import { createExtension } from './extension';
 import type { PiletNgApi } from './types';
+import { createConverter, NgConverterOptions } from './converter';
+import { defineModule } from './module';
 
 /**
  * Available configuration options for the Angular plugin.
  */
-export interface NgConfig {
-  /**
-   * Defines the name of the extension component.
-   * @default extension-component
-   */
-  selector?: string;
-  /**
-   * Defines the name of the root element.
-   * @default slot
-   */
-  rootName?: string;
-  /**
-   * Defines how the next ID for mounting is selected.
-   * By default a random number is used in conjunction with a `ng-` prefix.
-   */
-  selectId?(): string;
-}
+export interface NgConfig extends NgConverterOptions {}
 
 /**
  * Creates the Pilet API extensions for Angular.
  */
 export function createNgApi(config: NgConfig = {}): PiralPlugin<PiletNgApi> {
-  const { rootName, selector, selectId } = config;
-
   return (context) => {
-    const convert = createConverter(selectId);
+    const convert = createConverter(config);
     context.converters.ng = ({ component }) => convert(component);
 
     return {
-      NgExtension: createExtension(rootName, selector),
+      NgExtension: convert.Extension,
+      defineNgModule: defineModule,
       fromNg(component) {
         return {
           type: 'ng',