@octanejs/react-map-gl 0.0.1

package/src/components/source.tsrx

@@ -0,0 +1,146 @@
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'octane';
+import { MapContext } from './map.tsrx';
+import assert from '../utils/assert';
+import { deepEqual } from '../utils/deep-equal';
+
+import type {
+	SourceSpecification,
+	CanvasSourceSpecification,
+	ImageSourceSpecification,
+	VectorSourceSpecification,
+} from '../types/style-spec';
+import type { MapInstance } from '../types/lib';
+import type {
+	GeoJSONSourceImplementation,
+	ImageSourceImplementation,
+	AnySourceImplementation,
+} from '../types/internal';
+import type { MapChildren } from '../types/octane';
+
+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
+ * `Children.map(children, child => cloneElement(child, {source: id}))`. Octane
+ * lowers a `.tsrx` parent's children to a render function, which cannot be
+ * cloned, so the id travels by context instead and `Layer` reads it.
+ *
+ * Two observable consequences, both pinned by tests:
+ *  - the id reaches any descendant `Layer`, not only a direct child;
+ *  - as with upstream's cloneElement, the enclosing source still overrides a
+ *    `source` prop set explicitly on the layer.
+ */
+export const SourceContext = createContext<string | null>(null);
+
+let sourceCounter = 0;
+
+function createSource(map: MapInstance, id: string, props: SourceProps) {
+	// @ts-ignore
+	if (map.style && map.style._loaded) {
+		const options = { ...props };
+		delete options.id;
+		delete options.children;
+		map.addSource(id, options as unknown as SourceSpecification);
+		return map.getSource(id);
+	}
+	return null;
+}
+
+/* eslint-disable complexity */
+function updateSource(source: AnySourceImplementation, props: SourceProps, prevProps: SourceProps) {
+	assert(props.id === prevProps.id, 'source id changed');
+	assert(props.type === prevProps.type, 'source type changed');
+
+	let changedKey = '';
+	let changedKeyCount = 0;
+
+	const nextValues = props as unknown as Record<string, unknown>;
+	const prevValues = prevProps as unknown as Record<string, unknown>;
+	for (const key in props) {
+		if (key !== 'children' && key !== 'id' && !deepEqual(prevValues[key], nextValues[key])) {
+			changedKey = key;
+			changedKeyCount++;
+		}
+	}
+
+	if (!changedKeyCount) {
+		return;
+	}
+
+	const type = props.type;
+
+	if (type === 'geojson') {
+		(source as GeoJSONSourceImplementation).setData(props.data!);
+	} else if (type === 'image') {
+		(source as ImageSourceImplementation).updateImage({
+			url: props.url!,
+			coordinates: props.coordinates,
+		});
+	} else if ('setCoordinates' in source && changedKeyCount === 1 && changedKey === 'coordinates') {
+		source.setCoordinates((props as unknown as ImageSourceSpecification).coordinates);
+	} else if ('setUrl' in source && changedKey === 'url') {
+		source.setUrl((props as VectorSourceSpecification).url!);
+	} else if ('setTiles' in source && changedKey === 'tiles') {
+		source.setTiles((props as VectorSourceSpecification).tiles!);
+	} else {
+		// eslint-disable-next-line
+		console.warn(`Unable to update <Source> prop: ${changedKey}`);
+	}
+}
+/* eslint-enable complexity */
+
+export function Source(props: SourceProps) @{
+	const map = useContext(MapContext).map.getMap();
+	const propsRef = useRef(props);
+	const [, setStyleLoaded] = useState(0);
+
+	const id = useMemo(() => props.id || `jsx-source-${sourceCounter++}`, []);
+
+	useEffect(() => {
+		if (map) {
+			/* global setTimeout */
+			const forceUpdate = () => setTimeout(() => setStyleLoaded((version) => version + 1), 0);
+			map.on('styledata', forceUpdate);
+			forceUpdate();
+
+			return () => {
+				map.off('styledata', forceUpdate);
+				// @ts-ignore
+				if (map.style && map.style._loaded && map.getSource(id)) {
+					// Parent effects are destroyed before child ones, see
+					// https://github.com/facebook/react/issues/16728
+					// Source can only be removed after all child layers are removed
+					const allLayers = map.getStyle()?.layers;
+					if (allLayers) {
+						for (const layer of allLayers) {
+							// @ts-ignore (2339) source does not exist on all layer types
+							if (layer.source === id) {
+								map.removeLayer(layer.id);
+							}
+						}
+					}
+					map.removeSource(id);
+				}
+			};
+		}
+		return undefined;
+	}, [map]);
+
+	let source = (map && map.style && map.getSource(id)) as AnySourceImplementation | null;
+	if (source) {
+		updateSource(source, props, propsRef.current);
+	} else {
+		source = createSource(map, id, props) as AnySourceImplementation | null;
+	}
+	propsRef.current = props;
+
+	<>
+		@if (source) {
+			<SourceContext.Provider value={id}>{props.children}</SourceContext.Provider>
+		}
+	</>
+}

package/src/components/use-control.ts

