jupyter-widgets · jtpio · Jun 11, 2021 · Mar 15, 2021 · Mar 15, 2021 · Mar 15, 2021
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,16 +7,25 @@
     "prettier"
   ],
   "rules": {
-    "@typescript-eslint/interface-name-prefix": [
+    "@typescript-eslint/naming-convention": [
       "error",
-      { "prefixWithI": "always" }
+      {
+        "selector": "interface",
+        "format": ["PascalCase"],
+        "custom": {
+          "regex": "^I[A-Z]",
+          "match": true
+        }
+      }
     ],
     "@typescript-eslint/no-unused-vars": ["warn", { "args": "none" }],
     "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/camelcase": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-namespace": "off"
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/camelcase": "off"
   },
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"]

diff --git a/examples/web1/index.html b/examples/web1/index.html
@@ -1,5 +1,6 @@
 <html>
     <head>
+        <meta charset="utf-8"/>
         <script src="./built/index.built.js"></script>
     </head>
     <body>

diff --git a/examples/web1/manager.js b/examples/web1/manager.js
@@ -49,7 +49,7 @@ class WidgetManager extends ManagerBase {
   display_view(view) {
     var that = this;
     return Promise.resolve(view).then(view => {
-      LuminoWidget.attach(view.pWidget, that.el);
+      LuminoWidget.attach(view.luminoWidget, that.el);
       return view;
     });
   }

diff --git a/examples/web2/manager.js b/examples/web2/manager.js
@@ -49,7 +49,7 @@ class WidgetManager extends ManagerBase {
   display_view(view) {
     var that = this;
     return Promise.resolve(view).then(function(view) {
-      LuminoWidget.attach(view.pWidget, that.el);
+      LuminoWidget.attach(view.luminoWidget, that.el);
       return view;
     });
   }

diff --git a/examples/web3/package.json b/examples/web3/package.json
@@ -35,7 +35,7 @@
     "postcss-loader": "^3.0.0",
     "rimraf": "^2.6.1",
     "style-loader": "^1.1.2",
-    "typescript": "~3.7.4",
+    "typescript": "~4.3.2",
     "url-loader": "^3.0.0",
     "webpack": "^4.41.5"
   }

diff --git a/examples/web3/src/index.ts b/examples/web3/src/index.ts
@@ -63,7 +63,7 @@ document.addEventListener('DOMContentLoaded', async function(event) {
         const model = await manager.get_model(widgetData.model_id);
         if (model !== undefined) {
           const view = await manager.create_view(model);
-          luminoWidget.Widget.attach(view.pWidget, widgetarea);
+          luminoWidget.Widget.attach(view.luminoWidget, widgetarea);
         }
       }
     }

diff --git a/jupyterlab_widgets/.eslintrc.js b/jupyterlab_widgets/.eslintrc.js
@@ -3,33 +3,42 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
     sourceType: 'module',
-    tsconfigRootDir: __dirname
+    tsconfigRootDir: __dirname,
   },
   plugins: ['@typescript-eslint'],
   rules: {
-    '@typescript-eslint/interface-name-prefix': [
+    '@typescript-eslint/naming-convention': [
       'error',
-      { prefixWithI: 'always' }
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: true,
+        },
+      },
     ],
     '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-namespace': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/quotes': [
       'error',
       'single',
-      { avoidEscape: true, allowTemplateLiterals: false }
+      { avoidEscape: true, allowTemplateLiterals: false },
     ],
     curly: ['error', 'all'],
     eqeqeq: 'error',
-    'prefer-arrow-callback': 'error'
-  }
+    'prefer-arrow-callback': 'error',
+  },
 };
diff --git a/jupyterlab_widgets/package.json b/jupyterlab_widgets/package.json
@@ -35,6 +35,7 @@
     "build:labextension": "jupyter labextension build .",
     "build:labextension:dev": "jupyter labextension build --development True .",
     "build:lib": "tsc",
+    "build:prod": "jlpm run build:lib && jlpm run build:labextension",
     "clean": "jlpm run clean:lib",
     "clean:all": "jlpm run clean:lib && jlpm run clean:labextension",
     "clean:labextension": "rimraf jupyterlab_widgets/labextension",
