Add vdom-extension

README.md

@@ -11,12 +11,14 @@ This is a [monorepo](https://github.com/lerna/lerna#what-does-a-lerna-repo-look-
 | [geojson-extension](packages/geojson-extension) | `application/geo+json` | `.geojson`, `.geo.json` |
 | [json-extension](packages/json-extension) | `application/json` | `.json`, `.ipynb` |
 | [plotly-extension](packages/plotly-extension) | `application/vnd.plotly.v1+json` | `.plotly`, `.plotly.json` |
+| [vdom-extension](packages/vdom-extension) | `application/vdom.v1+json` | `.vdom`, `.vdom.json` |
 
 ## Install
 
 * geojson-extension: `jupyter labextension install @jupyterlab/geojson-extension`
 * json-extension: `jupyter labextension install @jupyterlab/json-extension`
 * plotly-extension: `jupyter labextension install @jupyterlab/plotly-extension`
+* vdom-extension: `jupyter labextension install @jupyterlab/vdom-extension`
 
 ## Contributing
 

lerna.json

@@ -3,5 +3,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.10.0"
+  "version": "0.10.1"
 }

packages/geojson-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/geojson-extension",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "JupyterLab - GeoJSON Renderer",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

packages/geojson-extension/src/index.tsx

@@ -151,16 +151,16 @@ const extensions: IRenderMime.IExtension | IRenderMime.IExtension[] = [
     rank: 0,
     dataType: 'json',
     fileTypes: [{
-      name: 'GeoJSON',
+      name: 'geojson',
       mimeTypes: [MIME_TYPE],
       extensions: ['.geojson', '.geo.json'],
       iconClass: CSS_ICON_CLASS
     }],
     documentWidgetFactoryOptions: {
       name: 'GeoJSON',
-      primaryFileType: 'GeoJSON',
-      fileTypes: ['GeoJSON'],
-      defaultFor: ['GeoJSON']
+      primaryFileType: 'geojson',
+      fileTypes: ['geojson', 'json'],
+      defaultFor: ['geojson']
     }
   }
 ];

packages/json-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/json-extension",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "JupyterLab - JSON Renderer",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -18,8 +18,8 @@
   "dependencies": {
     "@jupyterlab/rendermime-interfaces": "^0.3.0",
     "@phosphor/widgets": "^1.3.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
     "react-highlighter": "^0.4.0",
     "react-json-tree": "^0.10.9"
   },

packages/json-extension/src/index.tsx

@@ -26,10 +26,7 @@ import '../style/index.css';
 const CSS_CLASS = 'jp-RenderedJSON';
 
 /**
- * The MIME type for Vega.
- *
- * #### Notes
- * The version of this follows the major version of Vega.
+ * The MIME type for JSON.
  */
 export
 const MIME_TYPE = 'application/json';
