Include improved TS library in this package

dabreegster commented 6 months ago

In the main projects actually using the route-snapper, I'm not using https://github.com/dabreegster/route_snapper/blob/main/route-snapper/lib.js. Instead there's a newer TS version of this library, split into a few pieces:

https://github.com/dabreegster/ltn/blob/main/web/src/common/snapper/route_tool.ts: the main TS replacement library
https://github.com/dabreegster/ltn/blob/main/web/src/common/snapper/RouteSnapperLayer.svelte: a svelte-maplibre styling for drawing the editing operations on a map
https://github.com/dabreegster/ltn/blob/main/web/src/common/snapper/SnapPolygonControls.svelte: really simple Svelte UI with instructions and an undo button

At least that first piece should be included in the NPM package here. The other two pieces could be listed as example references, but since they're Svelte specific, not much code, and make UI choices about wording / styling that's not likely to be general, I don't think they belong in the package.

I need to figure out how to include a TS file in an NPM package correctly. The NPM package is partly generated by wasm-pack and already includes some auto-generated type declarations, so it has to play well with that. Shouldn't be too hard though.

CC @tordans -- if you'd want to use the TS library and not just copy in the short-term, I'll prioritize this

tordans commented 6 months ago

FYI I started looking into out how to add the library to ReactMapGL https://visgl.github.io/react-map-gl/ in an Astro Project. Any hints on that are welcome, did anyone add it to a react project, yet?

tordans commented 6 months ago

I was wondering if the package is following the recommendations on how to export methods, because it looks like VS Code / Typescript magic that allows to "import package" when using a function seems to not work. Using the import used in your svelte example I get…

Updates:

Those tools might be helpful to test the package

https://publint.dev/route-snapper@0.4.0 shows some suggestions
https://arethetypeswrong.github.io/?p=route-snapper%400.4.0 shows all good

dabreegster commented 6 months ago

Hmm, the package config is auto-generated by wasm-pack and might be kind of strange. The one difference that jumps out is that I think you have to do import init, { RouteSnapper, fetchWithProgress } from "route-snapper". The default export is init to initialize the WASM piece, and the rest should be named exports. Does that work? (Edit: looking at lib.js, init is re-exported as a named parameter, so what you have should be working...)

If you want to start with the newer TS package, then as an immediate work-around, you could try copying https://github.com/dabreegster/ltn/blob/main/web/src/common/snapper/route_tool.ts into your code. The only svelte-specific bit here is import { routeToolGj, snapMode, undoLength } from "./stores";. These are Svelte stores. When the GeoJSON to render changes, these stores will have new values set. I'm not sure how ReactMapGL works, but if it gives you some kind of state variable for the GeoJSON source that you can set, plumbing that in ought to work.

My next step on this issue is to figure out how to include the .ts library in the NPM package. The wasm-pack generated package.json looks like this:

{
  "name": "route-snapper",
  "description": "Draw routes in MapLibre snapped to a street network using client-side routing",
  "version": "0.4.0",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/dabreegster/route_snapper"
  },
  "files": [
    "route_snapper_bg.wasm",
    "route_snapper.js",
    "route_snapper.d.ts",
    "lib.js"
  ],
  "module": "route_snapper.js",
  "types": "route_snapper.d.ts",
  "sideEffects": [
    "./snippets/*"
  ]
}

So there will be a little work to figure out what a normal TS NPM package looks like, and get the auto-generated route_snapper.d.ts types to also include the manually-written TS lib.

dabreegster commented 4 months ago

I've got some ideas to simplify things here -- I'm going to try building + publishing just the WASM library as one NPM package, then making a second package with the nice TS wrapper. I'm having trouble finding a minimal working template to do that, though -- I've been trying the Vite vanilla TS starter, but it doesn't appear suitable for publishing libraries, as it's insisting on an index.html and main.ts. Happen to know any simple templates or guides to follow? Personal recommendations win over outdated Medium articles ;)

dabreegster / route_snapper

Include improved TS library in this package #52