@octanejs/react-map-gl 0.0.1

package/src/utils/set-globals.ts

@@ -0,0 +1,62 @@
+// @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.
+export type GlobalSettings = {
+  /** The map's default API URL for requesting tiles, styles, sprites, and glyphs. */
+  baseApiUrl?: string;
+  /** The maximum number of images (raster tiles, sprites, icons) to load in parallel.
+   * @default 16
+   */
+  maxParallelImageRequests?: number;
+  /** The map's RTL text plugin. Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.  */
+  RTLTextPlugin?: string | false;
+  /** Provides an interface for external module bundlers such as Webpack or Rollup to package mapbox-gl's WebWorker into a separate class and integrate it with the library.
+Takes precedence over `workerUrl`. */
+  workerClass?: any;
+  /** The number of web workers instantiated on a page with mapbox-gl maps.
+   * @default 2
+   */
+  workerCount?: number;
+  /** Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL.
+   * This is useful if your site needs to operate in a strict CSP (Content Security Policy) environment
+   * wherein you are not allowed to load JavaScript code from a Blob URL, which is default behavior. */
+  workerUrl?: string;
+};
+
+const globalSettings = [
+  'baseApiUrl',
+  'maxParallelImageRequests',
+  'workerClass',
+  'workerCount',
+  'workerUrl'
+] as const;
+
+export default function setGlobals(mapLib: any, props: GlobalSettings) {
+  for (const key of globalSettings) {
+    if (key in props) {
+      mapLib[key] = props[key];
+    }
+  }
+
+  const {
+    RTLTextPlugin = 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js'
+  } = props;
+  if (
+    RTLTextPlugin &&
+    mapLib.getRTLTextPluginStatus &&
+    mapLib.getRTLTextPluginStatus() === 'unavailable'
+  ) {
+    mapLib.setRTLTextPlugin(
+      RTLTextPlugin,
+      (error?: Error) => {
+        if (error) {
+          // eslint-disable-next-line
+          console.error(error);
+        }
+      },
+      true
+    );
+  }
+}

package/src/utils/style-utils.ts

@@ -0,0 +1,65 @@
+// @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 {ImmutableLike} from '../types/common';
+import {StyleSpecification} from '../types/style-spec';
+
+const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];
+
+// Prepare a map style object for diffing
+// If immutable - convert to plain object
+// Work around some issues in older styles that would fail Mapbox's diffing
+export function normalizeStyle(
+  style: string | StyleSpecification | ImmutableLike<StyleSpecification>
+): string | StyleSpecification {
+  if (!style) {
+    return null;
+  }
+  if (typeof style === 'string') {
+    return style;
+  }
+  if ('toJS' in style) {
+    style = style.toJS();
+  }
+  if (!style.layers) {
+    return style;
+  }
+  const layerIndex = {};
+
+  for (const layer of style.layers) {
+    layerIndex[layer.id] = layer;
+  }
+
+  const layers = style.layers.map(layer => {
+    let normalizedLayer: typeof layer = null;
+
+    if ('interactive' in layer) {
+      normalizedLayer = Object.assign({}, layer);
+      // Breaks style diffing :(
+      // @ts-ignore legacy field not typed
+      delete normalizedLayer.interactive;
+    }
+
+    // Style diffing doesn't work with refs so expand them out manually before diffing.
+    // @ts-ignore legacy field not typed
+    const layerRef = layerIndex[layer.ref];
+    if (layerRef) {
+      normalizedLayer = normalizedLayer || Object.assign({}, layer);
+      // @ts-ignore
+      delete normalizedLayer.ref;
+      // https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/deref.js
+      for (const propName of refProps) {
+        if (propName in layerRef) {
+          normalizedLayer[propName] = layerRef[propName];
+        }
+      }
+    }
+
+    return normalizedLayer || layer;
+  });
+
+  // Do not mutate the style object provided by the user
+  return {...style, layers};
+}

package/src/utils/transform.ts

