withFauxDOM, connectFauxDOM, animateFauxDOM? support

types/react-faux-dom/index.d.ts

@@ -28,3 +28,10 @@ export function createElement(nodeName: string): Element;
 export function createElementNS(namespace: string, nodeName: string): Element;
 
 export function compareDocumentPosition(): number;
+
+export interface IReactFauxDomProps {
+    connectFauxDOM?(node: string, name: string, discardNode?: any): Element;
+    animateFauxDOM?(duration: number): void;
+}
+
+export function withFauxDOM<P>(WrappedComponent: any): React.ClassicComponentClass<P & IReactFauxDomProps>;

types/react-faux-dom/react-faux-dom-tests.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as d3 from 'd3';
-import { createElement, Element } from 'react-faux-dom';
+import { createElement, Element, IReactFauxDomProps, withFauxDOM } from 'react-faux-dom';
 
 class SomeChart extends React.Component {
   render() {
@@ -21,3 +21,30 @@ class SomeChart extends React.Component {
     return el.toReact();
   }
 }
+
+interface ChartProps extends IReactFauxDomProps {
+  chart?: any;
+}
+
+class MyReactComponent extends React.Component<ChartProps> {
+  componentDidMount() {
+    if (this.props.connectFauxDOM && this.props.animateFauxDOM) {
+      const faux = this.props.connectFauxDOM('div', 'chart');
+      d3.select(faux)
+        .append('div')
+        .html('Hello World!');
+      this.props.animateFauxDOM(800);
+    }
+  }
+
+  render() {
+    return <div>
+      <h2>Here is some fancy data:</h2>
+      <div className='renderedD3'>
+        {this.props.chart}
+      </div>
+    </div>;
+  }
+}
+
+const AdvancedComponent = withFauxDOM<ChartProps>(MyReactComponent);