Simplify creation of ReactContent component and its public & internal API

Author: Ben Grynhaus

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

@@ -3,7 +3,6 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Omit } from '../declarations/omit';
 import * as dom from '../utils/dom';
 
 const DEBUG = false;
@@ -12,14 +11,7 @@ export const CHILDREN_TO_APPEND_PROP = 'children-to-append';
 /**
  * Props that can be passed to `ReactContent` from users.
  */
-export type ReactContentProps = Omit<AllReactContentProps, typeof CHILDREN_TO_APPEND_PROP>;
-
-/**
- * @internal
- */
-export interface AllReactContentProps {
-  readonly [CHILDREN_TO_APPEND_PROP]: HTMLElement[];
-
+export interface ReactContentProps {
   /**
    * 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.
@@ -28,14 +20,34 @@ export interface AllReactContentProps {
   legacyRenderMode?: boolean;
 }
 
+/**
+ * Creates a new `ReactContent` element.
+ * @param children The children to append to the `ReactContent` element.
+ * @param additionalProps _Optional_. @see `ReactContentProps`
+ * @returns
+ */
+export function createReactContentElement(children: ReadonlyArray<HTMLElement>, additionalProps?: ReactContentProps) {
+  return React.createElement(ReactContent, {
+    ...additionalProps,
+    [CHILDREN_TO_APPEND_PROP]: children,
+  });
+}
+
+/**
+ * @internal
+ */
+export interface InternalReactContentProps extends ReactContentProps {
+  readonly [CHILDREN_TO_APPEND_PROP]: ReadonlyArray<HTMLElement>;
+}
+
 /**
  * Render any `HTMLElement`s (including Angular components) as a child of React components.
  * 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 ReactContent extends React.PureComponent<AllReactContentProps> {
+export class ReactContent extends React.PureComponent<InternalReactContentProps> {
   componentDidMount() {
     const element = ReactDOM.findDOMNode(this);
     if (this.props[CHILDREN_TO_APPEND_PROP]) {

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

@@ -2,18 +2,14 @@
 // Licensed under the MIT License.
 
 import { ComponentRef, EmbeddedViewRef, TemplateRef } from '@angular/core';
-import * as React from 'react';
-import { CHILDREN_TO_APPEND_PROP, ReactContent, ReactContentProps } from '../renderer/react-content';
+import { createReactContentElement, ReactContentProps } from '../renderer/react-content';
 
 export interface RenderPropContext<TContext extends object> {
   readonly render: (context: TContext) => JSX.Element;
 }
 
 function renderReactContent(rootNodes: HTMLElement[], additionalProps?: ReactContentProps): JSX.Element {
-  return React.createElement(ReactContent, {
-    ...additionalProps,
-    [CHILDREN_TO_APPEND_PROP]: rootNodes,
-  });
+  return createReactContentElement(rootNodes, additionalProps);
 }
 
 /**