react-native-maplibre-gl-js 1.0.0

package/lib/typescript/src/web/generated/webview_static_html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webview_static_html.d.ts","sourceRoot":"","sources":["../../../../../src/web/generated/webview_static_html.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,ylzlDAu+tB/B,CAAA"}

package/lib/typescript/src/web/logger/web-logger.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Logger to be used from the Web world. Will post the log to the React Native
+ * world. Works only in __DEV__.
+ */
+declare const WebLogger: {
+    debug: (func: string, ...args: any[]) => void;
+    info: (func: string, ...args: any[]) => void;
+    error: (func: string, ...args: any[]) => void;
+};
+export default WebLogger;
+//# sourceMappingURL=web-logger.d.ts.map

package/lib/typescript/src/web/logger/web-logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-logger.d.ts","sourceRoot":"","sources":["../../../../../src/web/logger/web-logger.ts"],"names":[],"mappings":"AAyBA;;;GAGG;AACH,QAAA,MAAM,SAAS;kBApBC,MAAM,WAAW,GAAG,EAAE;iBAAtB,MAAM,WAAW,GAAG,EAAE;kBAAtB,MAAM,WAAW,GAAG,EAAE;CAwBrC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/typescript/src/web/maplibre-gl-js/MapController.d.ts

@@ -0,0 +1,15 @@
+import maplibregl from 'maplibre-gl';
+import type ReactNativeBridge from 'react-native-maplibre-gl-js/web/bridge/ReactNativeBridge';
+import { type MessageFromRNToWeb } from 'react-native-maplibre-gl-js/communication/messages.types';
+/**
+ * Manage the MapLibre GL JS map and its objects. Receive messages from the
+ * React Native world and act accordingly.
+ */
+export default class MapController {
+    #private;
+    get reactNativeBridge(): ReactNativeBridge;
+    set reactNativeBridge(bridge: ReactNativeBridge);
+    get map(): maplibregl.Map;
+    handleMessage: (message: MessageFromRNToWeb) => void;
+}
+//# sourceMappingURL=MapController.d.ts.map

package/lib/typescript/src/web/maplibre-gl-js/MapController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapController.d.ts","sourceRoot":"","sources":["../../../../../src/web/maplibre-gl-js/MapController.ts"],"names":[],"mappings":"AAAA,OAAO,UAAsC,MAAM,aAAa,CAAA;AAChE,OAAO,KAAK,iBAAiB,MAAM,0DAA0D,CAAA;AAC7F,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,0DAA0D,CAAA;AAYjE;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,aAAa;;IAKhC,IAAI,iBAAiB,IAAI,iBAAiB,CAKzC;IAED,IAAI,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,EAE9C;IAED,IAAI,GAAG,IAAI,UAAU,CAAC,GAAG,CAMxB;IAED,aAAa,GAAI,SAAS,kBAAkB,UAiB3C;CAkQF"}

package/package.json

@@ -0,0 +1,196 @@
+{
+  "name": "react-native-maplibre-gl-js",
+  "version": "1.0.0",
+  "description": "MapLibre GL JS for React Native",
+  "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"
+    },
+    "./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",
+    "clean": "del-cli lib",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "typecheck": "tsc",
+    "release": "release-it --only-version",
+    "test": "jest --passWithNoTests",
+    "docs": "typedoc",
+    "prepare": "bob build",
+    "semantic-release": "semantic-release"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emilienaufauvre/react-native-maplibre-gl-js.git"
+  },
+  "author": "Emilien Aufauvre <emilien.aufauvre@live.fr> (https://github.com/emilienaufauvre)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/emilienaufauvre/react-native-maplibre-gl-js/issues"
+  },
+  "homepage": "https://github.com/emilienaufauvre/react-native-maplibre-gl-js#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      [
+        "@semantic-release/npm",
+        {
+          "npmPublish": true
+        }
+      ],
+      [
+        "@semantic-release/github",
+        {
+          "assets": [
+            {
+              "path": "CHANGELOG.md",
+              "label": "Changelog"
+            },
+            {
+              "path": "*.tgz",
+              "label": "NPM package (.tgz)"
+            }
+          ]
+        }
+      ]
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "tools": [
+      "eslint",
+      "lefthook",
+      "release-it",
+      "jest"
+    ],
+    "version": "0.55.1"
+  },
+  "dependencies": {
+    "jotai": "^2.15.2",
+    "maplibre-gl": "^5.14.0",
+    "react-native-logs": "^5.5.0",
+    "react-native-webview": "^13.16.0"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.3",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "del-cli": "^6.0.0",
+    "esbuild": "^0.27.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsdoc": "^61.4.1",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.11",
+    "prettier": "^3.7.4",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.16",
+    "release-it": "^19.0.4",
+    "semantic-release": "^25.0.2",
+    "ts-node": "^10.9.2",
+    "typedoc": "^0.28.15",
+    "typedoc-plugin-markdown": "^4.9.0",
+    "typedoc-plugin-rename-defaults": "^0.7.3",
+    "typescript": "^5.9.3"
+  }
+}

package/src/communication/messages.types.ts

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,31 @@
+/**
+ * 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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,149 @@
+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

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