Initial implementation of cell models and phosphor widgets.

jupyter · jasongrout · Nov 4, 2015 · Nov 4, 2015 · Nov 9, 2015 · Dec 3, 2015
commit eac66ee81aae59267066278dd483c35bc1d99d88
diff --git a/example/data/data.json b/example/data/data.json
diff --git a/example/index.css b/example/index.css
@@ -0,0 +1,3 @@
+.jp-Cell {
+	border: 1px solid gray;
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="index.css">
+<script src="../node_modules/steal/steal.js" data-main="example/index"></script>
+</head>
+<body>
+    <div>
+        <button id="editMarkdown">Edit Markdown</button>
+        <button id="renderMarkdown">Render Markdown</button>
+    </div>
+</body>
+</html>
diff --git a/example/index.ts b/example/index.ts
@@ -0,0 +1,72 @@
+'use-strict';
+
+import {
+  Widget
+} from 'phosphor-widget';
+
+import {InputAreaViewModel} from 'jupyter-js-input-area';
+import {OutputAreaViewModel, consumeMessage} from 'jupyter-js-output-area';
+import {TextEditorViewModel} from 'jupyter-js-input-area';
+
+
+import {
+  CodeCellWidget, CodeCellViewModel, 
+  MarkdownCellViewModel, MarkdownCellWidget
+} from '../lib/index';
+
+let initialCode = `def f(n):
+    for mdInputArea in range(n):
+        print(mdInputArea)
+`;
+
+let initialMD = `
+# Heading 1
+This is some text
+## Heading 2
+* some
+* list
+* of
+* **bold**, *emphasized* items
+`;
+
+function main(): void {
+  let mdText = new TextEditorViewModel();
+  mdText.text = initialMD;
+  let mdInputArea = new InputAreaViewModel();
+  mdInputArea.textEditor = mdText;
+  let mdCell = new MarkdownCellViewModel();
+  mdCell.input = mdInputArea;
+  let mdWidget = new MarkdownCellWidget(mdCell);
+  Widget.attach(mdWidget, document.body);
+
+  // Hook up markdown cell control buttons
+  let mdedit = document.getElementById('editMarkdown');
+  let mdrender = document.getElementById('renderMarkdown');
+  mdedit.onclick = () => {
+    mdWidget.editInput()
+  };
+  mdrender.onclick = () => {
+    mdWidget.renderInput()
+  };
+
+  let codeText = new TextEditorViewModel();
+  codeText.text = initialCode;
+  codeText.mimetype = 'text/x-python';
+  let codeInput = new InputAreaViewModel();
+  codeInput.textEditor = codeText;
+  let codeOutput = new OutputAreaViewModel();
+  let codeCell = new CodeCellViewModel();
+  codeCell.input = codeInput;
+  codeCell.output = codeOutput;  
+  let codeWidget = new CodeCellWidget(codeCell);
+  Widget.attach(codeWidget, document.body);
+
+  // Populate the output of the code cell
+  System.import('example/data/data.json').then((data: any[]) => {
+    data.forEach((msg) => {
+      consumeMessage(msg, codeOutput);
+    })
+  })
+}
+
+main();
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "ES5",
+    "sourceMap": false
+  },
+
+    "files": [
+      "../typings/es6/es6-promise.d.ts",
+      "../typings/es6/systemjs.d.ts",
+    "index.ts"
+  ]
+}
diff --git a/package.json b/package.json
@@ -6,6 +6,8 @@
   "typings": "lib/index.d.ts",
   "dependencies": {
     "jupyter-js-input-area": "0.0.2",
+    "jupyter-js-output-area": "file:../jupyter-js-output-area",
+    "marked": "^0.3.5",
     "phosphor-observablelist": "^1.0.0-beta",
     "phosphor-signaling": "^1.2.0",
     "phosphor-widget": "^1.0.0-beta.1"
@@ -23,14 +25,19 @@
     "karma-mocha-reporter": "^1.1.1",
     "mocha": "^2.2.5",
     "rimraf": "^2.4.2",
+    "steal": "^0.12.7",
     "typedoc": "^0.3.12",
-    "typescript": "^1.7.3"
+    "typescript": "^1.6.2"
   },
   "scripts": {
-    "clean": "rimraf docs && rimraf lib && rimraf test/build",
+    "clean:lib": "rimraf lib",
+    "clean:example": "rimraf example/*.js example/*.map",
+    "clean:test": "rimraf test/build && rimraf test/coverage",
+    "clean": "npm run clean:lib && npm run clean:example && npm run clean:test",
     "build:src": "tsc --project src && node scripts/copycss.js",
     "build:test": "tsc --project test",
-    "build": "npm run build:src && npm run build:test",
+    "build:example": "tsc --project example",
+    "build": "npm run build:src && npm run build:example && npm run build:test",
     "docs": "typedoc --options scripts/tdoptions.json",
     "postinstall": "npm dedupe",
     "prepublish": "npm run build",

diff --git a/scripts/tdoptions.json b/scripts/tdoptions.json
@@ -7,5 +7,6 @@
   "out": "docs/api",
   "src": [
     "src/index.ts",
+    "typings/es6/es6-promise.d.ts"
   ]
 }