@octanejs/react-map-gl 0.0.1

package/src/components/layer.ts

@@ -0,0 +1,135 @@
+import { useContext, useEffect, useMemo, useRef, useState } from 'octane';
+import { MapContext } from './map.tsrx';
+import { SourceContext } from './source.tsrx';
+import assert from '../utils/assert';
+import { deepEqual } from '../utils/deep-equal';
+
+import type { MapInstance, CustomLayerInterface } from '../types/lib';
+import type { LayerSpecification } from '../types/style-spec';
+
+// Omiting property from a union type, see
+// https://github.com/microsoft/TypeScript/issues/39556#issuecomment-656925230
+type OptionalId<T> = T extends { id: string } ? Omit<T, 'id'> & { id?: string } : T;
+type OptionalSource<T> = T extends { source: string } ? Omit<T, 'source'> & { source?: string } : T;
+
+export type LayerProps = (OptionalSource<OptionalId<LayerSpecification>> | CustomLayerInterface) & {
+	/** If set, the layer will be inserted before the specified layer */
+	beforeId?: string;
+};
+
+/* eslint-disable complexity, max-statements */
+function updateLayer(map: MapInstance, id: string, props: LayerProps, prevProps: LayerProps) {
+	assert(props.id === prevProps.id, 'layer id changed');
+	assert(props.type === prevProps.type, 'layer type changed');
+
+	if (props.type === 'custom' || prevProps.type === 'custom') {
+		return;
+	}
+
+	// @ts-ignore filter does not exist in some Layer types
+	const { layout = {}, paint = {}, filter, minzoom, maxzoom, beforeId } = props;
+
+	if (beforeId !== prevProps.beforeId) {
+		map.moveLayer(id, beforeId!);
+	}
+	if (layout !== prevProps.layout) {
+		const nextLayout = layout as Record<string, unknown>;
+		const prevLayout = (prevProps.layout || {}) as Record<string, unknown>;
+		for (const key in nextLayout) {
+			if (!deepEqual(nextLayout[key], prevLayout[key])) {
+				map.setLayoutProperty(id, key as any, nextLayout[key]);
+			}
+		}
+		for (const key in prevLayout) {
+			if (!nextLayout.hasOwnProperty(key)) {
+				map.setLayoutProperty(id, key as any, undefined);
+			}
+		}
+	}
+	if (paint !== prevProps.paint) {
+		const nextPaint = paint as Record<string, unknown>;
+		const prevPaint = (prevProps.paint || {}) as Record<string, unknown>;
+		for (const key in nextPaint) {
+			if (!deepEqual(nextPaint[key], prevPaint[key])) {
+				map.setPaintProperty(id, key as any, nextPaint[key]);
+			}
+		}
+		for (const key in prevPaint) {
+			if (!nextPaint.hasOwnProperty(key)) {
+				map.setPaintProperty(id, key as any, undefined);
+			}
+		}
+	}
+
+	// @ts-ignore filter does not exist in some Layer types
+	if (!deepEqual(filter, prevProps.filter)) {
+		map.setFilter(id, filter);
+	}
+	if (minzoom !== prevProps.minzoom || maxzoom !== prevProps.maxzoom) {
+		map.setLayerZoomRange(id, minzoom!, maxzoom!);
+	}
+}
+
+function createLayer(map: MapInstance, id: string, props: LayerProps) {
+	// @ts-ignore
+	if (map.style && map.style._loaded && (!('source' in props) || map.getSource(props.source))) {
+		const options: LayerProps = { ...props, id };
+		delete options.beforeId;
+
+		// @ts-ignore
+		map.addLayer(options, props.beforeId);
+	}
+}
+
+/* eslint-enable complexity, max-statements */
+
+let layerCounter = 0;
+
+export function Layer(props: LayerProps) {
+	const map = useContext(MapContext).map.getMap();
+	// An enclosing <Source> publishes its id here. Upstream instead clones this
+	// element with `{source: id}`, which likewise overrides an explicitly set
+	// source prop — see the divergence note in source.tsrx.
+	const inheritedSource = useContext(SourceContext);
+	const propsRef = useRef(props);
+	const [, setStyleLoaded] = useState(0);
+
+	const id = useMemo(() => props.id || `jsx-layer-${layerCounter++}`, []);
+
+	const layerProps: LayerProps =
+		inheritedSource === null ? props : ({ ...props, source: inheritedSource } as LayerProps);
+
+	useEffect(() => {
+		if (map) {
+			const forceUpdate = () => setStyleLoaded((version) => version + 1);
+			map.on('styledata', forceUpdate);
+			forceUpdate();
+
+			return () => {
+				map.off('styledata', forceUpdate);
+				// @ts-ignore
+				if (map.style && map.style._loaded && map.getLayer(id)) {
+					map.removeLayer(id);
+				}
+			};
+		}
+		return undefined;
+	}, [map]);
+
+	// @ts-ignore
+	const layer = map && map.style && map.getLayer(id);
+	if (layer) {
+		try {
+			updateLayer(map, id, layerProps, propsRef.current);
+		} catch (error) {
+			console.warn(error); // eslint-disable-line
+		}
+	} else {
+		createLayer(map, id, layerProps);
+	}
+
+	// Store last rendered props
+	propsRef.current = layerProps;
+
+	return null;
+}