@@ -78,15 +79,15 @@
     "@jupyterlab/builder": "^3.0.0",
     "@jupyterlab/cells": "^3.0.0",
     "@types/semver": "^6.0.1",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
-    "eslint": "^7.5.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-prettier": "^3.1.2",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.19.0",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "typescript": "~3.9.0"
+    "typescript": "~4.3.2"
   },
   "jupyterlab": {
     "extension": true,

diff --git a/jupyterlab_widgets/src/index.ts b/jupyterlab_widgets/src/index.ts
@@ -11,7 +11,7 @@ export { registerWidgetManager } from './plugin';
 export {
   KernelWidgetManager,
   LabWidgetManager,
-  WidgetManager
+  WidgetManager,
 } from './manager';
 
 export { WidgetRenderer } from './renderer';

diff --git a/jupyterlab_widgets/src/manager.ts b/jupyterlab_widgets/src/manager.ts
@@ -10,13 +10,13 @@ import {
   WidgetModel,
   WidgetView,
   put_buffers,
-  ICallbacks
+  ICallbacks,
 } from '@jupyter-widgets/base';
 
 import {
   ManagerBase,
   serialize_state,
-  IStateOptions
+  IStateOptions,
 } from '@jupyter-widgets/base-manager';
 
 import { IDisposable } from '@lumino/disposable';
@@ -51,7 +51,8 @@ export const WIDGET_STATE_MIMETYPE =
 /**
  * A widget manager that returns Lumino widgets.
  */
-export abstract class LabWidgetManager extends ManagerBase
+export abstract class LabWidgetManager
+  extends ManagerBase
   implements IDisposable {
   constructor(rendermime: IRenderMimeRegistry) {
     super();
@@ -66,8 +67,8 @@ export abstract class LabWidgetManager extends ManagerBase
       iopub: {
         output: (msg: KernelMessage.IIOPubMessage): void => {
           this._onUnhandledIOPubMessage.emit(msg);
-        }
-      }
+        },
+      },
     };
   }
 
