react-native-maplibre-gl-js 1.0.3 → 1.2.0

package/README.md

@@ -1,11 +1,18 @@
+
 <div align="center">
   <h1>react-native-maplibre-gl-js</h1>
-</div>
-<div align="center">
-  <img src="https://img.shields.io/github/license/emilienaufauvre/react-native-maplibre-gl-js?style=for-the-badge&labelColor=black" />
-  <img src="https://img.shields.io/github/actions/workflow/status/emilienaufauvre/react-native-maplibre-gl-js/ci.yml?branch=main&style=for-the-badge&label=CI&labelColor=black" />
-  <img src="https://img.shields.io/github/actions/workflow/status/emilienaufauvre/react-native-maplibre-gl-js/cd.yml?branch=main&style=for-the-badge&label=CD&labelColor=black" />
-  <img src="https://img.shields.io/npm/v/react-native-maplibre-gl-js.svg?style=for-the-badge&label=NPM&labelColor=black" />
+  <a href="https://github.com/emilienaufauvre/react-native-maplibre-gl-js/actions/workflows/validation.yml">
+    <img src="https://img.shields.io/github/actions/workflow/status/emilienaufauvre/react-native-maplibre-gl-js/validation.yml?branch=main&style=for-the-badge&label=Validation&labelColor=black" />
+  </a>
+  <a href="https://codecov.io/github/emilienaufauvre/react-native-maplibre-gl-js">
+    <img src="https://img.shields.io/codecov/c/github/emilienaufauvre/react-native-maplibre-gl-js/main?style=for-the-badge&labelColor=black&label=Test%20coverage" />
+  </a>
+  <a href="https://github.com/emilienaufauvre/react-native-maplibre-gl-js/actions/workflows/delivery.yml">
+    <img src="https://img.shields.io/github/actions/workflow/status/emilienaufauvre/react-native-maplibre-gl-js/delivery.yml?branch=main&style=for-the-badge&label=Delivery&labelColor=black" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-native-maplibre-gl-js">
+    <img src="https://img.shields.io/npm/v/react-native-maplibre-gl-js.svg?style=for-the-badge&label=NPM&labelColor=black" />
+  </a>
 </div>
 
 <div align="center">
@@ -39,32 +46,85 @@
 > This project **is not** affiliated with, endorsed by, or sponsored by MapLibre.
 
 
-## Supported platforms
+## Table of contents
 