package/src/components/map.tsrx

@@ -0,0 +1,173 @@
+/* global document */
+import {
+	createContext,
+	createPortal,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'octane';
+
+import { MountedMapsContext } from './use-map.tsrx';
+import Mapbox, { type MapboxProps } from '../mapbox/mapbox';
+import createRef, { type MapRef } from '../mapbox/create-ref';
+
+import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
+import setGlobals, { type GlobalSettings } from '../utils/set-globals';
+import type { MapLib, MapOptions } from '../types/lib';
+import type { CSSProperties, MapChildren, Ref } from '../types/octane';
+
+export type MapContextValue = {
+	mapLib: MapLib;
+	map: MapRef;
+};
+
+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 & {
+		mapLib?: MapLib | Promise<MapLib>;
+		reuseMaps?: boolean;
+		/** Map container id */
+		id?: string;
+		/** Map container CSS style */
+		style?: CSSProperties;
+		children?: MapChildren;
+		/** Octane passes refs as ordinary props; there is no forwardRef. */
+		ref?: Ref<MapRef>;
+	};
+
+export function Map(props: MapProps) @{
+	const mountedMapsContext = useContext(MountedMapsContext);
+	const [mapInstance, setMapInstance] = useState<Mapbox | null>(null);
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const childContainerRef = useRef<HTMLDivElement | null>(null);
+
+	const { current: contextValue } = useRef<MapContextValue>({
+		mapLib: null as unknown as MapLib,
+		map: null as unknown as MapRef,
+	});
+
+	useEffect(() => {
+		const mapLib = props.mapLib;
+		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');
+			}
+
+			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;
+			childContainerRef.current?.remove();
+			childContainerRef.current = null;
+			if (mapbox) {
+				if (props.reuseMaps) {
+					mapbox.recycle();
+				} else {
+					mapbox.destroy();
+				}
+			}
+		};
+	}, []);
+
+	// Registration lives in its own effect rather than inside the promise above.
+	// `MapProvider` reports a duplicate or reserved map id by throwing from its
+	// state updater, and Octane runs updaters synchronously inside the setter, so
+	// called from that promise the throw landed in its `.catch` and surfaced as a
+	// map `onError` — the channel for style and network failures — instead of as
+	// a real error. Here it propagates like any other effect error.
+	useEffect(() => {
+		if (!mapInstance) {
+			return undefined;
+		}
+		mountedMapsContext?.onMapMount(contextValue.map, props.id);
+		return () => mountedMapsContext?.onMapUnmount(props.id);
+	}, [mapInstance]);
+
+	useIsomorphicLayoutEffect(() => {
+		if (mapInstance) {
+			mapInstance.setProps(props);
+		}
+	});
+
+	useImperativeHandle(props.ref, () => contextValue.map, [mapInstance]);
+
+	const style: CSSProperties = useMemo(
+		() => ({
+			position: 'relative',
+			width: '100%',
+			height: '100%',
+			...props.style,
+		}),
+		[props.style],
+	);
+
+	// The children container itself is appended by the effect above, next to the
+	// DOM mapbox-gl builds; only its contents are rendered here, through a portal.
+	// `Marker` and `Popup` already reach their library-owned elements this way.
+	<div id={props.id} ref={containerRef} style={style}>
+		@if (mapInstance) {
+			<MapContext.Provider value={contextValue}>{createPortal(
+				props.children,
+				childContainerRef.current!,
+			)}</MapContext.Provider>
+		}
+	</div>
+}

package/src/components/marker.ts

