Web Components + TypeScript + Hooks solution for "IP Address Tracker"

What are you most proud of, and what would you do differently next time?

I'm proud I built the bundle using rollup and its plugins. Looking back, it was quite easy to do, but at first sight I was confused.

Next time, I would go a step further and use github actions to create the bundle automatically, but I've still got to learn some stuff before that can happen.

What challenges did you encounter, and how did you overcome them?

It was tricky getting the leaflet map to render inside a web component because it couldn't find the #map div, I solved it by selecting the div manually with querySelector and passing it to the map directly, like so:

const mapDiv = element.shadowRoot!.querySelector('#map');

// @ts-ignore
const map = L.map(mapDiv).setView(
  [locationData.location.lat, locationData.location.lng],
  13
); 

I used the leaflet map from a CDN and typescript was being fussy about not knowing the L variable, so I had to ignore the lines with L calls.