@maplibre/maplibre-react-native 8.6.0-beta.0

package/maplibre-react-native.podspec

@@ -0,0 +1,79 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+$RNMBGL = Object.new
+
+def $RNMBGL._add_spm_to_target(project, target, url, requirement, product_name)
+  pkg_class = Xcodeproj::Project::Object::XCRemoteSwiftPackageReference
+  ref_class = Xcodeproj::Project::Object::XCSwiftPackageProductDependency
+  pkg = project.root_object.package_references.find { |p| p.class == pkg_class && p.repositoryURL == url }
+  if !pkg
+    pkg = project.new(pkg_class)
+    pkg.repositoryURL = url
+    pkg.requirement = requirement
+    project.root_object.package_references << pkg
+  end
+  ref = target.package_product_dependencies.find { |r| r.class == ref_class && r.package == pkg && r.product_name == product_name }
+  if !ref
+    ref = project.new(ref_class)
+    ref.package = pkg
+    ref.product_name = product_name
+    target.package_product_dependencies << ref
+  end
+end
+
+def $RNMBGL.post_install(installer)
+  spm_spec = {
+    url: "https://github.com/maplibre/maplibre-gl-native-distribution",
+    requirement: {
+      kind: "exactVersion",
+      version: "5.12.2"
+    },
+    product_name: "Mapbox"
+  }
+
+  if $RNMBGL_SPM_Spec.is_a?(Hash)
+    spm_spec = $RNMBGL_SPM_Spec
+  end
+  project = installer.pods_project
+  self._add_spm_to_target(
+    project,
+    project.targets.find { |t| t.name == "maplibre-react-native"},
+    spm_spec[:url],
+    spm_spec[:requirement],
+    spm_spec[:product_name]
+  )
+
+  installer.aggregate_targets.group_by(&:user_project).each do |project, targets|
+    targets.each do |target|
+      target.user_targets.each do |user_target|
+        self._add_spm_to_target(
+          project,
+          user_target,
+          spm_spec[:url],
+          spm_spec[:requirement],
+          spm_spec[:product_name]
+        )
+      end
+    end
+  end
+end
+
+Pod::Spec.new do |s|
+  s.name		= "maplibre-react-native"
+  s.summary		= "React Native Component for Maplibre Native"
+  s.version		= package['version']
+  s.authors		= { "Ian Wagner" => "ian.wagner@stadiamaps.com" }  # TODO: MapLibre email?
+  s.homepage    	= "https://github.com/maplibre/maplibre-react-native"
+  s.source      	= { :git => "https://github.com/maplibre/maplibre-react-native.git" }
+  s.license     	= "MIT"
+  s.platform    	= :ios, "8.0"
+
+  s.dependency 'React-Core'
+  s.dependency 'React'
+
+  s.subspec 'DynamicLibrary' do |sp|
+    sp.source_files	= "ios/RCTMGL/**/*.{h,m}"
+  end
+end

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@maplibre/maplibre-react-native",
+  "description": "A MapLibre GL Native plugin for creating maps in React Native",
+  "version": "8.6.0-beta.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "MapLibre",
+  "main": "./javascript/index.js",
+  "keywords": [
+    "gl",
+    "ios",
+    "android",
+    "mapbox",
+    "maplibre",
+    "react-native"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maplibre/maplibre-react-native"
+  },
+  "scripts": {
+    "fetch:style:spec": ". ./scripts/download-style-spec.sh",
+    "generate": "yarn node ./scripts/autogenerate",
+    "test": "npm run lint && npm run unittest",
+    "unittest": "jest",
+    "unittest:single": "jest --testNamePattern",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepack": "yarn build:plugin",
+    "test:plugin": "jest plugin",
+    "build:plugin": "tsc --build plugin",
+    "lint:plugin": "eslint plugin/src/*"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.8.1",
+    "react": ">=16.6.1",
+    "react-native": ">=0.59.9"
+  },
+  "dependencies": {
+    "@expo/config-plugins": "^4.0.3",
+    "@mapbox/geo-viewport": ">= 0.4.0",
+    "@turf/along": "6.5.0",
+    "@turf/distance": "6.5.0",
+    "@turf/helpers": "6.5.0",
+    "@turf/length": "6.5.0",
+    "@turf/nearest-point-on-line": "6.5.0",
+    "@types/geojson": "^7946.0.7",
+    "@types/node": "^18.11.18",
+    "debounce": "^1.2.0",
+    "deprecated-react-native-prop-types": "^2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/runtime": "7.17.2",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@react-native-community/eslint-plugin": "^1.3.0",
+    "@sinonjs/fake-timers": "^8.0.1",
+    "@testing-library/react-native": "^8.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.2.0",
+    "@typescript-eslint/parser": "^5.8.0",
+    "babel-jest": "^27.5.1",
+    "documentation": "^14.0.0",
+    "ejs": "^3.1.3",
+    "ejs-lint": "^1.1.0",
+    "eslint": "^8.29.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-fp": "^2.3.0",
+    "eslint-plugin-ft-flow": "^2.0.3",
+    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jest": "^27.1.7",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^4.0.0",
+    "expo-module-scripts": "^3.0.4",
+    "husky": "4.3.8",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
+    "lint-staged": "^12.1.2",
+    "metro-react-native-babel-preset": "^0.70.3",
+    "node-dir": "0.1.17",
+    "prettier": "^2.0.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
+    "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
+    "react-native": "0.68.0",
+    "react-test-renderer": "^18.0.0",
+    "standard": "*",
+    "typescript": "^4.4.3"
+  },
+  "jest": {
+    "preset": "react-native",
+    "collectCoverageFrom": [
+      "javascript/**/*.js"
+    ],
+    "setupFiles": [
+      "./setup-jest.js",
+      "./__tests__/__mocks__/react-native.mock.js"
+    ],
+    "modulePathIgnorePatterns": [
+      "example",
+      "__tests__/__mocks__",
+      "fixtures"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && npm run generate"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "yarn lint"
+  },
+  "packageManager": "yarn@3.3.1"
+}

