Allow child nodes and fix build for browser-friendly code

.gitignore

@@ -4,4 +4,5 @@ node_modules
 *.d.ts
 *.js
 *.map
-!karma.conf.js
+!karma.conf.js
+!rollup.config.js

index.tsx

@@ -1,8 +1,46 @@
 import { IAugmentedJQuery, IComponentOptions } from 'angular'
-import fromPairs = require('lodash.frompairs')
-import NgComponent from 'ngcomponent'
+import fromPairs from 'lodash-es/fromPairs'
 import * as React from 'react'
+import { ComponentType, ElementType, useEffect, useRef } from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
+import NgComponent from 'tlvince-ngcomponent'
+
+/**
+ * Appends DOM nodes to a `<div>`, tracking lifecycle.
+ * To be used by R2AComponent only
+ */
+const R2AChildrenWrapper = ({ domChildren }: { domChildren: HTMLElement[] }) => {
+  const childrenWrapperRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (childrenWrapperRef.current) {
+      childrenWrapperRef.current.append(...domChildren)
+    }
+
+    return () => {
+      if (childrenWrapperRef.current) {
+        // TS Lint doesn't like replaceChildren()
+        (childrenWrapperRef.current as any).replaceChildren()
+      }
+    }
+  }, [domChildren, childrenWrapperRef.current])
+
+  return <div ref={childrenWrapperRef} style={{ display: 'contents' }}></div>
+}
+
+/**
+ * Renders a React component with existing DOM nodes as children.
+ * The DOM nodes are injected into a child "R2AChildrenWrapper" component so that the original React component can control its display of child nodes transparently
+ */
+const R2AComponent = ({ domChildren, component, props }: { domChildren: HTMLElement[], component: ElementType, props: any}) => {
+  const Component = component
+
+  return (
+    <Component {...props}>
+      <R2AChildrenWrapper domChildren={domChildren} />
+    </Component>
+  )
+}
 
 /**
  * Wraps a React component in Angular. Returns a new Angular component.
@@ -16,17 +54,16 @@ import { render, unmountComponentAtNode } from 'react-dom'
  *   ```
  */
 export function react2angular<Props>(
-  Class: React.ComponentType<Props>,
+  Class: ComponentType<Props>,
   bindingNames: (keyof Props)[] | null = null,
   injectNames: string[] = []
 ): IComponentOptions {
   const names = bindingNames
     || (Class.propTypes && Object.keys(Class.propTypes) as (keyof Props)[])
     || []
-
   return {
     bindings: fromPairs(names.map(_ => [_, '<'])),
-    controller: ['$element', ...injectNames, class extends NgComponent<Props> {
+    controller: ['$element', ...injectNames, class extends NgComponent<Props, any> {
       static get $$ngIsClass() {
         return true
       }
@@ -41,8 +78,9 @@ export function react2angular<Props>(
       }
       render() {
         if (!this.isDestroyed) {
+          const domChildren = this.$element.children().toArray()
           render(
-            <Class {...this.props} {...this.injectedProps as any} />,
+            <R2AComponent domChildren={domChildren} component={Class} props={{...this.props, ...this.injectedProps}} />,
             this.$element[0]
           )
         }

package.json

@@ -5,8 +5,11 @@
   "main": "index.js",
   "main:esnext": "index.es2015.js",
   "typings": "index.d.ts",
+  "browser": "index.browser.js",
   "scripts": {
+    "prebuild": "npm run clean; tsc -d -t es6 -m es6 && mv ./index.js ./index.es6.js",
     "build": "npm run clean && npm run lint && tsc -d -t es2015 && mv ./index.js ./index.es2015.js && tsc -t es5",
+    "postbuild": "rollup -c",
     "clean": "rimraf ./*.d.ts && rimraf ./*.map",
     "lint": "tslint --fix -p ./tsconfig.json index.tsx test.tsx",
     "pretest": "npm run build",
@@ -69,15 +72,19 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "rimraf": "^2.6.3",
+    "rollup": "^0.45.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-replace": "^1.1.1",
     "rollupify": "^0.5.1",
     "tslint": "^5.13.1",
     "typescript": "^3.3.3333",
     "watchify": "^3.11.1"
   },
   "dependencies": {
-    "@types/lodash.frompairs": "^4.0.5",
+    "@types/lodash-es": "^4.17.6",
     "angular": ">=1.5",
-    "lodash.frompairs": "^4.0.1",
-    "ngcomponent": "^4.1.0"
+    "lodash-es": "^4.17.21",
+    "tlvince-ngcomponent": "3.0.7"
   }
 }

rollup.config.js

@@ -0,0 +1,24 @@
+import replace from "rollup-plugin-replace";
+import commonjs from "rollup-plugin-commonjs";
+import nodeResolve from "rollup-plugin-node-resolve";
+
+export default {
+  entry: "index.es6.js",
+  dest: "index.browser.js",
+  format: "iife",
+  moduleName: "react2angular",
+  plugins: [
+    nodeResolve({
+      browser: true,
+    }),
+    replace({
+      "process.env.NODE_ENV": JSON.stringify("production"),
+    }),
+    commonjs(),
+  ],
+  external: ["react", "react-dom"],
+  globals: {
+    react: "React",
+    "react-dom": "ReactDOM",
+  },
+};

tsconfig.json

@@ -12,8 +12,9 @@
     ],
     "module": "commonjs",
     "moduleResolution": "node",
+    "noImplicitAny": false,
     "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "preserveConstEnums": true,
     "pretty": true,
     "sourceMap": true,