@maplibre/maplibre-react-native 10.0.0-alpha.9 → 10.0.0-beta.1

package/scripts/autogenerate.js

@@ -1,382 +0,0 @@
-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 prettierrc = require('eslint-config-universe');
-
-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',
-    'rctmln',
-    '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', 'RCTMLN');
-const ANDROID_OUTPUT_PATH = path.join(
-  __dirname,
-  ...OUTPUT_PREFIX,
-  'android',
-  'rctmln',
-  'src',
-  'main',
-  'java',
-  'com',
-  'maplibre',
-  'rctmln',
-  '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']);
-  if (attr.private) {
-    return false
-  }
-  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, '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, 'RCTMLNStyle.m.ejs'),
-      output: path.join(IOS_OUTPUT_PATH, 'RCTMLNStyle.m'),
-    },
-    {
-      input: path.join(TMPL_PATH, 'RCTMLNStyleFactory.java.ejs'),
-      output: path.join(ANDROID_OUTPUT_PATH, 'RCTMLNStyleFactory.java'),
-    },
-    {
-      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
-  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 = await prettier.format(results, { ...prettierrc, 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

@@ -1,15 +0,0 @@
-#!/bin/sh
-
-echo "Downloading MapLibre 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/maplibre/maplibre-style-spec/main/src/reference/${FILENAME} -o ${FILENAME}
-cd ..

package/scripts/templates/MaplibreStyles.ts.ejs

@@ -1,99 +0,0 @@
-<%
-  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/RCTMLNStyle.h.ejs

@@ -1,33 +0,0 @@
-<%
-  const layers = locals.layers;
--%>
-// DO NOT MODIFY
-// THIS FILE IS AUTOGENERATED
-
-#import "RCTMLNStyle.h"
-#import "RCTMLNStyleValue.h"
-#import <React/RCTBridge.h>
-
-@import MapLibre;
-
-@interface RCTMLNStyle : NSObject
-
-@property (nonatomic, weak) RCTBridge *bridge;
-@property (nonatomic, strong) MLNStyle *style;
-
-- (id)initWithMLNStyle:(MLNStyle*)mlnStyle;
-
-<%_ 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:(RCTMLNStyleValue *)styleValue;
-<%_ if (prop.transition) { _%>
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
-<%_ } _%>
-<%_ } _%>
-<% } %>
-
-@end

package/scripts/templates/RCTMLNStyle.m.ejs

@@ -1,97 +0,0 @@
-<%
-  const layers = locals.layers;
--%>
-// DO NOT MODIFY
-// THIS FILE IS AUTOGENERATED
-
-#import "RCTMLNStyle.h"
-#import "RCTMLNUtils.h"
-
-@implementation RCTMLNStyle
-
-- (id)initWithMLNStyle:(MLNStyle*)mlnStyle
-{
-    if (self = [super init]) {
-        _style = mlnStyle;
-    }
-    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;
-    }
-
-    RCTMLNStyleValue *styleValue = [RCTMLNStyleValue 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];
-
-        [RCTMLNUtils 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:(RCTMLNStyleValue *)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.mlnStyleValue;
-    <%_ } _%>
-}
-<%_ if (prop.transition) { _%>
-
-- (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue
-{
-    layer.<%- iosPropName(prop.name) -%>Transition = [styleValue getTransition];
-}
-<%_ } _%>
-<% } %>
-<% } %>
-
-- (BOOL)_hasReactStyle:(NSDictionary *)reactStyle
-{
-  return reactStyle != nil && reactStyle.allKeys.count > 0;
-}
-
-@end