@maplibre/maplibre-react-native 10.0.0-alpha.21 → 10.0.0-alpha.22

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ["universe/native"],
+  ignorePatterns: ["build"],
+};

package/.git-blame-ignore-revs

@@ -0,0 +1,3 @@
+# style: apply formatting via lint:fix
+# https://github.com/maplibre/maplibre-react-native/pull/467
+017b3861ae8ac856a3b032ebea6497eff4420e1f

package/CHANGELOG.md

@@ -6,6 +6,19 @@ PR Title ([#123](link to my pr))
 
 ```
 
+## 10.0.0-alpha.22
+
+chore: configure jest to use with ts
+([#470](https://github.com/maplibre/maplibre-react-native/pull/470))
+
+refactor: switch many examples to TypeScript
+([#469](https://github.com/maplibre/maplibre-react-native/pull/469))
+
+chore: eslint formatting and improve scripts
+([#467](https://github.com/maplibre/maplibre-react-native/pull/467))
+
+fix: allow resetting contentInset with 0 ([#468](https://github.com/maplibre/maplibre-react-native/pull/468))
+
 ## 10.0.0-alpha.21
 
 fix: Call requestProgress when getting pack status on IOS + example improvement [#445](https://github.com/maplibre/maplibre-react-native/pull/445)

package/app.plugin.js

@@ -1 +1 @@
-module.exports = require('./plugin/build/withMapLibre');
+module.exports = require("./plugin/build/withMapLibre");

package/babel.config.js

@@ -1,9 +1,12 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-  plugins: [['@babel/plugin-proposal-class-properties', {loose: true}]],
+  presets: ["module:metro-react-native-babel-preset"],
+  plugins: [
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
+    ["@babel/plugin-transform-private-methods", { loose: true }],
+  ],
   env: {
     production: {
-      plugins: ['transform-remove-console'],
+      plugins: ["transform-remove-console"],
     },
   },
 };

package/javascript/components/HeadingIndicator.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 
 import SymbolLayer from "./SymbolLayer";
-// @ts-ignore
 import headingIcon from "../../assets/heading.png";
 import BaseProps from "../types/BaseProps";
 

package/javascript/components/MapView.tsx

@@ -760,7 +760,7 @@ const MapView = memo(
       };
 
       const contentInsetValue = useMemo(() => {
-        if (!props.contentInset) {
+        if (props.contentInset === undefined) {
           return;
         }
 
@@ -812,7 +812,7 @@ const MapView = memo(
           surfaceView,
           regionWillChangeDebounceTime,
           regionDidChangeDebounceTime,
-          contentInsetValue,
+          contentInset: contentInsetValue,
           style: styles.matchParent,
         };
       }, [
@@ -825,7 +825,6 @@ const MapView = memo(
         surfaceView,
         regionWillChangeDebounceTime,
         regionDidChangeDebounceTime,
-        contentInsetValue,
         props,
         contentInsetValue,
       ]);

package/javascript/types/png.d.ts

@@ -0,0 +1 @@
+declare module "*.png";

package/jest-setup.ts

@@ -0,0 +1,113 @@
+/* eslint-disable no-undef, import/no-extraneous-dependencies */
+import "@testing-library/react-native/extend-expect";
+import { NativeModules } from "react-native";
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+
+function keyMirror(keys: string[]) {
+  const obj: Record<string, string> = {};
+  keys.forEach((key) => (obj[key] = key));
+  return obj;
+}
+
+// Mock of what the native code puts on the JS object
+NativeModules.MLNModule = {
+  // constants
+  UserTrackingModes: keyMirror([
+    "None",
+    "Follow",
+    "FollowWithCourse",
+    "FollowWithHeading",
+  ]),
+  StyleURL: keyMirror(["Default"]),
+  EventTypes: keyMirror([
+    "MapClick",
+    "MapLongClick",
+    "RegionWillChange",
+    "RegionIsChanging",
+    "RegionDidChange",
+    "WillStartLoadingMap",
+    "DidFinishLoadingMap",
+    "DidFailLoadingMap",
+    "WillStartRenderingFrame",
+    "DidFinishRenderingFrame",
+    "DidFinishRenderingFrameFully",
+    "DidFinishLoadingStyle",
+    "SetCameraComplete",
+  ]),
+  CameraModes: keyMirror(["Flight", "Ease", "None"]),
+  StyleSource: keyMirror(["DefaultSourceID"]),
+  InterpolationMode: keyMirror([
+    "Exponential",
+    "Categorical",
+    "Interval",
+    "Identity",
+  ]),
+  LineJoin: keyMirror(["Bevel", "Round", "Miter"]),
+  LineCap: keyMirror(["Butt", "Round", "Square"]),
+  LineTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  CirclePitchScale: keyMirror(["Map", "Viewport"]),
+  CircleTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  FillExtrusionTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  FillTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  IconRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  IconTextFit: keyMirror(["None", "Width", "Height", "Both"]),
+  IconTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  SymbolPlacement: keyMirror(["Line", "Point"]),
+  TextAnchor: keyMirror([
+    "Center",
+    "Left",
+    "Right",
+    "Top",
+    "Bottom",
+    "TopLeft",
+    "TopRight",
+    "BottomLeft",
+    "BottomRight",
+  ]),
+  TextJustify: keyMirror(["Center", "Left", "Right"]),
+  TextPitchAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  TextRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
+  TextTransform: keyMirror(["None", "Lowercase", "Uppercase"]),
+  TextTranslateAnchor: keyMirror(["Map", "Viewport"]),
+  LightAnchor: keyMirror(["Map", "Viewport"]),
+  OfflinePackDownloadState: keyMirror(["Inactive", "Active", "Complete"]),
+  OfflineCallbackName: keyMirror(["Progress", "Error"]),
+
+  // methods
+  setAccessToken: jest.fn(),
+  getAccessToken: () => Promise.resolve("test-token"),
+  setConnected: jest.fn(),
+};
+
+NativeModules.MLNOfflineModule = {
+  createPack: (packOptions: any) => {
+    return Promise.resolve({
+      bounds: packOptions.bounds,
+      metadata: JSON.stringify({ name: packOptions.name }),
+    });
+  },
+  getPacks: () => Promise.resolve([]),
+  deletePack: () => Promise.resolve(),
+  getPackStatus: () => Promise.resolve({}),
+  pausePackDownload: () => Promise.resolve(),
+  resumePackDownload: () => Promise.resolve(),
+  setPackObserver: () => Promise.resolve(),
+  setTileCountLimit: jest.fn(),
+  setProgressEventThrottle: jest.fn(),
+};
+
+NativeModules.MLNSnapshotModule = {
+  takeSnap: () => {
+    return Promise.resolve("file://test.png");
+  },
+};
+
+NativeModules.MLNLocationModule = {
+  getLastKnownLocation: jest.fn(),
+  setMinDisplacement: jest.fn(),
+  start: jest.fn(),
+  stop: jest.fn(),
+  pause: jest.fn(),
+};

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  preset: "@testing-library/react-native",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+  setupFilesAfterEnv: ["./jest-setup.ts"],
+  setupFiles: ["./__tests__/__mocks__/react-native.mock.js"],
+  modulePathIgnorePatterns: ["__tests__/__mocks__", "fixtures"],
+  collectCoverageFrom: ["javascript/**/*.{ts,tsx,js,jsx}"],
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "A MapLibre GL Native plugin for creating maps in React Native",
-  "version": "10.0.0-alpha.21",
+  "version": "10.0.0-alpha.22",
   "publishConfig": {
     "access": "public"
   },
@@ -21,20 +21,19 @@
     "url": "https://github.com/maplibre/maplibre-react-native"
   },
   "scripts": {
-    "fetch:style:spec": "./scripts/download-style-spec.sh",
-    "generate": "yarn fetch:style:spec && yarn node ./scripts/autogenerate",
-    "test": "yarn lint && yarn unittest",
-    "unittest": "jest",
-    "unittest:single": "jest --testNamePattern",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "lint:single": "eslint",
-    "prepack": "pinst --disable && yarn build:plugin",
-    "test:plugin": "jest plugin",
-    "build:plugin": "tsc --build plugin",
-    "lint:plugin": "eslint plugin/src/*",
-    "postpack": "pinst --enable",
-    "typescript:check": "tsc -p ./tsconfig.json --noEmit"
+    "generate": "yarn generate:fetch-style-spec && yarn generate:docs",
+    "generate:fetch-style-spec": "./scripts/download-style-spec.sh",
+    "generate:docs": "yarn node ./scripts/generate-docs",
+    "test": "jest",
+    "lint": "yarn lint:eslint && yarn lint:tsc",
+    "lint:eslint": "eslint .",
+    "lint:eslint:fix": "eslint . --fix",
+    "lint:tsc": "tsc --project . --noEmit && tsc --project ./packages/examples",
+    "plugin:build": "tsc --build plugin",
+    "plugin:lint": "eslint plugin/src/*",
+    "plugin:test": "jest plugin",
+    "prepack": "pinst --disable && yarn plugin:build",
+    "postpack": "pinst --enable"
   },
   "peerDependenciesMeta": {
     "@expo/config-plugins": {
@@ -47,7 +46,7 @@
     "react-native": ">=0.59.9"
   },
   "dependencies": {
-    "@mapbox/geo-viewport": ">= 0.4.0",
+    "@mapbox/geo-viewport": ">=0.4.0",
     "@turf/along": "6.5.0",
     "@turf/distance": "6.5.0",
     "@turf/helpers": "6.5.0",
@@ -68,23 +67,18 @@
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/runtime": "7.17.2",
     "@expo/config-plugins": "^7.2.5",
-    "@react-native/eslint-config": "^0.73.2",
-    "@react-native/eslint-plugin": "^0.74.0",
     "@react-native/metro-config": "^0.72.7",
     "@sinonjs/fake-timers": "^11.2.2",
     "@testing-library/react-native": "^12.4.3",
     "@tsconfig/node14": "^14.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "babel-jest": "^29.6.0",
     "documentation": "^14.0.0",
     "ejs": "^3.1.3",
     "ejs-lint": "^2.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^8.57.1",
     "eslint-config-universe": "13.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
     "expo-module-scripts": "^3.1.0",
     "husky": "^9.0.10",
     "jest": "^29.7.0",
@@ -93,53 +87,19 @@
     "metro-react-native-babel-preset": "^0.76.7",
     "node-dir": "0.1.17",
     "pinst": "^3.0.0",
-    "prettier": "^3.3.3",
-    "react": "^18.2.0",
+    "prettier": "3.3.3",
+    "react": "18.2.0",
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
-    "react-native": "0.72.1",
-    "react-test-renderer": "^18.2.0",
+    "react-native": "0.74.6",
+    "react-test-renderer": "18.2.0",
     "typescript": "^5.3.3"
   },
   "resolutions": {
     "typescript": "5.5.3"
   },
-  "jest": {
-    "preset": "react-native",
-    "collectCoverageFrom": [
-      "javascript/**/*.js"
-    ],
-    "setupFiles": [
-      "./setup-jest.js",
-      "./__tests__/__mocks__/react-native.mock.js"
-    ],
-    "modulePathIgnorePatterns": [
-      "example",
-      "__tests__/__mocks__",
-      "fixtures"
-    ]
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "yarn lint"
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "prettier",
-      "universe/native"
-    ],
-    "ignorePatterns": [
-      "node_modules/*",
-      "*.js",
-      "**/dist/*.js",
-      "/plugin/build"
-    ],
-    "plugins": [
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": "error"
-    }
-  },
   "packageManager": "yarn@4.1.0",
   "workspaces": [
     "apps/*",

package/react-native.config.js

@@ -3,7 +3,7 @@ module.exports = {
     platforms: {
       ios: {},
       android: {
-        sourceDir: './android/rctmln',
+        sourceDir: "./android/rctmln",
       },
     },
   },

package/scripts/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["universe/node"],
+};