[chore] organize react-node.ts. private members first, private methods last etc.

Author: Ben Grynhaus

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

@@ -19,20 +19,23 @@ export class ReactNode {
   // so that the dirty "render pending" state of this object can be properly
   // tracked and all nodes with "render pending" can be flushed at the end
   // of render operation.
-  private props = {};
-  private comment: string;
-  private text: string;
-  private typeIsReactElementClass;
-  private children: Array<ReactNode> = [];
-  private typeName: string;
-  private childrenToAppend: Array<HTMLElement> = [];
-
-  private renderedDomElement: HTMLElement;
+  private _props = {};
+  private _comment: string;
+  private _text: string;
+  private _typeIsReactElementClass: boolean | undefined;
+  private _children: Array<ReactNode> = [];
+  private _typeName: string;
+  private _childrenToAppend: Array<HTMLElement> = [];
+  private _renderedDomElement: HTMLElement;
+  private _parent: HTMLElement | ReactNode;
+  private _isNotRenderable: boolean;
+  private _isDestroyPending: boolean = false;
+  private _isRenderPending = true;
+
   get domElement() {
-    return this.renderedDomElement;
+    return this._renderedDomElement;
   }
 
-  private _parent: HTMLElement | ReactNode;
   set parent(parent: HTMLElement | ReactNode) {
     this._parent = parent;
     this.setRenderPending();
@@ -42,69 +45,46 @@ export class ReactNode {
     return this._parent;
   }
 
-  private isNotRenderable: boolean;
   get shouldRender() {
-    return !this.isNotRenderable;
+    return !this._isNotRenderable;
   }
 
-  private isDestroyPending = false;
   get destroyPending() {
-    return this.isDestroyPending;
+    return this._isDestroyPending;
+  }
+
+  constructor(private type?: React.ReactType) {
+    this.setRenderPending();
+    this._tryResolveTypeIsReactElementClass();
   }
 
-  private isRenderPending = true;
   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.
+
+  /**
+   * 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.
+   */
   setRenderPending() {
     this.setRenderPendingCallback();
-    this.isRenderPending = true;
+    this._isRenderPending = true;
   }
 
   destroyNode() {
     this.setRenderPending();
-    this.isDestroyPending = true;
-  }
-
-  private tryResolveTypeIsReactElementClass() {
-    if (this.typeIsReactElementClass === undefined) {
-      // Comments and text have no type.
-      if (!this.type) {
-        return;
-      }
-
-      // Store the name of the type for the toString message (debugging).
-      this.typeName = this.type as string;
-
-      // Attempt to resolve the type as a React Element class name/type.
-      if (typeof this.type === 'string') {
-        this.type = getComponentClass(this.type);
-      }
-
-      // 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);
-      }
-    }
+    this._isDestroyPending = true;
   }
 
   setAttribute(name: string, value: any) {
-    this.setAttributes({
-      [name]: value,
-    });
+    this.setAttributes({ [name]: value });
   }
 
   setAttributes(attributes: StringMap) {
     this.setProperties(attributes);
   }
 
   setProperty(name: string, value: any) {
-    this.setProperties({
-      [name]: value,
-    });
+    this.setProperties({ [name]: value });
   }
 
   setProperties(properties: StringMap) {
@@ -115,43 +95,38 @@ export class ReactNode {
   removeProperty(name: string, childName?: string) {
     this.setRenderPending();
     if (childName) {
-      return delete this.props[name][childName];
+      return delete this._props[name][childName];
     }
 
-    return delete this.props[name];
+    return delete this._props[name];
   }
 
   addChild(node: ReactNode) {
     this.setRenderPending();
-    this.children.push(node);
+    this._children.push(node);
   }
 
   removeChild(node: ReactNode) {
     this.setRenderPending();
-    this.children = this.children.filter(child => child !== node);
-  }
-
-  constructor(private type?: React.ReactType) {
-    this.setRenderPending();
-    this.tryResolveTypeIsReactElementClass();
+    this._children = this._children.filter(child => child !== node);
   }
 
   asComment(value: string) {
     this.setRenderPending();
     this.type = undefined;
-    this.comment = value;
+    this._comment = value;
     return this;
   }
 
   asText(value: string) {
     this.setRenderPending();
     this.type = undefined;
-    this.text = value;
+    this._text = value;
 
     // Skip appending and rendering of empty text nodes. This may cause a bug
     // if a single space is desired...
     if (!value || !value.trim()) {
-      this.isNotRenderable = true;
+      this._isNotRenderable = true;
     }
 
     return this;
@@ -162,55 +137,95 @@ export class ReactNode {
     // Those that are parented by other ReactNodes will be rendered recursively by their
     // parent.
     if (!isReactNode(this._parent)) {
-      if (this.isDestroyPending && 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 (this._isRenderPending) {
         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 React.ReactElement<{}>, this._parent);
-        this.isRenderPending = false;
+        ReactDOM.render(this._renderRecursive() as React.ReactElement<{}>, this._parent);
+        this._isRenderPending = false;
       }
     }
 
     return this;
   }
 
-  private renderRecursive(key?: string): React.ReactElement<{}> | string {
-    const children = this.children ? this.children.map((child, index) => child.renderRecursive(index.toString())) : [];
+  // 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()
+      );
+    }
+    this._childrenToAppend.push(projectedContent);
+  }
 
-    if (this.text) {
-      return this.text;
+  toString(): string {
+    if (this._typeName) {
+      return `[${this._typeName} ReactNode]`;
     }
 
-    this.props[CHILDREN_TO_APPEND_PROP] = this.childrenToAppend;
+    if (this._text) {
+      return '[text ReactNode]';
+    }
 
-    if (key) this.props['key'] = key;
+    if (this._comment) {
+      return '[comment ReactNode]';
+    }
+
+    return '[undefined ReactNode]';
+  }
+
+  private _renderRecursive(key?: string): React.ReactElement<{}> | string {
+    const children = this._children
+      ? this._children.map((child, index) => child._renderRecursive(index.toString()))
+      : [];
+
+    if (this._text) {
+      return this._text;
+    }
+
+    this._props[CHILDREN_TO_APPEND_PROP] = this._childrenToAppend;
+
+    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);
+      console.warn(
+        'ReactNode > renderRecursive > type:',
+        this.toString(),
+        'props:',
+        this._props,
+        'children:',
+        children
+      );
     }
     return React.createElement(this.type, clearedProps, children.length > 0 ? children : undefined);
   }
 
-  private transformProps<TProps extends object>(props: TProps) {
+  private _transformProps<TProps extends object>(props: TProps) {
     return Object.entries(props).reduce((acc, [key, value]) => {
-      const [newKey, newValue] = typeof key !== 'string' ? [key, value] : this.transformProp(key, value);
+      const [newKey, newValue] = typeof key !== 'string' ? [key, value] : this._transformProp(key, value);
       return Object.assign(acc, { [newKey]: newValue });
     }, {});
   }
 
-  private transformProp<TValue = any>(name: string, value: TValue): [string, TValue] {
+  private _transformProp<TValue = any>(name: string, value: TValue): [string, TValue] {
     // prop name is camelCased already
     const firstLetter = name[0];
     if (firstLetter === firstLetter.toLowerCase()) {
@@ -223,32 +238,27 @@ export class ReactNode {
     return [`on${name}`, value];
   }
 
-  // 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()
-      );
-    }
-    this.childrenToAppend.push(projectedContent);
-  }
+  private _tryResolveTypeIsReactElementClass() {
+    if (this._typeIsReactElementClass === undefined) {
+      // Comments and text have no type.
+      if (!this.type) {
+        return;
+      }
 
-  toString(): string {
-    if (this.typeName) {
-      return `[${this.typeName} ReactNode]`;
-    }
+      // Store the name of the type for the toString message (debugging).
+      this._typeName = this.type as string;
 
-    if (this.text) {
-      return '[text ReactNode]';
-    }
+      // Attempt to resolve the type as a React Element class name/type.
+      if (typeof this.type === 'string') {
+        this.type = getComponentClass(this.type);
+      }
 
-    if (this.comment) {
-      return '[comment ReactNode]';
-    }
+      // If type is still a string, then no React Element matches this string.
+      this._typeIsReactElementClass = typeof this.type !== 'string';
 
-    return '[undefined ReactNode]';
+      if (DEBUG) {
+        console.log('ReactNode > tryResolveTypeIsReactElementClass > type:', this._typeName);
+      }
+    }
   }
 }