@maplibre/maplibre-react-native 9.1.0 → 10.0.0-alpha.10

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "A MapLibre GL Native plugin for creating maps in React Native",
-  "version": "9.1.0",
+  "version": "10.0.0-alpha.10",
   "publishConfig": {
     "access": "public"
   },
   "author": "MapLibre",
-  "main": "./javascript/index.js",
+  "main": "./javascript/index.ts",
   "keywords": [
     "maps",
     "ios",
@@ -28,71 +28,77 @@
     "unittest:single": "jest --testNamePattern",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "prepack": "yarn build:plugin",
+    "lint:single": "eslint",
+    "prepack": "pinst --disable && yarn build:plugin",
     "test:plugin": "jest plugin",
     "build:plugin": "tsc --build plugin",
-    "lint:plugin": "eslint plugin/src/*"
+    "lint:plugin": "eslint plugin/src/*",
+    "postpack": "pinst --enable",
+    "typescript:check": "tsc -p ./tsconfig.json --noEmit"
+  },
+  "peerDependenciesMeta": {
+    "@expo/config-plugins": {
+      "optional": true
+    }
   },
   "peerDependencies": {
-    "prop-types": "^15.8.1",
+    "@expo/config-plugins": ">=7",
     "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/debounce": "^1.2.1",
+    "@types/geojson": "^7946.0.10",
+    "@types/jest": "^29.5.12",
+    "@types/mapbox__geo-viewport": "^0.4.1",
     "@types/node": "^18.11.18",
-    "debounce": "^1.2.0",
-    "deprecated-react-native-prop-types": "^4.1.0"
+    "@types/react": "^18.2.15",
+    "@types/react-native": "0.67.8",
+    "debounce": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.5",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/eslint-parser": "^7.22.9",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/runtime": "7.17.2",
-    "@react-native-community/eslint-config": "^3.0.1",
-    "@react-native-community/eslint-plugin": "^1.3.0",
+    "@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": "^8.0.1",
-    "@testing-library/react-native": "^8.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.2.0",
-    "@typescript-eslint/parser": "^5.8.0",
+    "@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",
     "babel-jest": "^29.6.0",
     "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": "^29.6.0",
-    "jest-cli": "^29.6.0",
-    "lint-staged": "^12.1.2",
+    "ejs-lint": "^2.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "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",
+    "jest-cli": "^29.7.0",
+    "lint-staged": "^15.2.2",
     "metro-react-native-babel-preset": "^0.76.7",
     "node-dir": "0.1.17",
-    "prettier": "^2.0.4",
-    "prop-types": "^15.8.1",
+    "pinst": "^3.0.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",
-    "standard": "*",
-    "typescript": "^4.4.3"
+    "typescript": "^5.3.3"
   },
   "jest": {
     "preset": "react-native",
@@ -109,13 +115,27 @@
       "fixtures"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && npm run generate"
-    }
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "yarn lint"
   },
-  "packageManager": "yarn@3.3.1"
+  "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"
 }

package/plugin/build/withMapLibre.d.ts

@@ -1,5 +1,5 @@
-import { ConfigPlugin, XcodeProject } from '@expo/config-plugins';
-type InstallerBlockName = 'pre' | 'post';
+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 addMapLibreInstallerBlock(src: string, blockName: InstallerBlockName): string;

package/plugin/build/withMapLibre.js

