Skip to content

TypeScript#1373

Open
tristen wants to merge 61 commits intomainfrom
tsc
Open

TypeScript#1373
tristen wants to merge 61 commits intomainfrom
tsc

Conversation

@tristen
Copy link
Copy Markdown
Member

@tristen tristen commented Mar 13, 2025

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

@tristen tristen changed the title Convert to TypeScript [WIP] TypeScript Mar 13, 2025
Comment thread bench/index.js Fixed
Comment thread dist/mapbox-gl-draw.css
Copy link
Copy Markdown
Member Author

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.

Comment thread 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",
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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

Comment thread src/events.ts Outdated
Comment on lines -158 to -160
zoomend: function() {
ctx.store.changeZoom();
},
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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

Comment thread package.json
Comment on lines 34 to +36
"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",
Copy link
Copy Markdown
Member Author

@tristen tristen Mar 17, 2025

Choose a reason for hiding this comment

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

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

Comment thread test/api.test.ts

assert.deepEqual(
Draw.getAll().features[0].geometry.coordinates,
[[undefined]],
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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

@tristen tristen requested a review from stepankuzmin March 17, 2025 22:50
@tristen tristen marked this pull request as ready for review March 18, 2025 01:36
@tristen tristen requested a review from a team as a code owner March 18, 2025 01:36
@tristen tristen changed the title [WIP] TypeScript TypeScript Mar 19, 2025
@tristen tristen requested review from mourner and removed request for stepankuzmin March 19, 2025 18:41
@tristen tristen removed the request for review from mourner April 4, 2025 16:04
@rewdy
Copy link
Copy Markdown

rewdy commented May 22, 2025

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

Copy link
Copy Markdown
Member

@underoot underoot left a comment

Choose a reason for hiding this comment

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

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)
image 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.

Comment thread index.ts

const ctx = {
options
} as spy;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Why do we have this test-related cast here?

Comment thread rollup.config.js
name: 'MapboxDraw',
file: outputFile,
format: 'umd',
format: 'esm',
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

@@ -0,0 +1 @@
declare module 'fast-deep-equal';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

@@ -0,0 +1 @@
declare module '@mapbox/geojson-area';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

image

@@ -0,0 +1 @@
declare module '@mapbox/point-geometry';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

image

Comment thread package.json
@@ -23,7 +23,6 @@
],
"type": "module",
"exports": {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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

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

Choose a reason for hiding this comment

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

nit: Maybe use Context?

@guillem-aistech
Copy link
Copy Markdown

Interested on this been merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants