#7322 add declaration files (#7496)

* #7322 refactor TableDisplay structure

* #7322 add first declaration files

* #7322 convert widget files to TypeScript

* #7322 update webpack entry points

* #7322 add declaration files

* #7322 fix missing types and type properties

* #7322 use typings in Lab lib

* #7322 refactor Plot, add plot typings

* #7322 fix Spinner missing

* #7322 create declaration files for Lab plugin

* #7322 fix missing property error

js/lab/package.json

@@ -33,6 +33,7 @@
     "@jupyterlab/rendermime": "^0.15.2",
     "@jupyterlab/rendermime-interfaces": "^1.0.4",
     "@jupyterlab/services": "^1.1.2",
+    "@phosphor/datagrid": "^0.1.6",
     "@types/node": "^8.0.56",
     "rimraf": "^2.6.2",
     "typescript": "~2.6.2"

js/lab/src/index.ts

@@ -16,20 +16,20 @@
 
 import './global.env';
 import { IJupyterWidgetRegistry } from '@jupyter-widgets/base';
+import { IPlugin } from '@phosphor/application';
 import { JupyterLab, JupyterLabPlugin } from '@jupyterlab/application';
 import { ISettingRegistry } from "@jupyterlab/coreutils";
 import BeakerxExtension from './plugin';
 import BeakerxTreeJupyterLabPlugin from "./tree";
 import RequirejsLoader from "./plugin/requirejs";
-
 import { themeLightPlugin, themeDarkPlugin } from './theme';
 
-const beakerx = require('../lib/index.js');
+export const beakerx = require('../lib/index.js');
 
