Skip to content

Commit

Permalink
Split vdom-extension into separate packages
Browse files Browse the repository at this point in the history
  • Loading branch information
gnestor committed Mar 12, 2019
1 parent 4b81fe2 commit af9b312
Show file tree
Hide file tree
Showing 14 changed files with 248 additions and 14 deletions.
2 changes: 2 additions & 0 deletions dev_mode/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
"@jupyterlab/tooltip": "^1.0.0-alpha.3",
"@jupyterlab/tooltip-extension": "^1.0.0-alpha.3",
"@jupyterlab/ui-components": "^1.0.0-alpha.3",
"@jupyterlab/vdom": "^1.0.0-alpha.3",
"@jupyterlab/vdom-extension": "^1.0.0-alpha.3",
"@jupyterlab/vega4-extension": "^1.0.0-alpha.3",
"@phosphor/algorithm": "^1.1.2",
Expand Down Expand Up @@ -304,6 +305,7 @@
"@jupyterlab/tooltip": "../packages/tooltip",
"@jupyterlab/tooltip-extension": "../packages/tooltip-extension",
"@jupyterlab/ui-components": "../packages/ui-components",
"@jupyterlab/vdom": "../packages/vdom",
"@jupyterlab/vdom-extension": "../packages/vdom-extension",
"@jupyterlab/vega4-extension": "../packages/vega4-extension"
}
Expand Down
1 change: 1 addition & 0 deletions jupyterlab/staging/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
"@jupyterlab/tooltip": "^1.0.0-alpha.3",
"@jupyterlab/tooltip-extension": "^1.0.0-alpha.3",
"@jupyterlab/ui-components": "^1.0.0-alpha.3",
"@jupyterlab/vdom": "^1.0.0-alpha.3",
"@jupyterlab/vdom-extension": "^1.0.0-alpha.3",
"@jupyterlab/vega4-extension": "^1.0.0-alpha.3",
"@phosphor/algorithm": "^1.1.2",
Expand Down
1 change: 1 addition & 0 deletions packages/metapackage/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@
"@jupyterlab/tooltip": "^1.0.0-alpha.3",
"@jupyterlab/tooltip-extension": "^1.0.0-alpha.3",
"@jupyterlab/ui-components": "^1.0.0-alpha.3",
"@jupyterlab/vdom": "^1.0.0-alpha.3",
"@jupyterlab/vdom-extension": "^1.0.0-alpha.3",
"@jupyterlab/vega4-extension": "^1.0.0-alpha.3"
},
Expand Down
3 changes: 3 additions & 0 deletions packages/metapackage/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,9 @@
{
"path": "../ui-components"
},
{
"path": "../vdom"
},
{
"path": "../vdom-extension"
},
Expand Down
10 changes: 1 addition & 9 deletions packages/vdom-extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,9 @@
"@jupyterlab/docregistry": "^1.0.0-alpha.3",
"@jupyterlab/notebook": "^1.0.0-alpha.4",
"@jupyterlab/rendermime": "^1.0.0-alpha.3",
"@jupyterlab/rendermime-interfaces": "^1.3.0-alpha.3",
"@jupyterlab/services": "^4.0.0-alpha.3",
"@nteract/transform-vdom": "^4.0.1",
"@phosphor/messaging": "^1.2.2",
"@phosphor/widgets": "^1.6.0",
"react": "~16.4.2",
"react-dom": "~16.4.2"
"@jupyterlab/vdom": "^1.0.0-alpha.3"
},
"devDependencies": {
"@types/react": "~16.4.13",
"@types/react-dom": "~16.0.7",
"rimraf": "~2.6.2",
"typedoc": "^0.14.2",
"typescript": "~3.3.1"
Expand Down
2 changes: 1 addition & 1 deletion packages/vdom-extension/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { INotebookTracker } from '@jupyterlab/notebook';

import { IRenderMimeRegistry } from '@jupyterlab/rendermime';

import { RenderedVDOM } from './widget';
import { RenderedVDOM } from '@jupyterlab/vdom';

/**
* The CSS class for a VDOM icon.
Expand Down
5 changes: 1 addition & 4 deletions packages/vdom-extension/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,7 @@
"path": "../rendermime"
},
{
"path": "../rendermime-interfaces"
},
{
"path": "../services"
"path": "../vdom"
}
]
}
78 changes: 78 additions & 0 deletions packages/vdom/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
# 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, simply open it:

## Development

See the [JupyterLab Contributor Documentation](https://github.com/jupyterlab/jupyterlab/blob/master/CONTRIBUTING.md).
54 changes: 54 additions & 0 deletions packages/vdom/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"name": "@jupyterlab/vdom",
"version": "1.0.0-alpha.3",
"description": "A viewer for VDOM documents.",
"homepage": "https://github.com/jupyterlab/jupyterlab",
"bugs": {
"url": "https://github.com/jupyterlab/jupyterlab/issues"
},
"license": "BSD-3-Clause",
"author": "Project Jupyter",
"files": [
"lib/*.d.ts",
"lib/*.js",
"style/*"
],
"main": "lib/index.js",
"types": "lib/index.d.ts",
"directories": {
"lib": "lib/"
},
"repository": {
"type": "git",
"url": "https://github.com/jupyterlab/jupyterlab.git"
},
"scripts": {
"build": "tsc -b",
"clean": "rimraf lib",
"docs": "typedoc --options tdoptions.json --theme ../../typedoc-theme src",
"prepublishOnly": "npm run build",
"watch": "tsc -b --watch"
},
"dependencies": {
"@jupyterlab/apputils": "^1.0.0-alpha.3",
"@jupyterlab/docregistry": "^1.0.0-alpha.3",
"@jupyterlab/rendermime-interfaces": "^1.3.0-alpha.3",
"@jupyterlab/services": "^4.0.0-alpha.3",
"@nteract/transform-vdom": "^4.0.1",
"@phosphor/messaging": "^1.2.2",
"@phosphor/widgets": "^1.6.0",
"react": "~16.4.2",
"react-dom": "~16.4.2"
},
"devDependencies": {
"@types/react": "~16.4.13",
"@types/react-dom": "~16.0.7",
"rimraf": "~2.6.2",
"typedoc": "^0.14.2",
"typescript": "~3.3.1"
},
"publishConfig": {
"access": "public"
},
"gitHead": "31f68f6d1717b58c344a5fb4f4baf3b123b7c75c"
}
File renamed without changes.
29 changes: 29 additions & 0 deletions packages/vdom/style/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
Copyright (c) Jupyter Development Team.
Distributed under the terms of the Modified BSD License.
*/

/* Add CSS variables to :root */
:root {
--jp-icon-vdom: url('./react.svg');
}

/* Base styles */
.jp-RenderedVDOM {
width: 100%;
height: 100%;
padding: 0;
overflow: auto;
}

/* Document styles */
.jp-MimeDocument .jp-RenderedVDOM {
padding: 5px;
}

/* Document icon */
.jp-VDOMIcon {
background-image: var(--jp-icon-vdom);
background-size: 24px;
background-position: center !important;
}
35 changes: 35 additions & 0 deletions packages/vdom/style/react.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions packages/vdom/tdoptions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"excludeNotExported": true,
"mode": "file",
"target": "es5",
"module": "es5",
"lib": [
"lib.es2015.d.ts",
"lib.es2015.collection.d.ts",
"lib.es2015.promise.d.ts",
"lib.dom.d.ts"
],
"out": "../../docs/api/vdom",
"baseUrl": ".",
"paths": {
"@jupyterlab/*": ["../packages/*"]
},
"esModuleInterop": true,
"jsx": "react",
"types": []
}
22 changes: 22 additions & 0 deletions packages/vdom/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"extends": "../../tsconfigbase",
"compilerOptions": {
"outDir": "lib",
"rootDir": "src"
},
"include": ["src/*"],
"references": [
{
"path": "../apputils"
},
{
"path": "../docregistry"
},
{
"path": "../rendermime-interfaces"
},
{
"path": "../services"
}
]
}

0 comments on commit af9b312

Please sign in to comment.