@@ -4,15 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setExcludedArchitectures = exports.addMapLibreInstallerBlock = 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");
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
 let pkg = {
-    name: '@maplibre/maplibre-react-native',
+    name: "@maplibre/maplibre-react-native",
 };
 try {
-    pkg = require('@maplibre/maplibre-react-native/package.json');
+    pkg = require("@maplibre/maplibre-react-native/package.json");
 }
 catch {
     // empty catch block
@@ -25,14 +25,14 @@ catch {
  * @param config
  * @returns
  */
-const withCocoaPodsInstallerBlocks = c => {
+const withCocoaPodsInstallerBlocks = (c) => {
     return (0, config_plugins_1.withDangerousMod)(c, [
-        'ios',
+        "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');
+            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;
         },
     ]);
@@ -42,19 +42,19 @@ const withCocoaPodsInstallerBlocks = c => {
 function applyCocoaPodsModifications(contents) {
     // Ensure installer blocks exist
     // let src = addInstallerBlock(contents, 'pre');
-    let src = addInstallerBlock(contents, 'post');
+    let src = addInstallerBlock(contents, "post");
     // src = addMapLibreInstallerBlock(src, 'pre');
-    src = addMapLibreInstallerBlock(src, 'post');
+    src = addMapLibreInstallerBlock(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')) {
+    for (const line of src.split("\n")) {
         const contents = line.trim();
         // Ignore comments
-        if (!contents.startsWith('#')) {
+        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.
@@ -69,11 +69,11 @@ function addInstallerBlock(src, blockName) {
     return (0, generateCode_1.mergeContents)({
         tag,
         src,
-        newSrc: [`  ${blockName}_install do |installer|`, '  end'].join('\n'),
+        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: '#',
+        comment: "#",
     }).contents;
 }
 exports.addInstallerBlock = addInstallerBlock;
@@ -81,10 +81,10 @@ function addMapLibreInstallerBlock(src, blockName) {
     return (0, generateCode_1.mergeContents)({
         tag: `@maplibre/maplibre-react-native-${blockName}_installer`,
         src,
-        newSrc: `    $RNMBGL.${blockName}_install(installer)`,
+        newSrc: `    $RCTMLN.${blockName}_install(installer)`,
         anchor: new RegExp(`${blockName}_install do \\|installer\\|`),
         offset: 1,
-        comment: '#',
+        comment: "#",
     }).contents;
 }
 exports.addMapLibreInstallerBlock = addMapLibreInstallerBlock;
@@ -96,24 +96,39 @@ 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 || {})) {
+    for (const { name, 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') {
+        if (name === "Release" &&
+            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 => {
+const withoutSignatures = (config) => {
+    const shellScript = `if [ "$XCODE_VERSION_MAJOR" = "1500" ]; then
+    echo "Remove signature files (Xcode 15 workaround)";
+    rm -rf "$CONFIGURATION_BUILD_DIR/MapLibre.xcframework-ios.signature";
+  fi`;
+    return (0, config_plugins_1.withXcodeProject)(config, async (config) => {
+        const xcodeProject = config.modResults;
+        xcodeProject.addBuildPhase([], "PBXShellScriptBuildPhase", "Remove signature files (Xcode 15 workaround)", null, {
+            shellPath: "/bin/sh",
+            shellScript,
+        });
+        return config;
+    });
+};
+const withExcludedSimulatorArchitectures = (c) => {
+    return (0, config_plugins_1.withXcodeProject)(c, (config) => {
         config.modResults = setExcludedArchitectures(config.modResults);
         return config;
     });
 };
-const withMapLibre = config => {
-    config = withExcludedSimulatorArchitectures(config);
+const withMapLibre = (config) => {
+    config = withoutSignatures(withExcludedSimulatorArchitectures(config));
     return withCocoaPodsInstallerBlocks(config);
 };
 exports.default = (0, config_plugins_1.createRunOncePlugin)(withMapLibre, pkg.name, pkg.version);

package/react-native.config.js

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

package/scripts/autogenHelpers/globals.js

@@ -84,25 +84,25 @@ global.getLayerType = function (layer, platform) {
 
   switch (layer.name) {
     case 'fill':
-      return isIOS ? 'MGLFillStyleLayer' : 'FillLayer';
+      return isIOS ? 'MLNFillStyleLayer' : 'FillLayer';
     case 'fill-extrusion':
-      return isIOS ? 'MGLFillExtrusionStyleLayer' : 'FillExtrusionLayer';
+      return isIOS ? 'MLNFillExtrusionStyleLayer' : 'FillExtrusionLayer';
     case 'line':
-      return isIOS ? 'MGLLineStyleLayer' : 'LineLayer';
+      return isIOS ? 'MLNLineStyleLayer' : 'LineLayer';
     case 'symbol':
-      return isIOS ? 'MGLSymbolStyleLayer' : 'SymbolLayer';
+      return isIOS ? 'MLNSymbolStyleLayer' : 'SymbolLayer';
     case 'circle':
-      return isIOS ? 'MGLCircleStyleLayer' : 'CircleLayer';
+      return isIOS ? 'MLNCircleStyleLayer' : 'CircleLayer';
     case 'background':
-      return isIOS ? 'MGLBackgroundStyleLayer' : 'BackgroundLayer';
+      return isIOS ? 'MLNBackgroundStyleLayer' : 'BackgroundLayer';
     case 'raster':
-      return isIOS ? 'MGLRasterStyleLayer' : 'RasterLayer';
+      return isIOS ? 'MLNRasterStyleLayer' : 'RasterLayer';
     case 'heatmap':
-      return isIOS ? 'MGLHeatmapStyleLayer' : 'HeatmapLayer';
+      return isIOS ? 'MLNHeatmapStyleLayer' : 'HeatmapLayer';
     case 'hillshade':
-      return isIOS ? 'MGLHillshadeStyleLayer' : 'HillshadeLayer';
+      return isIOS ? 'MLNHillshadeStyleLayer' : 'HillshadeLayer';
     case 'light':
-      return isIOS ? 'MGLLight' : 'Light';
+      return isIOS ? 'MLNLight' : 'Light';
     default:
       throw new Error(
         `Is ${layer.name} a new layer? We should add support for it!`,
@@ -265,7 +265,7 @@ global.getEnums = function (layers) {
 global.dtsInterfaceType = function (prop) {
   let propTypes = [];
 
-  if (prop.name.indexOf('Translate') !== -1) {
+  if (prop.name.indexOf('Translate') !== -1 && prop.type != 'enum') {
     propTypes.push('Translation');
   } else if (prop.type === 'color') {
     propTypes.push('string');

package/scripts/autogenerate.js

@@ -8,6 +8,7 @@ const ejs = require('ejs');
 const {execSync} = require('child_process');
 
 const prettier = require('prettier');
+const prettierrc = require('eslint-config-universe');
 
 const styleSpecJSON = require('../style-spec/v8.json');
 
@@ -31,7 +32,7 @@ function readAndroidVersion() {
     __dirname,
     '..',
     'android',
-    'rctmgl',
+    'rctmln',
     'build.gradle',
   );
   const lines = fs.readFileSync(buildGradlePath, 'utf8').split('\n');
@@ -63,18 +64,18 @@ const OUTPUT_EXAMPLE_PREFIX = [
 ];
 const OUTPUT_PREFIX = outputToExample ? OUTPUT_EXAMPLE_PREFIX : ['..'];
 
-const IOS_OUTPUT_PATH = path.join(__dirname, ...OUTPUT_PREFIX, 'ios', 'RCTMGL');
+const IOS_OUTPUT_PATH = path.join(__dirname, ...OUTPUT_PREFIX, 'ios', 'RCTMLN');
 const ANDROID_OUTPUT_PATH = path.join(
   __dirname,
   ...OUTPUT_PREFIX,
   'android',
-  'rctmgl',
+  'rctmln',
   'src',
   'main',
   'java',
   'com',
-  'mapbox',
-  'rctmgl',
+  'maplibre',
+  'rctmln',
   'components',
   'styles',
 );
@@ -252,6 +253,9 @@ function isTranslate(attrName) {
 
 function isAttrSupported(attr) {
   const support = getAttributeSupport(attr['sdk-support']);
+  if (attr.private) {
+    return false
+  }
   return support.basic.android && support.basic.ios;
 }
 
@@ -318,39 +322,43 @@ function getAllowedFunctionTypes(paintAttr) {
 async function generate() {
   const templateMappings = [
     {
-      input: path.join(TMPL_PATH, 'RCTMGLStyle.h.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.h'),
+      input: path.join(TMPL_PATH, 'RCTMLNStyle.h.ejs'),
+      output: path.join(IOS_OUTPUT_PATH, 'RCTMLNStyle.h'),
     },
-    {
+    /*{
       input: path.join(TMPL_PATH, 'index.d.ts.ejs'),
       output: path.join(IOS_OUTPUT_PATH, 'index.d.ts'),
+    },*/
+    {
+      input: path.join(TMPL_PATH, 'MaplibreStyles.ts.ejs'),
+      output: path.join(JS_OUTPUT_PATH, 'MaplibreStyles.d.ts'), 
     },
     {
-      input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.m'),
+      input: path.join(TMPL_PATH, 'RCTMLNStyle.m.ejs'),
+      output: path.join(IOS_OUTPUT_PATH, 'RCTMLNStyle.m'),
     },
     {
-      input: path.join(TMPL_PATH, 'RCTMGLStyleFactory.java.ejs'),
-      output: path.join(ANDROID_OUTPUT_PATH, 'RCTMGLStyleFactory.java'),
+      input: path.join(TMPL_PATH, 'RCTMLNStyleFactory.java.ejs'),
+      output: path.join(ANDROID_OUTPUT_PATH, 'RCTMLNStyleFactory.java'),
     },
     {
-      input: path.join(TMPL_PATH, 'styleMap.js.ejs'),
-      output: path.join(JS_OUTPUT_PATH, 'styleMap.js'),
+      input: path.join(TMPL_PATH, 'styleMap.ts.ejs'),
+      output: path.join(JS_OUTPUT_PATH, 'styleMap.ts'),
     },
   ];
   const outputPaths = templateMappings.map(m => m.output);
 
   // autogenerate code
-  templateMappings.forEach(({input, output}) => {
+  await Promise.all(templateMappings.map(async ({input, output}) => {
     const filename = output.split('/').pop();
     console.log(`Generating ${filename}`);
     const tmpl = ejs.compile(fs.readFileSync(input, 'utf8'), {strict: true});
     let results = tmpl({layers});
     if (filename.endsWith('ts')) {
-      results = prettier.format(results, {filepath: filename});
+      results = await prettier.format(results, { ...prettierrc, filepath: filename});
     }
     fs.writeFileSync(output, results);
-  });
+  }));
 
   // autogenerate docs
   const docBuilder = new DocJSONBuilder(layers);

package/scripts/download-style-spec.sh

@@ -11,5 +11,5 @@ if [ -e "./${FILENAME}" ]; then
 fi
 
 echo "Fetching new style spec ${FILENAME}"
-curl -sS https://raw.githubusercontent.com/maplibre/maplibre-gl-js/master/src/style-spec/reference/${FILENAME} -o ${FILENAME}
+curl -sS https://raw.githubusercontent.com/maplibre/maplibre-style-spec/main/src/reference/${FILENAME} -o ${FILENAME}
 cd ..

package/scripts/templates/MaplibreStyles.ts.ejs

@@ -0,0 +1,99 @@
+<%
+  const layers = locals.layers;
+-%>
+/* This file was generated from MapboxStyle.ts.ejs do not modify */
+import { type ImageSourcePropType } from 'react-native';
+
+export type Translation = { x: number; y: number } | [number, number];
+
+export interface Transition {
+  duration: number;
+  delay: number;
+}
+
+export type FormattedString = string; /* TODO */
+
+type ExpressionName =
+  // Types
+  | 'array' | 'boolean' | 'collator' | 'format' | 'image' | 'literal' | 'number' | 'number-format' | 'object' | 'string'
+  | 'to-boolean' | 'to-color' | 'to-number' | 'to-string' | 'typeof'
+  // Feature data
+  | 'accumulated' | 'feature-state' | 'geometry-type' | 'id' | 'line-progress' | 'properties'
+  // Lookup
+  | 'at' | 'get' | 'has' | 'in' | 'index-of' | 'length' | 'slice'
+  // Decision
+  | '!' | '!=' | '<' | '<=' | '==' | '>' | '>=' | 'all' | 'any' | 'case' | 'match' | 'coalesce' | 'within'
+  // Ramps, scales, curves
+  | 'interpolate' | 'interpolate-hcl' | 'interpolate-lab' | 'step'
+  // Variable binding
+  | 'let' | 'var'
+  // String
+  | 'concat' | 'downcase' | 'is-supported-script' | 'resolved-locale' | 'upcase'
+  // Color
+  | 'rgb' | 'rgba' | 'to-rgba'
+  // Math
+  | '-' | '*' | '/' | '%' | '^' | '+' | 'abs' | 'acos' | 'asin' | 'atan' | 'ceil' | 'cos' | 'distance' | 'e'
+  | 'floor' | 'ln' | 'ln2' | 'log10' | 'log2' | 'max' | 'min' | 'pi' | 'round' | 'sin' | 'sqrt' | 'tan'
+  // Zoom, Heatmap
+  | 'zoom' | 'heatmap-density';
+
+type ExpressionField =
+  | string
+  | number
+  | boolean
+  | Expression
+  | ExpressionField[]
+  | { [key: string]: ExpressionField };
+
+export type Expression = readonly [ExpressionName, ...ExpressionField[]];
+
+export type FilterExpression = Expression;
+
+type ExpressionParameters = 'zoom' | 'feature' | 'feature-state' | 'sky-radial-progress' | 'line-progress' | 'heatmap-density';
+
+type ResolvedImageType = ImageSourcePropType | string;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
+  | T
+  | Expression;
+
+<%_ for (let enumInfo of getEnums(layers)) { _%>
+  enum <%- pascelCase(enumInfo.name) %>Enum {
+    <%_ for (let k of Object.keys(enumInfo.values)) { _%>
+      /** <%- enumInfo.values[k].doc %> */
+      <%- pascelCase(k) %> = '<%- k %>',
+    <%_ } _%>
+  }
+  type <%- pascelCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>; 
+<%_ } _%>
+
+type Enum<EnumType, EnumValues> = EnumType | EnumValues;
+
+<%_ for (let layer of layers) { _%>
+  export interface <%- pascelCase(layer.name) %>LayerStyleProps {
+    <%_ for (let prop of layer.properties) { _%>
+      /**
+       * <%- prop.doc.description %>
+      <%_ if (prop.doc.requires.length) { _%>
+       *
+       * @requires <%- prop.doc.requires.join(', ') %>
+      <%_ } _%>
+      <%_ if (prop.doc.disabledBy.length) { _%>
+       *
+       * @disabledBy <%- prop.doc.disabledBy.join(', ') %>
+      <%_ } _%>
+       */
+      <%= prop.name %>?: <%- dtsInterfaceType(prop) %>
+      <%_ if (true && prop.transition) { %>
+      /**
+       * The transition affecting any changes to this layer’s <%= prop.name %> property.
+       */
+      <%= prop.name %>Transition?: Transition,
+      <%_ } _%>
+      <%_ } _%>
+
+  };
+<%_ } _%>
+
+export type AllLayerStyleProps = <%- layers.map(l => `${pascelCase(l.name)}LayerStyleProps`).join("|") -%>;

package/scripts/templates/{RCTMGLStyle.h.ejs → RCTMLNStyle.h.ejs}

@@ -4,18 +4,18 @@
 // DO NOT MODIFY
 // THIS FILE IS AUTOGENERATED
 
-#import "RCTMGLStyle.h"
-#import "RCTMGLStyleValue.h"
+#import "RCTMLNStyle.h"
+#import "RCTMLNStyleValue.h"
 #import <React/RCTBridge.h>
 
-@import Mapbox;
+@import MapLibre;
 
-@interface RCTMGLStyle : NSObject
+@interface RCTMLNStyle : NSObject
 
 @property (nonatomic, weak) RCTBridge *bridge;
-@property (nonatomic, strong) MGLStyle *style;
+@property (nonatomic, strong) MLNStyle *style;
 
-- (id)initWithMGLStyle:(MGLStyle*)mglStyle;
+- (id)initWithMLNStyle:(MLNStyle*)mlnStyle;
 
 <%_ for (const layer of layers) { _%>
 - (void)<%- setLayerMethodName(layer, 'ios') -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
@@ -23,9 +23,9 @@
 
 <%_ for (const layer of layers) { _%>
 <%_ for (const prop of layer.properties) { _%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
+- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ if (prop.transition) { _%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
+- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
 <%_ } _%>
 <%_ } _%>
 <% } %>