Add demo model-view (#32)

* WIP add model view demo

* Finish model case with signal

* Update yarn.lock

Author: fcollonval

packages/lab-example/package.json

@@ -52,7 +52,10 @@
     "@jupyter-notebook/web-components": "^0.8.1",
     "@jupyterlab/application": "^3.1.0",
     "@jupyterlab/apputils": "^3.0.0",
+    "@lumino/messaging": "^1.10.1",
+    "@lumino/signaling": "^1.10.1",
     "@lumino/widgets": "^1.30.0",
+    "@microsoft/fast-element": "^1.8.0",
     "react": "^17.0.0"
   },
   "devDependencies": {

packages/lab-example/src/index.tsx

@@ -49,8 +49,14 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 import { IThemeManager, ReactWidget } from '@jupyterlab/apputils';
-import { Widget } from '@lumino/widgets';
+import { Panel, Widget } from '@lumino/widgets';
 import React from 'react';
+import {
+  BasicModel,
+  BasicView,
+  ObservableModel,
+  ObservableView
+} from './model';
 
 provideJupyterDesignSystem().register(allComponents);
 addJupyterLabThemeChangeListener();
@@ -191,6 +197,26 @@ const plugin: JupyterFrontEndPlugin<void> = {
           dataRef.current.rowsData = TABLE_DATA;
         }
       }
+
+      // Demo Model-View
+      const panel = new Panel();
+      panel.id = 'jupyter-ui-toolkit-demo-panel';
+      const title1 = new Widget();
+      title1.node.textContent = 'Using signal';
+      panel.addWidget(title1);
+      const view1 = new BasicView();
+      view1.model = new BasicModel();
+      panel.addWidget(new Widget({ node: view1 }));
+
+      const title2 = new Widget();
+      title2.node.textContent = 'Using FAST observable';
+      panel.addWidget(title2);
+      const view2 = new ObservableView();
+      view2.model = new ObservableModel();
+      panel.addWidget(new Widget({ node: view2 }));
+
+      panel.title.label = 'Demo';
+      app.shell.add(panel, 'right');
     });
   }
 };

packages/lab-example/src/model.ts

@@ -0,0 +1,86 @@
+import { VDomModel } from '@jupyterlab/apputils';
+import {
+  customElement,
+  FASTElement,
+  html,
+  Observable,
+  observable
+} from '@microsoft/fast-element';
+
+/*
+ * Common HTML template
+ */
+const template = html<ObservableView | BasicView>`<div>
+  <button
+    @click=${x => {
+      x.model?.incrementCounter();
+    }}
+  >
+    Increment
+  </button>
+  <span>${x => x.model?.counter ?? '0'}</span>
+</div>`;
+
+/*
+ * VDOM model with Lumino signal
+ */
+
+export class BasicModel extends VDomModel {
+  get counter(): number {
+    return this._counter;
+  }
+
+  incrementCounter(): void {
+    this._counter += 1;
+    this.stateChanged.emit();
+  }
+  private _counter = 0;
+}
+
+@customElement({
+  name: 'jp-test-basic-view',
+  template
+})
+export class BasicView extends FASTElement {
+  get model(): BasicModel | null {
+    Observable.track(this, 'model');
+    return this._model;
+  }
+  set model(m: BasicModel | null) {
+    this._model?.stateChanged.disconnect(this._onStateChanged, this);
+    this._model = m;
+    this._model?.stateChanged.connect(this._onStateChanged, this);
+    this._onStateChanged();
+  }
+
+  private _onStateChanged(): void {
+    this.$fastController.notify('model');
+  }
+
+  private _model: BasicModel | null = null;
+}
+
+/*
+ * Model - view using FAST observable
+ */
+
+export class ObservableModel {
+  get counter(): number {
+    return this._counter;
+  }
+
+  incrementCounter(): void {
+    this._counter += 1;
+  }
+
+  @observable
+  private _counter = 0;
+}
+
+@customElement({
+  name: 'jp-test-observable-view',
+  template
+})
+export class ObservableView extends FASTElement {
+  public model: ObservableModel | null = null;
+}

packages/lab-example/style/base.css

@@ -74,3 +74,9 @@ jp-toolbar > * {
   margin-top: auto;
   margin-bottom: auto;
 }
+
+#jupyter-ui-toolkit-demo-panel {
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  padding: 5px;
+}

tsconfig.json

@@ -4,6 +4,7 @@
     "composite": true,
     "declaration": true,
     "esModuleInterop": true,
+    "experimentalDecorators": true,
     "incremental": true,
     "jsx": "react",
     "module": "esnext",