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

package/scripts/autogenerate.js

@@ -0,0 +1,374 @@
+require('./autogenHelpers/globals');
+
+const fs = require('fs');
+const path = require('path');
+
+const ejs = require('ejs');
+
+const {execSync} = require('child_process');
+
+const prettier = require('prettier');
+
+const styleSpecJSON = require('../style-spec/v8.json');
+
+const DocJSONBuilder = require('./autogenHelpers/DocJSONBuilder');
+const MarkdownBuilder = require('./autogenHelpers/MarkdownBuilder');
+
+function readIosVersion() {
+  const podspecPath = path.join(
+    __dirname,
+    '..',
+    'maplibre-react-native.podspec',
+  );
+  const lines = fs.readFileSync(podspecPath, 'utf8').split('\n');
+  const maplibreLineRegex = /^\s+version:\s*"(\d+\.\d+\.\d+)"$/;
+  const maplibreLine = lines.filter(i => maplibreLineRegex.exec(i))[0];
+  return `${maplibreLineRegex.exec(maplibreLine)[1]}.0`;
+}
+
+function readAndroidVersion() {
+  const buildGradlePath = path.join(
+    __dirname,
+    '..',
+    'android',
+    'rctmgl',
+    'build.gradle',
+  );
+  const lines = fs.readFileSync(buildGradlePath, 'utf8').split('\n');
+  const maplibreLineRegex = /^\s+implementation\s+"org.maplibre.gl:android-sdk:(\d+\.\d+\.\d+)"$/;
+  const maplibreLine = lines.filter(i => maplibreLineRegex.exec(i))[0];
+  return maplibreLineRegex.exec(maplibreLine)[1];
+}
+
+if (!styleSpecJSON) {
+  console.log(
+    'Could not find style spec, try running "yarn run fetch:style:spec"',
+  );
+  process.exit(1);
+}
+
+const layers = [];
+const androidVersion = readAndroidVersion();
+const iosVersion = readIosVersion();
+
+const TMPL_PATH = path.join(__dirname, 'templates');
+
+const outputToExample = false;
+const OUTPUT_EXAMPLE_PREFIX = [
+  '..',
+  'example',
+  'node_modules',
+  '@maplibre',
+  'maplibre-react-native',
+];
+const OUTPUT_PREFIX = outputToExample ? OUTPUT_EXAMPLE_PREFIX : ['..'];
+
+const IOS_OUTPUT_PATH = path.join(__dirname, ...OUTPUT_PREFIX, 'ios', 'RCTMGL');
+const ANDROID_OUTPUT_PATH = path.join(
+  __dirname,
+  ...OUTPUT_PREFIX,
+  'android',
+  'rctmgl',
+  'src',
+  'main',
+  'java',
+  'com',
+  'mapbox',
+  'rctmgl',
+  'components',
+  'styles',
+);
+const JS_OUTPUT_PATH = path.join(
+  __dirname,
+  ...OUTPUT_PREFIX,
+  'javascript',
+  'utils',
+);
+
+getSupportedLayers(Object.keys(styleSpecJSON.layer.type.values)).forEach(
+  layerName => {
+    layers.push({
+      name: layerName,
+      properties: getPropertiesForLayer(layerName),
+    });
+  },
+);
+
+// add light as a layer
+layers.push({name: 'light', properties: getPropertiesForLight()});
+
+function getPropertiesForLight() {
+  const lightAttributes = styleSpecJSON.light;
+
+  return getSupportedProperties(lightAttributes).map(attrName => {
+    return Object.assign({}, buildProperties(lightAttributes, attrName), {
+      allowedFunctionTypes: [],
+    });
+  });
+}
+
+function getPropertiesForLayer(layerName) {
+  const paintAttributes = styleSpecJSON[`paint_${layerName}`];
+  const layoutAttributes = styleSpecJSON[`layout_${layerName}`];
+
+  const paintProps = getSupportedProperties(paintAttributes).map(attrName => {
+    const prop = buildProperties(paintAttributes, attrName);
+
+    // overrides
+    if (['line-width'].includes(attrName)) {
+      prop.allowedFunctionTypes = ['camera'];
+    }
+
+    return prop;
+  });
+
+  const layoutProps = getSupportedProperties(layoutAttributes).map(attrName => {
+    const prop = buildProperties(layoutAttributes, attrName);
+
+    // overrides
+    if (
+      [
+        'line-join',
+        'text-max-width',
+        'text-letter-spacing',
+        'text-anchor',
+        'text-justify',
+        'text-font',
+      ].includes(attrName)
+    ) {
+      prop.allowedFunctionTypes = ['camera'];
+    }
+
+    return prop;
+  });
+
+  return layoutProps.concat(paintProps);
+}
+
+function getSupportedLayers(layerNames) {
+  const layerMap = styleSpecJSON.layer.type.values;
+
+  const supportedLayers = [];
+  for (const layerName of layerNames) {
+    const layer = layerMap[layerName];
+    const support = getAttributeSupport(layer['sdk-support']);
+
+    if (support.basic.android && support.basic.ios) {
+      supportedLayers.push(layerName);
+    }
+  }
+
+  return supportedLayers;
+}
+
+function getSupportedProperties(attributes) {
+  return Object.keys(attributes).filter(attrName =>
+    isAttrSupported(attributes[attrName]),
+  );
+}
+
+function buildProperties(attributes, attrName) {
+  return {
+    name: camelCase(attrName),
+    doc: {
+      default: attributes[attrName].default,
+      minimum: attributes[attrName].minimum,
+      maximum: attributes[attrName].maximum,
+      units: attributes[attrName].units,
+      description: formatDescription(attributes[attrName].doc),
+      requires: getRequires(attributes[attrName].requires),
+      disabledBy: getDisables(attributes[attrName].requires),
+      values: attributes[attrName].values,
+    },
+    type: attributes[attrName].type,
+    value: attributes[attrName].value,
+    image: isImage(attrName),
+    translate: isTranslate(attrName),
+    transition: attributes[attrName].transition,
+    expression: attributes[attrName].expression,
+    expressionSupported:
+      Object.keys(attributes[attrName].expression || {}).length > 0,
+    support: getAttributeSupport(attributes[attrName]['sdk-support']),
+    allowedFunctionTypes: getAllowedFunctionTypes(attributes[attrName]),
+  };
+}
+
+function formatDescription(description) {
+  const words = description.split(' ');
+
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+
+    if (word.includes('-')) {
+      words[i] = camelCase(word);
+    }
+  }
+
+  return words.join(' ');
+}
+
+function getRequires(requiredItems) {
+  const items = [];
+
+  if (!requiredItems) {
+    return items;
+  }
+
+  for (const item of requiredItems) {
+    if (typeof item === 'string') {
+      items.push(camelCase(item, '-'));
+    }
+  }
+
+  return items;
+}
+
+function getDisables(disabledItems) {
+  const items = [];
+
+  if (!disabledItems) {
+    return items;
+  }
+
+  for (const item of disabledItems) {
+    if (item['!']) {
+      items.push(camelCase(item['!'], '-'));
+    }
+  }
+
+  return items;
+}
+
+function isImage(attrName) {
+  return (
+    attrName.toLowerCase().indexOf('pattern') !== -1 ||
+    attrName.toLowerCase().indexOf('image') !== -1
+  );
+}
+
+function isTranslate(attrName) {
+  return attrName.toLowerCase().indexOf('translate') !== -1;
+}
+
+function isAttrSupported(attr) {
+  const support = getAttributeSupport(attr['sdk-support']);
+  return support.basic.android && support.basic.ios;
+}
+
+function getAttributeSupport(sdkSupport) {
+  const support = {
+    basic: {android: false, ios: false},
+    data: {android: false, ios: false},
+  };
+
+  const basicSupport = sdkSupport && sdkSupport['basic functionality'];
+  if (basicSupport && basicSupport.android) {
+    support.basic.android = isVersionGTE(androidVersion, basicSupport.android);
+  }
+  if (basicSupport && basicSupport.ios) {
+    support.basic.ios = isVersionGTE(iosVersion, basicSupport.ios);
+  }
+
+  const dataDrivenSupport = sdkSupport && sdkSupport['data-driven styling'];
+  if (dataDrivenSupport && dataDrivenSupport.android) {
+    support.data.android = isVersionGTE(
+      androidVersion,
+      dataDrivenSupport.android,
+    );
+  }
+  if (dataDrivenSupport && dataDrivenSupport.ios) {
+    support.data.ios = isVersionGTE(iosVersion, dataDrivenSupport.ios);
+  }
+
+  if (support.data.ios !== true || support.data.android !== true) {
+    support.data.ios = false;
+    support.data.android = false;
+  }
+
+  return support;
+}
+
+function isVersionGTE(version, otherVersion) {
+  const v = +version
+    .split('.')
+    .map(i => String(i).padStart(3, '0'))
+    .join('');
+  const ov = +otherVersion
+    .split('.')
+    .map(i => String(i).padStart(3, '0'))
+    .join('');
+  return v >= ov;
+}
+
+function getAllowedFunctionTypes(paintAttr) {
+  const allowedFunctionTypes = [];
+
+  if (paintAttr['zoom-function']) {
+    allowedFunctionTypes.push('camera');
+  }
+
+  if (paintAttr['property-function']) {
+    allowedFunctionTypes.push('source');
+    allowedFunctionTypes.push('composite');
+  }
+
+  return allowedFunctionTypes;
+}
+
+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, 'index.d.ts.ejs'),
+      output: path.join(IOS_OUTPUT_PATH, 'index.d.ts'),
+    },
+    {
+      input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
+      output: path.join(IOS_OUTPUT_PATH, 'RCTMGLStyle.m'),
+    },
+    {
+      input: path.join(TMPL_PATH, 'RCTMGLStyleFactory.java.ejs'),
+      output: path.join(ANDROID_OUTPUT_PATH, 'RCTMGLStyleFactory.java'),
+    },
+    {
+      input: path.join(TMPL_PATH, 'styleMap.js.ejs'),
+      output: path.join(JS_OUTPUT_PATH, 'styleMap.js'),
+    },
+  ];
+  const outputPaths = templateMappings.map(m => m.output);
+
+  // autogenerate code
+  templateMappings.forEach(({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});
+    }
+    fs.writeFileSync(output, results);
+  });
+
+  // autogenerate docs
+  const docBuilder = new DocJSONBuilder(layers);
+  const markdownBuilder = new MarkdownBuilder();
+  await docBuilder.generate();
+  await markdownBuilder.generate();
+
+  // Check if any generated files changed
+  try {
+    execSync(`git diff --exit-code docs/ ${outputPaths.join(' ')}`);
+  } catch (error) {
+    console.error(
+      '\n\nThere are unstaged changes in the generated code. ' +
+        'Please add them to your commit.\n' +
+        'If you would really like to exclude them, run "git commit -n" to skip.\n\n',
+    );
+    process.exit(1);
+  }
+}
+
+generate();

