@octanejs/react-map-gl 0.0.33 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/react-map-gl",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "mapbox-gl": ">=3.5.0",
-    "octane": "^0.10.0"
+    "octane": "^0.11.0"
   },
   "peerDependenciesMeta": {
     "mapbox-gl": {
@@ -45,13 +45,13 @@
   },
   "devDependencies": {
     "@mapbox/point-geometry": "1.1.0",
-    "@tsrx/react": "^0.3.7",
+    "@tsrx/react": "^0.4.5",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vis.gl/react-mapbox": "8.1.2",
     "esbuild": "^0.28.1",
     "mapbox-gl": "3.9.0",
-    "octane": "0.10.2",
+    "octane": "0.11.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "vitest": "^4.1.10"

package/src/components/map.tsrx

@@ -26,11 +26,14 @@ export type MapContextValue = {
 
 export const MapContext = createContext<MapContextValue>(null as unknown as MapContextValue);
 
-type MapInitOptions =
-	Omit<MapOptions, 'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'>;
-
-export type MapProps =
-	MapInitOptions & MapboxProps & GlobalSettings & {
+type MapInitOptions = Omit<
+	MapOptions,
+	'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'
+>;
+
+export type MapProps = MapInitOptions &
+	MapboxProps &
+	GlobalSettings & {
 		mapLib?: MapLib | Promise<MapLib>;
 		reuseMaps?: boolean;
 		/** Map container id */
@@ -58,60 +61,61 @@ export function Map(props: MapProps) @{
 		let isMounted = true;
 		let mapbox: Mapbox;
 
-		Promise.resolve(mapLib || import('mapbox-gl')).then((module: MapLib | { default: MapLib }) => {
-			if (!isMounted) {
-				return;
-			}
-			if (!module) {
-				throw new Error('Invalid mapLib');
-			}
-			const mapboxgl =
-				'Map' in module ? module : module.default;
-			if (!mapboxgl.Map) {
-				throw new Error('Invalid mapLib');
-			}
+		Promise.resolve(mapLib || import('mapbox-gl'))
+			.then((module: MapLib | { default: MapLib }) => {
+				if (!isMounted) {
+					return;
+				}
+				if (!module) {
+					throw new Error('Invalid mapLib');
+				}
+				const mapboxgl = 'Map' in module ? module : module.default;
+				if (!mapboxgl.Map) {
+					throw new Error('Invalid mapLib');
+				}
 
-			setGlobals(mapboxgl, props);
-			if (props.reuseMaps) {
-				mapbox = Mapbox.reuse(props, containerRef.current!)!;
-			}
-			if (!mapbox) {
-				mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current!);
-			}
-			contextValue.map = createRef(mapbox)!;
-			contextValue.mapLib = mapboxgl;
-
-			// The children container is created and APPENDED here rather than
-			// rendered into the template, so it lands after the DOM mapbox-gl has
-			// just built — which is where React puts it, and the only arrangement
-			// that reproduces upstream's behavior.
-			//
-			// Rendered in the template, Octane's conditional block anchors it at its
-			// authored position, ahead of the library's nodes. In flow it then
-			// displaces `.mapboxgl-canvas-container`, the element mapbox-gl measures
-			// pointer coordinates against; taken out of flow it instead paints
-			// before the canvas, so a consumer's positioned overlay ends up hidden
-			// and unclickable beneath an opaque map. Appending sidesteps both: same
-			// `height: 100%` container as upstream, in the same place.
-			const childContainer = document.createElement('div');
-			childContainer.setAttribute('mapboxgl-children', '');
-			childContainer.style.height = '100%';
-			containerRef.current!.appendChild(childContainer);
-			childContainerRef.current = childContainer;
-
-			setMapInstance(mapbox);
-		}).catch((error) => {
-			const { onError } = props;
-			if (onError) {
-				onError({
-					type: 'error',
-					target: null,
-					error,
-				});
-			} else {
-				console.error(error); // eslint-disable-line
-			}
-		});
+				setGlobals(mapboxgl, props);
+				if (props.reuseMaps) {
+					mapbox = Mapbox.reuse(props, containerRef.current!)!;
+				}
+				if (!mapbox) {
+					mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current!);
+				}
+				contextValue.map = createRef(mapbox)!;
+				contextValue.mapLib = mapboxgl;
+
+				// The children container is created and APPENDED here rather than
+				// rendered into the template, so it lands after the DOM mapbox-gl has
+				// just built — which is where React puts it, and the only arrangement
+				// that reproduces upstream's behavior.
+				//
+				// Rendered in the template, Octane's conditional block anchors it at its
+				// authored position, ahead of the library's nodes. In flow it then
+				// displaces `.mapboxgl-canvas-container`, the element mapbox-gl measures
+				// pointer coordinates against; taken out of flow it instead paints
+				// before the canvas, so a consumer's positioned overlay ends up hidden
+				// and unclickable beneath an opaque map. Appending sidesteps both: same
+				// `height: 100%` container as upstream, in the same place.
+				const childContainer = document.createElement('div');
+				childContainer.setAttribute('mapboxgl-children', '');
+				childContainer.style.height = '100%';
+				containerRef.current!.appendChild(childContainer);
+				childContainerRef.current = childContainer;
+
+				setMapInstance(mapbox);
+			})
+			.catch((error) => {
+				const { onError } = props;
+				if (onError) {
+					onError({
+						type: 'error',
+						target: null,
+						error,
+					});
+				} else {
+					console.error(error); // eslint-disable-line
+				}
+			});
 
 		return () => {
 			isMounted = false;
@@ -164,10 +168,9 @@ export function Map(props: MapProps) @{
 	// `Marker` and `Popup` already reach their library-owned elements this way.
 	<div id={props.id} ref={containerRef} style={style}>
 		@if (mapInstance) {
-			<MapContext value={contextValue}>{createPortal(
-				props.children,
-				childContainerRef.current!,
-			)}</MapContext>
+			<MapContext value={contextValue}>
+				{createPortal(props.children, childContainerRef.current!)}
+			</MapContext>
 		}
 	</div>
 }

package/src/components/source.tsrx

@@ -17,11 +17,10 @@ import type {
 } from '../types/internal';
 import type { MapChildren } from '../types/octane';
 
-export type SourceProps =
-	(SourceSpecification | CanvasSourceSpecification) & {
-		id?: string;
-		children?: MapChildren;
-	};
+export type SourceProps = (SourceSpecification | CanvasSourceSpecification) & {
+	id?: string;
+	children?: MapChildren;
+};
 
 /**
  * OCTANE DIVERGENCE[react-map-gl-source-id-by-context][ported:source-layer:3]: upstream delivers this source's id to child layers with

package/src/components/use-map.tsrx

@@ -18,7 +18,7 @@ export function MapProvider(props: { children?: MapChildren }) @{
 	const onMapMount = useCallback((map: MapRef, id: string = 'default') => {
 		setMaps((currMaps) => {
 			if (id === 'current') {
-				throw new Error('\'current\' cannot be used as map id');
+				throw new Error("'current' cannot be used as map id");
 			}
 			if (currMaps[id]) {
 				throw new Error(`Multiple maps with the same id: ${id}`);
@@ -44,7 +44,9 @@ export function MapProvider(props: { children?: MapChildren }) @{
 			onMapMount,
 			onMapUnmount,
 		}}
-	>{props.children}</MountedMapsContext>
+	>
+		{props.children}
+	</MountedMapsContext>
 }
 
 export type MapCollection = {