Merge branch 'next' into declarative-pattern# Conflicts:# libs/core/src/renderer/renderprop-helpers.ts

Author: Ben Grynhaus

.vscode/settings.json

@@ -6,6 +6,7 @@
     "Packagr",
     "Renderable",
     "Selectable",
+    "VDOM",
     "borderless",
     "checkmark",
     "commandbar",

README.md

@@ -73,6 +73,7 @@ Switched to a new branch 'pr/999'
 To get latest changes to the PR:
 
 ```
+$ git checkout pr/1000
 $ git pull --tags origin refs/pull/1000/head
 From https://github.com/benfeely/angular-react
  * branch            refs/pull/1000/head -> FETCH_HEAD

apps/demo/src/app/app.component.html

@@ -4,7 +4,7 @@ <h2>Getting up and running...</h2>
 
   <ol>
     <li>Add
-      <i>AngularReactBrowserModule</i>> to
+      <i>AngularReactBrowserModule</i> to
       <i>app.module.ts</i> in place of the default
       <i>BrowserModule</i>.</li>
     <li>Add

libs/core/package-lock.json

@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom';
 
 import removeUndefinedProperties from '../utils/object/remove-undefined-properties';
 import { CHILDREN_TO_APPEND_PROP } from './react-content';
-import { getComponentClass } from "./registry";
+import { getComponentClass } from './registry';
 
 const DEBUG = false;
 
@@ -37,6 +37,10 @@ export class ReactNode {
     this.setRenderPending();
   }
 
+  get parent(): HTMLElement | ReactNode {
+    return this._parent;
+  }
+
   private isNotRenderable: boolean;
   get shouldRender() {
     return !this.isNotRenderable;
@@ -80,13 +84,15 @@ export class ReactNode {
       // If type is still a string, then no React Element matches this string.
       this.typeIsReactElementClass = typeof this.type !== 'string';
 
-      if (DEBUG) { console.log('ReactNode > tryResolveTypeIsReactElementClass > type:', this.typeName); }
+      if (DEBUG) {
+        console.log('ReactNode > tryResolveTypeIsReactElementClass > type:', this.typeName);
+      }
     }
   }
 
   setAttribute(name: string, value: any) {
     this.setAttributes({
-      [name]: value
+      [name]: value,
     });
   }
 
@@ -96,7 +102,7 @@ export class ReactNode {
 
   setProperty(name: string, value: any) {
     this.setProperties({
-      [name]: value
+      [name]: value,
     });
   }
 
@@ -156,16 +162,20 @@ export class ReactNode {
     // parent.
     if (!isReactNode(this._parent)) {
       if (this.isDestroyPending && this._parent) {
-        if (DEBUG) { console.log('ReactNode > render > destroy > node:', this.toString(), 'parent:', 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); }
+        if (DEBUG) {
+          console.log('ReactNode > render > node:', this.toString(), 'parent:', this.parent);
+        }
         // It is expected that the element will be recreated and re-rendered with each attribute change.
         // See: https://reactjs.org/docs/rendering-elements.html
-        ReactDOM.render(this.renderRecursive() as any, this._parent);
+        ReactDOM.render(this.renderRecursive() as React.ReactElement<{}>, this._parent);
         this.isRenderPending = false;
       }
     }
@@ -174,10 +184,7 @@ export class ReactNode {
   }
 
   private renderRecursive(key?: string): React.ReactElement<{}> | string {
-    const children =
-      this.children
-        ? this.children.map((child, index) => child.renderRecursive(index.toString()))
-        : [];
+    const children = this.children ? this.children.map((child, index) => child.renderRecursive(index.toString())) : [];
 
     if (this.text) {
       return this.text;
@@ -187,11 +194,11 @@ export class ReactNode {
 
     if (key) this.props['key'] = key;
 
-    const clearedProps = this.transformProps(
-      removeUndefinedProperties(this.props)
-    );
+    const clearedProps = this.transformProps(removeUndefinedProperties(this.props));
 
-    if (DEBUG) { console.warn('ReactNode > renderRecursive > type:', this.toString(), 'props:', this.props, 'children:', children); }
+    if (DEBUG) {
+      console.warn('ReactNode > renderRecursive > type:', this.toString(), 'props:', this.props, 'children:', children);
+    }
     return React.createElement(this.type, clearedProps, children.length > 0 ? children : undefined);
   }
 
@@ -220,7 +227,14 @@ export class ReactNode {
 
   // This is called by Angular core when projected content is being added.
   appendChild(projectedContent: HTMLElement) {
-    if (DEBUG) { console.error('ReactNode > appendChild > node:', this.toString(), 'projectedContent:', projectedContent.toString().trim()); }
+    if (DEBUG) {
+      console.error(
+        'ReactNode > appendChild > node:',
+        this.toString(),
+        'projectedContent:',
+        projectedContent.toString().trim()
+      );
+    }
     this.childrenToAppend.push(projectedContent);
   }
 
@@ -239,5 +253,4 @@ export class ReactNode {
 
     return '[undefined ReactNode]';
   }
-
 }