refactor: convert ShapeSource to typescript

docs/ShapeSource.md

@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from ShapeSource.js do not modify -->
+<!-- This file was autogenerated from ShapeSource.tsx do not modify -->
 # <MapboxGL.ShapeSource />
 ShapeSource is a map content source that supplies vector shapes to be shown on the map.
 The shape may be an url or a GeoJSON object
@@ -8,19 +8,23 @@ The shape may be an url or a GeoJSON object
 | ---- | :-- | :----- | :------ | :---------- |
 | id | `string` | `MapboxGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. |
 | url | `string` | `none` | `false` | An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle. |
-| shape | `object` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection. |
-| cluster | `bool` | `none` | `false` | Enables clustering on the source for point shapes. |
+| shape | `\| GeoJSON.GeometryCollection
+\| GeoJSON.Feature
+\| GeoJSON.FeatureCollection
+\| GeoJSON.Geometry` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection. |
+| cluster | `boolean` | `none` | `false` | Enables clustering on the source for point shapes. |
 | clusterRadius | `number` | `none` | `false` | Specifies the radius of each cluster if clustering is enabled.<br/>A value of 512 produces a radius equal to the width of a tile.<br/>The default value is 50. |
 | clusterMaxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to cluster points if clustering is enabled.<br/>Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,<br/>the shapes are not clustered. |
 | clusterProperties | `object` | `none` | `false` | [`mapbox-gl` (v8) implementation only]<br/>Specifies custom properties on the generated clusters if clustering<br/>is enabled, aggregating values from clustered points.<br/><br/>Has the form `{ "property_name": [operator, map_expression]}`, where<br/> `operator` is a custom reduce expression that references a special `["accumulated"]` value -<br/>  it accumulates the property value from clusters/points the cluster contains<br/> `map_expression` produces the value of a single point<br/><br/>Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }` |
 | maxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to create vector tiles.<br/>A greater value produces greater detail at high zoom levels.<br/>The default value is 18. |
 | buffer | `number` | `none` | `false` | Specifies the size of the tile buffer on each side.<br/>A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.<br/>Larger values produce fewer rendering artifacts near tile edges and slower performance.<br/>The default value is 128. |
 | tolerance | `number` | `none` | `false` | Specifies the Douglas-Peucker simplification tolerance.<br/>A greater value produces simpler geometries and improves performance.<br/>The default value is 0.375. |
-| lineMetrics | `bool` | `none` | `false` | Whether to calculate line distance metrics.<br/>This is required for line layers that specify lineGradient values.<br/>The default value is false. |
-| onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only<br/>if that layer has a higher z-index than another source layers |
+| lineMetrics | `boolean` | `none` | `false` | Whether to calculate line distance metrics.<br/>This is required for line layers that specify lineGradient values.<br/>The default value is false. |
+| onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only<br/>if that layer has a higher z-index than another source layers<br/><br/>@param {Object} event<br/>@param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)<br/>@param {Object} event.coordinates - the coordinates of the click<br/>@param {Object} event.point - the point of the click<br/>@return void<br/>*signature:*`(event:{features: Array, coordinates: {latitude: number, longitude: number}, point: {x: number, y: number}}) => void` |
 | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers |
 | &nbsp;&nbsp;width | `number` | `none` | `true` | `width` of hitbox |
 | &nbsp;&nbsp;height | `number` | `none` | `true` | `height` of hitbox |
+| children | `React.ReactElement \| React.ReactElement[]` | `none` | `true` | FIX ME NO DESCRIPTION |
 
 ## methods
 ### features([filter])
@@ -46,7 +50,7 @@ Returns the zoom needed to expand the cluster.
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `feature` | `Feature` | `Yes` | The feature cluster to expand. |
+| `feature` | `string \| GeoJSON.Feature` | `Yes` | The feature cluster to expand. |
 
 
 
@@ -62,7 +66,7 @@ Returns the FeatureCollection from the cluster.
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `feature` | `Feature` | `Yes` | The feature cluster to expand. |
+| `feature` | `number \| GeoJSON.Feature` | `Yes` | The feature cluster to expand. |
 | `limit` | `number` | `Yes` | The number of points to return. |
 | `offset` | `number` | `Yes` | The amount of points to skip (for pagination). |
 
@@ -80,7 +84,7 @@ Returns the FeatureCollection from the cluster (on the next zoom level).
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `feature` | `Feature` | `Yes` | The feature cluster to expand. |
+| `feature` | `number \| GeoJSON.Feature` | `Yes` | The feature cluster to expand. |
 
 
 
@@ -96,7 +100,7 @@ const collection = await shapeSource.getClusterChildren(clusterId);
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `event` | `n/a` | `Yes` | undefined |
+| `event` | `NativeSyntheticEvent` | `Yes` | undefined |
 
 
 

