@rnmapbox/maps 10.0.0-beta.28

package/scripts/templates/RCTMGLStyle.m.ejs

@@ -0,0 +1,106 @@
+<%
+  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) { %>
+<%_ if (layer.properties.length == 0) { continue } _%>
+- (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 { _%>
+    <%_ if (iosMapLibrePropName(prop.name) != null) { _%>
+    #ifdef RNMBGL_USE_MAPLIBRE
+      layer.<%- iosMapLibrePropName(prop.name) -%> = styleValue.mglStyleValue;
+    #else
+      layer.<%- iosPropName(prop.name) -%> = styleValue.mglStyleValue;
+    #endif
+    <%_ } 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/RCTMGLStyle.swift.ejs

@@ -0,0 +1,116 @@
+<%
+  const layers = locals.layers;
+-%>
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+import MapboxMaps
+
+class RCTMGLStyle {
+  var style : Style
+  weak var bridge : RCTBridge?
+
+  init(style: Style) {
+    self.style = style;
+  }
+
+<% for (const layer of layers) { %>
+func <%- setLayerMethodName(layer, 'ios') -%>(layer: inout <%- getLayerType(layer, 'ios-v10') -%>, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout <%- getLayerType(layer, 'ios-v10') -%>)->Void)->Void, isValid: @escaping () -> Bool)
+{
+  guard self._hasReactStyle(reactStyle) else {
+    Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
+    return
+  }
+
+  let styleProps = reactStyle.keys
+  for prop in styleProps {
+    if (prop == "__MAPBOX_STYLESHEET__") {
+      continue;
+    }
+
+    let styleValue = RCTMGLStyleValue.make(reactStyle[prop])
+
+  <% for (let i = 0; i < layer.properties.length; i++) { -%>
+  <%- ifOrElseIf(i) -%> (prop == "<%= layer.properties[i].name %>") {
+  <%_ if (layer.properties[i].image) { _%>
+      if (!styleValue.shouldAddImage()) {
+        self.set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>(&layer, styleValue:styleValue);
+      } else {
+        let imageURI = styleValue.getImageURI()
+
+        RCTMGLUtils.fetchImage(bridge!, url:imageURI, scale:styleValue.getImageScale(), callback:{ (error, image) in
+          if let image = image {
+            DispatchQueue.main.sync {
+              if (isValid()) {
+                try! self.style.addImage(image, id:imageURI!, stretchX: [], stretchY: []);
+                applyUpdater { (layer: inout <%- getLayerType(layer, 'ios-v10') -%>) in
+                  self.set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>(&layer, styleValue:styleValue);
+                }
+              }
+            }
+          } else {
+            Logger.log(level: .error, message: "Error during fetchImage: \(optional: error)")
+          }
+        });
+      }
+  <%_ } else { _%>
+      self.set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>(&layer, styleValue:styleValue);
+  <%_ } _%>
+  <%_ if (layer.properties[i].transition) { _%>
+    } else if (prop == "<%= layer.properties[i].name %>Transition") {
+      self.set<%- iosPropMethodName(layer, pascelCase(layer.properties[i].name)) -%>Transition(&layer, styleValue:styleValue);
+  <%_ } _%>
+  <% } -%>
+  } else {
+      Logger.log(level:.error, message: "Unexpected property \(prop) for layer: <%- layer.name -%>")
+    }
+  }
+}
+<% } %>
+
+<% for (const layer of layers) {%>
+<% for (const prop of layer.properties) {%>
+func set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>(_ layer: inout <%- getLayerType(layer, 'ios-v10') -%>, styleValue: RCTMGLStyleValue)
+{
+    <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
+    layer.position = styleValue.getSphericalPosition();
+    <%_ } else if (prop.name === 'visibility') { _%>
+    layer.visibility = styleValue.isVisible();
+    <%_ } else { _%>
+      <% if (prop.type === 'enum') { %>
+        <% if (layer.name === 'light') { %>
+          layer.<%- iosV10PropName(prop.name) -%> = styleValue.mglStyleValue<%- pascelCase(prop.name) %>Raw(); 
+        <% } else { %>
+          layer.<%- iosV10PropName(prop.name) -%> = styleValue.mglStyleValueEnum(); 
+        <% } %>
+      <% } else if (prop.type === 'array') { %>
+        <% if (prop.value === 'enum') { %>
+          layer.<%- iosV10PropName(prop.name) -%> = styleValue.mglStyleValueArray<%- pascelCase(prop.name) %>();
+        <% } else { %>
+          layer.<%- iosV10PropName(prop.name) -%> = styleValue.mglStyleValueArray<%- pascelCase(prop.value) %>();
+        <% } %> 
+      <% } else { %>
+        <% if (layer.name === 'light') { %>
+          layer.<%- iosV10PropName(prop.name) -%> = styleValue.mglStyleValue<%- pascelCase(prop.type) %>Raw();
+        <% } else { %>
+          layer.<%- iosV10PropName(prop.name) -%> = styleValue.mglStyleValue<%- pascelCase(prop.type) %>();
+        <% } %>
+      <% } %>
+    <%_ } _%>
+}
+<%_ if (prop.transition) { _%>
+
+func set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition(_ layer: inout <%- getLayerType(layer, 'ios-v10') -%>, styleValue: RCTMGLStyleValue)
+{
+    layer.<%- iosV10PropName(prop.name) -%>Transition = styleValue.getTransition();
+}
+<%_ } _%>
+<% } %>
+<% } %>
+
+func _hasReactStyle(_ reactStyle: Dictionary<String, Any>) -> Bool
+{
+  return reactStyle != nil && reactStyle.keys.count > 0;
+}
+
+}

