react-bkoi-gl 1.0.6 → 2.0.0

package/src/utils/compare-class-names.ts

@@ -0,0 +1,29 @@
+/** Compare two classNames string and return the difference */
+export function compareClassNames(
+  prevClassName: string | undefined,
+  nextClassName: string | undefined,
+): string[] | null {
+  if (prevClassName === nextClassName) {
+    return null;
+  }
+
+  const prevClassList = getClassList(prevClassName);
+  const nextClassList = getClassList(nextClassName);
+  const diff: string[] = [];
+
+  for (const c of nextClassList) {
+    if (!prevClassList.has(c)) {
+      diff.push(c);
+    }
+  }
+  for (const c of prevClassList) {
+    if (!nextClassList.has(c)) {
+      diff.push(c);
+    }
+  }
+  return diff.length === 0 ? null : diff;
+}
+
+function getClassList(className: string | undefined) {
+  return new Set(className ? className.trim().split(/\s+/) : []);
+}

package/src/utils/deep-equal.ts

@@ -1,4 +1,4 @@
-import type {PointLike} from '../types';
+import type { PointLike } from "../types/common";
 
 /**
  * Compare two points
@@ -41,7 +41,7 @@ export function deepEqual(a: any, b: any): boolean {
   } else if (Array.isArray(b)) {
     return false;
   }
-  if (typeof a === 'object' && typeof b === 'object') {
+  if (typeof a === "object" && typeof b === "object") {
     const aKeys = Object.keys(a);
     const bKeys = Object.keys(b);
     if (aKeys.length !== bKeys.length) {

package/src/utils/set-globals.ts

@@ -1,57 +1,51 @@
 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.
+  RTLTextPlugin?: string | { pluginUrl: string; lazy?: boolean };
+  /** The number of web workers instantiated on a page with maplibre-gl maps.
    * @default 2
    */
   workerCount?: number;
-  /** Provides an interface for loading mapbox-gl's WebWorker bundle from a self-hosted URL.
+  /** Provides an interface for loading maplibre-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;
+  const { RTLTextPlugin, maxParallelImageRequests, workerCount, workerUrl } =
+    props;
   if (
     RTLTextPlugin &&
     mapLib.getRTLTextPluginStatus &&
-    mapLib.getRTLTextPluginStatus() === 'unavailable'
+    mapLib.getRTLTextPluginStatus() === "unavailable"
   ) {
+    const { pluginUrl, lazy = true } =
+      typeof RTLTextPlugin === "string"
+        ? { pluginUrl: RTLTextPlugin }
+        : RTLTextPlugin;
+
     mapLib.setRTLTextPlugin(
-      RTLTextPlugin,
+      pluginUrl,
       (error?: Error) => {
         if (error) {
           // eslint-disable-next-line
           console.error(error);
         }
       },
-      true
+      lazy,
     );
   }
+  if (maxParallelImageRequests !== undefined) {
+    mapLib.setMaxParallelImageRequests(maxParallelImageRequests);
+  }
+  if (workerCount !== undefined) {
+    mapLib.setWorkerCount(workerCount);
+  }
+  if (workerUrl !== undefined) {
+    mapLib.setWorkerUrl(workerUrl);
+  }
 }

package/src/utils/style-utils.ts

@@ -1,20 +1,29 @@
-import {ImmutableLike, MapStyle} from '../types';
+import type { StyleSpecification } from "../types/style-spec";
+import type { ImmutableLike } from "../types/common";
 
-const refProps = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];
+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 | MapStyle | ImmutableLike<MapStyle>
-): string | MapStyle {
+  style: string | StyleSpecification | ImmutableLike<StyleSpecification>,
+): string | StyleSpecification {
   if (!style) {
     return null;
   }
-  if (typeof style === 'string') {
+  if (typeof style === "string") {
     return style;
   }
-  if ('toJS' in style) {
+  if ("toJS" in style) {
     style = style.toJS();
   }
   if (!style.layers) {
@@ -26,10 +35,10 @@ export function normalizeStyle(
     layerIndex[layer.id] = layer;
   }
 
-  const layers = style.layers.map(layer => {
+  const layers = style.layers.map((layer) => {
     let normalizedLayer: typeof layer = null;
 
-    if ('interactive' in layer) {
+    if ("interactive" in layer) {
       normalizedLayer = Object.assign({}, layer);
       // Breaks style diffing :(
       // @ts-ignore legacy field not typed
@@ -55,5 +64,5 @@ export function normalizeStyle(
   });
 
   // Do not mutate the style object provided by the user
-  return {...style, layers};
+  return { ...style, layers };
 }

package/src/utils/transform.ts

@@ -1,86 +1,58 @@
-import type {MapboxProps} from '../mapbox/mapbox';
-import type {Transform, ViewState} from '../types';
-import {deepEqual} from './deep-equal';
-
-/**
- * Make a copy of a transform
- * @param tr
- */
-export function cloneTransform(tr: Transform): Transform {
-  const newTransform = tr.clone();
-  // Work around mapbox bug - this value is not assigned in clone(), only in resize()
-  newTransform.pixelsToGLUnits = tr.pixelsToGLUnits;
-  return newTransform;
-}
-
-/**
- * Copy projection from one transform to another. This only applies to mapbox-gl transforms
- * @param src the transform to copy projection settings from
- * @param dest to transform to copy projection settings to
- */
-export function syncProjection(src: Transform, dest: Transform): void {
-  if (!src.getProjection) {
-    return;
-  }
-  const srcProjection = src.getProjection();
-  const destProjection = dest.getProjection();
-
-  if (!deepEqual(srcProjection, destProjection)) {
-    dest.setProjection(srcProjection);
-  }
-}
+import type { MaplibreProps } from "../maplibre/maplibre";
+import type { ViewState } from "../types/common";
+import type { TransformLike } from "../types/internal";
+import { deepEqual } from "./deep-equal";
 
 /**
  * Capture a transform's current state
  * @param transform
  * @returns descriptor of the view state
  */
