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

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

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

@@ -1,56 +0,0 @@
-import {
-  type Event,
-  type Marker as MapLibreMarker,
-  type MarkerOptions as MapLibreMarkerOptions,
-} from 'maplibre-gl'
-import type { HTMLElementDescriptor } from 'react-native-maplibre-gl-js/communication/messages.types'
-import type {
-  WebObjectMethodsInferred,
-  WebObjectOptionsInferred,
-  WebObjectListenerOnHTMLElement,
-  WebObjectListenerOnObject,
-  WebObjectListenerOnRN,
-  WebObjectProps,
-  WebObjectRef,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-/**
- * TODO
- * @group Types
- */
-export type MarkerRef = WebObjectRef<MarkerMethods>
-
-/**
- * TODO
- * @group Types
- */
-export type MarkerProps = WebObjectProps<MarkerOptions, MarkerListeners>
-
-type MarkerMethods = WebObjectMethodsInferred<
-  MapLibreMarker,
-  {
-    addTo: () => Promise<void>
-    setEventedParent: (parentId: string) => Promise<void>
-    setPopup: (popupId: string) => Promise<void>
-  }
->
-
-type MarkerOptions = WebObjectOptionsInferred<
-  MapLibreMarkerOptions,
-  {
-    element?: HTMLElementDescriptor
-  }
->
-
-type MarkerListeners = {
-  // React native events.
-  mount: WebObjectListenerOnRN<void>
-  unmount: WebObjectListenerOnRN<void>
-  // MapLibre GL JS events.
-  // https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker/#events
-  dragstart: WebObjectListenerOnObject<Event>
-  drag: WebObjectListenerOnObject<Event>
-  dragend: WebObjectListenerOnObject<Event>
-  // HTMLElement events.
-  click: WebObjectListenerOnHTMLElement<MouseEvent>
-}

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

@@ -1,14 +0,0 @@
-import type {
-  PopupProps,
-  PopupRef,
-} from 'react-native-maplibre-gl-js/react-native/components/Popup/Popup.types'
-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<PopupRef, PopupProps>('popup')
-
-export default Popup

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

@@ -1,43 +0,0 @@
-import {
-  type Event,
-  type Popup as MapLibrePopup,
-  type PopupOptions as MapLibrePopupOptions,
-} from 'maplibre-gl'
-import type {
-  WebObjectMethodsInferred,
-  WebObjectOptionsInferred,
-  WebObjectListenerOnObject,
-  WebObjectListenerOnRN,
-  WebObjectProps,
-  WebObjectRef,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-/**
- * TODO
- * @group Types
- */
-export type PopupRef = WebObjectRef<PopupMethods>
-
-/**
- * TODO
- * @group Types
- */
-export type PopupProps = WebObjectProps<PopUpOptions, PopupListeners>
-
-type PopupMethods = WebObjectMethodsInferred<
-  MapLibrePopup,
-  {
-    addTo: () => Promise<void>
-    setEventedParent: (parentId: string) => Promise<void>
-  }
->
-type PopUpOptions = WebObjectOptionsInferred<MapLibrePopupOptions>
-type PopupListeners = {
-  // React native events.
-  mount: WebObjectListenerOnRN<void>
-  unmount: WebObjectListenerOnRN<void>
-  // MapLibre GL JS events.
-  // https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup/#events
-  open: WebObjectListenerOnObject<Event>
-  close: WebObjectListenerOnObject<Event>
-}

package/src/react-native/components-factory/createWebObjectAsComponent.ts

@@ -1,33 +0,0 @@
-import { forwardRef, useId } from 'react'
-import type { WebObjectType } from 'react-native-maplibre-gl-js/communication/messages.types'
-import type {
-  WebObjectProps,
-  WebObjectComponent,
-  WebObjectRef,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-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 = <
-  Ref extends WebObjectRef<any>,
-  Props extends WebObjectProps<any, any>,
->(
-  objectType: WebObjectType,
-): WebObjectComponent<Ref, Props> => {
-  return forwardRef<Ref, Props>((props, ref) => {
-    // UID of the web object.
-    const id = useId()
-    // Mount the web object on launch.
-    useWebObjectMountOnLaunch<Props>(props, id, objectType)
-    // Forward a method call on the RN object to the web object.
-    useWebObjectMethodsProxy<Ref>(ref, id)
-    // TODO needed?
-    //useWebObjectOptionsUpdater<Options, Listener>(
-    //  props, id, dispatchMessage
-    //)
-
-    return null
-  })
-}
-
-export default createWebObjectAsComponent

package/src/react-native/components-factory/createWebObjectAsComponent.types.ts

@@ -1,176 +0,0 @@
-import {
-  type ForwardRefExoticComponent,
-  type PropsWithoutRef,
-  type RefAttributes,
-} from 'react'
-
-/**
- * React Native component that corresponds and perform actions with a web object
- * in the web world.
- * @group Types
- */
-export type WebObjectComponent<
-  Ref extends WebObjectRef<any>,
-  Props extends WebObjectProps<any, any>,
-> = ForwardRefExoticComponent<PropsWithoutRef<Props> & RefAttributes<Ref>>
-
-/**
- * React Native ref of a component (corresponds to the web object methods in the
- * web world).
- * @group Types
- */
-export type WebObjectRef<Methods extends WebObjectMethodsInferred<object>> =
-  Omit<Methods, 0>
-
-/**
- * React Native props of a component (used to instantiate the web object in the
- * web world).
- * @group Types
- */
-export type WebObjectProps<
-  Options extends WebObjectOptionsInferred<any>,
-  Listeners extends WebObjectListeners,
-> = {
-  /**
-   * The MapLibreGL JS options used to mount the web object.
-   */
-  options?: Partial<Options>
-  /**
-   * The listeners to be set on the web object events.
-   */
-  listeners?: Partial<Listeners>
-}
-
-/**
- * Listeners that can be set by a component on the corresponding web object
- * events.
- * Event can be emitted by the web object itself, its HTML element, or be
- * specific to a map layer (if the object is the map).
- * By default, the mount/unmount events are available (they are custom, added
- * on top of the MapLibre GL JS events).
- *
- * Note: sadly, listeners cannot be inferred as Methods and Options, therefore,
- * when adding a new listener, one must ensure that the listeners correspond to
- * the real web object events.
- * @group Types
- */
-export type WebObjectListeners = WebObjectListenersDefault &
-  WebObjectListenersWeb
-
-/**
- * Custom events introduced by this library, executed once the web object is
- * (un)mounted to the map.
- * @group Types
- */
-export type WebObjectListenersDefault = {
-  mount?: WebObjectListenerOnRN<void>
-  unmount?: WebObjectListenerOnRN<void>
-}
-
-/**
- * MapLibre GL JS events as defined in the official documentation of the object.
- * @group Types
- */
-export type WebObjectListenersWeb = {
-  [eventName: string]:
-    | WebObjectListenerOnRN<void>
-    | WebObjectListenerOnObject<any>
-    | WebObjectListenerOnMapLayer<any>
-    | WebObjectListenerOnHTMLElement<any>
-}
-
-export type Listener<Event> = (event: Event) => void
-
-/**
- * A listener on an event introduced by the React Native usage.
- * @group Types
- */
-export type WebObjectListenerOnRN<Event> = {
-  rnListener: Listener<Event>
-}
-
-/**
- * A listener to be set on an event emitted by the web object.
- * @group Types
- */
-export type WebObjectListenerOnObject<Event> = {
-  objectListener: Listener<Event>
-}
-
-/**
- * A listener to be set on an event emitted by the web object, but specific to
- * a map layer.
- * @group Types
- */
-export type WebObjectListenerOnMapLayer<Event> = {
-  layerListener: Listener<Event>
-  layerId: string
-}
-
-/**
- * A listener to be set on an event emitted by the HTMLElement associated with
- * the web object.
- * @group Types
- */
-export type WebObjectListenerOnHTMLElement<Event> = {
-  elementListener: Listener<Event>
-}
-
-/**
- * Options that are used to instantiate a web object.
- * Filter out those options that cannot be set from the RN world and replace
- * them with the given replacements (e.g., HTMLElement that cannot be
- * instantiated in RN is replaced by HTMLElementDescriptor). Also, remove the
- * ones that should not be specified and used.
- * @group Types
- */
-export type WebObjectOptionsInferred<
-  WebObjectOptions,
-  ReplacedOptions extends Partial<Record<keyof WebObjectOptions, any>> = {},
-  RemovedOptions extends Partial<keyof WebObjectOptions> = never,
-> = Omit<
-  Omit<WebObjectOptions, keyof ReplacedOptions> & ReplacedOptions,
-  RemovedOptions
->
-
-/**
- * Methods that are used to call web object methods from the RN world.
- * Filter out those methods that cannot be used from the RN world and replace
- * them with the given replacements (e.g., Marker.setPopup cannot be used
- * because we cannot instantiate a web Popup object in RN, therefore, we
- * override it to allow the usage of a React Native Popup object).
- * The goal of this type is to provide all the web methods of the object
- * within the RN world as a 1:1 mapping.
- * All methods are transformed into async ones that return a Promise of the
- * original return type.
- * To be used with the associated proxy to make the call to the methods
- * effective.
- * @group Types
- */
-export type WebObjectMethodsInferred<
-  WebObject,
-  ReplacedMethods extends {
-    [K in keyof OnlyMethods<WebObject>]?: (...args: any[]) => any
-  } = {},
-> = Merge<
-  AllMethodsToAsyncMethods<Merge<OnlyMethods<WebObject>, ReplacedMethods>>,
-  { getId: () => string }
->
-
-type OnlyMethods<T> = {
-  [K in keyof T as T[K] extends (...args: any[]) => any ? K : never]: T[K]
-}
-
-type AllMethodsToAsyncMethods<T> = {
-  [K in keyof T]: T[K] extends (...args: infer A) => infer R
-    ? (...args: A) => Promise<R>
-    : never
-}
-
-type Merge<M, N> = {
-  [K in keyof M | keyof N]: K extends keyof N
-    ? N[K]
-    : K extends keyof M
-      ? M[K]
-      : never
-}

package/src/react-native/components-factory/hooks/useWebObjectMethodsProxy.ts

@@ -1,61 +0,0 @@
-import {
-  type ForwardedRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-} from 'react'
-import useMapAtoms from 'react-native-maplibre-gl-js/react-native/hooks/atoms/useMapAtoms'
-import type { WebObjectRef } from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-/**
- * 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 extends WebObjectRef<any>>(
-  ref: ForwardedRef<Ref>,
-  objectId: string,
-) => {
-  // States.
-  // - Global.
-  const { dispatchMessage, setWebObjectPendingMethodResponse } = useMapAtoms()
-
-  const createProxy = useCallback((): Ref => {
-    return new Proxy(
-      {},
-      {
-        get(_, propKey) {
-          if (propKey === 'getId') {
-            return () => objectId
-          }
-          return (...args: any[]) => {
-            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 as string,
-                  args,
-                },
-              })
-            })
-          }
-        },
-      },
-    ) as Ref
-  }, [objectId, dispatchMessage, setWebObjectPendingMethodResponse])
-
-  const methodsProxy = useMemo(() => createProxy(), [createProxy])
-  // Expose the web methods as the component methods.
-  useImperativeHandle(ref, () => methodsProxy)
-}
-
-export default useWebObjectMethodsProxy

package/src/react-native/components-factory/hooks/useWebObjectMountOnLaunch.ts

@@ -1,79 +0,0 @@
-import { type PropsWithoutRef, useCallback, useEffect, useRef } from 'react'
-import useMapAtoms from 'react-native-maplibre-gl-js/react-native/hooks/atoms/useMapAtoms'
-import type { WebObjectType } from 'react-native-maplibre-gl-js/communication/messages.types'
-import type { WebObjectProps } from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-/**
- * 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 extends WebObjectProps<any, any>>(
-  props: PropsWithoutRef<Props>,
-  objectId: string,
-  objectType: WebObjectType,
-) => {
-  // Refs.
-  const isMounted = useRef<boolean>(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

package/src/react-native/components-factory/hooks/useWebObjectOptionsUpdater.ts

@@ -1,29 +0,0 @@
-import { useEffect } from 'react'
-import type { WebObjectType } from 'react-native-maplibre-gl-js/communication/messages.types'
-import type {
-  WebObjectOptionsInferred,
-  WebObjectProps,
-  WebObjectListeners,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-export const useWebObjectOptionsUpdater = <
-  Options extends WebObjectOptionsInferred<WebObjectType>,
-  Listeners extends WebObjectListeners,
->(
-  props: WebObjectProps<Options, Listeners>,
-  id: string,
-  dispatchMessage: (msg: any) => void,
-) => {
-  // Refs.
-  //const previousProps = useRef<Record<string, any>>({})
-
-  useEffect(() => {
-    // TODO compare previous and new props and update only if new.
-    dispatchMessage({
-      type: 'webObjectOptionsUpdate',
-      payload: { id, options: props.options },
-    })
-  }, [id, dispatchMessage, props])
-}
-
-export default useWebObjectOptionsUpdater