More statusbar cleanup

packages/codemirror-extension/package.json

@@ -32,20 +32,15 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^0.19.1",
-    "@jupyterlab/apputils": "^0.19.1",
     "@jupyterlab/codeeditor": "^0.19.1",
     "@jupyterlab/codemirror": "^0.19.1",
     "@jupyterlab/coreutils": "^2.2.1",
     "@jupyterlab/docregistry": "^0.19.1",
     "@jupyterlab/fileeditor": "^0.19.1",
     "@jupyterlab/mainmenu": "^0.8.1",
     "@jupyterlab/statusbar": "^0.7.1",
-    "@phosphor/commands": "^1.6.1",
-    "@phosphor/coreutils": "^1.3.0",
-    "@phosphor/signaling": "^1.2.2",
     "@phosphor/widgets": "^1.6.0",
-    "codemirror": "~5.39.0",
-    "react": "~16.4.2"
+    "codemirror": "~5.39.0"
   },
   "devDependencies": {
     "rimraf": "~2.6.2",

packages/codemirror-extension/src/index.ts

@@ -11,15 +11,20 @@ import { IMainMenu, IEditMenu } from '@jupyterlab/mainmenu';
 
 import { IEditorServices } from '@jupyterlab/codeeditor';
 
-import { editorServices, CodeMirrorEditor, Mode } from '@jupyterlab/codemirror';
+import {
+  editorServices,
+  EditorSyntaxStatus,
+  CodeMirrorEditor,
+  Mode
+} from '@jupyterlab/codemirror';
 
 import { ISettingRegistry, IStateDB } from '@jupyterlab/coreutils';
 
 import { IDocumentWidget } from '@jupyterlab/docregistry';
 
 import { IEditorTracker, FileEditor } from '@jupyterlab/fileeditor';
 
-import { editorSyntaxStatus } from './syntaxstatus';
+import { IStatusBar } from '@jupyterlab/statusbar';
 
 /**
  * The command IDs used by the codemirror plugin.
@@ -57,6 +62,38 @@ const commands: JupyterLabPlugin<void> = {
   autoStart: true
 };
 
+/**
+ * The JupyterLab plugin for the EditorSyntax status item.
+ */
+export const editorSyntaxStatus: JupyterLabPlugin<void> = {
+  id: '@jupyterlab/codemirror-extension:editor-syntax-status',
+  autoStart: true,
+  requires: [IStatusBar, IEditorTracker],
+  activate: (
+    app: JupyterLab,
+    statusBar: IStatusBar,
+    tracker: IEditorTracker
+  ) => {
+    let item = new EditorSyntaxStatus({ commands: app.commands });
+    app.shell.currentChanged.connect(() => {
+      const current = app.shell.currentWidget;
+      if (current && tracker.has(current)) {
+        item.model.editor = (current as IDocumentWidget<
+          FileEditor
+        >).content.editor;
+      }
+    });
+    statusBar.registerStatusItem('editor-syntax-item', item, {
+      align: 'left',
+      rank: 0,
+      isActive: () =>
+        app.shell.currentWidget &&
+        tracker.currentWidget &&
+        app.shell.currentWidget === tracker.currentWidget
+    });
+  }
+};
+
 /**
  * Export the plugins as default.
  */

packages/codemirror-extension/tsconfig.json

@@ -9,9 +9,6 @@
     {
       "path": "../application"
     },
-    {
-      "path": "../apputils"
-    },
     {
       "path": "../codeeditor"
     },

packages/codemirror/package.json

@@ -35,11 +35,15 @@
     "@jupyterlab/codeeditor": "^0.19.1",
     "@jupyterlab/coreutils": "^2.2.1",
     "@jupyterlab/observables": "^2.1.1",
+    "@jupyterlab/statusbar": "^0.7.1",
     "@phosphor/algorithm": "^1.1.2",
+    "@phosphor/commands": "^1.6.1",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/disposable": "^1.1.2",
     "@phosphor/signaling": "^1.2.2",
-    "codemirror": "~5.39.0"
+    "@phosphor/widgets": "^1.6.0",
+    "codemirror": "~5.39.0",
+    "react": "~16.4.2"
   },
   "devDependencies": {
     "@types/codemirror": "~0.0.46",

packages/codemirror/src/index.ts

@@ -13,6 +13,7 @@ export * from './mode';
 export * from './editor';
 export * from './factory';
 export * from './mimetype';
+export * from './syntaxstatus';
 
 /**
  * The default editor services.

packages/codemirror-extension/src/syntaxstatus.tsx → packages/codemirror/src/syntaxstatus.tsx

@@ -1,88 +1,94 @@
 import React from 'react';
 
-import { JupyterLabPlugin, JupyterLab } from '@jupyterlab/application';
-
 import { VDomRenderer, VDomModel } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
 import { IChangedArgs } from '@jupyterlab/coreutils';
 
-import { IDocumentWidget, DocumentRegistry } from '@jupyterlab/docregistry';
-
-import { IEditorTracker, FileEditor } from '@jupyterlab/fileeditor';
-
 import {
-  IStatusBar,
   interactiveItem,
   Popup,
   showPopup,
   TextItem
 } from '@jupyterlab/statusbar';
 
-import { Mode } from '@jupyterlab/codemirror';
+import { Mode } from '.';
 
 import { CommandRegistry } from '@phosphor/commands';
 
 import { JSONObject } from '@phosphor/coreutils';
 
-import { ISignal } from '@phosphor/signaling';
-
 import { Menu } from '@phosphor/widgets';
 
+/**
+ * A namespace for `EditorSyntaxComponentStatics`.
+ */
 namespace EditorSyntaxComponent {
+  /**
+   * The props for the `EditorSyntaxComponent`.
+   */
   export interface IProps {
+    /**
+     * The current CodeMirror mode for an editor.
+     */
     mode: string;
+
+    /**
+     * A function to execute on clicking the component.
+     * By default we provide a function that opens a menu
+     * for CodeMirror mode selection.
+     */
     handleClick: () => void;
   }
 }
 
-// tslint:disable-next-line:variable-name
-const EditorSyntaxComponent = (
+/**
+ * A pure function that returns a tsx component for an editor syntax item.
+ *
+ * @param props: the props for the component.
+ *
+ * @returns an editor syntax component.
+ */
+function EditorSyntaxComponent(
   props: EditorSyntaxComponent.IProps
-): React.ReactElement<EditorSyntaxComponent.IProps> => {
+): React.ReactElement<EditorSyntaxComponent.IProps> {
   return <TextItem source={props.mode} onClick={props.handleClick} />;
-};
+}
 
 /**
  * StatusBar item to change the language syntax highlighting of the file editor.
  */
-class EditorSyntax extends VDomRenderer<EditorSyntax.Model>
-  implements IEditorSyntax {
-  constructor(opts: EditorSyntax.IOptions) {
+export class EditorSyntaxStatus extends VDomRenderer<EditorSyntaxStatus.Model> {
+  /**
+   * Construct a new VDomRenderer for the status item.
+   */
+  constructor(opts: EditorSyntaxStatus.IOptions) {
     super();
-
-    this._tracker = opts.tracker;
+    this.model = new EditorSyntaxStatus.Model();
     this._commands = opts.commands;
-
-    this._tracker.currentChanged.connect(this._onEditorChange);
-    this.model = new EditorSyntax.Model(
-      this._tracker.currentWidget && this._tracker.currentWidget.content.editor
-    );
-
     this.addClass(interactiveItem);
-    this.node.title = 'Change text editor syntax highlighting';
+    this.title.caption = 'Change text editor syntax highlighting';
   }
 
+  /**
+   * Render the status item.
+   */
   render() {
-    if (this.model === null) {
+    if (!this.model) {
       return null;
-    } else {
-      return (
-        <EditorSyntaxComponent
-          mode={this.model.mode}
-          handleClick={this._handleClick}
-        />
-      );
     }
+    return (
+      <EditorSyntaxComponent
+        mode={this.model.mode}
+        handleClick={this._handleClick}
+      />
+    );
   }
 
-  dispose() {
-    super.dispose();
-
-    this._tracker.currentChanged.disconnect(this._onEditorChange);
-  }
-
+  /**
+   * Create a menu for selecting the mode of the editor.
+   */
   private _handleClick = () => {
     const modeMenu = new Menu({ commands: this._commands });
     let command = 'codemirror:change-mode';
@@ -117,41 +123,38 @@ class EditorSyntax extends VDomRenderer<EditorSyntax.Model>
     });
   };
 
-  private _onEditorChange = (
-    tracker: IEditorTracker,
-    editor: IDocumentWidget<FileEditor, DocumentRegistry.IModel> | null
-  ) => {
-    this.model!.editor = editor && editor.content.editor;
-  };
-
-  private _tracker: IEditorTracker;
   private _commands: CommandRegistry;
   private _popup: Popup | null = null;
 }
 
-namespace EditorSyntax {
-  export class Model extends VDomModel implements IEditorSyntax.IModel {
-    constructor(editor: CodeEditor.IEditor | null) {
-      super();
-
-      this.editor = editor;
-    }
-
-    get mode() {
+/**
+ * A namespace for EditorSyntax statics.
+ */
+export namespace EditorSyntaxStatus {
+  /**
+   * A VDomModel for the current editor/mode combination.
+   */
+  export class Model extends VDomModel {
+    /**
+     * The current mode for the editor. If no editor is present,
+     * returns the empty string.
+     */
+    get mode(): string {
       return this._mode;
     }
 
-    get editor() {
+    /**
+     * The current editor for the application editor tracker.
+     */
+    get editor(): CodeEditor.IEditor | null {
       return this._editor;
     }
-
     set editor(editor: CodeEditor.IEditor | null) {
       const oldEditor = this._editor;
       if (oldEditor !== null) {
         oldEditor.model.mimeTypeChanged.disconnect(this._onMIMETypeChange);
       }
-
-      const oldState = this._getAllState();
+      const oldMode = this._mode;
       this._editor = editor;
       if (this._editor === null) {
         this._mode = '';
@@ -162,24 +165,26 @@ namespace EditorSyntax {
         this._editor.model.mimeTypeChanged.connect(this._onMIMETypeChange);
       }
 
-      this._triggerChange(oldState, this._getAllState());
+      this._triggerChange(oldMode, this._mode);
     }
 
+    /**
+     * If the editor mode changes, update the model.
+     */
     private _onMIMETypeChange = (
       mode: CodeEditor.IModel,
       change: IChangedArgs<string>
     ) => {
-      const oldState = this._getAllState();
+      const oldMode = this._mode;
       const spec = Mode.findByMIME(change.newValue);
       this._mode = spec.name || spec.mode;
 
-      this._triggerChange(oldState, this._getAllState());
+      this._triggerChange(oldMode, this._mode);
     };
 
-    private _getAllState(): string {
-      return this._mode;
-    }
-
+    /**
+     * Trigger a rerender of the model.
+     */
     private _triggerChange(oldState: string, newState: string) {
       if (oldState !== newState) {
         this.stateChanged.emit(void 0);
@@ -190,41 +195,13 @@ namespace EditorSyntax {
     private _editor: CodeEditor.IEditor | null = null;
   }
 
+  /**
+   * Options for the EditorSyntax status item.
+   */
   export interface IOptions {
-    tracker: IEditorTracker;
+    /**
+     * The application command registry.
+     */
     commands: CommandRegistry;
   }
 }
-
-export interface IEditorSyntax {
-  readonly model: IEditorSyntax.IModel | null;
-  readonly modelChanged: ISignal<this, void>;
-}
-
-export namespace IEditorSyntax {
-  export interface IModel {
-    readonly mode: string;
-    readonly editor: CodeEditor.IEditor | null;
-  }
-}
-
-export const editorSyntaxStatus: JupyterLabPlugin<void> = {
-  id: '@jupyterlab/codemirror-extension:editor-syntax-status',
-  autoStart: true,
-  requires: [IStatusBar, IEditorTracker],
-  activate: (
-    app: JupyterLab,
-    statusBar: IStatusBar,
-    tracker: IEditorTracker
-  ) => {
-    let item = new EditorSyntax({ tracker, commands: app.commands });
-    statusBar.registerStatusItem('editor-syntax-item', item, {
-      align: 'left',
-      rank: 0,
-      isActive: () =>
-        app.shell.currentWidget &&
-        tracker.currentWidget &&
-        app.shell.currentWidget === tracker.currentWidget
-    });
-  }
-};