package/scripts/templates/RCTMGLStyleFactory.java.ejs

@@ -0,0 +1,108 @@
+<%
+  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) { _%>
+    <%_ if (layer.properties.length == 0) { continue } _%>
+    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);
+      }
+    }
+
+    <%_ } _%>
+  <%_ } _%>
+  <%_ } _%>
+}

package/scripts/templates/RCTMGLStyleFactoryv10.java.ejs

@@ -0,0 +1,115 @@
+<%
+  const layers = locals.layers;
+-%>
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+package com.mapbox.rctmgl.components.styles;
+
+import com.mapbox.maps.extension.style.expressions.generated.Expression;
+import com.mapbox.maps.extension.style.layers.generated.BackgroundLayer;
+import com.mapbox.maps.extension.style.layers.generated.CircleLayer;
+import com.mapbox.maps.extension.style.layers.generated.FillExtrusionLayer;
+import com.mapbox.maps.extension.style.layers.generated.FillLayer;
+import com.mapbox.maps.extension.style.layers.generated.LineLayer;
+import com.mapbox.maps.extension.style.layers.generated.SkyLayer;
+// import com.mapbox.maps.extension.style.layers.generated.PropertyFactory;
+// import com.mapbox.maps.extension.style.layers.generated.PropertyValue;
+import com.mapbox.maps.extension.style.layers.generated.RasterLayer;
+import com.mapbox.maps.extension.style.layers.generated.SymbolLayer;
+import com.mapbox.maps.extension.style.layers.generated.HeatmapLayer;
+import com.mapbox.maps.extension.style.layers.generated.HillshadeLayer;
+import com.mapbox.maps.extension.style.atmosphere.generated.Atmosphere;
+// import com.mapbox.maps.extension.style.layers.properties.generated.Visibility;
+import com.mapbox.maps.extension.style.layers.properties.generated.*;
+import com.mapbox.maps.extension.style.types.StyleTransition;
+import com.mapbox.maps.extension.style.light.generated.Light;
+import com.mapbox.maps.extension.style.light.LightPosition;
+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 (prop.name === 'visibility') { _%>
+        layer.<%- prop.name %>(<%- pascelCase(prop.name) %>.valueOf(styleValue.getEnumName()));
+      <%_ } else if (prop.type === 'resolvedImage') { _%>
+      if (styleValue.isExpression()) {
+        if (styleValue.isImageStringValue()) {
+          layer.<%- prop.name %>(styleValue.getImageStringValue());
+        } else {
+          layer.<%- prop.name %>(styleValue.getExpression());
+        }
+      } else {
+        layer.<%- prop.name %>(<%- androidGetConfigType(androidInputType(prop.type, prop.value), prop) -%>);
+      }
+      <%_ } else { _%>
+      if (styleValue.isExpression()) {
+        layer.<%- prop.name -%>(styleValue.getExpression());
+      } else {
+        <%_ if (prop.type === 'enum') { _%>
+          layer.<%- prop.name -%>(<%- pascelCase(prop.name) %>.valueOf(styleValue.getEnumName()));
+        <%_ } else if (prop.name === 'lineGradient' || prop.name === 'heatmapColor' || prop.name === 'skyGradient') { _%>
+          layer.<%- prop.name -%>(styleValue.getIntExpression(VALUE_KEY));
+        <%_ } else if (prop.name === 'position') { _%>
+          layer.<%- prop.name -%>(styleValue.getLightPosition());
+        <%_ } else { _%>
+          layer.<%- 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) {
+      StyleTransition transition = styleValue.getTransition();
+      if (transition != null) {
+        layer.<%- prop.name -%>Transition(transition);
+      }
+    }
+
+    <%_ } _%>
+  <%_ } _%>
+  <%_ } _%>
+}

