Work on jsx stuff

packages/all-packages/tsconfig.json

@@ -13,6 +13,8 @@
     "baseUrl": ".",
     "paths": {
       "@jupyterlab/*": ["../*/src"]
-    }
+    },
+    "jsx": "react",
+    "jsxFactory": "h"
   }
 }

packages/cells/package.json

@@ -13,6 +13,7 @@
     "lib": "lib/"
   },
   "dependencies": {
+    "@jupyterlab/apputils": "^0.7.0",
     "@jupyterlab/codeeditor": "^0.7.0",
     "@jupyterlab/codemirror": "^0.7.0",
     "@jupyterlab/coreutils": "^0.7.0",
@@ -22,7 +23,8 @@
     "@phosphor/coreutils": "^1.1.1",
     "@phosphor/messaging": "^1.2.1",
     "@phosphor/signaling": "^1.2.1",
-    "@phosphor/widgets": "^1.3.0"
+    "@phosphor/widgets": "^1.3.0",
+    "@phosphor/virtualdom": "^1.1.1"
   },
   "devDependencies": {
     "rimraf": "^2.5.2",

packages/cells/src/typings.d.ts

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

packages/cells/src/widget.ts → packages/cells/src/widget.tsx

@@ -13,6 +13,10 @@ import {
   Message
 } from '@phosphor/messaging';
 
+import {
+  h, VirtualNode
+} from '@phosphor/virtualdom';
+
 import {
   PanelLayout, Panel
 } from '@phosphor/widgets';
@@ -22,7 +26,7 @@ import {
 } from '@phosphor/widgets';
 
 import {
-  IClientSession
+  IClientSession, VDomRenderer
 } from '@jupyterlab/apputils';
 
 import {
@@ -185,9 +189,8 @@ class Cell extends Widget {
     inputWrapper.addWidget(input);
     (this.layout as PanelLayout).addWidget(inputWrapper);
 
-    let inputPlaceholder = this._inputPlaceholder = new Widget();
-    inputPlaceholder.addClass('jp-InputPlaceholder');
-
+    this._inputPlaceholder = new InputPlaceholder();
+  
     // Footer
     let footer = this._footer = this.contentFactory.createCellFooter();
     footer.addClass(CELL_FOOTER_CLASS);
@@ -328,7 +331,7 @@ class Cell extends Widget {
   private _footer: ICellFooter = null;
   private _inputCollapser: ICollapser = null;
   private _inputWrapper: Widget = null;
-  private _inputPlaceholder: Widget = null;
+  private _inputPlaceholder: InputPlaceholder = null;
 
 }
 
@@ -917,3 +920,20 @@ class Collapser extends Widget implements ICollapser {
     super();
   }
 }
+
+
+export
+class InputPlaceholder extends VDomRenderer<null> {
+
+  protected render(): VirtualNode | ReadonlyArray<VirtualNode> {
+    return (
+      <div>
+        <div className="jp-InputPrompt">
+        </div>
+        <div className="jp-InputPlaceholder">
+        </div>
+      </div>
+    );
+  }
+
+}

packages/cells/tsconfig.json

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

packages/cells/typings/jsx/jsx.d.ts

@@ -0,0 +1,113 @@
+import {
+    ElementAttrs, VirtualElement
+} from '@phosphor/virtualdom';
+
+
+
+/**
+ * Define global element types to JSX namespace.
+ */
+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 { }
+  }
+}