@vinctus/react-maplibre 0.1.4 → 0.2.0

package/dist/Map.d.ts

@@ -19,7 +19,7 @@ export declare const viewStateFromMap: (map: maplibre.Map) => {
 };
 export declare const useMap: () => {
     map: maplibre.Map | null;
-    mapRef: React.MutableRefObject<maplibre.Map | null>;
+    setMap: React.Dispatch<React.SetStateAction<maplibre.Map | null>>;
     mapLoaded: boolean;
     setMapLoaded: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -27,7 +27,6 @@ export declare const MapProvider: FC<{
     children?: ReactNode;
 }>;
 export type MapProps = {
-    reuseMaps?: boolean;
     accessToken?: string;
     antialias?: boolean;
     children?: ReactNode | ReactNode[];
@@ -45,6 +44,5 @@ export type MapProps = {
     ref?: RefAttributes<maplibre.Map | null>;
     style?: CSSProperties;
     zoom: number;
-    options?: any;
 };
 export declare const Map: React.ForwardRefExoticComponent<Omit<MapProps, "ref"> & React.RefAttributes<maplibre.Map | null>>;

package/dist/Map.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useRef, useEffect, useState, useContext, useImperativeHandle, useMemo, } from 'react';
 import maplibre from 'maplibre-gl';
@@ -5,7 +16,10 @@ import { ErrorBoundary } from './ErrorBoundary'; // eslint-disable-line import/n
 const DEFAULT_STYLE = 'https://demotiles.maplibre.org/style.json';
 const DISABLE_PITCH = 0;
 const MapContext = React.createContext({
-    mapRef: { current: null },
+    map: null,
+    setMap: () => {
+        throw new Error('Use <MapProvider>');
+    },
     mapLoaded: false,
     setMapLoaded: () => {
         throw new Error('Use <MapProvider>');
@@ -16,92 +30,53 @@ export const viewStateFromMap = (map) => ({
     latitude: map.getCenter().lat,
     zoom: map.getZoom(),
 });
-export const useMap = () => {
-    const context = useContext(MapContext);
-    if (!context) {
-        throw new Error('useMap must be used within a MapProvider');
-    }
-    const { mapRef, mapLoaded, setMapLoaded } = context;
-    return {
-        map: mapRef.current,
-        mapRef,
-        mapLoaded,
-        setMapLoaded,
-    };
-};
+export const useMap = () => useContext(MapContext);
 export const MapProvider = ({ children }) => {
-    const mapRef = useRef(null);
+    const [map, setMap] = useState(null);
     const [mapLoaded, setMapLoaded] = useState(false);
-    return (_jsx(MapContext.Provider, Object.assign({ value: { mapRef, mapLoaded, setMapLoaded } }, { children: children })));
+    return (_jsx(MapContext.Provider, { value: { map, setMap, mapLoaded, setMapLoaded }, children: children }));
 };
 function addEventHandler(map, type, handler) {
     map.on(type, (ev) => handler(Object.assign({ viewState: viewStateFromMap(map) }, ev)));
 }
-export const Map = React.forwardRef(({ reuseMaps, children, style, id, longitude, latitude, maxPitch = DISABLE_PITCH, mapStyle = DEFAULT_STYLE, zoom, onDragEnd, onLoad, onMoveEnd, onZoomEnd, fallback, options = {}, }, ref) => {
+export const Map = React.forwardRef((_a, ref) => {
+    var { children, style, id, longitude, latitude, maxPitch = DISABLE_PITCH, mapStyle = DEFAULT_STYLE, zoom, onDragEnd, onLoad, onMoveEnd, onZoomEnd, fallback } = _a, options = __rest(_a, ["children", "style", "id", "longitude", "latitude", "maxPitch", "mapStyle", "zoom", "onDragEnd", "onLoad", "onMoveEnd", "onZoomEnd", "fallback"]);
     const mapContainer = useRef(null);
-    const { mapRef, mapLoaded, setMapLoaded } = useMap();
-    useImperativeHandle(ref, () => mapRef.current, [
-        mapRef,
-    ]);
+    const { map, setMap, setMapLoaded } = useMap();
+    useImperativeHandle(ref, () => map, [map]);
     useEffect(() => {
-        if (reuseMaps && mapRef.current) {
-            // Reattach the existing map instance to the new container
-            if (mapContainer.current && mapRef.current.getContainer() !== mapContainer.current) {
-                mapContainer.current.appendChild(mapRef.current.getContainer());
-                mapRef.current.resize(); // resize map in case container dimensions have changed
-            }
-            return;
-        }
-        if (!reuseMaps || (mapContainer.current && !mapRef.current)) {
+        console.log('Map useEffect running', { map, mapContainer: mapContainer.current });
+        if (map)
+            return; // initialize map only once
+        if (mapContainer.current) {
             const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, options));
             if (onDragEnd)
                 addEventHandler(m, 'dragend', onDragEnd);
             if (onLoad)
                 addEventHandler(m, 'load', (ev) => {
                     onLoad(ev);
-                    if (!mapLoaded)
-                        setMapLoaded(true);
+                    setMapLoaded(true);
                 });
             if (onMoveEnd)
                 addEventHandler(m, 'moveend', onMoveEnd);
             if (onZoomEnd)
                 addEventHandler(m, 'zoomend', onZoomEnd);
-            mapRef.current = m;
+            setMap(m);
         }
-        // further investigation: calling .remove() causes the following error:
-        //
-        // Cannot read properties of undefined (reading 'off')
-        // TypeError: Cannot read properties of undefined (reading 'off')
-        // at t.GeolocateControl.onRemove (http://localhost:3002/static/js/bundle.js:107201:393)
-        // at t.Map.removeControl (http://localhost:3002/static/js/bundle.js:107351:57)
-        // at http://localhost:3002/static/js/bundle.js:853:53
-        //   at safelyCallDestroy (http://localhost:3002/static/js/bundle.js:39324:9)
-        // at commitHookEffectListUnmount (http://localhost:3002/static/js/bundle.js:39462:15)
-        // at commitPassiveUnmountInsideDeletedTreeOnFiber (http://localhost:3002/static/js/bundle.js:41143:15)
-        // at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (http://localhost:3002/static/js/bundle.js:41099:9)
-        // at commitPassiveUnmountEffects_begin (http://localhost:3002/static/js/bundle.js:41021:15)
-        // at commitPassiveUnmountEffects (http://localhost:3002/static/js/bundle.js:41009:7)
-        // at flushPassiveEffectsImpl (http://localhost:3002/static/js/bundle.js:42830:7)
-        //
-        // return () => {
-        //   if (!reuseMaps && mapRef.current) {
-        //     mapRef.current.remove()
-        //     mapRef.current = null
-        //   }
-        // }
     }, [
-        reuseMaps,
+        map,
         onDragEnd,
         onLoad,
         onMoveEnd,
         onZoomEnd,
+        setMap,
         setMapLoaded,
         mapStyle,
         longitude,
         latitude,
         zoom,
-        // options, // investigate using a useRef for this (other Map options)
+        options,
     ]);
     const memoizedStyle = useMemo(() => (Object.assign({ position: 'relative', width: '100%', height: '100%' }, style)), [style]);
-    return (_jsx(ErrorBoundary, Object.assign({ fallback: fallback }, { children: _jsx("div", Object.assign({ id: id, ref: mapContainer, style: memoizedStyle }, { children: children })) })));
+    return (_jsx(ErrorBoundary, { fallback: fallback, children: _jsx("div", { id: id, ref: mapContainer, style: memoizedStyle, children: children }) }));
 });

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/ErrorBoundary.tsx","../src/GeolocateControl.tsx","../src/Layer.tsx","../src/Map.tsx","../src/Marker.tsx","../src/Popup.tsx","../src/ScaleControl.tsx","../src/index.tsx","../src/types.tsx"],"version":"5.7.2"}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@vinctus/react-maplibre",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Minimalist MapLibre GL JS React wrapper library",
+  "type": "module",
   "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
@@ -13,25 +14,21 @@
     ".": "./dist/index.js",
     "./dist/*": "./dist/*.js"
   },
-  "dependencies": {
-    "react-scripts": "5.0.1"
-  },
   "peerDependencies": {
-    "maplibre-gl": "^4.5.2",
+    "maplibre-gl": "^4.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^18.14.6",
+    "@types/node": "^22.10.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "tsc -b && vite build",
     "prepublishOnly": "tsc"
   },
   "eslintConfig": {