wip switch to react rendering

packages/all-packages/src/typings.d.ts

@@ -1,7 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-/// <reference path="../../cells/typings/tsx/tsx.d.ts"/>
 /// <reference path="../../codemirror/typings/codemirror/codemirror.d.ts"/>
 /// <reference path="../../coreutils/typings/path-posix/path-posix.d.ts"/>
 /// <reference path="../../coreutils/typings/url-parse/url-parse.d.ts"/>

packages/all-packages/tsconfig.json

@@ -21,7 +21,6 @@
       ]
     },
     "jsx": "react",
-    "jsxFactory": "h",
     "inlineSources": true,
     "sourceMap": true
   }

packages/apputils/package.json

@@ -41,9 +41,13 @@
     "@phosphor/signaling": "^1.2.1",
     "@phosphor/virtualdom": "^1.1.1",
     "@phosphor/widgets": "^1.3.0",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
     "sanitize-html": "~1.14.1"
   },
   "devDependencies": {
+    "@types/react": "^15.6.2",
+    "@types/react-dom": "^15.5.6",
     "@types/sanitize-html": "^1.13.31",
     "rimraf": "^2.5.2",
     "typescript": "~2.4.1"

packages/apputils/src/vdom.ts

@@ -13,14 +13,14 @@ import {
   ISignal, Signal
 } from '@phosphor/signaling';
 
-import {
-  VirtualDOM, VirtualNode
-} from '@phosphor/virtualdom';
-
 import {
   Widget
 } from '@phosphor/widgets';
 
+import * as React from 'react';
+
+import * as ReactDOM from 'react-dom';
+
 
 /**
  * Phosphor widget that encodes best practices for VDOM based rendering.
@@ -76,7 +76,15 @@ abstract class VDomRenderer<T extends VDomRenderer.IModel | null> extends Widget
    */
   protected onUpdateRequest(msg: Message): void {
     let vnode = this.render();
-    VirtualDOM.render(vnode, this.node);
+    if (vnode instanceof React.Component) {
+      let el = vnode.render();
+      if (el) {
+        ReactDOM.render(el, this.node);
+      }
+    } else {
+      ReactDOM.render(vnode, this.node);
+    }
+
   }
 
   /* Called after the widget is attached to the DOM
@@ -88,7 +96,7 @@ abstract class VDomRenderer<T extends VDomRenderer.IModel | null> extends Widget
   }
 
   /**
-   * Render the content of this widget using the virtial DOM.
+   * Render the content of this widget using the virtual DOM.
    *
    * This method will be called anytime the widget needs to be rendered,
    * which includes layout triggered rendering and all model changes.
@@ -96,7 +104,7 @@ abstract class VDomRenderer<T extends VDomRenderer.IModel | null> extends Widget
    * Subclasses should define this method and use the current model state
    * to create a virtual node or nodes to render.
    */
-  protected abstract render(): VirtualNode | ReadonlyArray<VirtualNode>;
+  protected abstract render(): React.Component<any> | React.ReactElement<any>;
 
   private _model: T | null;
   private _modelChanged = new Signal<this, void>(this);

packages/cells/package.json

@@ -39,10 +39,13 @@
     "@phosphor/coreutils": "^1.2.0",
     "@phosphor/messaging": "^1.2.1",
     "@phosphor/signaling": "^1.2.1",
-    "@phosphor/virtualdom": "^1.1.1",
-    "@phosphor/widgets": "^1.3.0"
+    "@phosphor/widgets": "^1.3.0",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2"
   },
   "devDependencies": {
+    "@types/react": "^15.6.2",
+    "@types/react-dom": "^15.5.6",
     "rimraf": "^2.5.2",
     "typescript": "~2.4.1"
   }

packages/cells/src/collapser.tsx

@@ -7,9 +7,7 @@ import {
   VDomRenderer
 } from '@jupyterlab/apputils';
 
