Add local type definitions for @nteract/transform-vdom

Fix type definitions for `@nteract/transform-vdom`

packages/vdom-extension/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@jupyterlab/rendermime-interfaces": "^0.3.0",
     "@phosphor/widgets": "^1.3.0",
+    "@nteract/transform-vdom": "^1.1.1",
     "react": "^15.6.2",
     "react-dom": "^15.6.2"
   },

packages/vdom-extension/src/index.tsx

@@ -13,7 +13,7 @@ import * as React from 'react';
 
 import * as ReactDOM from 'react-dom';
 
-import { objectToReactElement } from './object-to-react';
+import VDOM from '@nteract/transform-vdom';
 
 import '../style/index.css';
 
@@ -53,24 +53,9 @@ class RenderedVDOM extends Widget implements IRenderMime.IRenderer {
     const data = model.data[this._mimeType] as any;
     // const metadata = model.metadata[this._mimeType] as any || {};
     return new Promise<void>((resolve, reject) => {
-      try {
-        const vdomElement = objectToReactElement({ ...data })
-        ReactDOM.render(vdomElement, this.node, () => {
-          resolve(undefined);
-        });
-      } catch (error) {
-        const errorElement = (
-          <div style={{ padding: 5 }}>
-            <div style={{ textAlign: 'center', marginBottom: 10 }}>
-              There was an error rendering VDOM data from the kernel or notebook
-            </div>
-            <code>{error.message}</code>
-          </div>
-        );
-        ReactDOM.render(errorElement, this.node, () => {
-          resolve(undefined);
-        });
-      }
+      ReactDOM.render(<VDOM data={data} />, this.node, () => {
+        resolve(undefined);
+      });
     });
   }
 

packages/vdom-extension/src/transform-vdom.d.ts

@@ -0,0 +1,23 @@
+// Type definitions for @nteract/transform-vdom v1.1.1
+// https://github.com/jupyterlab/jupyter-renderers
+// Definitions by: Grant Nestor <https://github.com/gnestor>
+
+
+declare module '@nteract/transform-vdom' {
+
+  import * as React from 'react';
+
+  interface VDOMElement {
+    tagName: 'string';
+    attributes: Object;
+    children: Array<VDOMElement>;
+    key?: number | string | null;
+  }
+
+  interface VDOMProps extends React.Props<VDOM> {
+    data: VDOMElement;
+  }
+
+  export default class VDOM extends React.Component<VDOMProps, {}> { }
+
+}