@@ -0,0 +1,115 @@
+// @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 {ViewState} from '../types/common';
+import type {Transform} from '../types/internal';
+
+/**
+ * Capture a transform's current state
+ * @param transform
+ * @returns descriptor of the view state
+ */
+export function transformToViewState(tr: Transform): ViewState {
+  return {
+    longitude: tr.center.lng,
+    latitude: tr.center.lat,
+    zoom: tr._seaLevelZoom ?? tr.zoom,
+    pitch: tr.pitch,
+    bearing: tr.bearing,
+    padding: tr.padding,
+    elevation: tr._centerAltitude
+  };
+}
+
+/** Returns `true` if the given props can potentially override view state updates */
+export function isViewStateControlled(v: Partial<ViewState>): boolean {
+  return (
+    Number.isFinite(v.longitude) ||
+    Number.isFinite(v.latitude) ||
+    Number.isFinite(v.zoom) ||
+    Number.isFinite(v.pitch) ||
+    Number.isFinite(v.bearing)
+  );
+}
+
+/**
+ * Returns `true` if transform needs to be updated to match view state
+ */
+export function compareViewStateWithTransform(tr: Transform, v: Partial<ViewState>): boolean {
+  if (Number.isFinite(v.longitude) && tr.center.lng !== v.longitude) {
+    return true;
+  }
+  if (Number.isFinite(v.latitude) && tr.center.lat !== v.latitude) {
+    return true;
+  }
+  if (Number.isFinite(v.bearing) && tr.bearing !== v.bearing) {
+    return true;
+  }
+  if (Number.isFinite(v.pitch) && tr.pitch !== v.pitch) {
+    return true;
+  }
+  if (Number.isFinite(v.zoom) && (tr._seaLevelZoom ?? tr.zoom) !== v.zoom) {
+    return true;
+  }
+  if (v.padding && !tr.isPaddingEqual(v.padding)) {
+    return true;
+  }
+  return false;
+}
+
+function noOp() {}
+
+/* eslint-disable complexity */
+/**
+ * Mutate a transform to match the given view state. Should reverse `transformToViewState`
+ * @param transform
+ * @param viewState
+ */
+export function applyViewStateToTransform(tr: Transform, v: Partial<ViewState>) {
+  // prevent constrain from running until all properties are set
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const constrain = tr._constrain;
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const calcMatrices = tr._calcMatrices;
+  tr._constrain = noOp;
+  tr._calcMatrices = noOp;
+
+  if (Number.isFinite(v.bearing)) {
+    tr.bearing = v.bearing;
+  }
+  if (Number.isFinite(v.pitch)) {
+    tr.pitch = v.pitch;
+  }
+  if (v.padding && !tr.isPaddingEqual(v.padding)) {
+    tr.padding = v.padding;
+  }
+  if (Number.isFinite(v.longitude) || Number.isFinite(v.latitude)) {
+    const center = tr.center;
+    // @ts-expect-error LngLat constructor is not typed
+    tr._center = new center.constructor(v.longitude ?? center.lng, v.latitude ?? center.lat);
+  }
+  if (Number.isFinite(v.zoom)) {
+    tr._centerAltitude = v.elevation ?? 0;
+    if (tr.elevation) {
+      tr._seaLevelZoom = v.zoom;
+      const mercatorElevation = (tr.pixelsPerMeter / tr.worldSize) * tr._centerAltitude;
+      const altitude = tr._mercatorZfromZoom(v.zoom);
+      const minHeight = tr._mercatorZfromZoom(tr._maxZoom);
+      const height = Math.max(altitude - mercatorElevation, minHeight);
+      tr._setZoom(tr._zoomFromMercatorZ(height));
+    } else {
+      tr._seaLevelZoom = null;
+      tr.zoom = v.zoom;
+    }
+  }
+
+  // restore methods
+  tr._constrain = constrain;
+  tr._calcMatrices = calcMatrices;
+  if (!tr._unmodified) {
+    tr._constrain();
+    tr._calcMatrices();
+  }
+}

package/src/utils/use-isomorphic-layout-effect.ts

@@ -0,0 +1,7 @@
+// From https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts
+// useLayoutEffect but does not trigger warning in server-side rendering
+import { useEffect, useLayoutEffect } from 'octane';
+
+const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;