package/scripts/download-style-spec.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+echo "Downloading MapboxGL Style Spec"
+cd style-spec/
+
+FILENAME=v8.json
+
+if [ -e "./${FILENAME}" ]; then
+  echo "Removing old style spec ${FILENAME}"
+  rm "./${FILENAME}"
+fi
+
+echo "Fetching new style spec ${FILENAME}"
+curl -sS https://raw.githubusercontent.com/mapbox/mapbox-gl-js/master/src/style-spec/reference/${FILENAME} -o ${FILENAME}
+cd ..

package/scripts/templates/RCTMGLStyle.h.ejs

@@ -0,0 +1,33 @@
+<%
+  const layers = locals.layers;
+-%>
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+#import "RCTMGLStyle.h"
+#import "RCTMGLStyleValue.h"
+#import <React/RCTBridge.h>
+
+@import Mapbox;
+
+@interface RCTMGLStyle : NSObject
+
+@property (nonatomic, weak) RCTBridge *bridge;
+@property (nonatomic, strong) MGLStyle *style;
+
+- (id)initWithMGLStyle:(MGLStyle*)mglStyle;
+
+<%_ for (const layer of layers) { _%>
+- (void)<%- setLayerMethodName(layer, 'ios') -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
+<%_ } _%>
+
+<%_ 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;
+<%_ if (prop.transition) { _%>
+- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue;
+<%_ } _%>
+<%_ } _%>
+<% } %>
+
+@end