@@ -0,0 +1,217 @@
+/* global document */
+import {
+	createPortal,
+	memo,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from 'octane';
+import { applyReactStyle } from '../utils/apply-react-style';
+import { hasRenderableChildren } from '../utils/children';
+
+import type { PopupInstance, MarkerInstance, MarkerOptions } from '../types/lib';
+import type { MarkerEvent, MarkerDragEvent } from '../types/events';
+import type { CSSProperties, MapChildren, Ref } from '../types/octane';
+
+import { MapContext } from './map.tsrx';
+import { arePointsEqual } from '../utils/deep-equal';
+import { compareClassNames } from '../utils/compare-class-names';
+
+export type MarkerProps = MarkerOptions & {
+	/** Longitude of the anchor location */
+	longitude: number;
+	/** Latitude of the anchor location */
+	latitude: number;
+
+	popup?: PopupInstance;
+
+	/** CSS style override, applied to the control's container */
+	style?: CSSProperties;
+	onClick?: (e: MarkerEvent<MouseEvent>) => void;
+	onDragStart?: (e: MarkerDragEvent) => void;
+	onDrag?: (e: MarkerDragEvent) => void;
+	onDragEnd?: (e: MarkerDragEvent) => void;
+	children?: MapChildren;
+	/** Octane passes refs as ordinary props; there is no forwardRef. */
+	ref?: Ref<MarkerInstance>;
+};
+
+/* eslint-disable complexity,max-statements */
+export const Marker = memo(function Marker(props: MarkerProps) {
+	const { map, mapLib } = useContext(MapContext);
+	const thisRef = useRef({ props });
+
+	// The portal target, owned by the binding and stable for the component's
+	// whole life. It is deliberately never `marker.getElement()`: aimed there,
+	// content that arrives after mount lands inside Mapbox's own pin and both
+	// are drawn at once. Here, late content lands somewhere harmless and the
+	// marker can be rebuilt around it.
+	const contentRef = useRef<HTMLDivElement | null>(null);
+	if (contentRef.current === null) {
+		contentRef.current = document.createElement('div');
+	}
+	const contentEl = contentRef.current;
+
+	// Built from the latest committed props, not the mount-time ones. Upstream
+	// constructs once and can safely read mount props; a rebuild here happens
+	// after arbitrary updates, and the render body below only heals options it
+	// compares against the live instance. `className` is diffed against the
+	// previous props instead, and those do not change on the rebuild render, so a
+	// marker rebuilt from mount props would silently drop every class toggled
+	// since — and then diff further toggles against the wrong baseline.
+	const createMarker = (ownElement: boolean): MarkerInstance => {
+		const current = thisRef.current.props;
+		const options = {
+			...current,
+			element: ownElement ? contentEl : null,
+		};
+
+		const mk = new mapLib.Marker(options as unknown as MarkerOptions);
+		mk.setLngLat([current.longitude, current.latitude]);
+
+		mk.on('dragstart', (e) => {
+			const evt = e as MarkerDragEvent;
+			evt.lngLat = mk.getLngLat();
+			thisRef.current.props.onDragStart?.(evt);
+		});
+		mk.on('drag', (e) => {
+			const evt = e as MarkerDragEvent;
+			evt.lngLat = mk.getLngLat();
+			thisRef.current.props.onDrag?.(evt);
+		});
+		mk.on('dragend', (e) => {
+			const evt = e as MarkerDragEvent;
+			evt.lngLat = mk.getLngLat();
+			thisRef.current.props.onDragEnd?.(evt);
+		});
+
+		return mk;
+	};
+
+	// A `.tsrx` children block cannot be inspected without evaluating it, and
+	// evaluating it here would run any hooks inside it a second time and collide
+	// on their call-site slots. Upstream asks `React.Children.forEach` whether it
+	// was handed anything truthy; the binding has to infer the same answer from
+	// what the block actually rendered into `contentEl`, which it can only see
+	// once a commit has happened.
+	const [marker, setMarker] = useState<MarkerInstance>(() =>
+		createMarker(hasRenderableChildren(props.children)),
+	);
+
+	useEffect(() => {
+		marker.addTo(map.getMap());
+
+		return () => {
+			marker.remove();
+		};
+	}, [marker]);
+
+	// Upstream binds this once and lets the listener die with the element. The
+	// port can swap the marker underneath, and `contentEl` outlives that swap, so
+	// binding per marker instance would stack a second listener on the same node
+	// and fire `onClick` twice.
+	useEffect(() => {
+		const element = marker.getElement();
+		const handleClick = (e: MouseEvent) => {
+			thisRef.current.props.onClick?.({
+				type: 'click',
+				target: marker,
+				originalEvent: e,
+			});
+		};
+
+		element.addEventListener('click', handleClick);
+		return () => element.removeEventListener('click', handleClick);
+	}, [marker]);
+
+	// Reconcile the guess above with what the block really rendered. A block that
+	// produced nothing hands the pin back to Mapbox, which is what upstream draws
+	// for a falsy child — otherwise a conditional pin that starts hidden leaves an
+	// empty element and the marker is invisible. Content that shows up later
+	// takes the element back, because upstream would have given a marker with
+	// truthy children its own element from the start.
+	useEffect(() => {
+		if (marker.getElement() === contentEl) {
+			if (!hasRenderedContent(contentEl)) {
+				setMarker(createMarker(false));
+			}
+			return undefined;
+		}
+
+		if (hasRenderedContent(contentEl)) {
+			setMarker(createMarker(true));
+			return undefined;
+		}
+
+		// Children can render on their own schedule — a component whose first
+		// paint waits on an effect, a fetch, or a transition — and that never
+		// re-renders `Marker`, so there is no render to observe it from.
+		const observer = new MutationObserver(() => {
+			if (hasRenderedContent(contentEl)) {
+				setMarker(createMarker(true));
+			}
+		});
+		observer.observe(contentEl, { childList: true, subtree: true, characterData: true });
+		return () => observer.disconnect();
+	}, [marker]);
+
+	const {
+		longitude,
+		latitude,
+		offset,
+		style,
+		draggable = false,
+		popup = null,
+		rotation = 0,
+		rotationAlignment = 'auto',
+		pitchAlignment = 'auto',
+	} = props;
+
+	useEffect(() => {
+		applyReactStyle(marker.getElement(), style);
+	}, [style, marker]);
+
+	useImperativeHandle(props.ref, () => marker, [marker]);
+
+	const oldProps = thisRef.current.props;
+	if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
+		marker.setLngLat([longitude, latitude]);
+	}
+	if (offset && !arePointsEqual(marker.getOffset(), offset)) {
+		marker.setOffset(offset);
+	}
+	if (marker.isDraggable() !== draggable) {
+		marker.setDraggable(draggable);
+	}
+	if (marker.getRotation() !== rotation) {
+		marker.setRotation(rotation);
+	}
+	if (marker.getRotationAlignment() !== rotationAlignment) {
+		marker.setRotationAlignment(rotationAlignment);
+	}
+	if (marker.getPitchAlignment() !== pitchAlignment) {
+		marker.setPitchAlignment(pitchAlignment);
+	}
+	if (marker.getPopup() !== popup) {
+		marker.setPopup(popup);
+	}
+	const classNameDiff = compareClassNames(oldProps.className, props.className);
+	if (classNameDiff) {
+		for (const c of classNameDiff) {
+			marker.toggleClassName(c);
+		}
+	}
+
+	thisRef.current.props = props;
+	return createPortal(props.children, contentEl);
+});
+
+/**
+ * Portal anchors are comments, so elements and text are what say whether a
+ * children block rendered anything at all.
+ */
+function hasRenderedContent(element: HTMLElement): boolean {
+	return element.children.length > 0 || (element.textContent ?? '').trim() !== '';
+}

