react-native-maplibre-gl-js 1.0.0 → 1.0.1

package/README.md

@@ -69,21 +69,23 @@ npm install react-native-maplibre-gl-js
 The minimal setup to render a MapLibre map in React Native.
 
 ```js
-import RNMapLibreGlJs from 'react-native-maplibre-gl-js';
+import { MapProvider, Map } from 'react-native-maplibre-gl-js';
 
-export const MyMapComponent = () => {
+const App = () => {
   return (
-    <RNMapLibreGlJs.MapProvider>
-      <RNMapLibreGlJs.Map
+    <MapProvider>
+      <Map
         options={{
           style: 'https://tiles.openfreemap.org/styles/liberty',
           center: [2.32, 48.86],
           zoom: 12,
         }}
       />
-    </RNMapLibreGlJs.MapProvider>
+    </MapProvider>
   )
 }
+
+export default App
 ```
 
 

package/package.json

@@ -1,25 +1,34 @@
 {
   "name": "react-native-maplibre-gl-js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "MapLibre GL JS for React Native",
+  "files": [
+    "lib",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
+    "./react-native/*": {
+      "types": "./lib/typescript/src/react-native/*",
+      "default": "./lib/module/react-native/*"
+    },
+    "./web/*": {
+      "types": "./lib/typescript/src/web/*",
+      "default": "./lib/module/web/*"
+    },
+    "./communication/*": {
+      "types": "./lib/typescript/src/communication/*",
+      "default": "./lib/module/communication/*"
+    },
     "./package.json": "./package.json"
   },
-  "files": [
-    "src",
-    "lib",
-    "!**/.*",
-    "!**/*tests*",
-    "!**/*fixtures*",
-    "!**/*mocks*"
-  ],
   "scripts": {
     "build:webview": "node scripts/build.js",
     "example": "yarn workspace react-native-maplibre-gl-js-example",
@@ -102,10 +111,6 @@
             {
               "path": "CHANGELOG.md",
               "label": "Changelog"
-            },
-            {
-              "path": "*.tgz",
-              "label": "NPM package (.tgz)"
             }
           ]
         }

package/src/communication/messages.types.ts

