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

package/src/react-native/hooks/atoms/useMapAtoms.ts

@@ -1,261 +0,0 @@
-import { atom, useSetAtom } from 'jotai'
-import type { WebView } from 'react-native-webview'
-import { useAtom } from 'jotai'
-import type {
-  MessageFromRNToWeb,
-  WebObjectId,
-} from 'react-native-maplibre-gl-js/communication/messages.types'
-import { stableStringify } from 'react-native-maplibre-gl-js/react-native/hooks/atoms/useMapAtoms.utils'
-import type { WebObjectListeners } from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-/**
- * The WebView used to render MapLibre GL JS views (the web world).
- */
-const webViewAtom = atom<WebView | null>(null)
-
-/**
- * True if the WebView is ready to be used.
- */
-const isWebWorldReadyAtom = atom(false)
-
-/**
- * True if the mount message of the map component is ready to be sent to the web
- * world.
- */
-const isMapMountMessageReadyAtom = atom(false)
-
-/**
- * True if the mount message of the map component was sent to the web world.
- */
-const isMapMountMessageDispatchedAtom = atom(false)
-
-/**
- * The queue of messages to be sent to the web world.
- */
-const messageQueueAtom = atom<MessageFromRNToWeb[]>([])
-
-/**
- * When a method is invoked on a RN object, the call is forwarded to the native
- * method within the web world. The pending responses are stored within this
- * Map.
- */
-const webObjectPendingMethodResponses = atom<
-  Map<string, (result: any) => void>
->(new Map())
-
-/**
- * The callbacks registered to react to web objects events.
- */
-export const webObjectsListenersAtom = atom<Map<string, WebObjectListeners>>(
-  new Map(),
-)
-
-/**
- * Enqueue message to be sent to the web world.
- */
-const enqueueMessageAtom = atom(
-  null,
-  (get, set, message: MessageFromRNToWeb) => {
-    const q = get(messageQueueAtom)
-    set(messageQueueAtom, [...q, message])
-  },
-)
-
-/**
- * Dispatch the given message to the web world immediately (if possible),
- * otherwise queue it.
- */
-const dispatchMessageAtom = atom(
-  null,
-  (get, set, message: MessageFromRNToWeb) => {
-    const isWebWorldReady = get(isWebWorldReadyAtom)
-    const isMapMountMessageReady = get(isMapMountMessageReadyAtom)
-    const isMapMountMessageDispatched = get(isMapMountMessageDispatchedAtom)
-    const webView = get(webViewAtom)
-
-    const isMapMountMessage =
-      message.type === 'webObjectMount' && message.payload.objectType === 'map'
-
-    if (
-      !isWebWorldReady ||
-      !isMapMountMessageReady ||
-      !isMapMountMessageDispatched ||
-      !webView
-    ) {
-      const q = get(messageQueueAtom)
-      if (isMapMountMessage) {
-        // Map mount message must be sent before any other message.
-        set(messageQueueAtom, [message, ...q])
-        // If the map mount message was queued in priority, then others messages
-        // are allowed to be sent.
-        set(isMapMountMessageReadyAtom, true)
-      } else {
-        set(messageQueueAtom, [...q, message])
-      }
-      return
-    }
-
-    webView.postMessage(stableStringify(message))
-  },
-)
-
-/**
- * Flush the queue of messages to the web world (if possible).
- */
-const flushMessagesAtom = atom(null, (get, set) => {
-  const isWebWorldReady = get(isWebWorldReadyAtom)
-  const isMapMountMessageReady = get(isMapMountMessageReadyAtom)
-  const isMapMountMessageDispatched = get(isMapMountMessageDispatchedAtom)
-  const webView = get(webViewAtom)
-  const messageQueue = get(messageQueueAtom)
-
-  if (
-    !isWebWorldReady ||
-    !isMapMountMessageReady ||
-    !webView ||
-    messageQueue.length === 0
-  ) {
-    return
-  }
-
-  messageQueue.forEach((message) => {
-    webView.postMessage(stableStringify(message))
-  })
-
-  set(messageQueueAtom, [])
-
-  // Mark the map mount message as dispatched if it was not.
-  if (!isMapMountMessageDispatched) {
-    set(isMapMountMessageDispatchedAtom, true)
-  }
-})
-
-/**
- * Register a promise resolver associated with a pending response to a web world
- * native object method call.
- */
-const setWebObjectPendingMethodResponseAtom = atom(
-  null,
-  (
-    get,
-    set,
-    {
-      requestId,
-      resolve,
-    }: { requestId: string; resolve: (result: any) => void },
-  ) => {
-    const map = new Map(get(webObjectPendingMethodResponses))
-    map.set(requestId, resolve)
-    set(webObjectPendingMethodResponses, map)
-  },
-)
-
-/**
- * Resolve a pending response to a method call on a web object.
- */
-const resolveWebObjectPendingMethodResponseAtom = atom(
-  null,
-  (get, set, { requestId, result }: { requestId: string; result: any }) => {
-    const map = new Map(get(webObjectPendingMethodResponses))
-    const resolver = map.get(requestId)
-    if (resolver) {
-      resolver(result)
-      map.delete(requestId)
-      set(webObjectPendingMethodResponses, map)
-    }
-  },
-)
-
-/**
- * Delete a pending call to a web object method.
- */
-const deleteWebObjectPendingMethodResponseAtom = atom(
-  null,
-  (get, set, requestId: string) => {
-    const map = new Map(get(webObjectPendingMethodResponses))
-    map.delete(requestId)
-    set(webObjectPendingMethodResponses, map)
-  },
-)
-
-/**
- * Set the callbacks to be executed when receiving an event of a specific native
- * web object.
- */
-const setWebObjectListenersAtom = atom(
-  null,
-  (
-    get,
-    set,
-    {
-      objectId,
-      listeners,
-    }: { objectId: WebObjectId; listeners: WebObjectListeners },
-  ) => {
-    const map = new Map(get(webObjectsListenersAtom))
-    map.set(objectId, listeners)
-    set(webObjectsListenersAtom, map)
-  },
-)
-
-/**
- * Get the callbacks on a specific web object.
- */
-const getWebObjectListenersAtom = atom(
-  null,
-  (
-    get,
-    _set,
-    { objectId }: { objectId: WebObjectId },
-  ): WebObjectListeners | undefined => {
-    const map = get(webObjectsListenersAtom)
-    return map.get(objectId)
-  },
-)
-
-/**
- * Delete callbacks associated with a web object.
- */
-const deleteWebObjectListenersAtom = atom(
-  null,
-  (get, set, { objectId }: { objectId: WebObjectId }) => {
-    const map = new Map(get(webObjectsListenersAtom))
-    map.delete(objectId)
-    set(webObjectsListenersAtom, map)
-  },
-)
-
-const useMapAtoms = () => {
-  const [webView, setWebView] = useAtom(webViewAtom)
-  const [isWebWorldReady, setIsWebWorldReady] = useAtom(isWebWorldReadyAtom)
-  const [isMapMountMessageReady] = useAtom(isMapMountMessageReadyAtom)
-
-  return {
-    // Raw atoms.
-    webView,
-    setWebView,
-    isWebWorldReady,
-    setIsWebWorldReady,
-    isMapMountMessageReady,
-    // Messages for the web world.
-    enqueueMessage: useSetAtom(enqueueMessageAtom),
-    dispatchMessage: useSetAtom(dispatchMessageAtom),
-    flushMessages: useSetAtom(flushMessagesAtom),
-    // Pending responses from the web world on object method calls.
-    setWebObjectPendingMethodResponse: useSetAtom(
-      setWebObjectPendingMethodResponseAtom,
-    ),
-    resolveWebObjectPendingMethodResponse: useSetAtom(
-      resolveWebObjectPendingMethodResponseAtom,
-    ),
-    deleteWebObjectPendingMethodResponse: useSetAtom(
-      deleteWebObjectPendingMethodResponseAtom,
-    ),
-    // Callbacks to be executed on web world event issued by an object.
-    setWebObjectListeners: useSetAtom(setWebObjectListenersAtom),
-    getWebObjectListeners: useSetAtom(getWebObjectListenersAtom),
-    deleteWebObjectListeners: useSetAtom(deleteWebObjectListenersAtom),
-  }
-}
-
-export default useMapAtoms

