Users/benfeely/bug react destroy (#6)

* Fix console error.

* Fix a performance bug where React elements are not unloaded from memory.

* Update to docs for github hosting.

Author: benfeely

apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.html

@@ -28,5 +28,5 @@ <h3>Pure Angular View</h3>
       {{ text }}
     </app-dot>
   </ng-template>
-  <div class="message mat-h1">{{ triangle.dots.length }} Dots</div>
+  <div class="message mat-h1">{{ triangle.dots?.length }} Dots</div>
 </app-triangle>

apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.html

@@ -53,5 +53,5 @@ <h3>React Rendered Dots</h3>
       {{ projectAsAngular ? dot.textOverride ? dot.textOverride : text : '' }}
     </app-react-dot>
   </ng-template>
-  <div class="message mat-h1">{{ triangle.dots.length }} Dots</div>
+  <div class="message mat-h1">{{ triangle.dots?.length }} Dots</div>
 </app-triangle>

docs/3rdpartylicenses.txt

@@ -2,6 +2,53 @@
 MIT
 MIT
 
+cache-loader@1.2.2
+MIT
+Copyright JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+@angular-devkit/build-optimizer@0.3.2
+MIT
+The MIT License
+
+Copyright (c) 2017 Google, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
 @microsoft/load-themed-styles@1.7.50
 MIT
 @microsoft/load-themed-styles

docs/index.html

@@ -8,4 +8,4 @@
           // We need to redirect to the URL the user was trying to access.
           history.replaceState(null, null, redirect);
         }
-      })();</script><!-- /Github Pages hack. --><app-root class="mat-typography"></app-root><script type="text/javascript" src="inline.318b50c57b4eba3d437b.bundle.js"></script><script type="text/javascript" src="polyfills.9a8df1a7a1c2b9447f3a.bundle.js"></script><script type="text/javascript" src="main.f8b904cca0bc36731f17.bundle.js"></script></body></html>
+      })();</script><!-- /Github Pages hack. --><app-root class="mat-typography"></app-root><script type="text/javascript" src="inline.318b50c57b4eba3d437b.bundle.js"></script><script type="text/javascript" src="polyfills.9a8df1a7a1c2b9447f3a.bundle.js"></script><script type="text/javascript" src="main.fe1da865f49a2bc3bb21.bundle.js"></script></body></html>

docs/main.f8b904cca0bc36731f17.bundle.js docs/main.fe1da865f49a2bc3bb21.bundle.jsdocs/main.f8b904cca0bc36731f17.bundle.js renamed to docs/main.fe1da865f49a2bc3bb21.bundle.js

@@ -31,7 +31,7 @@ export class ReactNode {
     return this.renderedDomElement;
   }
 
-  private _parent: any;
+  private _parent: HTMLElement | ReactNode;
   set parent(parent: HTMLElement | ReactNode) {
     this._parent = parent;
     this.setRenderPending();
@@ -42,16 +42,26 @@ export class ReactNode {
     return !this.isNotRenderable;
   }
 
+  private isDestroyPending = false;
+  get destroyPending() {
+    return this.isDestroyPending;
+  }
+
   private isRenderPending = true;
-  public setRenderPendingCallback = () => null;
+  setRenderPendingCallback = () => null;
   // Track all pending render operations internally and set flag on
   // renderer factory so that a flush operation can be scheduled for
   // the "end" of render.
-  public setRenderPending() {
+  setRenderPending() {
     this.setRenderPendingCallback();
     this.isRenderPending = true;
   }
 
+  destroyNode() {
+    this.setRenderPending();
+    this.isDestroyPending = true;
+  }
+
   private tryResolveTypeIsReactElementClass() {
     if (this.typeIsReactElementClass === undefined) {
       // Comments and text have no type.
@@ -102,9 +112,7 @@ export class ReactNode {
     this.children = this.children.filter(child => child !== node);
   }
 
-  constructor(
-    private type?: ReactComponentClass | string
-  ) {
+  constructor(private type?: ReactComponentClass | string) {
     this.setRenderPending();
     this.tryResolveTypeIsReactElementClass();
   }
@@ -130,14 +138,27 @@ export class ReactNode {
     return this;
   }
 
-  render() {
-    if (this.isRenderPending) {
-      if (DEBUG) { console.log('ReactNode > render > node:', this.toString(), 'parent:', this.parent); }
-      // It is expected that the element will be recreated and rerendered with each attribute change.
-      // See: https://reactjs.org/docs/rendering-elements.html
-      ReactDOM.render(this.renderRecursive() as any, this._parent);
-      this.isRenderPending = false;
+  render(): ReactNode {
+    // Only complete render operations for ReactNodes that are parented by HTMLElements.
+    // Those that are parented by other ReactNodes will be rendered recursively by their
+    // parent.
+    if (!isReactNode(this._parent)) {
+      if (this.isDestroyPending && this._parent) {
+        if (DEBUG) { console.log('ReactNode > render > destroy > node:', this.toString(), 'parent:', this.parent); }
+        ReactDOM.unmountComponentAtNode(this._parent);
+        return this;
+      }
+
+      if (this.isRenderPending) {
+        if (DEBUG) { console.log('ReactNode > render > node:', this.toString(), 'parent:', this.parent); }
+        // It is expected that the element will be recreated and rerendered with each attribute change.
+        // See: https://reactjs.org/docs/rendering-elements.html
+        ReactDOM.render(this.renderRecursive() as any, this._parent);
+        this.isRenderPending = false;
+      }
     }
+
+    return this;
   }
 
   private renderRecursive(): React.ReactElement<{}> | string {

libs/core/src/renderer/react-node.ts

@@ -63,20 +63,25 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
     // earlier (as is done for DOM elements) because React element props
     // are ReadOnly.
     if (this.isRenderPending) {
-      this.reactRootNodes.map(node => node.render());
+      // Remove root nodes that are pending destroy after render.
+      this.reactRootNodes = this.reactRootNodes.filter(node => !node.render().destroyPending);
       this.isRenderPending = false;
     }
   }
 }
 
 class ReactRenderer implements Renderer2 {
   data: { [key: string]: any } = Object.create(null);
-  destroyNode: null;
 
   constructor(private rootRenderer: AngularReactRendererFactory) {}
 
   destroy(): void {}
 
+  destroyNode(node: ReactNode): void {
+    if (DEBUG) { console.error('Renderer > destroyNode > node:', node.toString()); }
+    node.destroyNode();
+  }
+
   createElement(name: string, namespace?: string): ReactNode {
     if (DEBUG) { console.error('Renderer > createElement > name:', name, namespace ? 'namespace:' : '', namespace); }
     return new ReactNode(name);