Move renderers to manager

This is the first step towards allowing customisation of renderers.

Author: pbugnion

jupyter-widgets-htmlmanager/src/htmlmanager.ts

@@ -5,7 +5,10 @@ import * as widgets from '@jupyter-widgets/controls';
 
 import * as PhosphorWidget from '@phosphor/widgets';
 
+import { RenderMime } from '@jupyterlab/rendermime';
+
 import { OutputModel, OutputView } from './output'
+import { WidgetRenderer, WIDGET_MIMETYPE } from './output_renderers'
 
 const coreWidgetModules: Array<string> = [
     '@jupyter-widgets/controls', '@jupyter-widgets/base'
@@ -76,4 +79,12 @@ class HTMLManager extends widgets.ManagerBase<HTMLElement> {
             }
         });
     }
+
+    renderMime: RenderMime =
+        new RenderMime({
+            items: [... RenderMime.getDefaultItems(), {
+                mimeType: WIDGET_MIMETYPE,
+                renderer: new WidgetRenderer(this)
+            }]
+        });
 };

jupyter-widgets-htmlmanager/src/output.ts

@@ -7,61 +7,12 @@ import { Panel, Widget } from '@phosphor/widgets';
 
 import { OutputAreaModel, OutputArea } from '@jupyterlab/outputarea';
 
-import { IRenderMime, RenderMime } from '@jupyterlab/rendermime';
-
 import { HTMLManager } from './htmlmanager';
 
 import * as $ from 'jquery';
 
 import '../css/output.css';
 
-const WIDGET_MIMETYPE = 'application/vnd.jupyter.widget-view+json';
-
-export class WidgetRenderer implements RenderMime.IRenderer {
-    constructor(widget_manager: HTMLManager) {
-        this._manager = widget_manager;
-    }
-
-    canRender(options: RenderMime.IRenderOptions): boolean {
-        const source: any = options.model.data.get(options.mimeType);
-        const model = this._manager.get_model(source.model_id);
-        return model !== void 0;
-    }
-
-    wouldSanitize(options: RenderMime.IRenderOptions): boolean {
-        return false;
-    }
-
-    render(options: RenderMime.IRenderOptions) {
-        const widget = new Panel();
-        const source: any = options.model.data.get(options.mimeType);
-        const model = this._manager.get_model(source.model_id);
-        console.log(model);
-        if (model) {
-            model.then((model: any) => {
-                return this._manager.display_model(null, model, {
-                    el: widget.node
-                })
-            }).catch((error) => {
-                console.log('Error creating widget.')
-                console.log(error);
-                const node = document.createElement('p')
-                node.textContent = 'Error creating widget.'
-                widget.addWidget(new Widget({node}))
-            })
-        } else {
-            const node = document.createElement('p')
-            node.textContent = 'Error creating widget.'
-            widget.addWidget(new Widget({node}))
-        }
-        return widget;
-    }
-
-    private _manager: HTMLManager;
-    public mimeTypes = [WIDGET_MIMETYPE];
-}
-
-
 export class OutputModel extends DOMWidgetModel {
     defaults() {
         return {
@@ -103,11 +54,8 @@ export class OutputView extends DOMWidgetView {
     }
 
     render() {
-        const rendermime = new RenderMime({items: RenderMime.getDefaultItems()})
-        rendermime.addRenderer({
-            mimeType: WIDGET_MIMETYPE,
-            renderer: new WidgetRenderer(this.model.widget_manager)
-        });
+        const manager = this.model.widget_manager
+        const rendermime = manager.renderMime;
         this._outputView = new OutputArea({
             rendermime: rendermime,
             contentFactory: OutputArea.defaultContentFactory,

jupyter-widgets-htmlmanager/src/output_renderers.ts

@@ -0,0 +1,55 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Widget, Panel } from '@phosphor/widgets';
+
+import { IRenderMime, RenderMime } from '@jupyterlab/rendermime';
+
+import { HTMLManager } from './htmlmanager';
+
+export const WIDGET_MIMETYPE = 'application/vnd.jupyter.widget-view+json';
+
+// Renderer to allow the output widget to render sub-widgets
+export class WidgetRenderer implements RenderMime.IRenderer {
+    constructor(widget_manager: HTMLManager) {
+        this._manager = widget_manager;
+    }
+
+    canRender(options: RenderMime.IRenderOptions): boolean {
+        const source: any = options.model.data.get(options.mimeType);
+        const model = this._manager.get_model(source.model_id);
+        return model !== void 0;
+    }
+
+    wouldSanitize(options: RenderMime.IRenderOptions): boolean {
+        return false;
+    }
+
+    render(options: RenderMime.IRenderOptions) {
+        const widget = new Panel();
+        const source: any = options.model.data.get(options.mimeType);
+        const model = this._manager.get_model(source.model_id);
+        console.log(model);
+        if (model) {
+            model.then((model: any) => {
+                return this._manager.display_model(null, model, {
+                    el: widget.node
+                })
+            }).catch((error) => {
+                console.log('Error creating widget.')
+                console.log(error);
+                const node = document.createElement('p')
+                node.textContent = 'Error creating widget.'
+                widget.addWidget(new Widget({node}))
+            })
+        } else {
+            const node = document.createElement('p')
+            node.textContent = 'Error creating widget.'
+            widget.addWidget(new Widget({node}))
+        }
+        return widget;
+    }
+
+    private _manager: HTMLManager;
+    public mimeTypes = [WIDGET_MIMETYPE];
+}