package/src/react-native/hooks/atoms/useMapAtoms.utils.ts

@@ -1,15 +0,0 @@
-/**
- * Stable stringify for messages that may contain functions. Keep the function
- * members as '...' to allow identification of the object type (by default a
- * function cannot be stringified and is removed from the final string).
- * @param message - The message to be stringified.
- * @returns - The stringified message.
- */
-export const stableStringify = (message: any): string => {
-  return JSON.stringify(message, (_, value) => {
-    if (typeof value === 'function') {
-      return '...'
-    }
-    return value
-  })
-}

package/src/react-native/logger/rn-logger.ts

@@ -1,51 +0,0 @@
-import { consoleTransport, logger } from 'react-native-logs'
-import pkg from '../../../package.json'
-
-type LogOrigin = 'RN' | 'Web'
-
-const BASE_LOGGER = logger.createLogger({
-  severity: __DEV__ ? 'debug' : 'none',
-  transport: __DEV__ ? consoleTransport : () => {},
-  transportOptions: {
-    colors: {
-      debug: 'grey',
-      info: 'greenBright',
-      error: 'redBright',
-    },
-  },
-  formatFunc: (level, _, args) => {
-    const timeColumn = new Date().toLocaleTimeString().padEnd(8)
-    const levelColumn = level.toUpperCase().padEnd(5)
-    const packageColumn = pkg.name
-    const fromColumn =
-      args[0].padEnd(3) + ' ' + (args[0] === 'Web' ? '🌐' : '⚛️')
-    const funcColumn = args[1].padEnd(20)
-    const text = args.slice(2).join(' ')
-    return `${timeColumn} | ${levelColumn} | ${packageColumn} | ${fromColumn} | ${funcColumn} : ${text}`
-  },
-})
-
-const createLoggerMethod = (level: keyof typeof BASE_LOGGER) => {
-  return (from: LogOrigin, func: string, ...args: any[]) => {
-    const stringifiedArgs = args.map((item) =>
-      typeof item === 'string' ? item : JSON.stringify(item, null, 2),
-    )
-    return (BASE_LOGGER[level] as (...args: any[]) => void)(
-      from,
-      func !== '' ? func : 'Anonymous function',
-      ...stringifiedArgs,
-    )
-  }
-}
-
-/**
- * Logger to be used from the React Native world. Will log to the default
- * output. Works only in __DEV__.
- */
-const RNLogger = {
-  debug: createLoggerMethod('debug'),
-  info: createLoggerMethod('info'),
-  error: createLoggerMethod('error'),
-}
-
-export default RNLogger

