TypeScript

.eslintrc

@@ -1,13 +1,5 @@
 {
-  "extends": [
-    "mourner",
-    "plugin:import/recommended"
-  ],
-  "parser": "espree",
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2020
-  },
+  "parser": "@typescript-eslint/parser",
   "plugins": [
     "import"
   ],

.gitignore

@@ -8,5 +8,4 @@ dist/mapbox-gl-draw-unminified.js.map
 dist/bench.js
 dist/bench.js.map
 coverage/
-.nyc_output/
 debug/access_token_generated.js

.husky/pre-commit

@@ -0,0 +1 @@
+npm test

README.md

@@ -45,14 +45,6 @@ import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.3/mapbox-gl-draw.css' type='text/css' />
 ```
 
-### Typescript
-
-Typescript definition files are available as part of the [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/mapbox__mapbox-gl-draw) package.
-
-```
-npm install @types/mapbox__mapbox-gl-draw
-```
-
 ### Example usage
 
 ```js

dist/mapbox-gl-draw.css

@@ -1,26 +1,25 @@
-
 /* Override default control style */
 .mapbox-gl-draw_ctrl-bottom-left,
 .mapbox-gl-draw_ctrl-top-left {
-  margin-left:0;
-  border-radius:0 4px 4px 0;
+  margin-left: 0;
+  border-radius: 0 4px 4px 0;
 }
 .mapbox-gl-draw_ctrl-top-right,
 .mapbox-gl-draw_ctrl-bottom-right {
-  margin-right:0;
-  border-radius:4px 0 0 4px;
+  margin-right: 0;
+  border-radius: 4px 0 0 4px;
 }
 
 .mapbox-gl-draw_ctrl-draw-btn {
-  border-color:rgba(0,0,0,0.9);
-  color:rgba(255,255,255,0.5);
-  width:30px;
-  height:30px;
+  border-color: rgba(0, 0, 0, 0.9);
+  color: rgba(255, 255, 255, 0.5);
+  width: 30px;
+  height: 30px;
 }
 
 .mapbox-gl-draw_ctrl-draw-btn.active,
 .mapbox-gl-draw_ctrl-draw-btn.active:hover {
-  background-color:rgb(0 0 0/5%);
+  background-color: rgb(0 0 0/5%);
 }
 .mapbox-gl-draw_ctrl-draw-btn {
   background-repeat: no-repeat;
@@ -55,34 +54,39 @@
 .mapboxgl-map.mouse-add .mapboxgl-canvas-container.mapboxgl-interactive {
   cursor: crosshair;
 }
-.mapboxgl-map.mouse-move.mode-direct_select .mapboxgl-canvas-container.mapboxgl-interactive {
+.mapboxgl-map.mouse-move.mode-direct_select
+  .mapboxgl-canvas-container.mapboxgl-interactive {
   cursor: grab;
   cursor: -moz-grab;
   cursor: -webkit-grab;
 }
-.mapboxgl-map.mode-direct_select.feature-vertex.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
+.mapboxgl-map.mode-direct_select.feature-vertex.mouse-move
+  .mapboxgl-canvas-container.mapboxgl-interactive {
   cursor: move;
 }
-.mapboxgl-map.mode-direct_select.feature-midpoint.mouse-pointer .mapboxgl-canvas-container.mapboxgl-interactive {
+.mapboxgl-map.mode-direct_select.feature-midpoint.mouse-pointer
+  .mapboxgl-canvas-container.mapboxgl-interactive {
   cursor: cell;
 }
-.mapboxgl-map.mode-direct_select.feature-feature.mouse-move .mapboxgl-canvas-container.mapboxgl-interactive {
+.mapboxgl-map.mode-direct_select.feature-feature.mouse-move
+  .mapboxgl-canvas-container.mapboxgl-interactive {
   cursor: move;
 }
-.mapboxgl-map.mode-static.mouse-pointer  .mapboxgl-canvas-container.mapboxgl-interactive {
+.mapboxgl-map.mode-static.mouse-pointer
+  .mapboxgl-canvas-container.mapboxgl-interactive {
   cursor: grab;
   cursor: -moz-grab;
   cursor: -webkit-grab;
 }
 
 .mapbox-gl-draw_boxselect {
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 0;
-    background: rgba(0,0,0,.1);
-    border: 2px dotted #fff;
-    opacity: 0.5;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  background: rgba(0, 0, 0, 0.1);
+  border: 2px dotted #fff;
+  opacity: 0.5;
 }

index.ts

@@ -0,0 +1,38 @@
+import { spy } from 'sinon';
+import runSetup from './src/setup';
+import { configureOptions } from './src/options';
+import setupAPI from './src/api';
+import * as modes from './src/modes/index';
+import * as Constants from './src/constants';
+import * as lib from './src/lib/index';
+import type { DrawOptions, Draw } from './src/types/types';
+
+const setupDraw = (options: DrawOptions, api: Draw) => {
+  options = configureOptions(options);
+
+  const ctx = {
+    options
+  } as spy;
+
+  api = setupAPI(ctx, api);
+  ctx.api = api;
+
+  const setup = runSetup(ctx);
+
+  api.onAdd = setup.onAdd;
+  api.onRemove = setup.onRemove;
+  api.types = Constants.types;
+  api.options = options;
+
+  return api;
+};
+
+function MapboxDraw(options?: DrawOptions) {
+  setupDraw(options, this);
+}
+
+MapboxDraw.modes = modes;
+MapboxDraw.constants = Constants;
+MapboxDraw.lib = lib;
+
+export default MapboxDraw;