package/src/components/navigation-control.ts

@@ -0,0 +1,27 @@
+import { memo, useEffect } from 'octane';
+import { applyReactStyle } from '../utils/apply-react-style';
+import { useControl } from './use-control';
+
+import type { ControlPosition, NavigationControlOptions } from '../types/lib';
+import type { CSSProperties } from '../types/octane';
+
+export type NavigationControlProps = NavigationControlOptions & {
+	/** Placement of the control relative to the map. */
+	position?: ControlPosition;
+	/** CSS style override, applied to the control's container */
+	style?: CSSProperties;
+};
+
+function _NavigationControl(props: NavigationControlProps) {
+	const ctrl = useControl(({ mapLib }) => new mapLib.NavigationControl(props), {
+		position: props.position,
+	});
+
+	useEffect(() => {
+		applyReactStyle(ctrl._container, props.style);
+	}, [props.style]);
+
+	return null;
+}
+
+export const NavigationControl = memo(_NavigationControl);

package/src/components/popup.ts

@@ -0,0 +1,100 @@
+/* global document */
+import {
+	createPortal,
+	memo,
+	useContext,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+} from 'octane';
+import { applyReactStyle } from '../utils/apply-react-style';
+
+import type { PopupInstance, PopupOptions } from '../types/lib';
+import type { PopupEvent } from '../types/events';
+import type { CSSProperties, MapChildren, Ref } from '../types/octane';
+
+import { MapContext } from './map.tsrx';
+import { deepEqual } from '../utils/deep-equal';
+import { compareClassNames } from '../utils/compare-class-names';
+
+export type PopupProps = PopupOptions & {
+	/** Longitude of the anchor location */
+	longitude: number;
+	/** Latitude of the anchor location */
+	latitude: number;
+
+	/** CSS style override, applied to the control's container */
+	style?: CSSProperties;
+
+	onOpen?: (e: PopupEvent) => void;
+	onClose?: (e: PopupEvent) => void;
+	children?: MapChildren;
+	/** Octane passes refs as ordinary props; there is no forwardRef. */
+	ref?: Ref<PopupInstance>;
+};
+
+/* eslint-disable complexity,max-statements */
+export const Popup = memo(function Popup(props: PopupProps) {
+	const { map, mapLib } = useContext(MapContext);
+	const container = useMemo(() => {
+		return document.createElement('div');
+	}, []);
+	const thisRef = useRef({ props });
+
+	const popup: PopupInstance = useMemo(() => {
+		const options = { ...props };
+		const pp = new mapLib.Popup(options);
+		pp.setLngLat([props.longitude, props.latitude]);
+		pp.once('open', (e) => {
+			thisRef.current.props.onOpen?.(e as PopupEvent);
+		});
+		return pp;
+	}, []);
+
+	useEffect(() => {
+		const onClose = (e: unknown) => {
+			thisRef.current.props.onClose?.(e as PopupEvent);
+		};
+		popup.on('close', onClose);
+		popup.setDOMContent(container).addTo(map.getMap());
+
+		return () => {
+			// https://github.com/visgl/react-map-gl/issues/1825
+			// onClose should not be fired if the popup is removed by unmounting
+			popup.off('close', onClose);
+			if (popup.isOpen()) {
+				popup.remove();
+			}
+		};
+	}, []);
+
+	useEffect(() => {
+		applyReactStyle(popup.getElement(), props.style);
+	}, [props.style]);
+
+	useImperativeHandle(props.ref, () => popup, []);
+
+	if (popup.isOpen()) {
+		const oldProps = thisRef.current.props;
+		if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
+			popup.setLngLat([props.longitude, props.latitude]);
+		}
+		if (props.offset && !deepEqual(oldProps.offset, props.offset)) {
+			popup.options.anchor = props.anchor;
+			popup.setOffset(props.offset);
+		}
+		if (oldProps.anchor !== props.anchor || oldProps.maxWidth !== props.maxWidth) {
+			popup.setMaxWidth(props.maxWidth!);
+		}
+		const classNameDiff = compareClassNames(oldProps.className, props.className);
+		if (classNameDiff) {
+			for (const c of classNameDiff) {
+				popup.toggleClassName(c);
+			}
+		}
+		thisRef.current.props = props;
+	}
+
+	return createPortal(props.children, container);
+});

