diff --git a/jupyter-js-widgets/examples/web6/.gitignore b/jupyter-js-widgets/examples/web6/.gitignore new file mode 100644 index 0000000000..4b39bcb2ce --- /dev/null +++ b/jupyter-js-widgets/examples/web6/.gitignore @@ -0,0 +1,3 @@ +lib/ +built/ +node_modules/ diff --git a/jupyter-js-widgets/examples/web6/.jshintrc b/jupyter-js-widgets/examples/web6/.jshintrc new file mode 100644 index 0000000000..2119fa84a9 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/.jshintrc @@ -0,0 +1,3 @@ +{ + "esnext": true +} diff --git a/jupyter-js-widgets/examples/web6/README.md b/jupyter-js-widgets/examples/web6/README.md new file mode 100644 index 0000000000..3684844843 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/README.md @@ -0,0 +1,36 @@ +# Using jupyter-js-widgets in non-notebook, web context + mybinder backend + +## Description + +This directory is an example project that shows how to use `jupyter-js-widgets` +and `ipywidgets` in a web context other than the notebook. + +Similarly to the `web3` example, this example makes uses of a Python kernel. +However, it makes use of the `mybinder` service to spawn a new transient Jupyter +notebook server from which it then requests a Python kernel. + +Besides, this example also displays read-only text area containing the code +provided in the `widget_code.json`, which we used to generate the widget state. +This directory is an example project that shows how you can embed the widgets in +a context other than the notebook. + +## Try it + +1. Start with a development install of jupyter-js-widgets by running + `npm install` in the `jupyter-js-widgets` subfolder of the repo root + (see the [README.md](../../../README.md) in the repo root for more details). +2. Cd into this directory and run `npm install`. +3. Now open the `index.html` file. + +## Details + +If you plan to reproduce this in your own project, pay careful attention to the +`package.json` file. The dependency to `jupyter-js-widgets`, which reads +`"jupyter-js-widgets": "file:../../../ipywidgets"`, **should not** point to +`"file:../../../ipywidgets"`. + +Instead point it to the version you want to use on npm. + +(but really, you should let npm do this for you by running + +`npm install --save jupyter-js-widgets`.) diff --git a/jupyter-js-widgets/examples/web6/index.html b/jupyter-js-widgets/examples/web6/index.html new file mode 100644 index 0000000000..7cc570b180 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/index.html @@ -0,0 +1,44 @@ + + + + + + + + +
+
+
+
+ + diff --git a/jupyter-js-widgets/examples/web6/package.json b/jupyter-js-widgets/examples/web6/package.json new file mode 100644 index 0000000000..b8a88e00f8 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/package.json @@ -0,0 +1,41 @@ +{ + "name": "jupyter-js-widgets-test", + "version": "1.0.0", + "description": "Project that tests the ability to npm install jupyter-js-widgets within an npm project.", + "main": "index.js", + "scripts": { + "clean": "rimraf lib && rimraf built", + "prepublish": "npm run build", + "build": "npm run clean && tsc --project src && node scripts/copyfiles.js && webpack", + "host": "http-server", + "test": "npm run test:default", + "test:default": "echo \"No test specified\"" + }, + "author": "IPython", + "license": "BSD-3-Clause", + "dependencies": { + "@jupyterlab/services": "^0.24.0", + "@types/codemirror": "0.0.33", + "codemirror": "^5.9.0", + "font-awesome": "^4.5.0", + "http-server": "^0.8.5", + "jupyter-js-widgets": "file:../..", + "lodash.startswith": "^4.2.1", + "browser-request": "^0.3.3" + }, + "devDependencies": { + "css-loader": "^0.23.1", + "file-loader": "^0.8.5", + "fs-extra": "^0.30.0", + "json-loader": "^0.5.4", + "postcss": "^5.2.5", + "postcss-cssnext": "^2.8.0", + "postcss-import": "^8.1.2", + "postcss-loader": "^1.1.0", + "rimraf": "^2.5.4", + "style-loader": "^0.13.0", + "typescript": "^2.0.3", + "url-loader": "^0.5.7", + "webpack": "^1.12.10" + } +} diff --git a/jupyter-js-widgets/examples/web6/scripts/copyfiles.js b/jupyter-js-widgets/examples/web6/scripts/copyfiles.js new file mode 100644 index 0000000000..28e239cd1c --- /dev/null +++ b/jupyter-js-widgets/examples/web6/scripts/copyfiles.js @@ -0,0 +1,5 @@ +// Copyright (c) Jupyter Development Team. +// Distributed under the terms of the Modified BSD License. + +var fs = require('fs-extra'); +fs.copySync('src/', 'lib/', { filter: /\.css$/ }); diff --git a/jupyter-js-widgets/examples/web6/src/index.ts b/jupyter-js-widgets/examples/web6/src/index.ts new file mode 100644 index 0000000000..fc54f65427 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/src/index.ts @@ -0,0 +1,39 @@ +import * as CodeMirror from 'codemirror'; +import 'codemirror/lib/codemirror.css'; +import 'codemirror/mode/python/python'; +import * as request from 'browser-request'; +import * as startsWith from 'lodash.startswith'; +import { WidgetManager } from './manager'; +import { Kernel } from '@jupyterlab/services'; + +var apiServer = "http://beta.mybinder.org"; +var displayName = "jovyan/pythreejs"; +var templateName = displayName.replace('/tree', '').replace(/\//g, '-').toLowerCase(); + +request({ + url: apiServer + '/api/deploy/' + templateName, + json: true +}, function (err, res, json) { + if (err) { + console.log(err); + } + request({ + url: apiServer + '/api/apps/' + templateName + '/' + json['id'], + json: true + }, function (err, res, json) { + var location = json['location']; + var status = json['status']; + if (location) { + if (!startsWith(location, 'http://')) { + location = 'http://' + location; + } + console.log('success'); + //window.location.href = location + deepLink; + } else if (status === 'failed') { + console.log('error'); + } + }); +}); + + + diff --git a/jupyter-js-widgets/examples/web6/src/manager.ts b/jupyter-js-widgets/examples/web6/src/manager.ts new file mode 100644 index 0000000000..ad16b327d0 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/src/manager.ts @@ -0,0 +1,41 @@ +import * as widgets from 'jupyter-js-widgets'; +import 'phosphor/styles/base.css'; +import 'jupyter-js-widgets/css/widgets.css'; +import * as PWidget from 'phosphor/lib/ui/widget'; + +export +class WidgetManager extends widgets.ManagerBase { + constructor(kernel, el) { + super(); + this.kernel = kernel; + this.el = el; + + // Create a comm manager shim + this.commManager = new widgets.shims.services.CommManager(kernel); + + // Register the comm target + this.commManager.register_target(this.comm_target_name, this.handle_comm_open.bind(this)); + } + + display_view(msg, view, options) { + return Promise.resolve(view).then((view) => { + PWidget.Widget.attach(view.pWidget, this.el); + view.on('remove', function() { + console.log('view removed', view); + }); + return view; + }); + } + + _create_comm(targetName, id, metadata) { + return this.commManager.new_comm(targetName, metadata, id); + } + + _get_comm_info() { + return Promise.resolve({}); + } + + kernel: any; + el: HTMLElement; + commManager: any; +} diff --git a/jupyter-js-widgets/examples/web6/src/tsconfig.json b/jupyter-js-widgets/examples/web6/src/tsconfig.json new file mode 100644 index 0000000000..e70cb301a7 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/src/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "declaration": true, + //"noImplicitAny": true, + "lib": ["dom", "es5", "es2015.promise"], + "types": ["requirejs"], + "noEmitOnError": true, + "module": "commonjs", + "moduleResolution": "node", + "target": "ES5", + "outDir": "../lib" + } +} diff --git a/jupyter-js-widgets/examples/web6/webpack.config.js b/jupyter-js-widgets/examples/web6/webpack.config.js new file mode 100644 index 0000000000..9a4895aa43 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/webpack.config.js @@ -0,0 +1,28 @@ +module.exports = { + entry: './lib/index.js', + output: { + filename: 'index.built.js', + path: './built/', + publicPath: 'built/' + }, + module: { + loaders: [ + { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }, + { test: /\.json$/, loader: "json-loader" }, + // jquery-ui loads some images + { test: /\.(jpg|png|gif)$/, loader: "file" }, + // required to load font-awesome + { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, + { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, + { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, + { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, + { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" } + ] + }, + postcss: function () { + return [ + require('postcss-import'), + require('postcss-cssnext') + ]; + } +}; diff --git a/jupyter-js-widgets/examples/web6/widget_code.json b/jupyter-js-widgets/examples/web6/widget_code.json new file mode 100644 index 0000000000..cc5b6e1be7 --- /dev/null +++ b/jupyter-js-widgets/examples/web6/widget_code.json @@ -0,0 +1,14 @@ +[ + "from ipywidgets import IntSlider, Text, VBox", + "from IPython.display import display", + "", + "s = IntSlider(max=200, value=100)", + "t = Text()", + "", + "def update_text(change=None):", + " t.value = str(s.value ** 2)", + "", + "s.observe(update_text, names='value')", + "update_text()", + "display(VBox([s, t]))" +]