-import {
-  VirtualNode, h
-} from '@phosphor/virtualdom';
+import * as React from 'react';
 
 import {
   Cell, CodeCell
@@ -70,13 +68,13 @@ abstract class Collapser extends VDomRenderer<null> {
   /**
    * Render the collapser with the virtual DOM.
    */
-  protected render(): VirtualNode | ReadonlyArray<VirtualNode> {
+  protected render(): React.Component<any> | React.ReactElement<any> {
     let childClass = COLLAPSER_CHILD_CLASS;
     if (this.collapsed) {
       childClass += ` ${MOD_COLLAPSED_CLASS}`;
     }
     return (
-      <div className={childClass}  onclick={ (e) => this.handleClick(e) } >
+      <div className={childClass}  onClick={ (e) => this.handleClick(e) } >
       </div>
     );
   }
@@ -84,7 +82,7 @@ abstract class Collapser extends VDomRenderer<null> {
   /**
    * Handle the click event.
    */
-  protected abstract handleClick(e: Event): void;
+  protected abstract handleClick(e: React.MouseEvent<HTMLDivElement>): void;
 
 }
 
@@ -116,7 +114,7 @@ class InputCollapser extends Collapser {
   /**
    * Handle a click event for the user to collapse the cell's input.
    */
-  protected handleClick(e: Event): void {
+  protected handleClick(e: React.MouseEvent<HTMLDivElement>): void {
     let cell = this.parent.parent as Cell;
     if (cell) {
       cell.inputHidden = !cell.inputHidden;
@@ -155,7 +153,7 @@ class OutputCollapser extends Collapser {
   /**
    * Handle a click event for the user to collapse the cell's output.
    */
-  protected handleClick(e: Event): void {
+  protected handleClick(e: React.MouseEvent<HTMLDivElement>): void {
     let cell = this.parent.parent as CodeCell;
     if (cell) {
       cell.outputHidden = !cell.outputHidden;

packages/cells/src/placeholder.tsx

@@ -3,10 +3,7 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-
-import {
-  h, VirtualNode
-} from '@phosphor/virtualdom';
+import * as React from 'react';
 
 import {
   VDomRenderer
@@ -56,7 +53,7 @@ abstract class Placeholder extends VDomRenderer<null> {
   /**
    * Construct a new placeholder.
    */
-  constructor(callback: (e: Event) => void) {
+  constructor(callback: (e: React.MouseEvent<HTMLDivElement>) => void) {
     super();
     this.addClass(PLACEHOLDER_CLASS);
     this._callback = callback;
@@ -65,12 +62,12 @@ abstract class Placeholder extends VDomRenderer<null> {
   /**
    * Handle the click event.
    */
-  protected handleClick(e: Event): void {
+  protected handleClick(e: React.MouseEvent<HTMLDivElement>): void {
     let callback = this._callback;
     callback(e);
   }
 
-  private _callback: (e: Event) => void;
+  private _callback: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 
@@ -82,7 +79,7 @@ class InputPlaceholder extends Placeholder {
   /**
    * Construct a new input placeholder.
    */
-  constructor(callback: (e: Event) => void) {
+  constructor(callback: (e: React.MouseEvent<HTMLDivElement>) => void) {
     super(callback);
     this.addClass(INPUT_PLACEHOLDER_CLASS);
   }
@@ -90,14 +87,16 @@ class InputPlaceholder extends Placeholder {
   /**
    * Render the input placeholder using the virtual DOM.
    */
-  protected render(): VirtualNode | ReadonlyArray<VirtualNode> {
-    return [
+  protected render(): React.Component<any> | React.ReactElement<any> {
+    return (
+       <div>
         <div className={INPUT_PROMPT_CLASS}>
-        </div>,
-        <div className={CONTENT_CLASS} onclick={ (e) => this.handleClick(e) }>
+        </div>
+        <div className={CONTENT_CLASS} onClick={ (e) => this.handleClick(e) }>
           <div className="jp-MoreHorizIcon" />
         </div>
-    ]
+      </div>
+    );
   }
 
 }
@@ -111,7 +110,7 @@ class OutputPlaceholder extends Placeholder {
   /**
    * Construct a new output placeholder.
    */
-  constructor(callback: (e: Event) => void) {
+  constructor(callback: (e: React.MouseEvent<HTMLDivElement>) => void) {
     super(callback);
     this.addClass(OUTPUT_PLACEHOLDER_CLASS);
   }
@@ -119,14 +118,16 @@ class OutputPlaceholder extends Placeholder {
   /**
    * Render the output placeholder using the virtual DOM.
    */
-  protected render(): VirtualNode | ReadonlyArray<VirtualNode> {
-    return [
+  protected render(): React.Component<any> | React.ReactElement<any> {
+    return (
+      <div>
         <div className={OUTPUT_PROMPT_CLASS}>
-        </div>,
-        <div className={CONTENT_CLASS} onclick={ (e) => this.handleClick(e) }>
+        </div>
+        <div className={CONTENT_CLASS} onClick={ (e) => this.handleClick(e) }>
           <div className="jp-MoreHorizIcon" />
         </div>
-    ]
+      </div>
+    );
   }
 
 }

packages/cells/src/typings.d.ts

@@ -1,4 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-/// <reference path="../typings/tsx/tsx.d.ts"/>

packages/cells/tsconfig.json

@@ -9,9 +9,7 @@
     "target": "ES5",
     "outDir": "./lib",
     "lib": ["ES5", "ES2015.Promise", "DOM", "ES2015.Collection"],
-    "types": [],
-    "jsx": "react",
-    "jsxFactory": "h"
+    "jsx": "react"
   },
   "include": ["src/*"]
 }

packages/cells/typings/tsx/tsx.d.ts

@@ -1,120 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-
-import {
-  VirtualElement, ElementAttrs
-} from '@phosphor/virtualdom';
-
-
-/**
- * Declare the global JSX namespace that allows phorphor's virtual DOM
- * library to be used with TSX syntax in a type safe manner.
- */
-declare global {
-
-  namespace JSX {
-    interface IntrinsicElements {
-      a: ElementAttrs;
-      abbr: ElementAttrs;
-      address: ElementAttrs;
-      area: ElementAttrs;
-      article: ElementAttrs;
-      aside: ElementAttrs;
-      audio: ElementAttrs;
-      b: ElementAttrs;
-      bdi: ElementAttrs;
-      bdo: ElementAttrs;
-      blockquote: ElementAttrs;
-      br: ElementAttrs;
-      button: ElementAttrs;
-      canvas: ElementAttrs;
-      caption: ElementAttrs;
-      cite: ElementAttrs;
-      code: ElementAttrs;
-      col: ElementAttrs;
-      colgroup: ElementAttrs;
-      data: ElementAttrs;
-      datalist: ElementAttrs;
-      dd: ElementAttrs;
-      del: ElementAttrs;
-      dfn: ElementAttrs;
-      div: ElementAttrs;
-      dl: ElementAttrs;
-      dt: ElementAttrs;
-      em: ElementAttrs;
-      embed: ElementAttrs;
-      fieldset: ElementAttrs;
-      figcaption: ElementAttrs;
-      figure: ElementAttrs;
-      footer: ElementAttrs;
-      form: ElementAttrs;
-      h1: ElementAttrs;
-      h2: ElementAttrs;
-      h3: ElementAttrs;
-      h4: ElementAttrs;
-      h5: ElementAttrs;
-      h6: ElementAttrs;
-      header: ElementAttrs;
-      hr: ElementAttrs;
-      i: ElementAttrs;
-      iframe: ElementAttrs;
-      img: ElementAttrs;
-      input: ElementAttrs;
-      ins: ElementAttrs;
-      kbd: ElementAttrs;
-      label: ElementAttrs;
-      legend: ElementAttrs;
-      li: ElementAttrs;
-      main: ElementAttrs;
-      map: ElementAttrs;
-      mark: ElementAttrs;
-      meter: ElementAttrs;
-      nav: ElementAttrs;
-      noscript: ElementAttrs;
-      object: ElementAttrs;
-      ol: ElementAttrs;
-      optgroup: ElementAttrs;
-      option: ElementAttrs;
-      output: ElementAttrs;
-      p: ElementAttrs;
-      param: ElementAttrs;
-      pre: ElementAttrs;
-      progress: ElementAttrs;
-      q: ElementAttrs;
-      rp: ElementAttrs;
-      rt: ElementAttrs;
-      ruby: ElementAttrs;
-      s: ElementAttrs;
-      samp: ElementAttrs;
-      section: ElementAttrs;
-      select: ElementAttrs;
-      small: ElementAttrs;
-      source: ElementAttrs;
-      span: ElementAttrs;
-      strong: ElementAttrs;
-      sub: ElementAttrs;
-      summary: ElementAttrs;
-      sup: ElementAttrs;
-      table: ElementAttrs;
-      tbody: ElementAttrs;
-      td: ElementAttrs;
-      textarea: ElementAttrs;
-      tfoot: ElementAttrs;
-      th: ElementAttrs;
-      thead: ElementAttrs;
-      time: ElementAttrs;
-      title: ElementAttrs;
-      tr: ElementAttrs;
-      track: ElementAttrs;
-      u: ElementAttrs;
-      ul: ElementAttrs;
-      var_:ElementAttrs;
-      video: ElementAttrs;
-      wbr: ElementAttrs;
-    }
-
-    interface Element extends VirtualElement {}
-  }
-
-}