feat: add support for children transclude

Fixes coatue-oss#12

Author: spirosikmd

.gitignore

@@ -3,4 +3,5 @@ node_modules
 *.d.ts
 *.js
 *.map
-!karma.conf.js
+!karma.conf.js
+!html-react-parser.d.ts

.nvmrc

@@ -0,0 +1 @@
+8.1.2

README.md

@@ -55,6 +55,20 @@ If `propTypes` are defined and you passed in a 2nd argument, the argument will o
 ></my-component>
 ```
 
+You can also transclude HTML content which will be rendered as children of the React component.
+
+```html
+<my-component
+  foo="3"
+  baz="'baz'">
+    <span>This is transcluded</span>
+    <p>And this!</p>
+    <my-other-component
+      bar="'bar'">
+    </my-other-component>
+</my-component>
+```
+
 ## Tests
 
 ```sh

html-react-parser.d.ts

@@ -0,0 +1 @@
+declare module 'html-react-parser'

index.tsx

@@ -1,9 +1,21 @@
-import { IAugmentedJQuery, IComponentOptions } from 'angular'
+import {
+    IAugmentedJQuery,
+    ICompileService,
+    IComponentOptions,
+    IScope,
+    ITranscludeFunction
+} from 'angular'
 import fromPairs = require('lodash.frompairs')
+import HTMLtoJSX = require('htmltojsx')
+import Parser = require('html-react-parser')
 import NgComponent from 'ngcomponent'
 import * as React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 
+const converter = new HTMLtoJSX({
+  createClass: false
+})
+
 /**
  * Wraps a React component in Angular. Returns a new Angular component.
  *
@@ -25,17 +37,47 @@ export function react2angular<Props>(
 
   return {
     bindings: fromPairs(names.map(_ => [_, '<'])),
-    controller: ['$element', class extends NgComponent<Props, void> {
-      constructor(private $element: IAugmentedJQuery) {
+    controller: ['$element', '$transclude', '$compile', class extends NgComponent<Props, void> {
+      private transcludedContent: JQuery
+      private transclusionScope: IScope
+
+      constructor(private $element: IAugmentedJQuery, private $transclude: ITranscludeFunction, private $compile: ICompileService) {
         super()
       }
+
       render() {
+        let children
+        this.$transclude((clone: JQuery, scope: IScope) => {
+          children = Array.prototype.slice.call(clone).map((element: HTMLElement) => {
+            this.$compile(element)(scope)
+            const phase = scope.$root.$$phase
+            if (phase !== '$apply' && phase !== '$digest') {
+              scope.$apply()
+            }
+            return converter.convert(element.outerHTML)
+          })
+          this.transcludedContent = clone
+          this.transclusionScope = scope
+        })
         // TODO: rm any when https://github.com/Microsoft/TypeScript/pull/13288 is merged
-        render(<Class {...(this.props as any)} />, this.$element[0])
+        render(
+          <Class {...(this.props as any)}>
+            {Parser(children && (children as string[]).join(''))}
+          </Class>,
+          this.$element[0]
+        )
       }
+
       componentWillUnmount() {
         unmountComponentAtNode(this.$element[0])
       }
-    }]
+
+      $onDestroy() {
+        super.$onDestroy()
+        this.transcludedContent.remove()
+        this.transclusionScope.$destroy()
+      }
+    }],
+    transclude: true
   }
 }