package/src/components/scale-control.ts

@@ -0,0 +1,44 @@
+import { memo, useEffect, useRef } from 'octane';
+import { applyReactStyle } from '../utils/apply-react-style';
+import { useControl } from './use-control';
+
+import type { ControlPosition, ScaleControlOptions } from '../types/lib';
+import type { CSSProperties } from '../types/octane';
+
+export type ScaleControlProps = ScaleControlOptions & {
+	// These props will be further constraint by OptionsT
+	unit?: string;
+	maxWidth?: number;
+
+	/** Placement of the control relative to the map. */
+	position?: ControlPosition;
+	/** CSS style override, applied to the control's container */
+	style?: CSSProperties;
+};
+
+function _ScaleControl(props: ScaleControlProps) {
+	const ctrl = useControl(({ mapLib }) => new mapLib.ScaleControl(props), {
+		position: props.position,
+	});
+	const propsRef = useRef<ScaleControlProps>(props);
+
+	const prevProps = propsRef.current;
+	propsRef.current = props;
+
+	const { style } = props;
+
+	if (props.maxWidth !== undefined && props.maxWidth !== prevProps.maxWidth) {
+		ctrl.options.maxWidth = props.maxWidth;
+	}
+	if (props.unit !== undefined && props.unit !== prevProps.unit) {
+		ctrl.setUnit(props.unit);
+	}
+
+	useEffect(() => {
+		applyReactStyle(ctrl._container, style);
+	}, [style]);
+
+	return null;
+}
+
+export const ScaleControl = memo(_ScaleControl);