@@ -0,0 +1,73 @@
+import { useContext, useEffect, useMemo } from 'octane';
+import type { ControlPosition, IControl } from '../types/lib';
+import { MapContext } from './map.tsrx';
+import type { MapContextValue } from './map.tsrx';
+
+type ControlOptions = {
+	position?: ControlPosition;
+};
+
+export function useControl<T extends IControl>(
+	onCreate: (context: MapContextValue) => T,
+	opts?: ControlOptions,
+): T;
+
+export function useControl<T extends IControl>(
+	onCreate: (context: MapContextValue) => T,
+	onRemove: (context: MapContextValue) => void,
+	opts?: ControlOptions,
+): T;
+
+export function useControl<T extends IControl>(
+	onCreate: (context: MapContextValue) => T,
+	onAdd: (context: MapContextValue) => void,
+	onRemove: (context: MapContextValue) => void,
+	opts?: ControlOptions,
+): T;
+
+export function useControl<T extends IControl>(
+	onCreate: (context: MapContextValue) => T,
+	arg1?: ((context: MapContextValue) => void) | ControlOptions,
+	arg2?: ((context: MapContextValue) => void) | ControlOptions,
+	arg3?: ControlOptions,
+): T {
+	// Octane's compiler rewrites a custom-hook call site in a `.tsrx` module to
+	// `withSlot(sym, useControl, ...args, sym)` and deliberately retains that
+	// trailing symbol, so bindings that read their slot off the last argument
+	// keep working. This hook resolves its optional trailing parameters
+	// positionally, so an un-stripped symbol wins the `arg3 || arg2 || arg1`
+	// race and the caller's options disappear — a control silently lands in the
+	// default corner. No legitimate argument here is ever a symbol.
+	if (typeof arg1 === 'symbol') arg1 = undefined;
+	if (typeof arg2 === 'symbol') arg2 = undefined;
+	if (typeof arg3 === 'symbol') arg3 = undefined;
+
+	const context = useContext(MapContext);
+	const ctrl = useMemo(() => onCreate(context), []);
+
+	useEffect(() => {
+		const opts = (arg3 || arg2 || arg1) as ControlOptions;
+		const onAdd = typeof arg1 === 'function' && typeof arg2 === 'function' ? arg1 : null;
+		const onRemove = typeof arg2 === 'function' ? arg2 : typeof arg1 === 'function' ? arg1 : null;
+
+		const { map } = context;
+		if (!map.hasControl(ctrl)) {
+			map.addControl(ctrl, opts?.position);
+			if (onAdd) {
+				onAdd(context);
+			}
+		}
+
+		return () => {
+			if (onRemove) {
+				onRemove(context);
+			}
+			// Map might have been removed (parent effects are destroyed before child ones)
+			if (map.hasControl(ctrl)) {
+				map.removeControl(ctrl);
+			}
+		};
+	}, []);
+
+	return ctrl;
+}

package/src/components/use-map.tsrx