@@ -38,7 +35,7 @@ const MIME_TYPE = 'application/json';
 export
 class RenderedJSON extends Widget implements IRenderMime.IRenderer {
   /**
-   * Create a new widget for rendering Vega/Vega-Lite.
+   * Create a new widget for rendering JSON.
    */
   constructor(options: IRenderMime.IRendererOptions) {
     super();
@@ -65,7 +62,7 @@ class RenderedJSON extends Widget implements IRenderMime.IRenderer {
 
 
 /**
- * A mime renderer factory for GeoJSON data.
+ * A mime renderer factory for JSON data.
  */
 export
 const rendererFactory: IRenderMime.IRendererFactory = {

packages/plotly-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/plotly-extension",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "JupyterLab - Plotly Renderer",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

packages/plotly-extension/src/index.tsx

@@ -41,14 +41,12 @@ namespace Private {
 const CSS_CLASS = 'jp-RenderedPlotly';
 
 /**
- * The CSS class for a GeoJSON icon.
+ * The CSS class for a Plotly icon.
  */
 const CSS_ICON_CLASS = 'jp-MaterialIcon jp-PlotlyIcon';
 
 /**
- * The MIME type for Vega.
- *
- * #### Notes
+ * The MIME type for Plotly.
  * The version of this follows the major version of Plotly.
  */
 export
@@ -63,7 +61,7 @@ interface PlotlySpec {
 export
 class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
   /**
-   * Create a new widget for rendering Vega/Vega-Lite.
+   * Create a new widget for rendering Plotly.
    */
   constructor(options: IRenderMime.IRendererOptions) {
     super();
@@ -115,7 +113,7 @@ class RenderedPlotly extends Widget implements IRenderMime.IRenderer {
 
 
 /**
- * A mime renderer factory for GeoPlotly data.
+ * A mime renderer factory for Plotly data.
  */
 export
 const rendererFactory: IRenderMime.IRendererFactory = {
@@ -140,7 +138,7 @@ const extensions: IRenderMime.IExtension | IRenderMime.IExtension[] = [
     documentWidgetFactoryOptions: {
       name: 'Plotly',
       primaryFileType: 'plotly',
-      fileTypes: ['plotly'],
+      fileTypes: ['plotly', 'json'],
       defaultFor: ['plotly']
     }
   }

packages/vdom-extension/README.md

@@ -0,0 +1,104 @@
+# vdom-extension
+
+A JupyterLab extension for rendering VirtualDOM using React
+
+![demo](http://g.recordit.co/EIwAIBsGBh.gif)
+
+## Prerequisites
+
+* JupyterLab ^0.27.0
+
+## Usage
+
+To render VDOM output in IPython:
+
+```python
+from IPython.display import display
+
+def VDOM(data={}):
+    bundle = {}
+    bundle['application/vdom.v1+json'] = data
+    display(bundle, raw=True)
+
+VDOM({
+    'tagName': 'div',
+    'attributes': {},
+    'children': [{
+        'tagName': 'h1',
+        'attributes': {},
+        'children': 'Our Incredibly Declarative Example',
+        'key': 0
+    }, {
+        'tagName': 'p',
+        'attributes': {},
+        'children': ['Can you believe we wrote this ', {
+            'tagName': 'b',
+            'attributes': {},
+            'children': 'in Python',
+            'key': 1
+        }, '?'],
+        'key': 1
+    }, {
+        'tagName': 'img',
+        'attributes': {
+            'src': 'https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif'
+        },
+        'key': 2
+    }, {
+        'tagName': 'p',
+        'attributes': {},
+        'children': ['What will ', {
+            'tagName': 'b',
+            'attributes': {},
+            'children': 'you',
+            'key': 1
+        }, ' create next?'],
+        'key': 3
+    }]
+})
+```
+
+Using the [vdom Python library](https://github.com/nteract/vdom):
+
+```python
+from vdom import h1, p, img, div, b
+
+div([
+    h1('Our Incredibly Declarative Example'),
+    p(['Can you believe we wrote this ', b('in Python'), '?']),
+    img(src="https://media.giphy.com/media/xUPGcguWZHRC2HyBRS/giphy.gif"),
+    p(['What will ', b('you'), ' create next?']),
+])
+```
+
+To render a `.vdom` or `.vdom.json` file as a tree, simply open it:
+
+## Install
+
+```bash
+jupyter labextension install @jupyterlab/vdom-extension
+```
+
+## Development
+
+```bash
+# Clone the repo to your local environment
+git clone https://github.com/jupyterlab/jupyter-renderers.git
+cd jupyter-renderers
+# Install dependencies
+npm install
+# Build Typescript source
+npm run build
+# Link your development version of the extension with JupyterLab
+jupyter labextension link packages/vdom-extension
+# Rebuild Typescript source after making changes
+npm run build
+# Rebuild JupyterLab after making any changes
+jupyter lab build
+```
+
+## Uninstall
+
+```bash
+jupyter labextension uninstall @jupyterlab/vdom-extension
+```

packages/vdom-extension/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@jupyterlab/vdom-extension",
+  "version": "0.10.0",
+  "description": "JupyterLab - VDOM Renderer",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/*.d.ts",
+    "lib/*.js",
+    "style/*"
+  ],
+  "directories": {
+    "lib": "lib/"
+  },
+  "jupyterlab": {
+    "mimeExtension": true
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@types/react": "^15.0.33",
+    "@types/react-dom": "^15.5.1",
+    "rimraf": "^2.5.2",
+    "typescript": "~2.3.1"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf lib",
+    "watch": "tsc -w"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyter-renderers.git"
+  },
+  "author": "Project Jupyter",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyter-renderers/issues"
+  },
+  "homepage": "https://github.com/jupyterlab/jupyter-renderers"
+}