@@ -76,7 +77,7 @@ export abstract class LabWidgetManager extends ManagerBase
    */
   protected _handleKernelChanged({
     oldValue,
-    newValue
+    newValue,
   }: Session.ISessionConnection.IKernelChangedArgs): void {
     if (oldValue) {
       oldValue.removeCommTarget(this.comm_target_name, this._handleCommOpen);
@@ -108,7 +109,7 @@ export abstract class LabWidgetManager extends ManagerBase
 
     // For each comm id that we do not know about, create the comm, and request the state.
     const widgets_info = await Promise.all(
-      Object.keys(comm_ids).map(async comm_id => {
+      Object.keys(comm_ids).map(async (comm_id) => {
         try {
           await this.get_model(comm_id);
           // If we successfully get the model, do no more.
@@ -140,7 +141,7 @@ export abstract class LabWidgetManager extends ManagerBase
           });
           msg_id = comm.send(
             {
-              method: 'request_state'
+              method: 'request_state',
             },
             this.callbacks(undefined)
           );
@@ -156,7 +157,7 @@ export abstract class LabWidgetManager extends ManagerBase
     // asynchronously, so promises to every widget reference should be available
     // by the time they are used.
     await Promise.all(
-      widgets_info.map(async widget_info => {
+      widgets_info.map(async (widget_info) => {
         if (!widget_info) {
           return;
         }
@@ -166,7 +167,7 @@ export abstract class LabWidgetManager extends ManagerBase
             model_name: content.data.state._model_name,
             model_module: content.data.state._model_module,
             model_module_version: content.data.state._model_module_version,
-            comm: widget_info.comm
+            comm: widget_info.comm,
           },
           content.data.state
         );
@@ -204,7 +205,7 @@ export abstract class LabWidgetManager extends ManagerBase
       throw new Error('No current kernel');
     }
     const reply = await kernel.requestCommInfo({
-      target_name: this.comm_target_name
+      target_name: this.comm_target_name,
     });
     if (reply.content.status === 'ok') {
       return (reply.content as any).comms;
@@ -340,7 +341,7 @@ export abstract class LabWidgetManager extends ManagerBase
     super.register_model(model_id, modelPromise);
 
     // Update the synchronous model map
-    modelPromise.then(model => {
+    modelPromise.then((model) => {
       this._modelsSync.set(model_id, model);
       model.once('comm:close', () => {
         this._modelsSync.delete(model_id);
@@ -424,7 +425,7 @@ export class KernelWidgetManager extends LabWidgetManager {
     this._handleKernelChanged({
       name: 'kernel',
       oldValue: null,
-      newValue: kernel
+      newValue: kernel,
     });
     this.restoreWidgets();
   }
@@ -507,7 +508,7 @@ export class WidgetManager extends LabWidgetManager {
       this._handleKernelChanged({
         name: 'kernel',
         oldValue: null,
-        newValue: context.sessionContext.session?.kernel
+        newValue: context.sessionContext.session?.kernel,
       });
     }
 
@@ -527,7 +528,7 @@ export class WidgetManager extends LabWidgetManager {
   private _saveState(): void {
     const state = this.get_state_sync({ drop_defaults: true });
     this._context.model.metadata.set('widgets', {
-      'application/vnd.jupyter.widget-state+json': state
+      'application/vnd.jupyter.widget-state+json': state,
     });
   }
 
@@ -539,7 +540,7 @@ export class WidgetManager extends LabWidgetManager {
         // We only want to restore widgets from the kernel, not ones saved in the notebook.
         this.restoreWidgets(this._context!.model, {
           loadKernel: true,
-          loadNotebook: false
+          loadNotebook: false,
         });
       }
     }

diff --git a/jupyterlab_widgets/src/output.ts b/jupyterlab_widgets/src/output.ts
@@ -49,7 +49,7 @@ export class OutputModel extends outputBase.OutputModel {
    * Register a new kernel
    */
   _handleKernelChanged({
-    oldValue
+    oldValue,
   }: Session.ISessionConnection.IKernelChangedArgs): void {
     const msgId = this.get('msg_id');
     if (msgId && oldValue) {
@@ -125,7 +125,7 @@ export class OutputModel extends outputBase.OutputModel {
 export class JupyterLuminoPanelWidget extends Panel {
   constructor(options: JupyterLuminoWidget.IOptions & Panel.IOptions) {
     const view = options.view;
-    delete options.view;
+    delete (options as any).view;
     super(options);
     this._view = view;
   }
@@ -162,18 +162,18 @@ export class JupyterLuminoPanelWidget extends Panel {
 
 export class OutputView extends outputBase.OutputView {
   _createElement(tagName: string): HTMLElement {
-    this.pWidget = new JupyterLuminoPanelWidget({ view: this });
-    return this.pWidget.node;
+    this.luminoWidget = new JupyterLuminoPanelWidget({ view: this });
+    return this.luminoWidget.node;
   }
 
   _setElement(el: HTMLElement): void {
-    if (this.el || el !== this.pWidget.node) {
+    if (this.el || el !== this.luminoWidget.node) {
       // Boxes don't allow setting the element beyond the initial creation.
       throw new Error('Cannot reset the DOM element.');
     }
 
-    this.el = this.pWidget.node;
-    this.$el = $(this.pWidget.node);
+    this.el = this.luminoWidget.node;
+    this.$el = $(this.luminoWidget.node);
   }
 
   /**
@@ -184,16 +184,16 @@ export class OutputView extends outputBase.OutputView {
     this._outputView = new OutputArea({
       rendermime: this.model.widget_manager.rendermime,
       contentFactory: OutputArea.defaultContentFactory,
-      model: this.model.outputs
+      model: this.model.outputs,
     });
     // TODO: why is this a readonly property now?
     // this._outputView.model = this.model.outputs;
     // TODO: why is this on the model now?
     // this._outputView.trusted = true;
-    this.pWidget.insertWidget(0, this._outputView);
+    this.luminoWidget.insertWidget(0, this._outputView);
 
-    this.pWidget.addClass('jupyter-widgets');
-    this.pWidget.addClass('widget-output');
+    this.luminoWidget.addClass('jupyter-widgets');
+    this.luminoWidget.addClass('widget-output');
     this.update(); // Set defaults.
   }
 
@@ -204,5 +204,5 @@ export class OutputView extends outputBase.OutputView {
 
   model: OutputModel;
   _outputView: OutputArea;
-  pWidget: Panel;
+  luminoWidget: Panel;
 }