Add typescript (#1159)

* Add tsconifg and webpack changes

* Change extension.js file to ts

* Rename all the things

* Quiet some errors

* Update package.json

* Move amd-public-path

* Change require to import for controls

* Change require to import for layers part 1

* Change require to import for layers part 2

* Change rest of files to import

* Stragglers

* Add CSS folder

* technically builds

* Change register stuff

* Temp comment out tilelayer stuff

* Add files to package.json

* Fix imports

* Update gitignore

* Update package.json and lockfile

* Prettier things

* eslint things

* Remove commented code

Author: gjmooney

.gitignore

@@ -12,6 +12,7 @@ ui-tests/.yarn/
 ipyleaflet/nbextension/
 ipyleaflet/labextension/
 js/dist/
+js/lib/
 
 # OS X
 .DS_Store

js/.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+lib

js/.prettierignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+lib

js/src/jupyter-leaflet.css renamed to js/css/jupyter-leaflet.css

@@ -8,23 +8,36 @@
     "jupyterlab-extension",
     "widgets"
   ],
+  "files": [
+    "css/",
+    "lib/"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/jupyter-widgets/ipyleaflet.git"
   },
   "license": "MIT",
   "author": "Project Jupyter",
-  "main": "src/index.js",
+  "main": "lib/index.js",
+  "types": "./lib/index.d.ts",
   "scripts": {
-    "build": "webpack && jupyter labextension build .",
-    "clean": "rimraf dist/ && rimraf ../ipyleaflet/labextension/ && rimraf ../ipyleaflet/nbextension",
-    "prepublish": "npm run clean && npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "watch": "run-p watch:src watch:labextension",
-    "watch:src": "webpack --watch",
-    "watch:labextension": "jupyter labextension watch .",
-    "lint": "eslint . --fix && prettier --write .",
-    "lint:check": "eslint . && prettier ."
+    "build": "yarn run build:lib && yarn run build:nbextension && yarn run build:labextension",
+    "build:lib": "tsc",
+    "build:nbextension": "webpack --no-devtool",
+    "build:labextension": "jupyter labextension build .",
+    "build:extensions": "yarn run build && yarn run build:labextension",
+    "clean": "yarn run clean:lib && yarn run clean:nbextension && yarn run clean:labextension",
+    "clean:lib": "rimraf lib",
+    "clean:nbextension": "rimraf ../ipyleaflet/nbextension/index.js",
+    "clean:labextension": "rimraf ../ipyleaflet/labextension",
+    "lint": "yarn prettier && yarn eslint",
+    "lint:check": "yarn prettier:check && yarn eslint",
+    "prettier": "yarn prettier:base --write --list-different",
+    "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+    "prettier:check": "yarn prettier:base --check",
+    "prepack": "yarn run build",
+    "watch:lib": "tsc -w",
+    "watch:nbextension": "webpack --watch"
   },
   "dependencies": {
     "@jupyter-widgets/base": "^2 || ^3 || ^4 || ^5 || ^6",
@@ -52,6 +65,9 @@
   },
   "devDependencies": {
     "@jupyterlab/builder": "^4.0.8",
+    "@types/leaflet": "^1.9.8",
+    "@types/node": "^20.10.5",
+    "@types/webpack-env": "^1.18.4",
     "css-loader": "^3.4.2",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
@@ -64,12 +80,15 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "rimraf": "^2.6.1",
+    "source-map-loader": "^4.0.1",
     "style-loader": "^1.1.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
     "webpack": "^5",
     "webpack-cli": "^5.1.4"
   },
   "jupyterlab": {
-    "extension": "src/jupyterlab-plugin",
+    "extension": "lib/jupyterlab-plugin",
     "outputDir": "../ipyleaflet/labextension",
     "webpackConfig": "webpack.lab.config.js",
     "sharedPackages": {

js/package.json

@@ -1,10 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
+// @ts-nocheck
 
-const widgets = require('@jupyter-widgets/base');
-const L = require('./leaflet.js');
-const utils = require('./utils.js');
-const proj = require('./projections.js');
+import * as widgets from '@jupyter-widgets/base';
+import L from './leaflet';
+import * as utils from './utils';
+import * as proj from './projections';
 
 const DEFAULT_LOCATION = [0.0, 0.0];
 
@@ -448,7 +449,7 @@ export class LeafletMapView extends utils.LeafletDOMWidgetView {
 
   _processLuminoMessage(msg, _super) {
     _super.call(this, msg);
-    if(!this.obj) return;
+    if (!this.obj) return;
     switch (msg.type) {
       case 'resize':
         // We set the dirty flag to true to prevent the sub-pixel error

js/src/Map.js renamed to js/src/Map.ts

@@ -1,7 +1,9 @@
 // In an AMD module, we set the public path using the magic requirejs 'module' dependency
 // See https://github.com/requirejs/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
 // Since 'module' is a requirejs magic module, we must include 'module' in the webpack externals configuration.
-var module = require('module');
+// @ts-nocheck
+
+import * as module from 'module';
 var url = new URL(module.uri, document.location);
 // Using lastIndexOf('/')+1 gives us the empty string if there is no '/', so pathname becomes '/'
 url.pathname = url.pathname.slice(0, url.pathname.lastIndexOf('/') + 1);

js/amd-public-path.js renamed to js/src/amd-public-path.ts

@@ -1,8 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
+//@ts-nocheck
 
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+import L from '../leaflet';
+import * as control from './Control';
 
 export class LeafletAttributionControlModel extends control.LeafletControlModel {
   defaults() {

js/src/controls/AttributionControl.js renamed to js/src/controls/AttributionControl.ts

@@ -1,10 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const widgets = require('@jupyter-widgets/base');
-const L = require('../leaflet.js');
-const utils = require('../utils.js');
+//@ts-nocheck
 
+import * as widgets from '@jupyter-widgets/base';
+import L from '../leaflet';
+import * as utils from '../utils';
 export class LeafletControlModel extends widgets.WidgetModel {
   defaults() {
     return {

js/src/controls/Control.js renamed to js/src/controls/Control.ts

@@ -1,9 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const widgets = require('@jupyter-widgets/base');
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+//@ts-nocheck
+
+import * as widgets from '@jupyter-widgets/base';
+import L from '../leaflet';
+import * as control from './Control';
 
 export class LeafletDrawControlModel extends control.LeafletControlModel {
   defaults() {

js/src/controls/DrawControl.js renamed to js/src/controls/DrawControl.ts

@@ -1,9 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const L = require('../leaflet.js');
-const control = require('./Control.js');
-
+//@ts-nocheck
+import L from '../leaflet';
+import * as control from './Control';
 export class LeafletFullScreenControlModel extends control.LeafletControlModel {
   defaults() {
     return {
@@ -21,6 +21,8 @@ export class LeafletFullScreenControlView extends control.LeafletControlView {
   }
 
   create_obj() {
+    //@ts-ignore
+
     this.obj = L.control.fullscreen(this.get_options());
   }
 }

js/src/controls/FullScreenControl.js renamed to js/src/controls/FullScreenControl.ts

@@ -1,8 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+//@ts-nocheck
+import L from '../leaflet';
+import * as control from './Control';
 
 export class LeafletLayersControlModel extends control.LeafletControlModel {
   defaults() {
@@ -56,6 +57,7 @@ export class LeafletLayersControlView extends control.LeafletControlView {
           }
           return ov;
         }, {});
+        //@ts-ignore
         this.obj = L.control.layers(baselayers, overlays, this.get_options());
         return this;
       })

js/src/controls/LayersControl.js renamed to js/src/controls/LayersControl.ts

@@ -1,6 +1,7 @@
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+// @ts-nocheck
 
+import L from '../leaflet';
+import * as control from './Control';
 export class LeafletLegendControlModel extends control.LeafletControlModel {
   defaults() {
     return {

js/src/controls/LegendControl.js renamed to js/src/controls/LegendControl.ts

@@ -1,8 +1,8 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+//@ts-nocheck
+import L from '../leaflet';
+import * as control from './Control';
 
 export class LeafletMeasureControlModel extends control.LeafletControlModel {
   defaults() {

js/src/controls/MeasureControl.js renamed to js/src/controls/MeasureControl.ts

@@ -1,9 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const L = require('../leaflet.js');
-const control = require('./Control.js');
-
+//@ts-nocheck
+import L from '../leaflet';
+import * as control from './Control';
 export class LeafletScaleControlModel extends control.LeafletControlModel {
   defaults() {
     return {
@@ -21,6 +21,7 @@ export class LeafletScaleControlView extends control.LeafletControlView {
   }
 
   create_obj() {
+    //@ts-ignore
     this.obj = L.control.scale(this.get_options());
   }
 }

js/src/controls/ScaleControl.js renamed to js/src/controls/ScaleControl.ts

@@ -1,9 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const widgets = require('@jupyter-widgets/base');
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+//@ts-nocheck
+import * as widgets from '@jupyter-widgets/base';
+import L from '../leaflet';
+import * as control from './Control';
 
 export class LeafletSearchControlModel extends control.LeafletControlModel {
   defaults() {
@@ -47,6 +48,7 @@ export class LeafletSearchControlView extends control.LeafletControlView {
       const options = this.get_options();
       options.layer = layer_view !== null ? layer_view.obj : null;
       options.marker = marker_view !== null ? marker_view.obj : false;
+      //@ts-ignore
       this.obj = L.control.search(options);
     });
   }

js/src/controls/SearchControl.js renamed to js/src/controls/SearchControl.ts

@@ -1,9 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const widgets = require('@jupyter-widgets/base');
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+//@ts-nocheck
+import * as widgets from '@jupyter-widgets/base';
+import L from '../leaflet';
+import * as control from './Control';
 
 export class LeafletSplitMapControlModel extends control.LeafletControlModel {
   default() {
@@ -50,6 +51,7 @@ export class LeafletSplitMapControlView extends control.LeafletControlView {
           right_views.push(view.obj);
         }
       });
+      //@ts-ignore
       this.obj = L.control.splitMap(left_views, right_views);
     });
   }

js/src/controls/SplitMapControl.js renamed to js/src/controls/SplitMapControl.ts

@@ -1,11 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-
-const widgets = require('@jupyter-widgets/base');
-const L = require('../leaflet.js');
-const control = require('./Control.js');
-const PMessaging = require('@lumino/messaging');
-const PWidgets = require('@lumino/widgets');
+//@ts-nocheck
+import * as widgets from '@jupyter-widgets/base';
+import * as PMessaging from '@lumino/messaging';
+import * as PWidgets from '@lumino/widgets';
+import L from '../leaflet';
+import * as control from './Control';
 
 class WidgetControl extends L.Control {
   updateLayout(options) {

js/src/controls/WidgetControl.js renamed to js/src/controls/WidgetControl.ts

@@ -1,8 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-const L = require('../leaflet.js');
-const control = require('./Control.js');
+//@ts-nocheck
+import L from '../leaflet';
+import * as control from './Control';
 
 export class LeafletZoomControlModel extends control.LeafletControlModel {
   defaults() {
@@ -25,6 +26,7 @@ export class LeafletZoomControlView extends control.LeafletControlView {
   }
 
   create_obj() {
+    //@ts-ignore
     this.obj = L.control.zoom(this.get_options());
   }
 }

js/src/controls/ZoomControl.js renamed to js/src/controls/ZoomControl.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-module.exports = require('./index.js');
+export * from './index';

js/src/embed.js renamed to js/src/embed.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
+// @ts-nocheck
 
 // Configure requirejs
 if (window.require) {
@@ -12,7 +13,4 @@ if (window.require) {
   });
 }
 
-// Export the required load_ipython_extention
-module.exports = {
-  load_ipython_extension: function () {},
-};
+export const load_ipython_extension = function () {};

js/src/extension.js renamed to js/src/extension.ts

@@ -1,10 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
+// @ts-nocheck
+
+import packageJson from '../package.json';
 
 // Export everything from jupyter-leaflet and the npm package version number.
 var _oldL = window.L;
-module.exports = require('./jupyter-leaflet.js');
-module.exports['version'] = require('../package.json').version;
 
 // if previous L existed and it got changed while loading this module
 if (_oldL !== undefined && _oldL !== window.L) {
@@ -13,3 +14,8 @@ if (_oldL !== undefined && _oldL !== window.L) {
   );
   ipyL = L.noConflict(); // eslint-disable-line no-undef
 }
+
+const { version } = packageJson;
+
+export * from './jupyter-leaflet';
+export { version };