docs/docs.json

@@ -3820,15 +3820,21 @@
             "name": "feature",
             "description": "The feature cluster to expand.",
             "type": {
-              "name": "Feature"
+              "name": "string \\| GeoJSON.Feature"
             },
             "optional": false
           }
         ],
         "returns": {
           "description": null,
           "type": {
-            "name": "number"
+            "name": "Promise",
+            "elements": [
+              {
+                "name": "string"
+              }
+            ],
+            "raw": "Promise<string>"
           }
         },
         "description": "Returns the zoom needed to expand the cluster.",
@@ -3838,7 +3844,7 @@
       },
       {
         "name": "getClusterLeaves",
-        "docblock": "Returns the FeatureCollection from the cluster.\n\n@example\nconst collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);\n\n@param  {Feature} feature - The feature cluster to expand.\n@param  {number} limit - The number of points to return.\n@param  {number} offset - The amount of points to skip (for pagination).\n@return {FeatureCollection}",
+        "docblock": "Returns the FeatureCollection from the cluster.\n\n@example\nconst collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);\n\n@param  {GeoJSON.Feature} feature - The feature cluster to expand.\n@param  {number} limit - The number of points to return.\n@param  {number} offset - The amount of points to skip (for pagination).\n@return {FeatureCollection}",
         "modifiers": [
           "async"
         ],
@@ -3847,7 +3853,7 @@
             "name": "feature",
             "description": "The feature cluster to expand.",
             "type": {
-              "name": "Feature"
+              "name": "number \\| GeoJSON.Feature"
             },
             "optional": false
           },
@@ -3881,7 +3887,7 @@
       },
       {
         "name": "getClusterChildren",
-        "docblock": "Returns the FeatureCollection from the cluster (on the next zoom level).\n\n@example\nconst collection = await shapeSource.getClusterChildren(clusterId);\n\n@param  {Feature} feature - The feature cluster to expand.\n@return {FeatureCollection}",
+        "docblock": "Returns the FeatureCollection from the cluster (on the next zoom level).\n\n@example\nconst collection = await shapeSource.getClusterChildren(clusterId);\n\n@param  {GeoJSON.Feature} feature - The feature cluster to expand.\n@return {FeatureCollection}",
         "modifiers": [
           "async"
         ],
@@ -3890,7 +3896,7 @@
             "name": "feature",
             "description": "The feature cluster to expand.",
             "type": {
-              "name": "Feature"
+              "name": "number \\| GeoJSON.Feature"
             },
             "optional": false
           }
@@ -3915,7 +3921,7 @@
             "name": "event",
             "optional": false,
             "type": {
-              "name": null
+              "name": "NativeSyntheticEvent"
             }
           }
         ],
@@ -3940,14 +3946,14 @@
       {
         "name": "shape",
         "required": false,
-        "type": "object",
+        "type": "\\| GeoJSON.GeometryCollection\n\\| GeoJSON.Feature\n\\| GeoJSON.FeatureCollection\n\\| GeoJSON.Geometry",
         "default": "none",
         "description": "The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection."
       },
       {
         "name": "cluster",
         "required": false,
-        "type": "bool",
+        "type": "boolean",
         "default": "none",
         "description": "Enables clustering on the source for point shapes."
       },
@@ -3996,59 +4002,19 @@
       {
         "name": "lineMetrics",
         "required": false,
-        "type": "bool",
+        "type": "boolean",
         "default": "none",
         "description": "Whether to calculate line distance metrics.\nThis is required for line layers that specify lineGradient values.\nThe default value is false."
       },
       {
         "name": "onPress",
         "required": false,
-        "type": "func",
+        "type": {
+          "name": "func",
+          "funcSignature": "(event:{features: Array, coordinates: {latitude: number, longitude: number}, point: {x: number, y: number}}) => void"
+        },
         "default": "none",
-        "description": "Source press listener, gets called when a user presses one of the children layers only\nif that layer has a higher z-index than another source layers",
-        "params": [
-          {
-            "name": "event",
-            "description": null,
-            "type": {
-              "name": "Object"
-            },
-            "optional": false
-          },
-          {
-            "name": "event.features",
-            "description": "the geojson features that have hit by the press (might be multiple)",
-            "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Object"
-                }
-              ]
-            },
-            "optional": false
-          },
-          {
-            "name": "event.coordinates",
-            "description": "the coordinates of the click",
-            "type": {
-              "name": "Object"
-            },
-            "optional": false
-          },
-          {
-            "name": "event.point",
-            "description": "the point of the click",
-            "type": {
-              "name": "Object"
-            },
-            "optional": false
-          }
-        ],
-        "returns": {
-          "description": "void",
-          "type": null
-        }
+        "description": "Source press listener, gets called when a user presses one of the children layers only\nif that layer has a higher z-index than another source layers\n\n@param {Object} event\n@param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)\n@param {Object} event.coordinates - the coordinates of the click\n@param {Object} event.point - the point of the click\n@return void\n*signature:*`(event:{features: Array, coordinates: {latitude: number, longitude: number}, point: {x: number, y: number}}) => void`"
       },
       {
         "name": "hitbox",
@@ -4074,12 +4040,16 @@
         },
         "default": "none",
         "description": "Overrides the default touch hitbox(44x44 pixels) for the source layers"
