Skip to content

Rewrite as TypeScript npm package with Leaflet v1/v2 dual support#31

Open
jwasilgeo wants to merge 1 commit into
masterfrom
modernize-typescript-npm-leaflet-v2
Open

Rewrite as TypeScript npm package with Leaflet v1/v2 dual support#31
jwasilgeo wants to merge 1 commit into
masterfrom
modernize-typescript-npm-leaflet-v2

Conversation

@jwasilgeo

@jwasilgeo jwasilgeo commented Apr 14, 2026

Copy link
Copy Markdown
Owner

Summary

  • Converts src/CanvasFlowmapLayer.js to TypeScript using an ES6 class pattern compatible with both Leaflet v1 and v2
  • Ships as a proper npm package (leaflet-canvas-flowmap-layer) with ESM, UMD, and TypeScript declaration outputs via Vite
  • Bundles tween.js; only leaflet is externalized (peer dep >=1.7.0 <3.0.0)
  • Updates all three demo pages
  • Adds installation, quickstart (ESM + UMD script tag), and v1→v2 migration guide to README

Closes #30, closes #17

Breaking changes from v1

v1 v2
L.canvasFlowmapLayer(geoJson, opts) new CanvasFlowmapLayer(geoJson, opts) (named import)
window.L.CanvasFlowmapLayer import { CanvasFlowmapLayer } from 'leaflet-canvas-flowmap-layer'
Script tag attaches to window.L UMD global is window.LeafletCanvasFlowmapLayer.CanvasFlowmapLayer
Must load tween.js separately tween.js is bundled — remove the separate <script> tag

All public methods, options, and events are unchanged.

Test plan

  • npm install — installs cleanly
  • npm run build — produces dist/canvas-flowmap-layer.js, .umd.cjs, .d.ts
  • npm run typecheck — zero TypeScript errors
  • npm run serve then open docs/main/index.html — flowmap renders, animation runs, click selection works
  • docs/comparison/index.html — layer switching, animation controls, show/clear all work
  • docs/class-breaks-symbology/index.html — class break symbology renders correctly
  • Pan past ±180° longitude — wrapAroundCanvas: true draws correctly
  • UMD via script tag with dist/canvas-flowmap-layer.umd.cjs — global export works

- Convert src/CanvasFlowmapLayer.js to TypeScript (ES6 class, strict types)
- Add src/index.ts as entry point with named exports and type exports
- Add Vite lib-mode build (ESM + UMD outputs) via vite.config.ts
- Bundle tween.js; externalize only leaflet (peer dep >=1.7.0 <3.0.0)
- Add package.json for npm publish as leaflet-canvas-flowmap-layer
- Add tsconfig.json with strict mode and bundler module resolution
- Update demo pages to ESM script modules with import maps
- Update README with installation, quickstart, and v1→v2 migration guide
- Update .gitignore to exclude node_modules/ and dist/

Closes #30, closes #17
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.

📢 Leaflet V2.0 Coming Soon Publish as an npm module

1 participant