TypeScript #1373

tristen · 2025-03-13T21:38:22Z

This PR replaces .js files in src/ and test/ with .ts. Additionally:

Adds npm run tsc to evaluate typings
Adds prettier as a husky chore to format the codebase consistently
Updated function prototypes to classes
Converted most utility functions to named functions for naming consistency across the codebase

Note: I haven't touched benchmarks. Things remain JavaScript there.

dist/mapbox-gl-draw-unminified.js bundles at 113k
dist/mapbox-gl-draw.js bundles at 51k

bench/index.js

tristen · 2025-03-17T22:16:41Z

dist/mapbox-gl-draw.css

Prettier changed the formatting here.

tristen · 2025-03-17T22:17:52Z

package.json

-    "test": "node --test --import ./test/mock-browser.js",
-    "coverage": "node --test --import ./test/mock-browser.js --experimental-test-coverage",
+    "test": "tsx test/*.test.ts",
+    "coverage": "tsx test/*.test.ts --experimental-test-coverage",


For --experimental-test-coverage to run, Node v22 must be used.

tristen · 2025-03-17T22:21:03Z

src/events.ts

-    zoomend: function() {
-      ctx.store.changeZoom();
-    },


This looked like a dead/old method as store so I removed it.

tristen · 2025-03-17T22:26:25Z

package.json

    "docs": "run-s docs-modes-life-cycle docs-modes-get-and-set",
-    "docs-modes-get-and-set": "documentation readme --readme-file ./docs/MODES.md -s \"Setters and Getters\" src/modes/mode_interface_accessors.js --shallow",
-    "docs-modes-life-cycle": "documentation readme --readme-file ./docs/MODES.md -s \"Life Cycle Functions\" src/modes/mode_interface.js --shallow",
-    "lint": "eslint index.js src test bench",
+    "docs-modes-get-and-set": "documentation readme --readme-file ./docs/MODES.md -s \"Setters and Getters\" src/modes/mode_interface_accessors.ts --shallow",
+    "docs-modes-life-cycle": "documentation readme --readme-file ./docs/MODES.md -s \"Life Cycle Functions\" src/modes/mode_interface.ts --shallow",


Not sure what to do here. JSdoc have largely been replaced with TypeScript 🤔

tristen · 2025-03-17T22:40:51Z

test/api.test.ts

+
+  assert.deepEqual(
+    Draw.getAll().features[0].geometry.coordinates,
+    [[undefined]],


This needs to be checked. I'm not quite sure why it changed from null to undefined.

rewdy · 2025-05-22T23:32:02Z

This is awesome. Would love too see this get merged. :)

underoot

It's amazing job! Thank you! 🥳

I made the first iteration of review and left some comments. Could you please also ensure that some changes marked in Git as renaming and not delete/add because it's hard to see the difference, especially for large files (see screenshot)
and also rename in Git will retain Git history

And also I'd prefer to apply prettier as a separate PR, but it's up to you.

underoot · 2025-04-24T15:00:00Z

index.ts

+
+  const ctx = {
+    options
+  } as spy;


Why do we have this test-related cast here?

underoot · 2025-07-31T15:39:53Z

rollup.config.js

    name: 'MapboxDraw',
    file: outputFile,
-    format: 'umd',
+    format: 'esm',


It seems like a breaking change for customers who use this library through a script tag.

underoot · 2025-07-31T15:44:42Z

src/types/fast-deep-equal.d.ts

@@ -0,0 +1 @@
+declare module 'fast-deep-equal';


But fast-deep-equal has typings out of the box based on NPM

underoot · 2025-07-31T15:45:11Z

src/types/geojson-area.d.ts

@@ -0,0 +1 @@
+declare module '@mapbox/geojson-area';


underoot · 2025-07-31T15:45:48Z

src/types/point-geometry.d.ts

@@ -0,0 +1 @@
+declare module '@mapbox/point-geometry';


underoot · 2025-07-31T15:49:48Z

package.json

    "drawing"
  ],
  "type": "module",
  "exports": {


I guess now we can expose types for GL Draw as we do in GL JS https://github.com/mapbox/mapbox-gl-js/blob/main/package.json#L130

underoot · 2025-07-31T15:53:26Z

src/modes/object_to_mode.ts

@@ -1,4 +1,5 @@
 import ModeInterface from './mode_interface.js';
+import type { CTX, DrawCustomMode, StrictFeature } from '../types/types';


nit: Maybe use Context?

guillem-aistech · 2025-10-17T11:30:46Z

Interested on this been merged.

tristen added 21 commits March 4, 2025 07:53

Incrementally update

94dbec2

Lose extensions on imports

0e08763

Declare class

f81f483

More conversion

60e274d

Move all source .js to .ts

f8166b3

Format everything

88f9cb1

Fix bad reference to getFeaturesAt

6c95cc9

More TypeScript setup

2098903

Convet more to TypeScript

dd83eed

Tackle smaller libs

8cdbaf0

Move feature_types to classes

0a746b8

Start over again with @types/mapbox-gl-draw

f7cc701

Reformatting wave

711f71c

More typing

045467d

Simple typings for common selectors

5b71f7b

More typings

bf78fe6

More type safety, nest properties in mode objects

e1cc500

More

c865b76

More

2923db4

Drop unused method

2f8abc0

Bad typing for QRF

9506e08

tristen changed the title ~~Convert to TypeScript~~ [WIP] TypeScript Mar 13, 2025

github-advanced-security bot found potential problems Mar 13, 2025

View reviewed changes

bench/index.js Fixed Show fixed Hide fixed

tristen added 7 commits March 13, 2025 17:49

Add argument signatures to mode interface and do not recast

7a00968

Walk back

1b4c52e

Reduce the scope of this PR by skipping bench stuff

2792160

Reduce scope further

2e24ed1

Bad conditional

d23d156

Walk back on eslint stuff

05cf584

eslint changes

3b48ac1

tristen and others added 10 commits March 17, 2025 11:38

More typings for tests

a1e18d9

Do some spy mocking

7f1f5c5

More spy coersion

195b056

Finish up the pass on tsc errors in tests

ac8d989

tsx is better?

041405c

Fixes to TypeScript for tests

845a741

Lint fixes suspiciously light

31a7035

Bad typo

b54417b

Need to confirm undefined here

7257289

Merge branch 'main' into tsc

57a7828

tristen commented Mar 17, 2025

View reviewed changes

dist/mapbox-gl-draw.css

Copy link

Member Author

tristen Mar 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prettier changed the formatting here.

tristen commented Mar 17, 2025

View reviewed changes

Not a major version bump

37b1e97

tristen commented Mar 17, 2025

View reviewed changes

Fix rollup

bd51259

tristen commented Mar 17, 2025

View reviewed changes

tristen requested a review from stepankuzmin March 17, 2025 22:50

tristen added 2 commits March 17, 2025 18:55

Drop export where it is not necessary

dde51f2

Remove overriding method

d180d1f

tristen marked this pull request as ready for review March 18, 2025 01:36

tristen requested a review from a team as a code owner March 18, 2025 01:36

Merge branch 'main' into tsc

326426e

tristen changed the title ~~[WIP] TypeScript~~ TypeScript Mar 19, 2025

tristen requested review from mourner and removed request for stepankuzmin March 19, 2025 18:41

tristen removed the request for review from mourner April 4, 2025 16:04

underoot reviewed Jul 31, 2025

View reviewed changes

		@@ -1,4 +1,5 @@
		import ModeInterface from './mode_interface.js';
		import type { CTX, DrawCustomMode, StrictFeature } from '../types/types';

TypeScript #1373

Are you sure you want to change the base?

TypeScript #1373

Conversation

tristen commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tristen Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rewdy commented May 22, 2025

Uh oh!

underoot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

guillem-aistech commented Oct 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tristen commented Mar 13, 2025 •

edited

Loading

tristen Mar 17, 2025 •

edited

Loading

underoot left a comment •

edited

Loading