-export function transformToViewState(tr: Transform): ViewState {
+export function transformToViewState(tr: TransformLike): ViewState {
   return {
     longitude: tr.center.lng,
     latitude: tr.center.lat,
     zoom: tr.zoom,
     pitch: tr.pitch,
     bearing: tr.bearing,
-    padding: tr.padding
+    padding: tr.padding,
   };
 }
 
 /* eslint-disable complexity */
 /**
- * Mutate a transform to match the given view state
- * @param transform
- * @param viewState
- * @returns true if the transform has changed
+ * Applies requested view state to a transform
+ * @returns an object containing detected changes
  */
-export function applyViewStateToTransform(tr: Transform, props: MapboxProps): boolean {
+export function applyViewStateToTransform(
+  /** An object that describes Maplibre's camera state */
+  tr: TransformLike,
+  /** Props from Map component */
+  props: MaplibreProps,
+): Partial<TransformLike> {
   const v: Partial<ViewState> = props.viewState || props;
-  let changed = false;
+  const changes: Partial<TransformLike> = {};
 
-  if ('zoom' in v) {
-    const zoom = tr.zoom;
-    tr.zoom = v.zoom;
-    changed = changed || zoom !== tr.zoom;
+  if (
+    "longitude" in v &&
+    "latitude" in v &&
+    (v.longitude !== tr.center.lng || v.latitude !== tr.center.lat)
+  ) {
+    const LngLat = tr.center.constructor;
+    // @ts-expect-error we should not import LngLat class from maplibre-gl because we don't know the source of mapLib
+    changes.center = new LngLat(v.longitude, v.latitude);
   }
-  if ('bearing' in v) {
-    const bearing = tr.bearing;
-    tr.bearing = v.bearing;
-    changed = changed || bearing !== tr.bearing;
+  if ("zoom" in v && v.zoom !== tr.zoom) {
+    changes.zoom = v.zoom;
   }
-  if ('pitch' in v) {
-    const pitch = tr.pitch;
-    tr.pitch = v.pitch;
-    changed = changed || pitch !== tr.pitch;
+  if ("bearing" in v && v.bearing !== tr.bearing) {
+    changes.bearing = v.bearing;
   }
-  if (v.padding && !tr.isPaddingEqual(v.padding)) {
-    changed = true;
-    tr.padding = v.padding;
+  if ("pitch" in v && v.pitch !== tr.pitch) {
+    changes.pitch = v.pitch;
   }
-  if ('longitude' in v && 'latitude' in v) {
-    const center = tr.center;
-    // @ts-ignore
-    tr.center = new center.constructor(v.longitude, v.latitude);
-    changed = changed || center !== tr.center;
+  if (v.padding && tr.padding && !deepEqual(v.padding, tr.padding)) {
+    changes.padding = v.padding;
   }
-  return changed;
+  return changes;
 }

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

@@ -1,7 +1,8 @@
 // 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 'react';
+import { useEffect, useLayoutEffect } from "react";
 
-const useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect =
+  typeof document !== "undefined" ? useLayoutEffect : useEffect;
 
 export default useIsomorphicLayoutEffect;

package/bkoi-gl/package.json

@@ -1,6 +0,0 @@
-{
-  "internal": true,
-  "main": "../dist/exports-bkoi-gl.cjs",
-  "module": "../dist/exports-bkoi-gl.js",
-  "types": "../dist/exports-bkoi-gl.d.ts"
-}