-const beakerx_ext = {
+export const beakerx_ext: JupyterLabPlugin<void>|IPlugin<JupyterLab, void> = {
   id: 'beakerx',
   requires: [IJupyterWidgetRegistry, ISettingRegistry],
-  activate: (app: JupyterLab, widgets: IJupyterWidgetRegistry, settings: ISettingRegistry) => {
+  activate: (app: JupyterLab, widgets: IJupyterWidgetRegistry, settings: ISettingRegistry): void => {
     widgets.registerWidget({
       name: 'beakerx',
       version: beakerx.version,
@@ -41,9 +41,9 @@ const beakerx_ext = {
   autoStart: true
 };
 
-const tree_ext = BeakerxTreeJupyterLabPlugin;
+export const tree_ext: JupyterLabPlugin<void> = BeakerxTreeJupyterLabPlugin;
 
-const requirejs_ext: JupyterLabPlugin<void> = {
+export const requirejs_ext: JupyterLabPlugin<void> = {
   id: 'beakerx:requirejs',
   autoStart: true,
   requires: [],
@@ -52,8 +52,8 @@ const requirejs_ext: JupyterLabPlugin<void> = {
   }
 };
 
-const beakerx_theme_light_ext = themeLightPlugin;
-const beakerx_theme_dark_ext = themeDarkPlugin;
+export const beakerx_theme_light_ext: JupyterLabPlugin<void> = themeLightPlugin;
+export const beakerx_theme_dark_ext: JupyterLabPlugin<void> = themeDarkPlugin;
 
 export default [
   requirejs_ext,

js/lab/src/plugin/initializationCells.ts

@@ -19,7 +19,7 @@ import { Cell, CodeCell } from '@jupyterlab/cells';
 import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { ToolbarButton } from '@jupyterlab/apputils'
 
-interface IInitCellsOptions {
+export interface IInitCellsOptions {
   run_on_kernel_ready: boolean,
   run_untrusted?: boolean
 }

js/lab/src/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "allowJs": true,
+    "declaration": true,
+    "declarationDir": "../dist",
     "noImplicitAny": false,
     "noEmitOnError": true,
     "noUnusedLocals": true,

js/notebook/package.json

@@ -3,7 +3,7 @@
   "version": "0.19.0",
   "description": "BeakerX: Beaker Extensions for Jupyter",
   "author": "Two Sigma Open Source, LLC",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -34,11 +34,15 @@
     "stats": "webpack --env production --profile --json > stats.json"
   },
   "devDependencies": {
+    "@jupyter-widgets/base": "^1.1.10",
+    "@jupyter-widgets/controls": "^1.2.1",
     "@types/chai": "^4.1.1",
     "@types/jquery": "^3.3.0",
     "@types/mocha": "^2.2.46",
+    "@types/node": "^10.3.1",
     "base64-inline-loader": "^1.1.1",
     "chai": "^4.1.2",
+    "copy-webpack-plugin": "^4.5.1",
     "css-loader": "^0.28.4",
     "file-loader": "^0.10.0",
     "fork-ts-checker-webpack-plugin": "^0.2.8",

js/notebook/src/BxHTML.ts

@@ -14,9 +14,9 @@
  *  limitations under the License.
  */
 
-const widgets = require('./widgets');
+import widgets from './widgets';
 
-class BxHTMLModel extends widgets.HTMLModel {
+export class BxHTMLModel extends widgets.HTMLModel {
     defaults() {
         return {
             ...super.defaults(),
@@ -30,7 +30,7 @@ class BxHTMLModel extends widgets.HTMLModel {
     }
 }
 
-class BxHTMLView extends widgets.HTMLView {
+export class BxHTMLView extends widgets.HTMLView {
     render() {
         super.render();
         this.content.style.lineHeight = "20px";

js/notebook/src/CyclingDisplayBox.js → js/notebook/src/CyclingDisplayBox.ts

@@ -14,69 +14,71 @@
  *  limitations under the License.
  */
 
-var widgets = require('./widgets');
-var _ = require('underscore');
+import widgets from './widgets';
 
-var interval = undefined;
-var period = undefined;
-var currentWidgetIndex = 0;
+let interval = undefined;
+let period = undefined;
+let currentWidgetIndex = 0;
 
-var CyclingDisplayBoxModel = widgets.BoxModel.extend({
-  _model_name : 'CyclingDisplayBoxModel',
-  _view_name : 'CyclingDisplayBoxView',
-  _model_module : 'beakerx',
-  _view_module : 'beakerx',
-  _model_module_version: BEAKERX_MODULE_VERSION,
-  _view_module_version: BEAKERX_MODULE_VERSION
-});
+export class CyclingDisplayBoxModel extends widgets.BoxModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_name: 'CyclingDisplayBoxModel',
+      _view_name: 'CyclingDisplayBoxView',
+      _model_module: 'beakerx',
+      _view_module: 'beakerx',
+      _model_module_version: BEAKERX_MODULE_VERSION,
+      _view_module_version: BEAKERX_MODULE_VERSION
+    }
+  }
+}
 
-var CyclingDisplayBoxView = widgets.BoxView.extend({
-
-  initialize: function() {
-    CyclingDisplayBoxView.__super__.initialize.apply(this, arguments);
+export class CyclingDisplayBoxView extends widgets.BoxView {
+  initialize() {
+    super.initialize.apply(this, arguments);
     this.interval = undefined;
     this.period = this.model.get("period");
-  },
+  }
 
-  update_children: function() {
-    var that = this;
+  update_children() {
     if(this.interval){
       clearInterval(this.interval);
     }
 
-    that.draw_widget();
+    this.draw_widget();
     if(this.period){
-      this.interval = setInterval(function() {
-        var max = that.model.get('children').length - 1; 
+      this.interval = setInterval(() => {
+        let max = this.model.get('children').length - 1;
+
         if(currentWidgetIndex >= max){
           currentWidgetIndex = 0;
-        }else{
+        } else {
           currentWidgetIndex++;
         }
-        that.draw_widget();
-
+
+        this.draw_widget();
       }, this.period);
     } 
-  },
+  }
 
-  draw_widget: function() {
-    var element = this.model.get('children')[currentWidgetIndex];
+  draw_widget() {
+    const element = this.model.get('children')[currentWidgetIndex];
+
     if(element && this.children_views){
       this.children_views.update([element])
         .then(function(views) {
-          var heights = views.map(function (view) {
+          let heights = views.map((view) => {
             return view.$el.height();
           });
 
           views[0].$el.parent().css('min-height', Math.max.apply(null, heights));
         });
     }
-  },
-
-
-});
+  }
+}
 
-module.exports = {
-  CyclingDisplayBoxView: CyclingDisplayBoxView,
-  CyclingDisplayBoxModel: CyclingDisplayBoxModel
+export default {
+  CyclingDisplayBoxView,
+  CyclingDisplayBoxModel
 };