package/scripts/templates/RCTMGLStyle.m.ejs

@@ -0,0 +1,97 @@
+<%
+  const layers = locals.layers;
+-%>
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+#import "RCTMGLStyle.h"
+#import "RCTMGLUtils.h"
+
+@implementation RCTMGLStyle
+
+- (id)initWithMGLStyle:(MGLStyle*)mglStyle
+{
+    if (self = [super init]) {
+        _style = mglStyle;
+    }
+    return self;
+}
+
+<% for (const layer of layers) { %>
+- (void)<%- setLayerMethodName(layer, 'ios') -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid
+{
+  if (![self _hasReactStyle:reactStyle]) {
+    // TODO throw exception
+    return;
+  }
+
+  NSArray<NSString*> *styleProps = [reactStyle allKeys];
+  for (NSString *prop in styleProps) {
+    if ([prop isEqualToString:@"__MAPBOX_STYLESHEET__"]) {
+      continue;
+    }
+
+    RCTMGLStyleValue *styleValue = [RCTMGLStyleValue make:reactStyle[prop]];
+
+  <% for (let i = 0; i < layer.properties.length; i++) { -%>
+  <%- ifOrElseIf(i) -%> ([prop isEqualToString:@"<%= layer.properties[i].name %>"]) {
+  <%_ if (layer.properties[i].image) { _%>
+      if (![styleValue shouldAddImage]) {
+        [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+      } else {
+        NSString *imageURI = [styleValue getImageURI];
+
+        [RCTMGLUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
+          if (image != nil) {
+            dispatch_async(dispatch_get_main_queue(), ^{
+              if (isValid()) {
+                [self->_style setImage:image forName:imageURI];
+                [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+              }
+            });
+          }
+        }];
+      }
+  <%_ } else { _%>
+      [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>:layer withReactStyleValue:styleValue];
+  <%_ } _%>
+  <%_ if (layer.properties[i].transition) { _%>
+    } else if ([prop isEqualToString:@"<%= layer.properties[i].name %>Transition"]) {
+      [self set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>Transition:layer withReactStyleValue:styleValue];
+  <%_ } _%>
+  <% } -%>
+  } else {
+      // TODO throw exception
+    }
+  }
+}
+<% } %>
+
+<% 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
+{
+    <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
+    layer.position = [styleValue getSphericalPosition];
+    <%_ } else if (prop.name === 'visibility') { _%>
+    layer.visible = [styleValue isVisible];
+    <%_ } else { _%>
+    layer.<%- iosPropName(prop.name) -%> = styleValue.mglStyleValue;
+    <%_ } _%>
+}
+<%_ if (prop.transition) { _%>
+
+- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue
+{
+    layer.<%- iosPropName(prop.name) -%>Transition = [styleValue getTransition];
+}
+<%_ } _%>
+<% } %>
+<% } %>
+
+- (BOOL)_hasReactStyle:(NSDictionary *)reactStyle
+{
+  return reactStyle != nil && reactStyle.allKeys.count > 0;
+}
+
+@end

