add hooks example

[TurtIeSocks]

• move class sample to its own folder
• add a modern hooks/typescript/vite example
• add some dev deps
• fix class webpack compiling

This started out as an example to show this package in a more modern workflow and to show what I was able to make work after running into issues like #151. However, I may have discovered a bug introduced in #160.

After fixing the class example, it seems to work fine... but after copying the codebase for the hooks example directly from my project, where it was working, I noticed that the ref is being lost somewhere and not saving the Geojson state. After reverting #160 locally, I was able to get the expected results with the hooks example.

I played with the source code for hours but I could not figure out where the ref is being lost. If the author of the package or @sgmbr could take a look to see if there is a bug or if there's something wrong with the hooks example code, I would greatly appreciate it!

I left in some console logs for debugging this issue. I'll remove them and update the draft status once we've figured out what's going on.

[sgmbr]

You can use useRef to store ref, and useEffect to trigger something on mount. It can't detect when the ref is changed, so in the example below, it checks if the current FeatureGroup has layers and geojson exists instead of onFeatureGroupReady in your code.

Does this do what it's supposed to do?

export default function EditControlFC({ geojson, setGeojson }: Props) {
  const ref = React.useRef<L.FeatureGroup>(null)

  React.useEffect(() => {
    if (ref.current?.getLayers().length === 0 && geojson) {
      L.geoJSON(geojson).eachLayer((layer) => {
        ref.current?.addLayer(layer);
      });
    }
  }, [geojson]);

  const handleChange = () => {
    console.log('handleChange ref', ref);
    const geo = ref.current?.toGeoJSON();
    if (geo?.type === 'FeatureCollection') {
      setGeojson(geo);
    }
  };
  console.log('ref', ref.current);

  return (
    <FeatureGroup
      ref={ref}
    >

[TurtIeSocks]

That did it, thank you!