package/src/typedoc.ts

@@ -1,35 +0,0 @@
-/**
- * Internal types exposed for the documentation, but not by the public API.
- * @module Internal types
- * @packageDocumentation
- */
-
-import type {
-  WebObjectComponent,
-  WebObjectRef,
-  WebObjectProps,
-  WebObjectListeners,
-  WebObjectListenersDefault,
-  WebObjectListenersWeb,
-  WebObjectListenerOnRN,
-  WebObjectListenerOnObject,
-  WebObjectListenerOnMapLayer,
-  WebObjectListenerOnHTMLElement,
-  WebObjectOptionsInferred,
-  WebObjectMethodsInferred,
-} from 'react-native-maplibre-gl-js/react-native/components-factory/createWebObjectAsComponent.types'
-
-export type {
-  WebObjectComponent,
-  WebObjectRef,
-  WebObjectProps,
-  WebObjectListeners,
-  WebObjectListenersDefault,
-  WebObjectListenersWeb,
-  WebObjectListenerOnRN,
-  WebObjectListenerOnObject,
-  WebObjectListenerOnMapLayer,
-  WebObjectListenerOnHTMLElement,
-  WebObjectOptionsInferred,
-  WebObjectMethodsInferred,
-}

package/src/web/bridge/ReactNativeBridge.ts

@@ -1,44 +0,0 @@
-import type MapController from 'react-native-maplibre-gl-js/web/maplibre-gl-js/MapController'
-import type {
-  MessageFromRNToWeb,
-  MessageFromWebToRN,
-} from 'react-native-maplibre-gl-js/communication/messages.types'
-import WebLogger from 'react-native-maplibre-gl-js/web/logger/web-logger'
-
-/**
- * From the web world, manage bidirectional communication with the React Native
- * one by receiving and sending messages.
- */
-export default class ReactNativeBridge {
-  #mapController?: MapController
-
-  constructor() {
-    const messageHandler = (raw: any) => {
-      try {
-        WebLogger.debug(this.constructor.name, raw?.data)
-        const data = typeof raw?.data === 'string' ? raw.data : raw
-        const message = JSON.parse(data) as MessageFromRNToWeb
-        this.mapController?.handleMessage(message)
-      } catch (error: any) {
-        WebLogger.error(this.constructor.name, error.message)
-      }
-    }
-    // Listen to React Native messages and forward them to the map controller.
-    document.addEventListener?.('message', messageHandler)
-    window.addEventListener?.('message', messageHandler)
-  }
-
-  set mapController(controller: MapController) {
-    this.#mapController = controller
-  }
-
-  get mapController(): MapController | undefined {
-    return this.#mapController
-  }
-
-  postMessage(message: MessageFromWebToRN) {
-    WebLogger.debug(this.postMessage.name, message)
-    // @ts-ignore
-    window.ReactNativeWebView?.postMessage(JSON.stringify(message))
-  }
-}

package/src/web/generated/index.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
-  />
-  <style>
-    html, body, #app { margin:0; padding:0; width:100%; height:100%; }
-  </style>
-  <!-- maplibre-gl.css will be inlined by the build step -->
-</head>
-<body>
-<div id="app"></div>
-<!-- index.js will be inlined by the build step -->
-</body>
-</html>

package/src/web/generated/index.ts

@@ -1,17 +0,0 @@
-import 'maplibre-gl/dist/maplibre-gl.css'
-import ReactNativeBridge from 'react-native-maplibre-gl-js/web/bridge/ReactNativeBridge'
-import MapController from 'react-native-maplibre-gl-js/web/maplibre-gl-js/MapController'
-
-/**
- * Main entry point for the web app to be bundled. Initialize the map controller
- * and the bridge to communicate with React Native, then send a ready message.
- */
-const main = () => {
-  const controller = new MapController()
-  const bridge = new ReactNativeBridge()
-  controller.reactNativeBridge = bridge
-  bridge.mapController = controller
-  bridge.postMessage({ type: 'ready' })
-}
-
-main()