@@ -1,121 +0,0 @@
-import type {
-  Map as MapLibreMap,
-  Marker as MapLibreMarker,
-  Popup as MapLibrePopup,
-} from 'maplibre-gl'
-import type {
-  WebObjectOptionsInferred,
-  WebObjectListeners,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-/**
- * The web objects that are supported by this library.
- * A string version to be used as an identifier on the RN side (cannot use
- * MapLibre classes directly).
- * Must correspond to `WebObjectClass`.
- */
-export type WebObjectType = 'map' | 'marker' | 'popup'
-
-/**
- * The web objects that are supported by this library.
- * A class version to be used on the web side.
- * Must correspond to `WebObjectType`.
- */
-export type WebObjectClass = MapLibreMap | MapLibreMarker | MapLibrePopup
-
-/**
- * UID of a web object in the web world.
- */
-export type WebObjectId = string
-
-/**
- * UID of a request for a web object method to be executed.
- */
-export type WebObjectMethodCallRequestId = string
-
-export type MessageFromRNToWeb =
-  /**
-   * TODO Messages about a MapLibre object.
-   */
-  | {
-      type: 'webObjectMount'
-      payload: {
-        objectId: WebObjectId
-        objectType: WebObjectType
-        options: WebObjectOptionsInferred<any>
-        listeners: WebObjectListeners
-      }
-    }
-  | {
-      type: 'webObjectUnmount'
-      payload: {
-        objectId: WebObjectId
-      }
-    }
-  | {
-      type: 'webObjectMethodCall'
-      payload: {
-        requestId: WebObjectMethodCallRequestId
-        objectId: WebObjectId
-        method: string
-        args: any[]
-      }
-    }
-  | {
-      type: 'webObjectOptionsUpdate'
-      payload: {
-        objectId: WebObjectId
-        options: WebObjectOptionsInferred<any>
-      }
-    }
-
-export type MessageFromWebToRN =
-  /**
-   * Anything that should be logged in the React Native world.
-   */
-  | {
-      type: 'console'
-      payload: {
-        level: 'debug' | 'info' | 'error'
-        args: [string, ...any[]]
-      }
-    }
-  /**
-   * Notify the React Native world that the web one is ready.
-   */
-  | {
-      type: 'ready'
-    }
-  /**
-   * Event issued by a web object, eligible to be listened to from the RN world.
-   */
-  | {
-      type: 'webObjectListenerEvent'
-      payload: {
-        objectId: WebObjectId
-        eventName: keyof WebObjectListeners
-        event?: any
-      }
-    }
-  /**
-   * Response to a call to a method of a web object.
-   */
-  | {
-      type: 'webObjectMethodResponse'
-      payload: {
-        requestId: WebObjectMethodCallRequestId
-        result: any
-      }
-    }
-
-/**
- * To replace HTMLElement instances that cannot be created in React Native.
- */
-export type HTMLElementDescriptor = {
-  tagName?: string
-  className?: string
-  attributes?: Record<string, string>
-  style?: Record<string, string>
-  dataset?: Record<string, string>
-  innerHTML?: string
-}

package/src/communication/messages.utils.ts

@@ -1,58 +0,0 @@
-import type {
-  WebObjectListenerOnHTMLElement,
-  WebObjectListenerOnMapLayer,
-  WebObjectListenerOnObject,
-  WebObjectListenerOnRN,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-export const isWebObjectListenerOnRN = (
-  listener?:
-    | WebObjectListenerOnRN<any>
-    | WebObjectListenerOnObject<any>
-    | WebObjectListenerOnHTMLElement<any>
-    | WebObjectListenerOnMapLayer<any>,
-): boolean => {
-  if (!listener) {
-    return false
-  }
-  return 'rnListener' in listener
-}
-
-export const isWebObjectListenerOnObject = (
-  listener?:
-    | WebObjectListenerOnRN<any>
-    | WebObjectListenerOnObject<any>
-    | WebObjectListenerOnHTMLElement<any>
-    | WebObjectListenerOnMapLayer<any>,
-): boolean => {
-  if (!listener) {
-    return false
-  }
-  return 'objectListener' in listener
-}
-
-export const isWebObjectListenerOnMapLayer = (
-  listener?:
-    | WebObjectListenerOnRN<any>
-    | WebObjectListenerOnObject<any>
-    | WebObjectListenerOnHTMLElement<any>
-    | WebObjectListenerOnMapLayer<any>,
-): boolean => {
-  if (!listener) {
-    return false
-  }
-  return 'layerListener' in listener
-}
-
-export const isWebObjectListenerOnHTMLElement = (
-  listener?:
-    | WebObjectListenerOnRN<any>
-    | WebObjectListenerOnObject<any>
-    | WebObjectListenerOnHTMLElement<any>
-    | WebObjectListenerOnMapLayer<any>,
-): boolean => {
-  if (!listener) {
-    return false
-  }
-  return 'elementListener' in listener
-}

package/src/index.ts

@@ -1,31 +0,0 @@
-/**
- * Public API of react-native-maplibre-gl-js.
- * @module Public API
- * @packageDocumentation
- */
-
-import type { MapProviderProps } from 'react-native-maplibre-gl-js/react-native/components/MapProvider/MapProvider.types'
-import type {
-  MapRef,
-  MapProps,
-} from 'react-native-maplibre-gl-js/react-native/components/Map/Map.types'
-import type {
-  MarkerRef,
-  MarkerProps,
-} from 'react-native-maplibre-gl-js/react-native/components/Marker/Marker.types'
-import type {
-  PopupRef,
-  PopupProps,
-} from 'react-native-maplibre-gl-js/react-native/components/Popup/Popup.types'
-
-export type { MapProviderProps }
-export type { MapRef, MapProps }
-export type { MarkerRef, MarkerProps }
-export type { PopupRef, PopupProps }
-
-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 }

package/src/react-native/components/Map/Map.tsx

@@ -1,14 +0,0 @@
-import createWebObjectAsComponent from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent'
-import type {
-  MapRef,
-  MapProps,
-} from 'react-native-maplibre-gl-js/react-native/components/Map/Map.types'
-
-/**
- * MapLibre Map view.
- * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/ MapLibre GL JS docs}
- * @group Components
- */
-const Map = createWebObjectAsComponent<MapRef, MapProps>('map')
-
-export default Map

package/src/react-native/components/Map/Map.types.ts

@@ -1,149 +0,0 @@
-import {
-  type Map as MapLibreMap,
-  type MapContextEvent,
-  type MapLayerMouseEvent,
-  type MapLayerTouchEvent,
-  type MapLibreEvent,
-  type MapLibreZoomEvent,
-  type MapOptions as MapLibreMapOptions,
-  MapTouchEvent,
-  MapWheelEvent,
-  ErrorEvent,
-  type MapDataEvent,
-  type MapStyleDataEvent,
-  type MapSourceDataEvent,
-  type MapStyleImageMissingEvent,
-} from 'maplibre-gl'
-import type {
-  WebObjectMethodsInferred,
-  WebObjectOptionsInferred,
-  WebObjectListenerOnMapLayer,
-  WebObjectListenerOnObject,
-  WebObjectListenerOnRN,
-  WebObjectProps,
-  WebObjectRef,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-/**
- * A Map component ref.
- * @group Types
- */
-export type MapRef = WebObjectRef<MapMethods>
-
-/**
- * A Map component props.
- * @group Types
- */
-export type MapProps = WebObjectProps<MapOptions, MapListeners>
-
-type MapMethods = WebObjectMethodsInferred<MapLibreMap>
-type MapOptions = WebObjectOptionsInferred<MapLibreMapOptions, {}, 'container'>
-type MapListeners = {
-  // React native events.
-  mount: WebObjectListenerOnRN<void>
-  unmount: WebObjectListenerOnRN<void>
-  // MapLibre GL JS events.
-  // https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#on
-  mousedown:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  mouseup:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  mouseover:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  mouseout:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  mousemove:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  mouseenter: WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  mouseleave: WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  click:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  dblclick:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  contextmenu:
-    | WebObjectListenerOnObject<MapLayerMouseEvent>
-    | WebObjectListenerOnMapLayer<MapLayerMouseEvent>
-  touchstart:
-    | WebObjectListenerOnObject<MapLayerTouchEvent>
-    | WebObjectListenerOnMapLayer<MapLayerTouchEvent>
-  touchend:
-    | WebObjectListenerOnObject<MapLayerTouchEvent>
-    | WebObjectListenerOnMapLayer<MapLayerTouchEvent>
-  touchcancel:
-    | WebObjectListenerOnObject<MapLayerTouchEvent>
-    | WebObjectListenerOnMapLayer<MapLayerTouchEvent>
-  wheel: WebObjectListenerOnObject<MapWheelEvent>
-  resize: WebObjectListenerOnObject<MapLibreEvent>
-  remove: WebObjectListenerOnObject<MapLibreEvent>
-  touchmove: WebObjectListenerOnObject<MapTouchEvent>
-  movestart: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>
-  >
-  move: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>
-  >
-  moveend: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>
-  >
-  dragstart: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  drag: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  dragend: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  zoomstart: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>
-  >
-  zoom: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>
-  >
-  zoomend: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined>
-  >
-  rotatestart: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  rotate: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  rotateend: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  pitchstart: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  pitch: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  pitchend: WebObjectListenerOnObject<
-    MapLibreEvent<MouseEvent | TouchEvent | undefined>
-  >
-  boxzoomstart: WebObjectListenerOnObject<MapLibreZoomEvent>
-  boxzoomend: WebObjectListenerOnObject<MapLibreZoomEvent>
-  boxzoomcancel: WebObjectListenerOnObject<MapLibreZoomEvent>
-  webglcontextlost: WebObjectListenerOnObject<MapContextEvent>
-  webglcontextrestored: WebObjectListenerOnObject<MapContextEvent>
-  load: WebObjectListenerOnObject<MapLibreEvent>
-  render: WebObjectListenerOnObject<MapLibreEvent>
-  idle: WebObjectListenerOnObject<MapLibreEvent>
-  error: WebObjectListenerOnObject<ErrorEvent>
-  data: WebObjectListenerOnObject<MapDataEvent>
-  styledata: WebObjectListenerOnObject<MapStyleDataEvent>
-  sourcedata: WebObjectListenerOnObject<MapSourceDataEvent>
-  dataloading: WebObjectListenerOnObject<MapDataEvent>
-  styledataloading: WebObjectListenerOnObject<MapStyleDataEvent>
-  sourcedataloading: WebObjectListenerOnObject<MapSourceDataEvent>
-  styleimagemissing: WebObjectListenerOnObject<MapStyleImageMissingEvent>
-  dataabort: WebObjectListenerOnObject<MapDataEvent>
-  sourcedataabort: WebObjectListenerOnObject<MapSourceDataEvent>
-}

package/src/react-native/components/MapProvider/MapProvider.hooks.ts

@@ -1,13 +0,0 @@
-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' },
-      }),
-    [],
-  )
-}

