Vdom always has model

packages/apputils/src/vdom.ts

@@ -95,8 +95,15 @@ export abstract class ReactWidget extends Widget {
  * An abstract ReactWidget with a model.
  */
 export abstract class VDomRenderer<
-  T extends VDomRenderer.IModel | null
+  T extends VDomRenderer.IModel | null = null
 > extends ReactWidget {
+  /**
+   * Create a new VDomRenderer
+   */
+  constructor(model: T extends null ? void : T) {
+    super();
+    this.model = ((model ?? null) as unknown) as T;
+  }
   /**
    * A signal emitted when the model changes.
    */
@@ -107,7 +114,7 @@ export abstract class VDomRenderer<
   /**
    * Set the model and fire changed signals.
    */
-  set model(newValue: T | null) {
+  set model(newValue: T) {
     if (this._model === newValue) {
       return;
     }
@@ -126,7 +133,7 @@ export abstract class VDomRenderer<
   /**
    * Get the current model.
    */
-  get model(): T | null {
+  get model(): T {
     return this._model;
   }
 
@@ -134,11 +141,14 @@ export abstract class VDomRenderer<
    * Dispose this widget.
    */
   dispose() {
-    this._model = null;
+    if (this.isDisposed) {
+      return;
+    }
+    this._model = null!;
     super.dispose();
   }
 
-  private _model: T | null;
+  private _model: T;
   private _modelChanged = new Signal<this, void>(this);
 }
 

packages/codemirror/src/syntaxstatus.tsx

@@ -64,8 +64,7 @@ export class EditorSyntaxStatus extends VDomRenderer<EditorSyntaxStatus.Model> {
    * Construct a new VDomRenderer for the status item.
    */
   constructor(opts: EditorSyntaxStatus.IOptions) {
-    super();
-    this.model = new EditorSyntaxStatus.Model();
+    super(new EditorSyntaxStatus.Model());
     this._commands = opts.commands;
     this.addClass(interactiveItem);
     this.title.caption = 'Change text editor syntax highlighting';

packages/docmanager/src/pathstatus.tsx

@@ -56,9 +56,7 @@ export class PathStatus extends VDomRenderer<PathStatus.Model> {
    * Construct a new PathStatus status item.
    */
   constructor(opts: PathStatus.IOptions) {
-    super();
-    this._docManager = opts.docManager;
-    this.model = new PathStatus.Model(this._docManager);
+    super(new PathStatus.Model(opts.docManager));
     this.node.title = this.model.path;
   }
 
@@ -73,8 +71,6 @@ export class PathStatus extends VDomRenderer<PathStatus.Model> {
       />
     );
   }
-
-  private _docManager: IDocumentManager;
 }
 
 /**

packages/docmanager/src/savingstatus.tsx

@@ -55,9 +55,7 @@ export class SavingStatus extends VDomRenderer<SavingStatus.Model> {
    * Create a new SavingStatus item.
    */
   constructor(opts: SavingStatus.IOptions) {
-    super();
-    this._docManager = opts.docManager;
-    this.model = new SavingStatus.Model(this._docManager);
+    super(new SavingStatus.Model(opts.docManager));
   }
 
   /**
@@ -70,8 +68,6 @@ export class SavingStatus extends VDomRenderer<SavingStatus.Model> {
       return <SavingStatusComponent fileStatus={this.model.status} />;
     }
   }
-
-  private _docManager: IDocumentManager;
 }
 
 /**

packages/extensionmanager/src/widget.tsx

@@ -429,8 +429,7 @@ export namespace CollapsibleSection {
  */
 export class ExtensionView extends VDomRenderer<ListModel> {
   constructor(serviceManager: ServiceManager) {
-    super();
-    this.model = new ListModel(serviceManager);
+    super(new ListModel(serviceManager));
     this.addClass('jp-extensionmanager-view');
   }
 

packages/filebrowser/src/uploadstatus.tsx

@@ -65,13 +65,13 @@ export class FileUploadStatus extends VDomRenderer<FileUploadStatus.Model> {
    * Construct a new FileUpload status item.
    */
   constructor(opts: FileUploadStatus.IOptions) {
-    super();
+    super(
+      new FileUploadStatus.Model(
+        opts.tracker.currentWidget && opts.tracker.currentWidget.model
+      )
+    );
     this._tracker = opts.tracker;
     this._tracker.currentChanged.connect(this._onBrowserChange);
-
-    this.model = new FileUploadStatus.Model(
-      this._tracker.currentWidget && this._tracker.currentWidget.model
-    );
   }
 
   /**

packages/fileeditor/src/tabspacestatus.tsx

@@ -67,9 +67,8 @@ export class TabSpaceStatus extends VDomRenderer<TabSpaceStatus.Model> {
    * Create a new tab/space status item.
    */
   constructor(options: TabSpaceStatus.IOptions) {
-    super();
+    super(new TabSpaceStatus.Model());
     this._menu = options.menu;
-    this.model = new TabSpaceStatus.Model();
     this.addClass(interactiveItem);
   }
 

packages/launcher-extension/src/index.ts

@@ -59,7 +59,7 @@ function activate(
       const callback = (item: Widget) => {
         labShell.add(item, 'main', { ref: id });
       };
-      const launcher = new Launcher({ cwd, callback, commands });
+      const launcher = new Launcher({ model, cwd, callback, commands });
 
       launcher.model = model;
       launcher.title.label = 'Launcher';

packages/launcher/src/index.tsx

@@ -120,7 +120,7 @@ export class Launcher extends VDomRenderer<LauncherModel> {
    * Construct a new launcher widget.
    */
   constructor(options: ILauncher.IOptions) {
-    super();
+    super(options.model);
     this._cwd = options.cwd;
     this._callback = options.callback;
     this._commands = options.commands;
@@ -267,6 +267,11 @@ export namespace ILauncher {
    * The options used to create a Launcher.
    */
   export interface IOptions {
+    /**
+     * The model of the launcher.
+     */
+    model: LauncherModel;
+
     /**
      * The cwd of the launcher.
      */

packages/logconsole-extension/src/status.tsx

@@ -81,9 +81,8 @@ export class LogConsoleStatus extends VDomRenderer<LogConsoleStatus.Model> {
    * @param options - The status widget initialization options.
    */
   constructor(options: LogConsoleStatus.IOptions) {
-    super();
+    super(new LogConsoleStatus.Model(options.loggerRegistry));
     this._handleClick = options.handleClick;
-    this.model = new LogConsoleStatus.Model(options.loggerRegistry);
     this.addClass(interactiveItem);
     this.addClass('jp-LogConsoleStatusItem');
   }

packages/notebook/src/modestatus.tsx

@@ -44,8 +44,7 @@ export class CommandEditStatus extends VDomRenderer<CommandEditStatus.Model> {
    * Construct a new CommandEdit status item.
    */
   constructor() {
-    super();
-    this.model = new CommandEditStatus.Model();
+    super(new CommandEditStatus.Model());
   }
 
   /**

packages/notebook/src/truststatus.tsx

@@ -93,8 +93,7 @@ export class NotebookTrustStatus extends VDomRenderer<
    * Construct a new status item.
    */
   constructor() {
-    super();
-    this.model = new NotebookTrustStatus.Model();
+    super(new NotebookTrustStatus.Model());
   }
 
   /**

packages/statusbar/src/defaults/kernelStatus.tsx

@@ -67,9 +67,8 @@ export class KernelStatus extends VDomRenderer<KernelStatus.Model> {
    * Construct the kernel status widget.
    */
   constructor(opts: KernelStatus.IOptions) {
-    super();
+    super(new KernelStatus.Model());
     this._handleClick = opts.onClick;
-    this.model = new KernelStatus.Model();
     this.addClass(interactiveItem);
   }
 

packages/statusbar/src/defaults/lineCol.tsx

@@ -225,8 +225,7 @@ export class LineCol extends VDomRenderer<LineCol.Model> {
    * Construct a new LineCol status item.
    */
   constructor() {
-    super();
-    this.model = new LineCol.Model();
+    super(new LineCol.Model());
     this.addClass(interactiveItem);
   }
 

packages/statusbar/src/defaults/memoryUsage.tsx

@@ -21,8 +21,7 @@ export class MemoryUsage extends VDomRenderer<MemoryUsage.Model> {
    * Construct a new memory usage status item.
    */
   constructor() {
-    super();
-    this.model = new MemoryUsage.Model({ refreshRate: 5000 });
+    super(new MemoryUsage.Model({ refreshRate: 5000 }));
   }
 
   /**

packages/statusbar/src/defaults/runningSessions.tsx

@@ -85,7 +85,7 @@ export class RunningSessions extends VDomRenderer<RunningSessions.Model> {
    * Create a new RunningSessions widget.
    */
   constructor(opts: RunningSessions.IOptions) {
-    super();
+    super(new RunningSessions.Model());
     this._serviceManager = opts.serviceManager;
     this._handleClick = opts.onClick;
 
@@ -98,7 +98,6 @@ export class RunningSessions extends VDomRenderer<RunningSessions.Model> {
       this
     );
 
-    this.model = new RunningSessions.Model();
     this.addClass(interactiveItem);
   }
 

tests/test-apputils/src/vdom.spec.ts

@@ -30,7 +30,7 @@ class TestWidget extends VDomRenderer<TestModel> {
   }
 }
 
-class TestWidgetNoModel extends VDomRenderer<null> {
+class TestWidgetNoModel extends VDomRenderer {
   protected render(): React.ReactElement<any> {
     return React.createElement('span', null, 'No model!');
   }
@@ -72,12 +72,12 @@ describe('@jupyterlab/apputils', () => {
   describe('VDomRenderer', () => {
     describe('#constructor()', () => {
       it('should create a TestWidget', () => {
-        const widget = new TestWidget();
+        const widget = new TestWidget(new TestModel());
         expect(widget).to.be.an.instanceof(TestWidget);
       });
 
       it('should be properly disposed', () => {
-        const widget = new TestWidget();
+        const widget = new TestWidget(new TestModel());
         widget.dispose();
         expect(widget.isDisposed).to.equal(true);
       });
@@ -85,8 +85,8 @@ describe('@jupyterlab/apputils', () => {
 
     describe('#modelChanged()', () => {
       it('should fire the stateChanged signal on a change', () => {
-        const widget = new TestWidget();
         const model = new TestModel();
+        const widget = new TestWidget(new TestModel());
         let changed = false;
         widget.modelChanged.connect(() => {
           changed = true;
@@ -98,7 +98,7 @@ describe('@jupyterlab/apputils', () => {
 
     describe('#render()', () => {
       it('should render the contents after a model change', async () => {
-        const widget = new TestWidget();
+        const widget = new TestWidget(new TestModel());
         const model = new TestModel();
         widget.model = model;
         model.value = 'foo';