+      },
+      {
+        "name": "children",
+        "required": true,
+        "type": "React.ReactElement \\| React.ReactElement[]",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
       }
     ],
-    "composes": [
-      "../utils"
-    ],
-    "fileNameWithExt": "ShapeSource.js",
+    "fileNameWithExt": "ShapeSource.tsx",
     "name": "ShapeSource"
   },
   "SkyLayer": {

javascript/components/AbstractSource.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NativeMethods } from 'react-native';
+
+class AbstractSource<
+  PropsType,
+  NativePropsType extends object,
+> extends React.PureComponent<PropsType> {
+  _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
+
+  setNativeProps(props: NativePropsType) {
+    if (this._nativeRef) {
+      this._nativeRef.setNativeProps(props);
+    }
+  }
+
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void = (instance) => {
+    this._nativeRef = instance;
+  };
+}
+
+export default AbstractSource;

javascript/components/MapView.js

@@ -42,7 +42,10 @@ const defaultStyleURL = MapboxGL.StyleURL.Street;
 /**
  * MapView backed by Mapbox Native GL
  */
-class MapView extends NativeBridgeComponent(React.Component) {
+class MapView extends NativeBridgeComponent(
+  React.Component,
+  NATIVE_MODULE_NAME,
+) {
   static propTypes = {
     ...viewPropTypes,
 
@@ -306,7 +309,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
   };
 
   constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
 
     this.logger = Logger.sharedInstance();
     this.logger.start();

javascript/components/MarkerView.tsx

@@ -97,6 +97,7 @@ class MarkerView extends React.PureComponent<{
             <RCTMGLMarkerViewWrapper
               style={{
                 alignSelf: 'flex-start',
+                position: 'absolute',
               }}
             >
               {child}

javascript/components/NativeBridgeComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { runNativeCommand, isAndroid } from '../utils';
+import { type NativeArg, runNativeCommand, isAndroid } from '../utils';
 
 let callbackIncrement = 0;
 
@@ -9,28 +9,34 @@ export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   type: string;
 };
 
-const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
-  class extends B {
+const NativeBridgeComponent = <
+  Props extends object,
+  BaseComponent extends new (...ags: any[]) => React.Component<Props>,
+>(
+  Base: BaseComponent,
+  nativeModuleName: string,
+) =>
+  class extends Base {
     _nativeModuleName: string;
     _onAndroidCallback: (e: any) => void;
     _callbackMap: Map<string, any>;
     _preRefMapMethodQueue: Array<{
-      method: { name: string; args: Array<string> };
-      resolver: (value: unknown) => void;
+      method: { name: string; args: NativeArg[] };
+      resolver: (value: NativeArg) => void;
     }>;
 
-    constructor(props: T, nativeModuleName: string) {
-      super(props);
+    constructor(...args: any[]) {
+      super(...args);
 
       this._nativeModuleName = nativeModuleName;
       this._onAndroidCallback = this._onAndroidCallbackO.bind(this);
       this._callbackMap = new Map();
       this._preRefMapMethodQueue = [];
     }
 
-    _addAddAndroidCallback(
+    _addAddAndroidCallback<ReturnType>(
       id: string,
-      resolve: (value: string) => void,
+      resolve: (value: ReturnType) => void,
       reject: (error: Error) => void,
     ) {
       this._callbackMap.set(id, { resolve, reject });
@@ -74,16 +80,16 @@ const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
       }
     }
 
-    _runNativeCommand<RefType>(
+    _runNativeCommand<RefType, ReturnType = NativeArg>(
       methodName: string,
       nativeRef: RefType,
-      args: string[] = [],
-    ) {
+      args: NativeArg[] = [],
+    ): Promise<ReturnType> {
       if (!nativeRef) {
-        return new Promise((resolve) => {
+        return new Promise<ReturnType>((resolve) => {
           this._preRefMapMethodQueue.push({
             method: { name: methodName, args },
-            resolver: resolve,
+            resolver: resolve as (args: NativeArg) => void,
           });
         });
       }