react-native-maplibre-gl-js 1.0.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Emilien Aufauvre
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,146 @@
+<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" />
+</div>
+
+<div align="center">
+  <br/>
+  <p>
+    A TypeScript library to enable the use of
+    <a href="https://github.com/maplibre/maplibre-gl-js" target="_blank">
+        MapLibre GL JS
+    </a>
+    within React Native.
+    <br/>
+    Aims to bring all the web features into React Native components, thereby
+    offering new capabilities to React Native developers.
+  </p>
+  <p align="center">
+    <img
+      src="./res/demo1.gif"
+      width="300"
+      alt="Example of a MapLibre GL JS map in React Native with marker drag"
+    />
+    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    <img
+      src="./res/demo2.gif"
+      width="300"
+      alt="Example of a MapLibre GL JS map in React Native with flyto camera animation"
+    />
+  </p>
+</div>
+
+> [!IMPORTANT]
+> This project **is not** affiliated with, endorsed by, or sponsored by MapLibre.
+
+
+## Supported platforms
+
+| Platform | Status |
+|--------|--------|
+| iOS | ✅ |
+| Android | ✅ |
+| Web | ❌ |
+
+## Documentation
+
+📘 [**API Reference** – Complete TypeScript API documentation.](./docs/api/index.md)
+
+🧪 [**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)
+
+
+## Installation
+
+** TODO not available on npm yet **
+
+```sh
+npm install react-native-maplibre-gl-js
+```
+
+## Getting started
+
+The minimal setup to render a MapLibre map in React Native.
+
+```js
+import RNMapLibreGlJs from 'react-native-maplibre-gl-js';
+
+export const MyMapComponent = () => {
+  return (
+    <RNMapLibreGlJs.MapProvider>
+      <RNMapLibreGlJs.Map
+        options={{
+          style: 'https://tiles.openfreemap.org/styles/liberty',
+          center: [2.32, 48.86],
+          zoom: 12,
+        }}
+      />
+    </RNMapLibreGlJs.MapProvider>
+  )
+}
+```
+
+
+## Design rationale
+
+Explain why I decided to build a new React Native map library instead of using
+an existing one.
+
+### Existing React Native map solutions
+
+Considering tile-based maps, these are the maintained or supported libraries
+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.                                                                                                                                                  |
+
+### Architectural approach
+
+To address these drawbacks, two main approaches are possible (as far as I know):
+either build a library on top of native views using free mobile SDKs (such as
+MapLibre Native, meaning the effort should instead go into improving
+`maplibre-react-native`), or leverage existing web-based map libraries.
+
+The second option is far easier to build and maintain since it relies on a
+single rendering engine rather than separate iOS and Android SDKs. It also opens
+the door to fixing performance issues and limitations found in earlier
+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`. |
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+
+## Credits
+
+- [OpenFreeMap](https://openfreemap.org/) for providing free tile data in the
+  examples ❤️.
+
+
+## License
+
+MIT
+
+---

package/lib/module/communication/messages.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=messages.types.js.map

package/lib/module/communication/messages.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["communication/messages.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/communication/messages.utils.js

@@ -0,0 +1,27 @@
+"use strict";
+
+export const isWebObjectListenerOnRN = listener => {
+  if (!listener) {
+    return false;
+  }
+  return 'rnListener' in listener;
+};
+export const isWebObjectListenerOnObject = listener => {
+  if (!listener) {
+    return false;
+  }
+  return 'objectListener' in listener;
+};
+export const isWebObjectListenerOnMapLayer = listener => {
+  if (!listener) {
+    return false;
+  }
+  return 'layerListener' in listener;
+};
+export const isWebObjectListenerOnHTMLElement = listener => {
+  if (!listener) {
+    return false;
+  }
+  return 'elementListener' in listener;
+};
+//# sourceMappingURL=messages.utils.js.map

package/lib/module/communication/messages.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isWebObjectListenerOnRN","listener","isWebObjectListenerOnObject","isWebObjectListenerOnMapLayer","isWebObjectListenerOnHTMLElement"],"sourceRoot":"../../../src","sources":["communication/messages.utils.ts"],"mappings":";;AAOA,OAAO,MAAMA,uBAAuB,GAClCC,QAIoC,IACxB;EACZ,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,KAAK;EACd;EACA,OAAO,YAAY,IAAIA,QAAQ;AACjC,CAAC;AAED,OAAO,MAAMC,2BAA2B,GACtCD,QAIoC,IACxB;EACZ,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,KAAK;EACd;EACA,OAAO,gBAAgB,IAAIA,QAAQ;AACrC,CAAC;AAED,OAAO,MAAME,6BAA6B,GACxCF,QAIoC,IACxB;EACZ,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,KAAK;EACd;EACA,OAAO,eAAe,IAAIA,QAAQ;AACpC,CAAC;AAED,OAAO,MAAMG,gCAAgC,GAC3CH,QAIoC,IACxB;EACZ,IAAI,CAACA,QAAQ,EAAE;IACb,OAAO,KAAK;EACd;EACA,OAAO,iBAAiB,IAAIA,QAAQ;AACtC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+/**
+ * Public API of react-native-maplibre-gl-js.
+ * @module Public API
+ * @packageDocumentation
+ */
+
+import MapProvider from 'react-native-maplibre-gl-js/react-native/components/MapProvider/MapProvider';
+import Map from 'react-native-maplibre-gl-js/react-native/components/Map/Map';
+import Marker from 'react-native-maplibre-gl-js/react-native/components/Marker/Marker';
+import Popup from 'react-native-maplibre-gl-js/react-native/components/Popup/Popup';
+export { MapProvider, Map, Marker, Popup };
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MapProvider","Map","Marker","Popup"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAqBA,OAAOA,WAAW,MAAM,6EAA6E;AACrG,OAAOC,GAAG,MAAM,6DAA6D;AAC7E,OAAOC,MAAM,MAAM,mEAAmE;AACtF,OAAOC,KAAK,MAAM,iEAAiE;AAEnF,SAASH,WAAW,EAAEC,GAAG,EAAEC,MAAM,EAAEC,KAAK","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,11 @@
+"use strict";
+
+import createWebObjectAsComponent from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent';
+/**
+ * MapLibre Map view.
+ * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/ MapLibre GL JS docs}
+ * @group Components
+ */
+const Map = createWebObjectAsComponent('map');
+export default Map;
+//# sourceMappingURL=Map.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createWebObjectAsComponent","Map"],"sourceRoot":"../../../../../src","sources":["react-native/components/Map/Map.tsx"],"mappings":";;AAAA,OAAOA,0BAA0B,MAAM,wFAAwF;AAM/H;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.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=Map.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["react-native/components/Map/Map.types.ts"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { useMemo } from 'react';
+export const useStyles = () => {
+  return useMemo(() => StyleSheet.create({
+    container: {
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    },
+    webview: {
+      flex: 1,
+      backgroundColor: 'transparent'
+    }
+  }), []);
+};
+//# sourceMappingURL=MapProvider.hooks.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,118 @@
+"use strict";
+
+import { View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { WEBVIEW_STATIC_HTML } from 'react-native-maplibre-gl-js/web/generated/webview_static_html';
+import RNLogger from 'react-native-maplibre-gl-js/react-native/logger/rn-logger';
+import useMapAtoms from 'react-native-maplibre-gl-js/react-native/hooks/atoms/useMapAtoms';
+import { isWebObjectListenerOnHTMLElement, isWebObjectListenerOnMapLayer, isWebObjectListenerOnObject, isWebObjectListenerOnRN } from 'react-native-maplibre-gl-js/communication/messages.utils';
+import { useStyles } from 'react-native-maplibre-gl-js/react-native/components/MapProvider/MapProvider.hooks';
+import { useCallback, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Provide the main
+ * @param props -
+ * @group Components
+ */
+const MapProvider = ({
+  children
+}) => {
+  // States.
+  // - Global.
+  const {
+    setWebView,
+    setIsWebWorldReady,
+    isMapMountMessageReady,
+    flushMessages,
+    getWebObjectListeners,
+    resolveWebObjectPendingMethodResponse
+  } = 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]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(WebView, {
+      ref: setWebView,
+      style: styles.webview,
+      originWhitelist: ['*'],
+      javaScriptEnabled: true,
+      allowFileAccess: true,
+      domStorageEnabled: true,
+      scrollEnabled: false,
+      allowUniversalAccessFromFileURLs: true,
+      mixedContentMode: 'always',
+      onMessage: onMessage,
+      source: {
+        html: WEBVIEW_STATIC_HTML
+      }
+    }), children]
+  });
+};
+export default MapProvider;
+//# sourceMappingURL=MapProvider.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=MapProvider.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["react-native/components/MapProvider/MapProvider.types.ts"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+"use strict";
+
+import createWebObjectAsComponent from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent';
+/**
+ * MapLibre Marker view.
+ * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/ MapLibre GL JS docs}
+ * @group Components
+ */
+const Marker = createWebObjectAsComponent('marker');
+export default Marker;
+//# sourceMappingURL=Marker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createWebObjectAsComponent","Marker"],"sourceRoot":"../../../../../src","sources":["react-native/components/Marker/Marker.tsx"],"mappings":";;AAAA,OAAOA,0BAA0B,MAAM,wFAAwF;AAM/H;AACA;AACA;AACA;AACA;AACA,MAAMC,MAAM,GAAGD,0BAA0B,CAAyB,QAAQ,CAAC;AAE3E,eAAeC,MAAM","ignoreList":[]}

package/lib/module/react-native/components/Marker/Marker.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=Marker.types.js.map

package/lib/module/react-native/components/Marker/Marker.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["react-native/components/Marker/Marker.types.ts"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+import createWebObjectAsComponent from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent';
+
+/**
+ * MapLibre Popup view.
+ * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/ MapLibre GL JS docs}
+ * @group Components
+ */
+const Popup = createWebObjectAsComponent('popup');
+export default Popup;
+//# sourceMappingURL=Popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["createWebObjectAsComponent","Popup"],"sourceRoot":"../../../../../src","sources":["react-native/components/Popup/Popup.tsx"],"mappings":";;AAIA,OAAOA,0BAA0B,MAAM,wFAAwF;;AAE/H;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAK,GAAGD,0BAA0B,CAAuB,OAAO,CAAC;AAEvE,eAAeC,KAAK","ignoreList":[]}

package/lib/module/react-native/components/Popup/Popup.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=Popup.types.js.map

package/lib/module/react-native/components/Popup/Popup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["react-native/components/Popup/Popup.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/react-native/components-factory/createWebObjectAsComponent.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { forwardRef, useId } from 'react';
+import useWebObjectMountOnLaunch from 'react-native-maplibre-gl-js/react-native/components-factory/hooks/useWebObjectMountOnLaunch';
+import useWebObjectMethodsProxy from 'react-native-maplibre-gl-js/react-native/components-factory/hooks/useWebObjectMethodsProxy';
+const createWebObjectAsComponent = objectType => {
+  return /*#__PURE__*/forwardRef((props, ref) => {
+    // UID of the web object.
+    const id = useId();
+    // Mount the web object on launch.
+    useWebObjectMountOnLaunch(props, id, objectType);
+    // Forward a method call on the RN object to the web object.
+    useWebObjectMethodsProxy(ref, id);
+    // TODO needed?
+    //useWebObjectOptionsUpdater<Options, Listener>(
+    //  props, id, dispatchMessage
+    //)
+
+    return null;
+  });
+};
+export default createWebObjectAsComponent;
+//# sourceMappingURL=createWebObjectAsComponent.js.map

package/lib/module/react-native/components-factory/createWebObjectAsComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useId","useWebObjectMountOnLaunch","useWebObjectMethodsProxy","createWebObjectAsComponent","objectType","props","ref","id"],"sourceRoot":"../../../../src","sources":["react-native/components-factory/createWebObjectAsComponent.ts"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,KAAK,QAAQ,OAAO;AAOzC,OAAOC,yBAAyB,MAAM,6FAA6F;AACnI,OAAOC,wBAAwB,MAAM,4FAA4F;AAEjI,MAAMC,0BAA0B,GAI9BC,UAAyB,IACU;EACnC,oBAAOL,UAAU,CAAa,CAACM,KAAK,EAAEC,GAAG,KAAK;IAC5C;IACA,MAAMC,EAAE,GAAGP,KAAK,CAAC,CAAC;IAClB;IACAC,yBAAyB,CAAQI,KAAK,EAAEE,EAAE,EAAEH,UAAU,CAAC;IACvD;IACAF,wBAAwB,CAAMI,GAAG,EAAEC,EAAE,CAAC;IACtC;IACA;IACA;IACA;;IAEA,OAAO,IAAI;EACb,CAAC,CAAC;AACJ,CAAC;AAED,eAAeJ,0BAA0B","ignoreList":[]}

package/lib/module/react-native/components-factory/createWebObjectAsComponent.types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=createWebObjectAsComponent.types.js.map

package/lib/module/react-native/components-factory/createWebObjectAsComponent.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["react-native/components-factory/createWebObjectAsComponent.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/react-native/components-factory/hooks/useWebObjectMethodsProxy.js

@@ -0,0 +1,54 @@
+"use strict";
+
+import { useCallback, useImperativeHandle, useMemo } from 'react';
+import useMapAtoms from 'react-native-maplibre-gl-js/react-native/hooks/atoms/useMapAtoms';
+/**
+ * Create a proxy to call the methods of the corresponding web world object,
+ * then expose it as the given `ref`.
+ * @param ref - A React ref object that will be updated to point to the web
+ *  methods proxy.
+ * @param objectId - The ID of the web object that owns the method.
+ */
+export const useWebObjectMethodsProxy = (ref, objectId) => {
+  // States.
+  // - Global.
+  const {
+    dispatchMessage,
+    setWebObjectPendingMethodResponse
+  } = useMapAtoms();
+  const createProxy = useCallback(() => {
+    return new Proxy({}, {
+      get(_, propKey) {
+        if (propKey === 'getId') {
+          return () => objectId;
+        }
+        return (...args) => {
+          return new Promise(resolve => {
+            // TODO generator.
+            const requestId = Math.random().toString(36).slice(2, 11);
+            // Store the resolver as a pending response.
+            setWebObjectPendingMethodResponse({
+              requestId,
+              resolve
+            });
+            // Send the method call message to the WebView.
+            dispatchMessage({
+              type: 'webObjectMethodCall',
+              payload: {
+                requestId,
+                objectId,
+                method: propKey,
+                args
+              }
+            });
+          });
+        };
+      }
+    });
+  }, [objectId, dispatchMessage, setWebObjectPendingMethodResponse]);
+  const methodsProxy = useMemo(() => createProxy(), [createProxy]);
+  // Expose the web methods as the component methods.
+  useImperativeHandle(ref, () => methodsProxy);
+};
+export default useWebObjectMethodsProxy;
+//# sourceMappingURL=useWebObjectMethodsProxy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useImperativeHandle","useMemo","useMapAtoms","useWebObjectMethodsProxy","ref","objectId","dispatchMessage","setWebObjectPendingMethodResponse","createProxy","Proxy","get","_","propKey","args","Promise","resolve","requestId","Math","random","toString","slice","type","payload","method","methodsProxy"],"sourceRoot":"../../../../../src","sources":["react-native/components-factory/hooks/useWebObjectMethodsProxy.ts"],"mappings":";;AAAA,SAEEA,WAAW,EACXC,mBAAmB,EACnBC,OAAO,QACF,OAAO;AACd,OAAOC,WAAW,MAAM,kEAAkE;AAG1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAGA,CACtCC,GAAsB,EACtBC,QAAgB,KACb;EACH;EACA;EACA,MAAM;IAAEC,eAAe;IAAEC;EAAkC,CAAC,GAAGL,WAAW,CAAC,CAAC;EAE5E,MAAMM,WAAW,GAAGT,WAAW,CAAC,MAAW;IACzC,OAAO,IAAIU,KAAK,CACd,CAAC,CAAC,EACF;MACEC,GAAGA,CAACC,CAAC,EAAEC,OAAO,EAAE;QACd,IAAIA,OAAO,KAAK,OAAO,EAAE;UACvB,OAAO,MAAMP,QAAQ;QACvB;QACA,OAAO,CAAC,GAAGQ,IAAW,KAAK;UACzB,OAAO,IAAIC,OAAO,CAAEC,OAAO,IAAK;YAC9B;YACA,MAAMC,SAAS,GAAGC,IAAI,CAACC,MAAM,CAAC,CAAC,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;YACzD;YACAb,iCAAiC,CAAC;cAAES,SAAS;cAAED;YAAQ,CAAC,CAAC;YACzD;YACAT,eAAe,CAAC;cACde,IAAI,EAAE,qBAAqB;cAC3BC,OAAO,EAAE;gBACPN,SAAS;gBACTX,QAAQ;gBACRkB,MAAM,EAAEX,OAAiB;gBACzBC;cACF;YACF,CAAC,CAAC;UACJ,CAAC,CAAC;QACJ,CAAC;MACH;IACF,CACF,CAAC;EACH,CAAC,EAAE,CAACR,QAAQ,EAAEC,eAAe,EAAEC,iCAAiC,CAAC,CAAC;EAElE,MAAMiB,YAAY,GAAGvB,OAAO,CAAC,MAAMO,WAAW,CAAC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAChE;EACAR,mBAAmB,CAACI,GAAG,EAAE,MAAMoB,YAAY,CAAC;AAC9C,CAAC;AAED,eAAerB,wBAAwB","ignoreList":[]}

package/lib/module/react-native/components-factory/hooks/useWebObjectMountOnLaunch.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import { useCallback, useEffect, useRef } from 'react';
+import useMapAtoms from 'react-native-maplibre-gl-js/react-native/hooks/atoms/useMapAtoms';
+/**
+ * Mount the web object once the React Native one is mounted.
+ * @param props - The RN object props.
+ * @param objectId - The ID of the web object that owns the method.
+ * @param objectType - The type of the associated web object.
+ */
+const useWebObjectMountOnLaunch = (props, objectId, objectType) => {
+  // Refs.
+  const isMounted = useRef(false);
+  // States.
+  // - Global.
+  const {
+    isWebWorldReady,
+    dispatchMessage,
+    setWebObjectListeners,
+    deleteWebObjectListeners
+  } = useMapAtoms();
+  const mount = useCallback(() => {
+    // Mount the component as a web object on the web world.
+    dispatchMessage({
+      type: `webObjectMount`,
+      payload: {
+        objectId: objectId,
+        objectType,
+        options: props.options ?? {},
+        listeners: props.listeners ?? {}
+      }
+    });
+    // Register listeners on event from the web world.
+    setWebObjectListeners({
+      objectId: objectId,
+      listeners: props.listeners ?? {}
+    });
+    isMounted.current = true;
+  }, [objectId, objectType, props.options, props.listeners, dispatchMessage, setWebObjectListeners]);
+  const unmount = useCallback(() => {
+    dispatchMessage({
+      type: `webObjectUnmount`,
+      payload: {
+        objectId
+      }
+    });
+    deleteWebObjectListeners({
+      objectId
+    });
+    isMounted.current = false;
+  }, [objectId, dispatchMessage, deleteWebObjectListeners]);
+
+  // On mount/unmount update the web object.
+  useEffect(() => {
+    if (!isWebWorldReady) {
+      return;
+    }
+    if (!isMounted.current) {
+      mount();
+    }
+    // TODO verify if we unmount here? it sure that it must not be in this
+    //  use effect, otherwise on start if mount then unmount then mount, but
+    //  we may have to unmount in another effect
+    //return unmount
+  }, [objectId, isWebWorldReady, dispatchMessage, props, unmount, mount]);
+};
+export default useWebObjectMountOnLaunch;
+//# sourceMappingURL=useWebObjectMountOnLaunch.js.map