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

package/scripts/autogenerate.js

@@ -8,6 +8,7 @@ const ejs = require('ejs');
 const {execSync} = require('child_process');
 
 const prettier = require('prettier');
+const prettierrc = require('../.prettierrc.js');
 
 const styleSpecJSON = require('../style-spec/v8.json');
 
@@ -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;
 }
 
@@ -321,9 +325,13 @@ async function generate() {
       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, 'MaplibreStyles.ts.ejs'),
+      output: path.join(JS_OUTPUT_PATH, 'MaplibreStyles.d.ts'), 
     },
     {
       input: path.join(TMPL_PATH, 'RCTMGLStyle.m.ejs'),
@@ -334,23 +342,23 @@ async function generate() {
       output: path.join(ANDROID_OUTPUT_PATH, 'RCTMGLStyleFactory.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/index.d.ts.ejs

@@ -1,56 +1,85 @@
 <%
   const layers = locals.layers;
 -%>
-/* eslint-disable */
 // DO NOT MODIFY
 // THIS FILE IS AUTOGENERATED
 
-export interface ConstantProps {
-  styletype: string
-  payload: {
-    value: any,
-  },
+import { isAndroid } from './index';
+
+export const StyleTypes = {
+  Constant: 'constant',
+  Color: 'color',
+  Transition: 'transition',
+  Translation: 'translation',
+  Function: 'function',
+  Image: 'image',
+  Enum: 'enum',
 };
 
-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(', ') %>
+const styleMap = {
+  <%_ for (let layer of layers) { _%>
+  <%_ for (let prop of layer.properties) { _%>
+  <%_ if (!['color', 'colorTransition', 'visibility'].includes(prop.name)) { _%>
+  <%= prop.name %>: <%- jsStyleType(prop) %>,
+  <%_ if (prop.transition) { _%>
+  <%= prop.name %>Transition: StyleTypes.Transition,
   <%_ } _%>
-  <%_ 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,
   <%_ } _%>
+
   <%_ } _%>
+
+  color: StyleTypes.Color,
+  colorTransition: StyleTypes.Transition,
+  visibility: StyleTypes.Constant,
 };
 
-<%_ } _%>
+export const styleExtras = {
+  // padding
+  iconTextFitPadding: {
+    iosType: 'edgeinsets',
+  },
+
+  // offsets
+  iconOffset: {
+    iosType: 'vector',
+  },
+  textOffset: {
+    iosType: 'vector',
+  },
+  lineOffset: {
+    iosType: 'vector',
+  },
+
+  // translates
+  fillTranslate: {
+    iosType: 'vector',
+  },
+  lineTranslate: {
+    iosType: 'vector',
+  },
+  iconTranslate: {
+    iosType: 'vector',
+  },
+  textTranslate: {
+    iosType: 'vector',
+  },
+  circleTranslate: {
+    iosType: 'vector',
+  },
+  fillExtrusionTranslate: {
+    iosType: 'vector',
+  },
+};
+
+export function getStyleType(styleProp: keyof typeof styleExtras) {
+  if (!isAndroid() && styleExtras[styleProp]) {
+    return styleExtras[styleProp].iosType;
+  }
+
+  if (styleMap[styleProp]) {
+    return styleMap[styleProp];
+  }
+
+  throw new Error(`${styleProp} is not a valid Mapbox layer style`);
+}

package/scripts/templates/{styleMap.js.ejs → styleMap.ts.ejs}

@@ -5,8 +5,7 @@
 // DO NOT MODIFY
 // THIS FILE IS AUTOGENERATED
 
-import PropTypes from 'prop-types';
-import { IS_ANDROID } from './index';
+import { isAndroid } from './index';
 
 export const StyleTypes = {
   Constant: 'constant',
@@ -18,8 +17,8 @@ export const StyleTypes = {
   Enum: 'enum',
 };
 
-export function getStyleType(styleProp) {
-  if (!IS_ANDROID && styleExtras[styleProp]) {
+export function getStyleType(styleProp: keyof typeof styleExtras): string {
+  if (!isAndroid() && styleExtras[styleProp]) {
     return styleExtras[styleProp].iosType;
   }
 
@@ -30,35 +29,6 @@ export function getStyleType(styleProp) {
   throw new Error(`${styleProp} is not a valid MapLibre layer style`);
 }
 
-<%_ for (let layer of layers) { _%>
-export const <%- pascelCase(layer.name) _%>LayerStyleProp = PropTypes.shape({
-  <%_ 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 %>: <%- jsDocReactProp(prop) %>,
-  <%_ if (prop.transition) { %>
-  /**
-   * The transition affecting any changes to this layer’s <%= prop.name %> property.
-   */
-  <%= prop.name %>Transition: PropTypes.shape({
-    duration: PropTypes.number,
-    delay: PropTypes.number,
-  }),
-  <%_ } _%>
-  <%_ } _%>
-});
-
-<%_ } _%>
-
 const styleMap = {
   <%_ for (let layer of layers) { _%>
   <%_ for (let prop of layer.properties) { _%>

package/setup-jest.js

@@ -15,16 +15,7 @@ NativeModules.MGLModule = {
     'FollowWithCourse',
     'FollowWithHeading',
   ]),
-  StyleURL: keyMirror([
-    'Street',
-    'Dark',
-    'Light',
-    'Outdoors',
-    'Satellite',
-    'SatelliteStreet',
-    'TrafficDay',
-    'TrafficNight',
-  ]),
+  StyleURL: keyMirror(['Default']),
   EventTypes: keyMirror([
     'MapClick',
     'MapLongClick',

package/tsconfig.json

@@ -1,65 +1,24 @@
 {
   "compilerOptions": {
-    /* Basic Options */
-    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
-    "lib": ["es6"],                           /* Specify library files to be included in the compilation. */
-    "allowJs": true,                          /* Allow javascript files to be compiled. */
-    // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    // "outDir": "./",                        /* Redirect output structure to the directory. */
-    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    "noEmit": true,                           /* Do not emit outputs. */
-    // "incremental": true,                   /* Enable incremental compilation */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-
-    /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,              /* Enable strict null checks. */
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
-    "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "@maplibre/maplibre-react-native": ["../index.d.ts"],
-      "react": ["./node_modules/@types/react"],
-      "react-native": ["./node_modules/@types/react-native"],
-    },
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-
-    /* Source Map Options */
-    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    "declaration": true,
+    "preserveSymlinks": true,
+    "target": "es6",
+    "module": "es6",
+    "lib": ["es6"],
+    "allowJs": true,
+    "jsx": "react-native",
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "types": ["node", "react-native", "geojson"],
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noImplicitReturns": true,
   },
-  "exclude": [
-    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
-  ]
+  "include": [
+    "javascript/**/*", "index.ts"
+  ],
 }
+