package/scripts/templates/component.md.ejs

@@ -0,0 +1,122 @@
+<%
+  const component = locals.component;
+-%>
+<!-- This file was autogenerated from <%- component.fileNameWithExt %> do not modify -->
+## <MapboxGL.<%- component.name %> />
+### <%- replaceNewLine(component.description) %>
+
+<%_ if (component.props && component.props.length) { _%>
+### props
+| Prop | Type | Default | Required | Description |
+| ---- | :--: | :-----: | :------: | :----------: |
+<%- propMarkdownTableRows(component) %>
+<%_ } _%>
+
+<%_ if (component.methods && component.methods.length) { _%>
+### methods
+<%_ for (let method of component.methods) { _%>
+#### <%- getMarkdownMethodSignature(method) %>
+
+<%- replaceNewLine(method.description) %>
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+<%- methodMarkdownTableRow(method) %>
+
+<%- getMarkdownMethodExamples(method) %>
+<%_ } _%>
+<%_ } _%>
+
+<%_ if (component.styles && component.styles.length) { _%>
+### styles
+
+<%_ for (let i = 0; i < component.styles.length; i++) { _%>
+<%
+const style = component.styles[i];
+-%>
+* <a href="#<%- style.name.toLowerCase() %>"><%- style.name %></a><br/>
+<%_ } _%>
+
+<%_ for (let style of component.styles) { _%>
+___
+
+#### <%- style.name %>
+Name: `<%- style.name %>`
+
+#### Description
+<%- style.description %>
+
+#### Type
+`<%- style.type %>`
+<%_ if (exists(style.default)) { _%>
+#### Default Value
+`<%= getStyleDefaultValue(style) %>`
+<%_ } _%>
+
+<%_ if (style.type === 'enum') { _%>
+#### Supported Values
+<%_ for (var i = 0; i < style.values.length; i++) { _%>
+**<%- style.values[i].value %>** - <%- style.values[i].doc %><br />
+<%_ } _%>
+
+<%_ } _%>
+<%_ if (exists(style.units)) { _%>
+#### Units
+`<%- style.units %>`
+
+<%_ } _%>
+<%_ if (exists(style.minimum)) { _%>
+#### Minimum
+`<%- style.minimum %>`
+
+<%_ } _%>
+
+<%_ if (exists(style.maximum)) { _%>
+#### Maximum
+`<%- style.maximum %>`
+
+<%_ } _%>
+<%_ if (style.requires.length) { _%>
+#### Requires
+`<%- style.requires.join(', ') %>`
+
+<%_ } _%>
+<%_ if (style.disabledBy.length) { _%>
+#### Disabled By
+`<%- style.disabledBy.join(', ') %>`
+
+<%_ } _%>
+<%_ if (style.allowedFunctionTypes.length) { _%>
+#### Supported Style Functions
+`<%- style.allowedFunctionTypes.join(', ') %>`
+<%_ } _%>
+<%_ if (style.expression) { _%>
+#### Expression
+
+Parameters: `<%- (style.expression.parameters || []).join(', ') %>`
+<%_ } _%>
+<%_ if (style.transition) { _%>
+___
+
+#### Name
+
+`<%- style.name %>Transition`
+
+#### Description
+
+The transition affecting any changes to this layer’s <%- style.name %> propery.
+
+#### Type
+
+`{ duration, delay }`
+
+#### Units
+`milliseconds`
+
+#### Default Value
+`{duration: 300, delay: 0}`
+
+<%_ } %>
+<%_ } _%>
+<%_ } _%>

package/scripts/templates/index.d.ts.ejs

@@ -0,0 +1,56 @@
+<%
+  const layers = locals.layers;
+-%>
+/* eslint-disable */
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+export interface ConstantProps {
+  styletype: string
+  payload: {
+    value: any,
+  },
+};
+
+export interface StyleFunctionProps {
+  styletype: string
+  payload: {
+    fn: string,
+    attributeName: string,
+    stops: any[],
+    mode: any,
+  }
+}
+
+export interface TransitionProps {
+  duration: number
+  delay: number,
+}
+
+export type TranslationProps = { x: number, y: number } | number[]
+
+<%_ for (let layer of layers) { _%>
+export interface <%- camelCase(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 (prop.transition) { %>
+  /**
+   * The transition affecting any changes to this layer’s <%= prop.name %> property.
+   */
+  <%= prop.name %>Transition: TransitionProps,
+  <%_ } _%>
+  <%_ } _%>
+};
+
+<%_ } _%>