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() {