@@ -0,0 +1,64 @@
+import { createContext, useCallback, useContext, useMemo, useState } from 'octane';
+
+import type { MapRef } from '../mapbox/create-ref';
+import { MapContext } from './map.tsrx';
+import type { MapChildren } from '../types/octane';
+
+type MountedMapsContextValue = {
+	maps: { [id: string]: MapRef };
+	onMapMount: (map: MapRef, id?: string) => void;
+	onMapUnmount: (id?: string) => void;
+};
+
+export const MountedMapsContext = createContext<MountedMapsContextValue | null>(null);
+
+export function MapProvider(props: { children?: MapChildren }) @{
+	const [maps, setMaps] = useState<{ [id: string]: MapRef }>({});
+
+	const onMapMount = useCallback((map: MapRef, id: string = 'default') => {
+		setMaps((currMaps) => {
+			if (id === 'current') {
+				throw new Error('\'current\' cannot be used as map id');
+			}
+			if (currMaps[id]) {
+				throw new Error(`Multiple maps with the same id: ${id}`);
+			}
+			return { ...currMaps, [id]: map };
+		});
+	}, []);
+
+	const onMapUnmount = useCallback((id: string = 'default') => {
+		setMaps((currMaps) => {
+			if (currMaps[id]) {
+				const nextMaps = { ...currMaps };
+				delete nextMaps[id];
+				return nextMaps;
+			}
+			return currMaps;
+		});
+	}, []);
+
+	<MountedMapsContext.Provider
+		value={{
+			maps,
+			onMapMount,
+			onMapUnmount,
+		}}
+	>{props.children}</MountedMapsContext.Provider>
+}
+
+export type MapCollection = {
+	[id: string]: MapRef | undefined;
+	current?: MapRef;
+};
+
+export function useMap(): MapCollection {
+	const maps = useContext(MountedMapsContext)?.maps;
+	const currentMap = useContext(MapContext);
+
+	const mapsWithCurrent = useMemo(() => {
+		return { ...maps, current: currentMap?.map };
+	}, [maps, currentMap]);
+
+	return mapsWithCurrent as MapCollection;
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+import { Map } from './components/map.tsrx';
+export { Map };
+export default Map;
+
+export { Marker } from './components/marker';
+export { Popup } from './components/popup';
+export { AttributionControl } from './components/attribution-control';
+export { FullscreenControl } from './components/fullscreen-control';
+export { GeolocateControl } from './components/geolocate-control';
+export { NavigationControl } from './components/navigation-control';
+export { ScaleControl } from './components/scale-control';
+export { Source } from './components/source.tsrx';
+export { Layer } from './components/layer';
+export { useControl } from './components/use-control';
+export { MapProvider, useMap } from './components/use-map.tsrx';
+
+export type { MapProps } from './components/map.tsrx';
+export type { MapRef } from './mapbox/create-ref';
+export type { MarkerProps } from './components/marker';
+export type { PopupProps } from './components/popup';
+export type { AttributionControlProps } from './components/attribution-control';
+export type { FullscreenControlProps } from './components/fullscreen-control';
+export type { GeolocateControlProps } from './components/geolocate-control';
+export type { NavigationControlProps } from './components/navigation-control';
+export type { ScaleControlProps } from './components/scale-control';
+export type { SourceProps } from './components/source.tsrx';
+export type { LayerProps } from './components/layer';
+
+// Types
+export * from './types/common';
+export * from './types/events';
+export * from './types/lib';
+export * from './types/style-spec';

package/src/mapbox/create-ref.ts

@@ -0,0 +1,114 @@
+// @ts-nocheck — byte-exact reuse of @vis.gl/react-mapbox 8.1.2. Upstream compiles
+// without strictNullChecks or noImplicitAny; this repository is strict. The copy
+// under upstream/ is typechecked with upstream's own configuration instead, so
+// nothing here is unchecked, only checked at the settings its authors chose.
+// Every line below this four-line banner is byte-identical to upstream.
+import type {MapInstance} from '../types/lib';
+import {LngLatLike, PointLike} from '../types/common';
+
+import type Mapbox from './mapbox';
+
+/** These methods may break the react binding if called directly */
+const skipMethods = [
+  'setMaxBounds',
+  'setMinZoom',
+  'setMaxZoom',
+  'setMinPitch',
+  'setMaxPitch',
+  'setRenderWorldCopies',
+  'setProjection',
+  'setStyle',
+  'addSource',
+  'removeSource',
+  'addLayer',
+  'removeLayer',
+  'setLayerZoomRange',
+  'setFilter',
+  'setPaintProperty',
+  'setLayoutProperty',
+  'setLight',
+  'setTerrain',
+  'setFog',
+  'remove'
+] as const;
+
+export type MapRef = {
+  getMap(): MapInstance;
+} & Omit<MapInstance, (typeof skipMethods)[number]>;
+
+export default function createRef(mapInstance: Mapbox): MapRef | null {
+  if (!mapInstance) {
+    return null;
+  }
+
+  const map = mapInstance.map;
+  const ref: any = {
+    getMap: () => map,
+
+    // Overwrite getters to use our shadow transform
+    getCenter: () => mapInstance.transform.center,
+    getZoom: () => mapInstance.transform.zoom,
+    getBearing: () => mapInstance.transform.bearing,
+    getPitch: () => mapInstance.transform.pitch,
+    getPadding: () => mapInstance.transform.padding,
+    getBounds: () => mapInstance.transform.getBounds(),
+    project: (lnglat: LngLatLike) => {
+      const tr = map.transform;
+      map.transform = mapInstance.transform;
+      const result = map.project(lnglat);
+      map.transform = tr;
+      return result;
+    },
+    unproject: (point: PointLike) => {
+      const tr = map.transform;
+      map.transform = mapInstance.transform;
+      const result = map.unproject(point);
+      map.transform = tr;
+      return result;
+    },
+    // options diverge between mapbox and maplibre
+    queryTerrainElevation: (lnglat: LngLatLike, options?: any) => {
+      const tr = map.transform;
+      map.transform = mapInstance.transform;
+      const result = map.queryTerrainElevation(lnglat, options);
+      map.transform = tr;
+      return result;
+    },
+    queryRenderedFeatures: (geometry?: any, options?: any) => {
+      const tr = map.transform;
+      map.transform = mapInstance.transform;
+      const result = map.queryRenderedFeatures(geometry, options);
+      map.transform = tr;
+      return result;
+    }
+  };
+
+  for (const key of getMethodNames(map)) {
+    // @ts-expect-error
+    if (!(key in ref) && !skipMethods.includes(key)) {
+      ref[key] = map[key].bind(map);
+    }
+  }
+
+  return ref;
+}
+
+function getMethodNames(obj: Object) {
+  const result = new Set<string>();
+
+  let proto = obj;
+  while (proto) {
+    for (const key of Object.getOwnPropertyNames(proto)) {
+      if (
+        key[0] !== '_' &&
+        typeof obj[key] === 'function' &&
+        key !== 'fire' &&
+        key !== 'setEventedParent'
+      ) {
+        result.add(key);
+      }
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+  return Array.from(result);
+}