experimenting with blending phosphor/react vdom

Author: telamonian

packages/ui-components/package.json

@@ -41,10 +41,12 @@
     "@phosphor/virtualdom": "^1.2.0",
     "@phosphor/widgets": "^1.9.0",
     "react": "~16.8.4",
+    "react-dom": "~16.8.4",
     "typestyle": "^2.0.1"
   },
   "devDependencies": {
     "@types/react": "~16.8.18",
+    "@types/react-dom": "^16.8.4",
     "@types/webpack-env": "^1.13.9",
     "rimraf": "~2.6.2",
     "typedoc": "^0.14.2",

packages/ui-components/src/icon/jlicon.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { classes } from 'typestyle';
 import { iconStyle, IIconStyle } from '../style/icon';
 
@@ -10,10 +11,11 @@ export class JLIcon {
   ) {}
 
   resolveSvg(title?: string): HTMLElement | null {
-    const svgElement = new DOMParser().parseFromString(
+    const svgDoc = new DOMParser().parseFromString(
       this.svgstr,
       'image/svg+xml'
-    ).documentElement;
+    );
+    const svgElement = svgDoc.documentElement;
 
     if (svgElement.getElementsByTagName('parsererror').length > 0) {
       const errmsg = `SVG HTML was malformed for icon name: ${name}`;
@@ -61,6 +63,13 @@ export class JLIcon {
     return container;
   }
 
+  phosphor(props: JLIcon.IProps): JLIcon.IPhosphor {
+    return {
+      render: (host: HTMLElement) =>
+        ReactDOM.render(<this.react {...props} />, host)
+    };
+  }
+
   protected _initReact() {
     const component = React.forwardRef(
       (
@@ -124,6 +133,10 @@ export namespace JLIcon {
      */
     title?: string;
   }
+
+  export interface IPhosphor {
+    render: (host: HTMLElement) => void;
+  }
 }
 
 namespace Private {