package/src/react-native/components/MapProvider/MapProvider.tsx

@@ -1,139 +0,0 @@
-import { View } from 'react-native'
-import { WebView, type WebViewMessageEvent } from 'react-native-webview'
-import { WEBVIEW_STATIC_HTML } from 'react-native-maplibre-gl-js/web/generated/webview_static_html'
-import type { MessageFromWebToRN } from 'react-native-maplibre-gl-js/communication/messages.types'
-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 type {
-  WebObjectListenerOnHTMLElement,
-  WebObjectListenerOnMapLayer,
-  WebObjectListenerOnObject,
-  WebObjectListenerOnRN,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-import type { MapProviderProps } from 'react-native-maplibre-gl-js/react-native/components/MapProvider/MapProvider.types'
-
-/**
- * Provide the main
- * @param props -
- * @group Components
- */
-const MapProvider = ({ children }: MapProviderProps) => {
-  // 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: WebViewMessageEvent) {
-      try {
-        RNLogger.debug('RN', handleMessage.name, event?.nativeEvent?.data)
-        const message = JSON.parse(event.nativeEvent.data) as MessageFromWebToRN
-
-        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 as WebObjectListenerOnRN<any>).rnListener(
-                message.payload.event,
-              )
-            }
-            if (isWebObjectListenerOnObject(listener)) {
-              ;(listener as WebObjectListenerOnObject<any>).objectListener(
-                message.payload.event,
-              )
-            }
-            if (isWebObjectListenerOnMapLayer(listener)) {
-              ;(listener as WebObjectListenerOnMapLayer<any>).layerListener(
-                message.payload.event,
-              )
-            }
-            if (isWebObjectListenerOnHTMLElement(listener)) {
-              ;(
-                listener as WebObjectListenerOnHTMLElement<any>
-              ).elementListener(message.payload.event)
-            }
-            break
-          }
-          case 'webObjectMethodResponse': {
-            resolveWebObjectPendingMethodResponse({
-              requestId: message.payload.requestId,
-              result: message.payload.result,
-            })
-            break
-          }
-        }
-      } catch (error: any) {
-        RNLogger.error('RN', handleMessage.name, error.message)
-      }
-    },
-    [
-      setIsWebWorldReady,
-      getWebObjectListeners,
-      resolveWebObjectPendingMethodResponse,
-    ],
-  )
-
-  return (
-    <View style={styles.container}>
-      <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}
-    </View>
-  )
-}
-
-export default MapProvider

package/src/react-native/components/MapProvider/MapProvider.types.ts

@@ -1,12 +0,0 @@
-import type { ReactNode } from 'react'
-
-/**
- * TODO
- * @group Types
- */
-export type MapProviderProps = {
-  /**
-   * The map elements (e.g., Map) as direct children.
-   */
-  children?: ReactNode
-}

package/src/react-native/components/Marker/Marker.tsx

@@ -1,14 +0,0 @@
-import createWebObjectAsComponent from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent'
-import type {
-  MarkerProps,
-  MarkerRef,
-} from 'react-native-maplibre-gl-js/react-native/components/Marker/Marker.types'
-
-/**
- * MapLibre Marker view.
- * @see {@link https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/ MapLibre GL JS docs}
- * @group Components
- */
-const Marker = createWebObjectAsComponent<MarkerRef, MarkerProps>('marker')
-
-export default Marker