package/plugin/build/withMapbox.d.ts

@@ -0,0 +1,12 @@
+import { ConfigPlugin, XcodeProject } from '@expo/config-plugins';
+type InstallerBlockName = 'pre' | 'post';
+export declare function applyCocoaPodsModifications(contents: string): string;
+export declare function addInstallerBlock(src: string, blockName: InstallerBlockName): string;
+export declare function addMapboxInstallerBlock(src: string, blockName: InstallerBlockName): string;
+/**
+ * Exclude building for arm64 on simulator devices in the pbxproj project.
+ * Without this, production builds targeting simulators will fail.
+ */
+export declare function setExcludedArchitectures(project: XcodeProject): XcodeProject;
+declare const _default: ConfigPlugin<void>;
+export default _default;

package/plugin/build/withMapbox.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setExcludedArchitectures = exports.addMapboxInstallerBlock = exports.addInstallerBlock = exports.applyCocoaPodsModifications = void 0;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const config_plugins_1 = require("@expo/config-plugins");
+const generateCode_1 = require("@expo/config-plugins/build/utils/generateCode");
+let pkg = {
+    name: '@maplibre/maplibre-react-native',
+};
+try {
+    pkg = require('@maplibre/maplibre-react-native/package.json');
+}
+catch {
+    // empty catch block
+}
+/**
+ * Dangerously adds the custom installer hooks to the Podfile.
+ * In the future this should be removed in favor of some custom hooks provided by Expo autolinking.
+ *
+ * https://github.com/maplibre/maplibre-react-native/blob/main/ios/install.md
+ * @param config
+ * @returns
+ */
+const withCocoaPodsInstallerBlocks = c => {
+    return (0, config_plugins_1.withDangerousMod)(c, [
+        'ios',
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        async (config) => {
+            const file = path_1.default.join(config.modRequest.platformProjectRoot, 'Podfile');
+            const contents = await fs_1.promises.readFile(file, 'utf8');
+            await fs_1.promises.writeFile(file, applyCocoaPodsModifications(contents), 'utf-8');
+            return config;
+        },
+    ]);
+};
+// Only the preinstaller block is required, the post installer block is
+// used for spm (swift package manager) which Expo doesn't currently support.
+function applyCocoaPodsModifications(contents) {
+    // Ensure installer blocks exist
+    let src = addInstallerBlock(contents, 'pre');
+    // src = addInstallerBlock(src, "post");
+    src = addMapboxInstallerBlock(src, 'pre');
+    // src = addMapboxInstallerBlock(src, "post");
+    return src;
+}
+exports.applyCocoaPodsModifications = applyCocoaPodsModifications;
+function addInstallerBlock(src, blockName) {
+    const matchBlock = new RegExp(`${blockName}_install do \\|installer\\|`);
+    const tag = `${blockName}_installer`;
+    for (const line of src.split('\n')) {
+        const contents = line.trim();
+        // Ignore comments
+        if (!contents.startsWith('#')) {
+            // Prevent adding the block if it exists outside of comments.
+            if (contents.match(matchBlock)) {
+                // This helps to still allow revisions, since we enabled the block previously.
+                // Only continue if the generated block exists...
+                const modified = (0, generateCode_1.removeGeneratedContents)(src, tag);
+                if (!modified) {
+                    return src;
+                }
+            }
+        }
+    }
+    return (0, generateCode_1.mergeContents)({
+        tag,
+        src,
+        newSrc: [`  ${blockName}_install do |installer|`, '  end'].join('\n'),
+        anchor: /use_react_native/,
+        // We can't go after the use_react_native block because it might have parameters, causing it to be multi-line (see react-native template).
+        offset: 0,
+        comment: '#',
+    }).contents;
+}
+exports.addInstallerBlock = addInstallerBlock;
+function addMapboxInstallerBlock(src, blockName) {
+    return (0, generateCode_1.mergeContents)({
+        tag: `@maplibre/maplibre-react-native-${blockName}_installer`,
+        src,
+        newSrc: `    $RNMBGL.${blockName}_install(installer)`,
+        anchor: new RegExp(`${blockName}_install do \\|installer\\|`),
+        offset: 1,
+        comment: '#',
+    }).contents;
+}
+exports.addMapboxInstallerBlock = addMapboxInstallerBlock;
+/**
+ * Exclude building for arm64 on simulator devices in the pbxproj project.
+ * Without this, production builds targeting simulators will fail.
+ */
+function setExcludedArchitectures(project) {
+    const configurations = project.pbxXCBuildConfigurationSection();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    for (const { buildSettings } of Object.values(configurations || {})) {
+        // Guessing that this is the best way to emulate Xcode.
+        // Using `project.addToBuildSettings` modifies too many targets.
+        if (typeof buildSettings?.PRODUCT_NAME !== 'undefined') {
+            buildSettings['"EXCLUDED_ARCHS[sdk=iphonesimulator*]"'] = '"arm64"';
+        }
+    }
+    return project;
+}
+exports.setExcludedArchitectures = setExcludedArchitectures;
+const withExcludedSimulatorArchitectures = c => {
+    return (0, config_plugins_1.withXcodeProject)(c, config => {
+        config.modResults = setExcludedArchitectures(config.modResults);
+        return config;
+    });
+};
+const withMapbox = config => {
+    config = withExcludedSimulatorArchitectures(config);
+    return withCocoaPodsInstallerBlocks(config);
+};
+exports.default = (0, config_plugins_1.createRunOncePlugin)(withMapbox, pkg.name, pkg.version);

package/plugin/install.md

@@ -0,0 +1,32 @@
+# Expo installation
+
+> This package cannot be used in the "Expo Go" app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
+
+First install the package with yarn, npm, or [`expo install`](https://docs.expo.io/workflow/expo-cli/#expo-install).
+
+```sh
+expo install @maplibre/maplibre-react-native
+```
+
+After installing this npm package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:
+
+```json
+{
+  "expo": {
+    "plugins": ["@maplibre/maplibre-react-native"]
+  }
+}
+```
+
+Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.
+
+## API
+
+This plugin doesn't currently provide any additional properties for customization. The plugin simply generates the pre-install block in the `ios/Podfile` (the post-install block is not required for Expo support). No additional changes are done on Android.
+
+## Manual Setup
+
+For bare workflow projects, you can follow the manual setup guides:
+
+- [iOS](/ios/install.md)
+- [Android](/android/install.md)

package/react-native.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: {},
+      android: {
+        sourceDir: './android/rctmgl',
+      },
+    },
+  },
+};