package/scripts/templates/RCTMGLStyleFactory.java.ejs

@@ -0,0 +1,107 @@
+<%
+  const layers = locals.layers;
+-%>
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+package com.mapbox.rctmgl.components.styles;
+
+import com.mapbox.mapboxsdk.style.layers.BackgroundLayer;
+import com.mapbox.mapboxsdk.style.layers.CircleLayer;
+import com.mapbox.mapboxsdk.style.layers.FillExtrusionLayer;
+import com.mapbox.mapboxsdk.style.layers.FillLayer;
+import com.mapbox.mapboxsdk.style.layers.LineLayer;
+import com.mapbox.mapboxsdk.style.layers.PropertyFactory;
+import com.mapbox.mapboxsdk.style.layers.PropertyValue;
+import com.mapbox.mapboxsdk.style.layers.RasterLayer;
+import com.mapbox.mapboxsdk.style.layers.SymbolLayer;
+import com.mapbox.mapboxsdk.style.layers.HeatmapLayer;
+import com.mapbox.mapboxsdk.style.layers.HillshadeLayer;
+import com.mapbox.mapboxsdk.style.layers.TransitionOptions;
+import com.mapbox.mapboxsdk.style.light.Light;
+import com.mapbox.mapboxsdk.style.light.Position;
+import com.mapbox.rctmgl.utils.DownloadMapImageTask;
+
+import java.util.List;
+
+public class RCTMGLStyleFactory {
+    public static final String VALUE_KEY = "value";
+    public static final String SHOULD_ADD_IMAGE_KEY = "shouldAddImage";
+
+  <%_ for (const layer of layers) { _%>
+    public static void <%- setLayerMethodName(layer) -%>(final <%- getLayerType(layer, 'android') -%> layer, RCTMGLStyle style) {
+      List<String> styleKeys = style.getAllStyleKeys();
+
+      if (styleKeys.size() == 0) {
+        return;
+      }
+
+      for (String styleKey : styleKeys) {
+        final RCTMGLStyleValue styleValue = style.getStyleValueForKey(styleKey);
+
+        switch (styleKey) {
+          <%_ for (const prop of layer.properties) { _%>
+            case "<%= prop.name %>":
+              <%_ if (prop.image) { _%>
+              style.addImage(styleValue, new DownloadMapImageTask.OnAllImagesLoaded() {
+                  @Override
+                  public void onAllImagesLoaded() {
+                      RCTMGLStyleFactory.set<%- pascelCase(prop.name) -%>(layer, styleValue);
+                  }
+              });
+              <%_ } else { _%>
+              RCTMGLStyleFactory.set<%- pascelCase(prop.name) -%>(layer, styleValue);
+              <%_ } _%>
+              break;
+            <%_ if (prop.transition) { _%>
+            case "<%= prop.name %>Transition":
+              RCTMGLStyleFactory.set<%- pascelCase(prop.name) -%>Transition(layer, styleValue);
+              break;
+            <%_ } _%>
+          <%_ } _%>
+        }
+      }
+    }
+  <%_ } _%>
+
+  <%_ for (const layer of layers) { _%>
+  <%_ for (const prop of layer.properties) { _%>
+    public static void set<%- pascelCase(prop.name) -%>(<%- getLayerType(layer, 'android') -%> layer, RCTMGLStyleValue styleValue) {
+      <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
+      Float[] values = styleValue.getFloatArray(VALUE_KEY);
+      layer.set<%- pascelCase(prop.name) -%>(Position.fromPosition(values[0], values[1], values[2]));
+      <%_ } else if (layer.name === 'light') { _%>
+      layer.set<%- pascelCase(prop.name) -%>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>);
+      <%_ } else if (prop.name === 'visibility') { _%>
+      layer.setProperties(PropertyFactory.visibility(styleValue.getString(VALUE_KEY)));
+      <%_ } else if (prop.type === 'resolvedImage') { _%>
+      if (styleValue.isExpression()) {
+        if (styleValue.isImageStringValue()) {
+          layer.setProperties(PropertyFactory.<%= prop.name %>(styleValue.getImageStringValue()));
+        } else {
+          layer.setProperties(PropertyFactory.<%= prop.name %>(styleValue.getExpression()));
+        }
+      } else {
+        layer.setProperties(PropertyFactory.<%= prop.name %>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>));
+      }
+      <%_ } else { _%>
+      if (styleValue.isExpression()) {
+        layer.setProperties(PropertyFactory.<%= prop.name %>(styleValue.getExpression()));
+      } else {
+        layer.setProperties(PropertyFactory.<%= prop.name %>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>));
+      }
+      <%_ } _%>
+    }
+
+    <%_ if (prop.transition) { %>
+    public static void set<%- pascelCase(prop.name) -%>Transition(<%- getLayerType(layer, 'android') -%> layer, RCTMGLStyleValue styleValue) {
+      TransitionOptions transition = styleValue.getTransition();
+      if (transition != null) {
+        layer.set<%- pascelCase(prop.name) -%>Transition(transition);
+      }
+    }
+
+    <%_ } _%>
+  <%_ } _%>
+  <%_ } _%>
+}