-| Platform | Status |
-|--------|--------|
-| iOS | ✅ |
-| Android | ✅ |
-| Web | ❌ |
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-## Documentation
+- [Supported platforms](#supported-platforms)
+- [Installation](#installation)
+- [📚 Documentation](#-documentation)
+- [🧪 Examples](#-examples)
+  - [1. Map](#1-map)
+  - [2. Marker](#2-marker)
+  - [3. Popup](#3-popup)
+- [🏁 Getting started](#-getting-started)
+- [📝 Design rationale](#-design-rationale)
+  - [Existing React Native map solutions](#existing-react-native-map-solutions)
+  - [Architectural approach](#architectural-approach)
+- [Contributing](#contributing)
+- [Credits](#credits)
+- [License](#license)
 
-📘 [**API Reference** – Complete TypeScript API documentation.](./docs/api/index.md)
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-🧪 [**Examples** – Real-world examples showcasing common use cases.](./docs/examples/index.md)
 
-📚 [**For library developers** – Internal architecture, glossary and design decisions.](./docs/developer/index.md)
+## Supported platforms
 
+| Platform | Status |
+|----------|--------|
+| iOS      | ✅      |
+| Android  | ✅      |
+| Web      | ❌      |
 
-## Installation
 
-** TODO not available on npm yet **
+## Installation
 
 ```sh
 npm install react-native-maplibre-gl-js
 ```
 
-## Getting started
+## 📚 Documentation
+
+[**API Reference** – Complete TypeScript API documentation.](./docs/api/index.md)
+
+[**For library developers** – Internal architecture, glossary and design decisions.](./docs/developer/index.md)
+
+
+## 🧪 Examples
+
+Several real-world usage scenarios are available, you can explore them in two ways:
+
+- [**Run the examples as an Expo app**](./CONTRIBUTING.md#scripts) to interact
+  with them directly.
+- [**Browse the source code**](./example/src/app) to understand how each feature
+  is implemented (see below the example list).
+
+<!-- EXAMPLES-LIST:START -->
+
+### 1. Map
+
+- [`1.1. Component basis`](./example/src/app/1.-Map/1.1.-Component-basis.tsx)
+- [`1.2. Create a camera animation`](./example/src/app/1.-Map/1.2.-Create-a-camera-animation.tsx)
+- [`1.3. Use the globe projection`](./example/src/app/1.-Map/1.3.-Use-the-globe-projection.tsx)
+- [`1.4. Add a raster tile source directly on map`](./example/src/app/1.-Map/1.4.-Add-a-raster-tile-source-directly-on-map.tsx)
+
+### 2. Marker
+
+- [`2.1. Component basis`](./example/src/app/2.-Marker/2.1.-Component-basis.tsx)
+- [`2.2. Animate the coordinate`](./example/src/app/2.-Marker/2.2.-Animate-the-coordinate.tsx)
+- [`2.3. Use an detached popup`](./example/src/app/2.-Marker/2.3.-Use-an-detached-popup.tsx)
+- [`2.4. Use an attached popup`](./example/src/app/2.-Marker/2.4.-Use-an-attached-popup.tsx)
+- [`2.5. Propagates the events to a parent component`](./example/src/app/2.-Marker/2.5.-Propagates-the-events-to-a-parent-component.tsx)
+
+### 3. Popup
+
+- [`3.1. Component basis`](./example/src/app/3.-Popup/3.1.-Component-basis.tsx)
+
+<!-- EXAMPLES-LIST:END -->
+
+
+## 🏁 Getting started
 
 The minimal setup to render a MapLibre map in React Native.
 
@@ -89,7 +149,7 @@ export default App
 ```
 
 
-## Design rationale
+## 📝 Design rationale
 
 Explain why I decided to build a new React Native map library instead of using
 an existing one.
@@ -101,11 +161,11 @@ that can be used in React Native. Each has its strengths, and credit goes to
 their contributors. Still, I have highlighted what I consider to be their main
 drawbacks.
 
-| Library                     | Notes                                                                  | Main Drawbacks                                                                                                                                                                                                                                                                                                                                                       |
-|-----------------------------|------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `react-native-maps` / `expo-maps` | Overlay custom tiles on Apple Maps (iOS) or Google Maps (iOS/Android). | - On tile loading, the map below (Google Maps or Apple Maps) is visible.<br/>- If the map provider is Google Maps (mandatory on the Android platform), an API key is needed to use Google Maps SDK, and therefore its use is billed.                                                                                                                                      |
-| `@rnmapbox/maps`             | -                                                                      | - Dependence on Mapbox choices.<br>- On the latest versions, an API key is required (at least on the Android side that drops the MapLibre SDK support), and therefore its use is billed.<br>- To render animated markers or markers with dynamic content and developed visual styles, the use of native views is necessary, and this greatly slows down the application. |
-| `maplibre-react-native`      | Open source fork of MapBox.                                            | - Being an open source fork of MapBox, the library is years behind (1000+ commits to date) and lacks many features and bug fixes.<br>- The same performance issue with native views as `@rnmapbox` is also present.                                                                                                                                                  |
+| Library                           | Notes                                                                  | Main Drawbacks                                                                                                                                                                                                                                                                                                                                                           |
+|-----------------------------------|------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `react-native-maps` / `expo-maps` | Overlay custom tiles on Apple Maps (iOS) or Google Maps (iOS/Android). | - On tile loading, the map below (Google Maps or Apple Maps) is visible.<br/>- If the map provider is Google Maps (mandatory on the Android platform), an API key is needed to use Google Maps SDK, and therefore its use is billed.                                                                                                                                     |
+| `@rnmapbox/maps`                  | -                                                                      | - Dependence on Mapbox choices.<br>- On the latest versions, an API key is required (at least on the Android side that drops the MapLibre SDK support), and therefore its use is billed.<br>- To render animated markers or markers with dynamic content and developed visual styles, the use of native views is necessary, and this greatly slows down the application. |
+| `maplibre-react-native`           | Open source fork of MapBox.                                            | - Being an open source fork of MapBox, the library is years behind (1000+ commits to date) and lacks many features and bug fixes.<br>- The same performance issue with native views as `@rnmapbox` is also present.                                                                                                                                                      |
 
 ### Architectural approach
 
@@ -122,10 +182,10 @@ libraries, while enabling more features.
 I outline two solutions in this category below, along with the issues they still
 carry. This library implements the second approach.
 
-| Approach                                      | Description                                                                                   | Main Drawbacks                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-|-----------------------------------------------|-----------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Remote WebView-based map                      | Host a map on a web page and access it through a WebView.                                          | - Requires additional infrastructure.<br>- Very sensitive to network latency, and in general, a degraded user experience.<br>- Offline usage is not possible.                                                                                                                                                                                                                                                                                                                                                                            |
-| Embedded WebView with bundled MapLibre GL JS | Bundle JS code that runs MapLibre GL JS, enabling two-way communication with React Native, and inject it into a WebView for execution. | - Any interaction between the WebView content and the React Native world is made through message-passing, which can make certain interactions more indirect.<br>- Some objects cannot be serialized and sent between the WebView code and React Native (e.g., HTMLElement).<br>- Some GitHub repositories are implementing this solution, however, no one is actively maintained, and the underlying web libraries are missing key features — good examples being `react-native-leaflet-view` and `@neukolabs/react-native-maplibre-js`. |
+| Approach                                     | Description                                                                                                                            | Main Drawbacks                                                                                                                                                                                                                                                                                                                                                                                                                                        <br/>                                                                              |
+|----------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Remote WebView-based map                     | Host a map on a web page and access it through a WebView.                                                                              | - Requires additional infrastructure.<br>- Very sensitive to network latency, and in general, a degraded user experience.<br>- Offline usage is not possible.                                                                                                                                                                                                                                                                                                                                                                            |
+| Embedded WebView with bundled `MapLibre GL JS` | Bundle JS code that runs `MapLibre GL JS`, enabling two-way communication with React Native, and inject it into a WebView for execution. | - Any interaction between the WebView content and the React Native world is made through message-passing, which can make certain interactions more indirect.<br>- Some objects cannot be serialized and sent between the WebView code and React Native (e.g., HTMLElement).<br>- Some GitHub repositories are implementing this solution, however, no one is actively maintained, and the underlying web libraries are missing key features — good examples being `react-native-leaflet-view` and `@neukolabs/react-native-maplibre-js`. |
 
 
 ## Contributing

package/lib/module/index.js

@@ -1,14 +1,17 @@
 "use strict";
 
 /**
- * Public API of react-native-maplibre-gl-js.
+ * Public API of `react-native-maplibre-gl-js`.
  * @module Public API
  * @packageDocumentation
+ * @sortStrategy sort-order
  */
 
-import MapProvider from "./react-native/components/MapProvider/MapProvider.js";
-import Map from "./react-native/components/Map/Map.js";
-import Marker from "./react-native/components/Marker/Marker.js";
-import Popup from "./react-native/components/Popup/Popup.js";
-export { MapProvider, Map, Marker, Popup };
+// @group Types
+
+// @group Components
+export { default as MapProvider } from "./react-native/components/MapProvider/MapProvider.js";
+export { default as Map } from "./react-native/components/Map/Map.js";
+export { default as Marker } from "./react-native/components/Marker/Marker.js";
+export { default as Popup } from "./react-native/components/Popup/Popup.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["MapProvider","Map","Marker","Popup"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAkBA,OAAOA,WAAW,MAAM,sDAAmD;AAC3E,OAAOC,GAAG,MAAM,sCAAmC;AACnD,OAAOC,MAAM,MAAM,4CAAyC;AAC5D,OAAOC,KAAK,MAAM,0CAAuC;AAEzD,SAASH,WAAW,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK","ignoreList":[]}
+{"version":3,"names":["default","MapProvider","Map","Marker","Popup"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAYA;AACA,SAASA,OAAO,IAAIC,WAAW,QAAQ,sDAAmD;AAC1F,SAASD,OAAO,IAAIE,GAAG,QAAQ,sCAAmC;AAClE,SAASF,OAAO,IAAIG,MAAM,QAAQ,4CAAyC;AAC3E,SAASH,OAAO,IAAII,KAAK,QAAQ,0CAAuC","ignoreList":[]}

package/lib/module/react-native/components/Map/Map.js

@@ -3,7 +3,36 @@
 import createWebObjectAsComponent from "../../components-factory/createWebObjectAsComponent.js";
 /**
  * MapLibre Map view.
- * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/ MapLibre GL JS docs}
+ * @props {@link MapProps}
+ * @ref {@link MapRef}
+ * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/ `MapLibre GL JS` docs}
+ * @example
+ * ```tsx
+ * <Map
+ *   options={{
+ *     style: 'https://tiles.openfreemap.org/styles/liberty',
+ *     center: [2.32, 48.86],
+ *     zoom: 12,
+ *   }}
+ *   listeners={{
+ *     mount: {
+ *       rnListener: () => console.log('Map mounted'),
+ *     },
+ *     unmount: {
+ *       rnListener: () => console.log('Map unmounted'),
+ *     },
+ *     click: {
+ *       objectListener: (event: MapMouseEvent) =>
+ *         console.log('Map clicked', event),
+ *     },
+ *     rotatestart: {
+ *       objectListener: (
+ *         event: MapLibreEvent<MouseEvent | TouchEvent | undefined>,
+ *       ) => console.log('Map rotation started', event),
+ *     },
+ *   }}
+ * />
+ * ```
  * @group Components
  */
 const Map = createWebObjectAsComponent('map');

package/lib/module/react-native/components/Map/Map.js.map

@@ -1 +1 @@
-{"version":3,"names":["createWebObjectAsComponent","Map"],"sourceRoot":"../../../../../src","sources":["react-native/components/Map/Map.tsx"],"mappings":";;AAAA,OAAOA,0BAA0B,MAAM,wDAAqD;AAG5F;AACA;AACA;AACA;AACA;AACA,MAAMC,GAAG,GAAGD,0BAA0B,CAAmB,KAAK,CAAC;AAE/D,eAAeC,GAAG","ignoreList":[]}
+{"version":3,"names":["createWebObjectAsComponent","Map"],"sourceRoot":"../../../../../src","sources":["react-native/components/Map/Map.tsx"],"mappings":";;AAAA,OAAOA,0BAA0B,MAAM,wDAAqD;AAG5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,GAAG,GAAGD,0BAA0B,CAAmB,KAAK,CAAC;AAE/D,eAAeC,GAAG","ignoreList":[]}

package/lib/module/react-native/components/Map/Map.test.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import { render } from '@testing-library/react-native';
+import Map from "./Map.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+describe('Map', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('Given the component is rendered', () => {
+    beforeEach(() => {
+      render(/*#__PURE__*/_jsx(Map, {}));
+    });
+    describe('When nothing', () => {
+      test('Then it does not crash', () => {});
+    });
+  });
+});
+//# sourceMappingURL=Map.test.js.map

package/lib/module/react-native/components/Map/Map.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["render","Map","jsx","_jsx","describe","beforeEach","jest","clearAllMocks","test"],"sourceRoot":"../../../../../src","sources":["react-native/components/Map/Map.test.tsx"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,+BAA+B;AACtD,OAAOC,GAAG,MAAM,UAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEvBC,QAAQ,CAAC,KAAK,EAAE,MAAM;EACpBC,UAAU,CAAC,MAAM;IACfC,IAAI,CAACC,aAAa,CAAC,CAAC;EACtB,CAAC,CAAC;EAEFH,QAAQ,CAAC,iCAAiC,EAAE,MAAM;IAChDC,UAAU,CAAC,MAAM;MACfL,MAAM,cAACG,IAAA,CAACF,GAAG,IAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEFG,QAAQ,CAAC,cAAc,EAAE,MAAM;MAC7BI,IAAI,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/module/react-native/components/MapProvider/MapProvider.hooks.js

@@ -1,7 +1,11 @@
 "use strict";
 
 import { StyleSheet } from 'react-native';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import RNLogger from "../../logger/rn-logger.js";
+import { isWebObjectListenerOnHTMLElement, isWebObjectListenerOnMapLayer, isWebObjectListenerOnObject, isWebObjectListenerOnRN } from "../../../communication/messages.utils.js";
+import useMapAtoms from "../../hooks/atoms/useMapAtoms.js";
+import { buildCssInjectionScript, normalizeCss } from "./MapProvider.utils.js";
 export const useStyles = () => {
   return useMemo(() => StyleSheet.create({
     container: {
@@ -9,10 +13,153 @@ export const useStyles = () => {
       height: '100%',
       overflow: 'hidden'
     },
-    webview: {
+    webView: {
       flex: 1,
       backgroundColor: 'transparent'
     }
   }), []);
 };
+
+/**
+ * On start, the map must be mounted before any other map element. When the
+ * mount message of the map is ready, we flush all the pending messages to
+ * the web world.
+ */
+export const useFlushMessagesOnMapMounted = () => {
+  // States.
+  // - Global.
+  const {
+    isMapMountMessageReady,
+    flushMessages
+  } = useMapAtoms();
+  useEffect(() => {
+    if (isMapMountMessageReady) {
+      flushMessages();
+    }
+  }, [flushMessages, isMapMountMessageReady]);
+};
+
+/**
+ * @returns - The handler that will receive the messages from the web world.
+ */
+export const useWebMessageHandler = () => {
+  // States.
+  // - Global.
+  const {
+    setIsWebWorldReady,
+    getWebObjectListeners,
+    resolveWebObjectPendingMethodResponse
+  } = useMapAtoms();
+  const createWebViewMessageHandler = useCallback(handlers => {
+    // Not an anonymous function => get the function name for logger.
+    return function handleMessage(event) {
+      try {
+        RNLogger.debug('RN', handleMessage.name, event?.nativeEvent?.data);
+        const message = JSON.parse(event.nativeEvent.data);
+        const handler = handlers[message.type];
+        return handler?.(message);
+      } catch (error) {
+        RNLogger.error('RN', handleMessage.name, error.message);
+      }
+    };
+  }, []);
+
+  // Handle the messages from the web world by dispatching the message to the
+  // corresponding handler.
+  const handler = useMemo(() => {
+    return createWebViewMessageHandler({
+      console: ({
+        payload: {
+          args,
+          level
+        }
+      }) => {
+        RNLogger[level]('Web', args[0], ...args.slice(1));
+      },
+      ready: () => {
+        setIsWebWorldReady(true);
+      },
+      webObjectListenerEvent: ({
+        payload: {
+          eventName,
+          event,
+          objectId
+        }
+      }) => {
+        // Retrieve the corresponding object listener.
+        const listener = getWebObjectListeners({
+          objectId
+        })?.[eventName];
+        // Then, call it.
+        if (isWebObjectListenerOnRN(listener)) {
+          ;
+          listener.rnListener(event);
+        }
+        if (isWebObjectListenerOnObject(listener)) {
+          ;
+          listener.objectListener(event);
+        }
+        if (isWebObjectListenerOnMapLayer(listener)) {
+          ;
+          listener.layerListener(event);
+        }
+        if (isWebObjectListenerOnHTMLElement(listener)) {
+          ;
+          listener.elementListener(event);
+        }
+      },
+      webObjectMethodResponse: ({
+        payload: {
+          requestId,
+          result
+        }
+      }) => {
+        resolveWebObjectPendingMethodResponse({
+          requestId,
+          result
+        });
+      }
+    });
+  }, [createWebViewMessageHandler, setIsWebWorldReady, getWebObjectListeners, resolveWebObjectPendingMethodResponse]);
+  return {
+    handler
+  };
+};
+
+/**
+ * @param injectedCss - The CSS to be injected.
+ * @returns - The given CSS in a format that can be injected into the WebView.
+ */
+export const useCssInjectionScript = injectedCss => {
+  const cssInjectionScript = useMemo(() => {
+    const normalizedCss = normalizeCss(injectedCss);
+    return normalizedCss ? buildCssInjectionScript(normalizedCss) : undefined;
+  }, [injectedCss]);
+  return {
+    cssInjectionScript
+  };
+};
+
+/**
+ * Inject the given script into the WebView if it changed.
+ * @param cssInjectionScript - A script that injects CSS once executed within
+ *  the WebView.
+ */
+export const useInjectJavaScriptIfInjectedCssChanged = cssInjectionScript => {
+  // Refs.
+  const lastInjectedScriptRef = useRef(undefined);
+  // States.
+  // - Global.
+  const {
+    webView,
+    isWebWorldReady
+  } = useMapAtoms();
+  useEffect(() => {
+    if (!cssInjectionScript || !isWebWorldReady || !webView || lastInjectedScriptRef.current === cssInjectionScript) {
+      return;
+    }
+    webView?.injectJavaScript(cssInjectionScript);
+    lastInjectedScriptRef.current = cssInjectionScript;
+  }, [cssInjectionScript, isWebWorldReady, webView]);
+};
 //# sourceMappingURL=MapProvider.hooks.js.map

package/lib/module/react-native/components/MapProvider/MapProvider.hooks.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","useMemo","useStyles","create","container","width","height","overflow","webview","flex","backgroundColor"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.hooks.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,OAAO,QAAQ,OAAO;AAE/B,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,OAAOD,OAAO,CACZ,MACED,UAAU,CAACG,MAAM,CAAC;IAChBC,SAAS,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE,MAAM;MAAEC,QAAQ,EAAE;IAAS,CAAC;IAChEC,OAAO,EAAE;MAAEC,IAAI,EAAE,CAAC;MAAEC,eAAe,EAAE;IAAc;EACrD,CAAC,CAAC,EACJ,EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","useCallback","useEffect","useMemo","useRef","RNLogger","isWebObjectListenerOnHTMLElement","isWebObjectListenerOnMapLayer","isWebObjectListenerOnObject","isWebObjectListenerOnRN","useMapAtoms","buildCssInjectionScript","normalizeCss","useStyles","create","container","width","height","overflow","webView","flex","backgroundColor","useFlushMessagesOnMapMounted","isMapMountMessageReady","flushMessages","useWebMessageHandler","setIsWebWorldReady","getWebObjectListeners","resolveWebObjectPendingMethodResponse","createWebViewMessageHandler","handlers","handleMessage","event","debug","name","nativeEvent","data","message","JSON","parse","handler","type","error","console","payload","args","level","slice","ready","webObjectListenerEvent","eventName","objectId","listener","rnListener","objectListener","layerListener","elementListener","webObjectMethodResponse","requestId","result","useCssInjectionScript","injectedCss","cssInjectionScript","normalizedCss","undefined","useInjectJavaScriptIfInjectedCssChanged","lastInjectedScriptRef","isWebWorldReady","current","injectJavaScript"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.hooks.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/react-native/components/MapProvider/MapProvider.js

@@ -3,114 +3,60 @@
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { WEBVIEW_STATIC_HTML } from "../../../web/generated/webview_static_html.js";
-import RNLogger from "../../logger/rn-logger.js";
 import useMapAtoms from "../../hooks/atoms/useMapAtoms.js";
-import { isWebObjectListenerOnHTMLElement, isWebObjectListenerOnMapLayer, isWebObjectListenerOnObject, isWebObjectListenerOnRN } from "../../../communication/messages.utils.js";
-import { useStyles } from "./MapProvider.hooks.js";
-import { useCallback, useEffect } from 'react';
+import { useFlushMessagesOnMapMounted, useCssInjectionScript, useInjectJavaScriptIfInjectedCssChanged, useStyles, useWebMessageHandler } from "./MapProvider.hooks.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Provide the main
+ * Must be used as a parent component to allow instantiation of map elements.
+ * Every child must be a direct component.
+ * This is the bridge to the web world / the `MapLibre GL JS` library.
  * @param props -
  * @group Components
+ * @example
+ * ```tsx
+ * <MapProvider>
+ *   <Map/>
+ *   <Marker/>
+ *   ...
+ * </MapProvider>
+ * ```
  */
 const MapProvider = ({
-  children
+  style,
+  webViewStyle,
+  children,
+  injectedCss
 }) => {
   // States.
   // - Global.
   const {
-    setWebView,
-    setIsWebWorldReady,
-    isMapMountMessageReady,
-    flushMessages,
-    getWebObjectListeners,
-    resolveWebObjectPendingMethodResponse
+    setWebView
   } = useMapAtoms();
   // Theme.
   const styles = useStyles();
-
-  // On start, the map must be mounted before any other map element. When the
-  // mount message of the map is ready, we flush all the pending messages to
-  // the web world.
-  useEffect(() => {
-    if (isMapMountMessageReady) {
-      flushMessages();
-    }
-  }, [flushMessages, isMapMountMessageReady]);
-
-  // Handler of messages from the web world.
-  const onMessage = useCallback(
-  // Not an anonymous function => get the function name for logger.
-  function handleMessage(event) {
-    try {
-      RNLogger.debug('RN', handleMessage.name, event?.nativeEvent?.data);
-      const message = JSON.parse(event.nativeEvent.data);
-      switch (message.type) {
-        case 'console':
-          {
-            RNLogger[message.payload.level]('Web', message.payload.args[0], ...message.payload.args.slice(1));
-            break;
-          }
-        case 'ready':
-          {
-            setIsWebWorldReady(true);
-            break;
-          }
-        case 'webObjectListenerEvent':
-          {
-            // Retrieve the corresponding object listener.
-            const listener = getWebObjectListeners({
-              objectId: message.payload.objectId
-            })?.[message.payload.eventName];
-            // Then, call it.
-            if (isWebObjectListenerOnRN(listener)) {
-              ;
-              listener.rnListener(message.payload.event);
-            }
-            if (isWebObjectListenerOnObject(listener)) {
-              ;
-              listener.objectListener(message.payload.event);
-            }
-            if (isWebObjectListenerOnMapLayer(listener)) {
-              ;
-              listener.layerListener(message.payload.event);
-            }
-            if (isWebObjectListenerOnHTMLElement(listener)) {
-              ;
-              listener.elementListener(message.payload.event);
-            }
-            break;
-          }
-        case 'webObjectMethodResponse':
-          {
-            resolveWebObjectPendingMethodResponse({
-              requestId: message.payload.requestId,
-              result: message.payload.result
-            });
-            break;
-          }
-      }
-    } catch (error) {
-      RNLogger.error('RN', handleMessage.name, error.message);
-    }
-  }, [setIsWebWorldReady, getWebObjectListeners, resolveWebObjectPendingMethodResponse]);
+  // Behaviors.
+  useFlushMessagesOnMapMounted();
+  const {
+    handler
+  } = useWebMessageHandler();
+  const {
+    cssInjectionScript
+  } = useCssInjectionScript(injectedCss);
+  useInjectJavaScriptIfInjectedCssChanged(cssInjectionScript);
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
+    style: [styles.container, style],
     children: [/*#__PURE__*/_jsx(WebView, {
+      testID: 'map-provider-webview',
       ref: setWebView,
-      style: styles.webview,
-      originWhitelist: ['*'],
+      style: [styles.webView, webViewStyle],
+      scrollEnabled: false,
       javaScriptEnabled: true,
-      allowFileAccess: true,
       domStorageEnabled: true,
-      scrollEnabled: false,
-      allowUniversalAccessFromFileURLs: true,
-      mixedContentMode: 'always',
-      onMessage: onMessage,
+      onMessage: handler,
       source: {
         html: WEBVIEW_STATIC_HTML
-      }
+      },
+      injectedJavaScriptBeforeContentLoaded: cssInjectionScript
     }), children]
   });
 };

package/lib/module/react-native/components/MapProvider/MapProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","WebView","WEBVIEW_STATIC_HTML","RNLogger","useMapAtoms","isWebObjectListenerOnHTMLElement","isWebObjectListenerOnMapLayer","isWebObjectListenerOnObject","isWebObjectListenerOnRN","useStyles","useCallback","useEffect","jsx","_jsx","jsxs","_jsxs","MapProvider","children","setWebView","setIsWebWorldReady","isMapMountMessageReady","flushMessages","getWebObjectListeners","resolveWebObjectPendingMethodResponse","styles","onMessage","handleMessage","event","debug","name","nativeEvent","data","message","JSON","parse","type","payload","level","args","slice","listener","objectId","eventName","rnListener","objectListener","layerListener","elementListener","requestId","result","error","style","container","ref","webview","originWhitelist","javaScriptEnabled","allowFileAccess","domStorageEnabled","scrollEnabled","allowUniversalAccessFromFileURLs","mixedContentMode","source","html"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["View","WebView","WEBVIEW_STATIC_HTML","useMapAtoms","useFlushMessagesOnMapMounted","useCssInjectionScript","useInjectJavaScriptIfInjectedCssChanged","useStyles","useWebMessageHandler","jsx","_jsx","jsxs","_jsxs","MapProvider","style","webViewStyle","children","injectedCss","setWebView","styles","handler","cssInjectionScript","container","testID","ref","webView","scrollEnabled","javaScriptEnabled","domStorageEnabled","onMessage","source","html","injectedJavaScriptBeforeContentLoaded"],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,mBAAmB,QAAQ,+CAA4C;AAChF,OAAOC,WAAW,MAAM,kCAA+B;AACvD,SACEC,4BAA4B,EAC5BC,qBAAqB,EACrBC,uCAAuC,EACvCC,SAAS,EACTC,oBAAoB,QACf,wBAAqB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EACnBC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC;AACgB,CAAC,KAAK;EACtB;EACA;EACA,MAAM;IAAEC;EAAW,CAAC,GAAGf,WAAW,CAAC,CAAC;EACpC;EACA,MAAMgB,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAH,4BAA4B,CAAC,CAAC;EAC9B,MAAM;IAAEgB;EAAQ,CAAC,GAAGZ,oBAAoB,CAAC,CAAC;EAC1C,MAAM;IAAEa;EAAmB,CAAC,GAAGhB,qBAAqB,CAACY,WAAW,CAAC;EACjEX,uCAAuC,CAACe,kBAAkB,CAAC;EAE3D,oBACET,KAAA,CAACZ,IAAI;IAACc,KAAK,EAAE,CAACK,MAAM,CAACG,SAAS,EAAER,KAAK,CAAE;IAAAE,QAAA,gBACrCN,IAAA,CAACT,OAAO;MACNsB,MAAM,EAAE,sBAAuB;MAC/BC,GAAG,EAAEN,UAAW;MAChBJ,KAAK,EAAE,CAACK,MAAM,CAACM,OAAO,EAAEV,YAAY,CAAE;MACtCW,aAAa,EAAE,KAAM;MACrBC,iBAAiB,EAAE,IAAK;MACxBC,iBAAiB,EAAE,IAAK;MACxBC,SAAS,EAAET,OAAQ;MACnBU,MAAM,EAAE;QAAEC,IAAI,EAAE7B;MAAoB,CAAE;MACtC8B,qCAAqC,EAAEX;IAAmB,CAC3D,CAAC,EACDL,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAED,eAAeH,WAAW","ignoreList":[]}