Change createTemplateRenderer to accept an NgZone to allow tracking changes

Author: Ben Grynhaus

libs/core/src/lib/components/wrapper-component.ts

@@ -9,6 +9,7 @@ import {
   ElementRef,
   Injector,
   Input,
+  NgZone,
   OnChanges,
   Renderer2,
   SimpleChanges,
@@ -42,6 +43,15 @@ export type InputRendererOptions<TContext extends object> =
 
 export type JsxRenderFunc<TContext> = (context: TContext) => JSX.Element;
 
+export interface WrapperComponentOptions {
+  readonly setHostDisplay?: boolean;
+  readonly ngZone?: NgZone;
+}
+
+const defaultWrapperComponentOptions: WrapperComponentOptions = {
+  setHostDisplay: false,
+};
+
 /**
  * Base class for Angular @Components wrapping React Components.
  * Simplifies some of the handling around passing down props and setting CSS on the host component.
@@ -51,6 +61,9 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
   private _contentClass: string;
   private _contentStyle: string;
 
+  private ngZone: NgZone;
+  private setHostDisplay: boolean;
+
   protected abstract reactNodeRef: ElementRef<HTMLElement>;
 
   /**
@@ -100,8 +113,11 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
     public readonly elementRef: ElementRef,
     private readonly changeDetectorRef: ChangeDetectorRef,
     private readonly renderer: Renderer2,
-    private readonly setHostDisplay: boolean = false
-  ) {}
+    { setHostDisplay, ngZone }: WrapperComponentOptions = defaultWrapperComponentOptions
+  ) {
+    this.ngZone = ngZone;
+    this.setHostDisplay = setHostDisplay;
+  }
 
   ngAfterViewInit() {
     this._passAttributesAsProps();
@@ -154,8 +170,12 @@ export abstract class ReactWrapperComponent<TProps extends {}> implements AfterV
       return undefined;
     }
 
+    if (!this.ngZone) {
+      throw new Error('To create an input JSX renderer you must pass an NgZone to the constructor.');
+    }
+
     if (input instanceof TemplateRef) {
-      const templateRenderer = createTemplateRenderer(input, additionalProps);
+      const templateRenderer = createTemplateRenderer(input, this.ngZone, additionalProps);
       return (context: TContext) => templateRenderer.render(context);
     }
 

libs/core/src/lib/renderer/react-template.ts

@@ -0,0 +1,77 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { EmbeddedViewRef, NgZone, TemplateRef } from '@angular/core';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Subscription } from 'rxjs';
+
+const DEBUG = false;
+
+/**
+ * @internal
+ */
+export interface ReactTemplateProps<TContext extends object | void> {
+  /**
+   * Experimental rendering mode.
+   * Uses a similar approach to `router-outlet`, where the child elements are added to the parent, instead of this node, and this is hidden.
+   * @default false
+   */
+  legacyRenderMode?: boolean;
+
+  ngZone: NgZone;
+  templateRef: TemplateRef<TContext>;
+  context: TContext;
+}
+
+/**
+ * Render an `ng-template` as a child of a React component.
+ * Supports two rendering modes:
+ *  1. `legacy` - append `<react-content>` as the root, and nest the `children-to-append` underneath it.
+ *  2. `new` (**default**) - append the `children-to-append` to the parent of this component, and hide the `<react-content>` element.
+ *     (similar to how `router-outlet` behaves in Angular).
+ */
+export class ReactTemplate<TContext extends object | void> extends React.Component<ReactTemplateProps<TContext>> {
+  private _embeddedViewRef: EmbeddedViewRef<TContext>;
+  private _ngZoneSubscription: Subscription;
+
+  componentDidUpdate() {
+    // Context has changes, trigger change detection after pushing the new context in
+    Object.assign(this._embeddedViewRef.context, this.props.context);
+    this._embeddedViewRef.detectChanges();
+  }
+
+  componentDidMount() {
+    const { context, ngZone, templateRef } = this.props;
+
+    this._embeddedViewRef = templateRef.createEmbeddedView(context);
+    const element = ReactDOM.findDOMNode(this);
+    if (DEBUG) {
+      console.warn('ReactTemplate Component > componentDidMount > childrenToAppend:', {
+        rootNodes: this._embeddedViewRef.rootNodes,
+      });
+    }
+
+    const hostElement = this.props.legacyRenderMode ? element : element.parentElement;
+
+    this._embeddedViewRef.rootNodes.forEach(child => hostElement.appendChild(child));
+
+    // Detect the first cycle's changes, and then subscribe for subsequent ones
+    this._embeddedViewRef.detectChanges();
+    this._ngZoneSubscription = ngZone.onUnstable.subscribe(() => {
+      this._embeddedViewRef.detectChanges();
+    });
+  }
+
+  componentWillUnmount() {
+    this._ngZoneSubscription.unsubscribe();
+
+    if (this._embeddedViewRef) {
+      this._embeddedViewRef.destroy();
+    }
+  }
+
+  render() {
+    return React.createElement('react-template', !this.props.legacyRenderMode && { style: { display: 'none' } });
+  }
+}

libs/core/src/lib/renderer/renderprop-helpers.ts

@@ -1,9 +1,10 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
-import { ComponentRef, EmbeddedViewRef, TemplateRef } from '@angular/core';
+import { ComponentRef, NgZone, TemplateRef } from '@angular/core';
 import * as React from 'react';
 import { CHILDREN_TO_APPEND_PROP, ReactContent, ReactContentProps } from '../renderer/react-content';
+import { ReactTemplate } from './react-template';
 
 export interface RenderPropContext<TContext extends object> {
   readonly render: (context: TContext) => JSX.Element;
@@ -20,27 +21,22 @@ function renderReactContent(rootNodes: HTMLElement[], additionalProps?: ReactCon
  * Wrap a `TemplateRef` with a `JSX.Element`.
  *
  * @param templateRef The template to wrap
+ * @param ngZone The NgZone - used to tracking & triggering updates to the template
  * @param additionalProps optional additional props to pass to the `ReactContent` object that will render the content.
  */
 export function createTemplateRenderer<TContext extends object>(
   templateRef: TemplateRef<TContext>,
+  ngZone: NgZone,
   additionalProps?: ReactContentProps
 ): RenderPropContext<TContext> {
-  let viewRef: EmbeddedViewRef<TContext> | null = null;
-  let renderedJsx: JSX.Element | null = null;
-
   return {
     render: (context: TContext) => {
-      if (!viewRef) {
-        viewRef = templateRef.createEmbeddedView(context);
-        renderedJsx = renderReactContent(viewRef.rootNodes, additionalProps);
-      } else {
-        // Mutate the template's context
-        Object.assign(viewRef.context, context);
-      }
-      viewRef.detectChanges();
-
-      return renderedJsx;
+      return React.createElement(ReactTemplate, {
+        ngZone,
+        templateRef,
+        context,
+        ...additionalProps,
+      });
     },
   };
 }

libs/core/src/public-api.ts

@@ -7,4 +7,5 @@ export * from './lib/declarations/public-api';
 export * from './lib/renderer/components/Disguise';
 export { getPassProps, passProp, PassProp } from './lib/renderer/pass-prop-decorator';
 export { ReactContent } from './lib/renderer/react-content';
+export { ReactTemplate } from './lib/renderer/react-template';
 export { registerElement } from './lib/renderer/registry';