@maplibre/maplibre-react-native 10.0.0-alpha.26 → 10.0.0-alpha.28

package/javascript/index.ts

@@ -1,4 +0,0 @@
-import * as Maplibre from "./Maplibre";
-export * from "./Maplibre";
-
-export default Maplibre;

package/javascript/types/BaseProps.ts

@@ -1,5 +0,0 @@
-interface BaseProps {
-  testID?: string;
-}
-
-export default BaseProps;

package/javascript/types/index.ts

@@ -1,11 +0,0 @@
-import { SyntheticEvent } from "react";
-
-export type MaplibreGLEvent<
-  T extends string,
-  P = GeoJSON.Feature,
-  V = Element,
-> = SyntheticEvent<V, { type: T; payload: P }>;
-
-export enum StyleURL {
-  Default = "https://demotiles.maplibre.org/style.json",
-}

package/jest-setup.ts

@@ -1,113 +0,0 @@
-/* eslint-disable no-undef, import/no-extraneous-dependencies */
-import "@testing-library/react-native/extend-expect";
-import { NativeModules } from "react-native";
-
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
-
-function keyMirror(keys: string[]) {
-  const obj: Record<string, string> = {};
-  keys.forEach((key) => (obj[key] = key));
-  return obj;
-}
-
-// Mock of what the native code puts on the JS object
-NativeModules.MLNModule = {
-  // constants
-  UserTrackingModes: keyMirror([
-    "None",
-    "Follow",
-    "FollowWithCourse",
-    "FollowWithHeading",
-  ]),
-  StyleURL: keyMirror(["Default"]),
-  EventTypes: keyMirror([
-    "MapClick",
-    "MapLongClick",
-    "RegionWillChange",
-    "RegionIsChanging",
-    "RegionDidChange",
-    "WillStartLoadingMap",
-    "DidFinishLoadingMap",
-    "DidFailLoadingMap",
-    "WillStartRenderingFrame",
-    "DidFinishRenderingFrame",
-    "DidFinishRenderingFrameFully",
-    "DidFinishLoadingStyle",
-    "SetCameraComplete",
-  ]),
-  CameraModes: keyMirror(["Flight", "Ease", "None"]),
-  StyleSource: keyMirror(["DefaultSourceID"]),
-  InterpolationMode: keyMirror([
-    "Exponential",
-    "Categorical",
-    "Interval",
-    "Identity",
-  ]),
-  LineJoin: keyMirror(["Bevel", "Round", "Miter"]),
-  LineCap: keyMirror(["Butt", "Round", "Square"]),
-  LineTranslateAnchor: keyMirror(["Map", "Viewport"]),
-  CirclePitchScale: keyMirror(["Map", "Viewport"]),
-  CircleTranslateAnchor: keyMirror(["Map", "Viewport"]),
-  FillExtrusionTranslateAnchor: keyMirror(["Map", "Viewport"]),
-  FillTranslateAnchor: keyMirror(["Map", "Viewport"]),
-  IconRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
-  IconTextFit: keyMirror(["None", "Width", "Height", "Both"]),
-  IconTranslateAnchor: keyMirror(["Map", "Viewport"]),
-  SymbolPlacement: keyMirror(["Line", "Point"]),
-  TextAnchor: keyMirror([
-    "Center",
-    "Left",
-    "Right",
-    "Top",
-    "Bottom",
-    "TopLeft",
-    "TopRight",
-    "BottomLeft",
-    "BottomRight",
-  ]),
-  TextJustify: keyMirror(["Center", "Left", "Right"]),
-  TextPitchAlignment: keyMirror(["Auto", "Map", "Viewport"]),
-  TextRotationAlignment: keyMirror(["Auto", "Map", "Viewport"]),
-  TextTransform: keyMirror(["None", "Lowercase", "Uppercase"]),
-  TextTranslateAnchor: keyMirror(["Map", "Viewport"]),
-  LightAnchor: keyMirror(["Map", "Viewport"]),
-  OfflinePackDownloadState: keyMirror(["Inactive", "Active", "Complete"]),
-  OfflineCallbackName: keyMirror(["Progress", "Error"]),
-
-  // methods
-  setAccessToken: jest.fn(),
-  getAccessToken: () => Promise.resolve("test-token"),
-  setConnected: jest.fn(),
-};
-
-NativeModules.MLNOfflineModule = {
-  createPack: (packOptions: any) => {
-    return Promise.resolve({
-      bounds: packOptions.bounds,
-      metadata: JSON.stringify({ name: packOptions.name }),
-    });
-  },
-  getPacks: () => Promise.resolve([]),
-  deletePack: () => Promise.resolve(),
-  getPackStatus: () => Promise.resolve({}),
-  pausePackDownload: () => Promise.resolve(),
-  resumePackDownload: () => Promise.resolve(),
-  setPackObserver: () => Promise.resolve(),
-  setTileCountLimit: jest.fn(),
-  setProgressEventThrottle: jest.fn(),
-};
-
-NativeModules.MLNSnapshotModule = {
-  takeSnap: () => {
-    return Promise.resolve("file://test.png");
-  },
-};
-
-NativeModules.MLNLocationModule = {
-  getLastKnownLocation: jest.fn(),
-  setMinDisplacement: jest.fn(),
-  start: jest.fn(),
-  stop: jest.fn(),
-  pause: jest.fn(),
-};

package/jest.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  preset: "@testing-library/react-native",
-  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
-  setupFilesAfterEnv: ["./jest-setup.ts"],
-  setupFiles: ["./__tests__/__mocks__/react-native.mock.js"],
-  modulePathIgnorePatterns: ["__tests__/__mocks__", "fixtures"],
-  collectCoverageFrom: ["javascript/**/*.{ts,tsx,js,jsx}"],
-};

package/plugin/install.md

@@ -1,25 +0,0 @@
-# Expo Installation
-
-NOTE: This package cannot be used in the "Expo Go" app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
-
-First install the package with `yarn`, `npm`, or [`expo install`](https://docs.expo.io/workflow/expo-cli/#expo-install).
-
-```sh
-expo install @maplibre/maplibre-react-native
-```
-
-After installing this npm package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:
-
-```json
-{
-  "expo": {
-    "plugins": ["@maplibre/maplibre-react-native"]
-  }
-}
-```
-
-Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.
-
-## API
-
-This plugin doesn't currently provide any additional properties for customization. The plugin simply generates the pre-install block in the `ios/Podfile` (the post-install block is not required for Expo support). No additional changes are done on Android.

package/scripts/.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ["universe/node"],
-};

package/scripts/codegen.ts

@@ -1,340 +0,0 @@
-import maplibreGlStyleSpec from "@maplibre/maplibre-gl-style-spec/src/reference/latest";
-import ejs from "ejs";
-import { exec } from "node:child_process";
-import { promises as fs } from "node:fs";
-import path from "node:path";
-import prettier from "prettier";
-
-import { DocJSONBuilder } from "./utils/DocJSONBuilder";
-import { MarkdownBuilder } from "./utils/MarkdownBuilder";
-import { camelCase } from "./utils/TemplateHelpers";
-import * as TemplateHelpers from "./utils/TemplateHelpers";
-import {
-  getAndroidVersion,
-  getIosVersion,
-  isVersionGTE,
-} from "./utils/getNativeVersion";
-
-const TMPL_PATH = path.join(__dirname, "templates");
-
-const IOS_OUTPUT_PATH = path.join(__dirname, "..", "ios", "RCTMLN");
-const ANDROID_OUTPUT_PATH = path.join(
-  __dirname,
-  "..",
-  "android",
-  "src",
-  "main",
-  "java",
-  "com",
-  "maplibre",
-  "rctmln",
-  "components",
-  "styles",
-);
-
-const JS_OUTPUT_PATH = path.join(__dirname, "..", "javascript", "utils");
-
-const TEMPLATE_MAPPINGS = [
-  {
-    input: path.join(TMPL_PATH, "RCTMLNStyle.h.ejs"),
-    output: path.join(IOS_OUTPUT_PATH, "RCTMLNStyle.h"),
-  },
-  {
-    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"),
-  },
-];
-
-async function generate() {
-  const androidVersion = await getAndroidVersion();
-  const iosVersion = await getIosVersion();
-
-  function getPropertiesForLight() {
-    const lightAttributes = maplibreGlStyleSpec.light;
-
-    return getSupportedProperties(lightAttributes).map((attrName) => {
-      return Object.assign({}, buildProperties(lightAttributes, attrName), {
-        allowedFunctionTypes: [],
-      });
-    });
-  }
-
-  function getPropertiesForLayer(layerName: string) {
-    const paintAttributes = maplibreGlStyleSpec[`paint_${layerName}`];
-    const layoutAttributes = maplibreGlStyleSpec[`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"];
-        }
-
-        // TODO
-        // Overide type padding
-        if (prop.type === "padding") {
-          prop.type = "array";
-          prop.value = "number";
-          prop.length = 4;
-        }
-
-        return prop;
-      },
-    );
-
-    return layoutProps.concat(paintProps);
-  }
-
-  function getSupportedLayers() {
-    return Object.entries(maplibreGlStyleSpec.layer.type.values)
-      .map(([layerName, layerProperties]) => {
-        if (
-          layerProperties &&
-          typeof layerProperties === "object" &&
-          "sdk-support" in layerProperties
-        ) {
-          const support = getAttributeSupport(layerProperties["sdk-support"]);
-
-          if (support.basic.android && support.basic.ios) {
-            return layerName;
-          }
-        }
-
-        return undefined;
-      })
-      .filter((layerName) => typeof layerName === "string");
-  }
-
-  function getSupportedProperties(attributes: any) {
-    return Object.keys(attributes).filter((attrName) =>
-      isAttrSupported(attributes[attrName]),
-    );
-  }
-
-  function buildProperties(attributes: any, attrName: string) {
-    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,
-      length: undefined as undefined | number,
-      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: string) {
-    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: any) {
-    const items: any[] = [];
-
-    if (!requiredItems) {
-      return items;
-    }
-
-    for (const item of requiredItems) {
-      if (typeof item === "string") {
-        items.push(camelCase(item, "-"));
-      }
-    }
-
-    return items;
-  }
-
-  function getDisables(disabledItems: any[]) {
-    const items: any[] = [];
-
-    if (!disabledItems) {
-      return items;
-    }
-
-    for (const item of disabledItems) {
-      if (item["!"]) {
-        items.push(camelCase(item["!"], "-"));
-      }
-    }
-
-    return items;
-  }
-
-  function isImage(attrName: string) {
-    return (
-      attrName.toLowerCase().indexOf("pattern") !== -1 ||
-      attrName.toLowerCase().indexOf("image") !== -1
-    );
-  }
-
-  function isTranslate(attrName: string) {
-    return attrName.toLowerCase().indexOf("translate") !== -1;
-  }
-
-  function isAttrSupported(attr: any) {
-    const support = getAttributeSupport(attr["sdk-support"]);
-    if (attr.private) {
-      return false;
-    }
-    return support.basic.android && support.basic.ios;
-  }
-
-  function getAttributeSupport(sdkSupport: any) {
-    const support = {
-      basic: { android: false, ios: false },
-      data: { android: false, ios: false },
-    };
-
-    const basicSupport = sdkSupport && sdkSupport["basic functionality"];
-    support.basic.android = isVersionGTE(androidVersion, basicSupport?.android);
-    support.basic.ios = isVersionGTE(iosVersion, basicSupport?.ios);
-
-    const dataDrivenSupport = sdkSupport && sdkSupport["data-driven styling"];
-    support.data.android = isVersionGTE(
-      androidVersion,
-      dataDrivenSupport?.android,
-    );
-    support.data.ios = isVersionGTE(iosVersion, dataDrivenSupport?.ios);
-
-    if (!support.data.ios || !support.data.android) {
-      support.data.ios = false;
-      support.data.android = false;
-    }
-
-    return support;
-  }
-
-  function getAllowedFunctionTypes(paintAttr: any) {
-    const allowedFunctionTypes = [];
-
-    if (paintAttr["zoom-function"]) {
-      allowedFunctionTypes.push("camera");
-    }
-
-    if (paintAttr["property-function"]) {
-      allowedFunctionTypes.push("source");
-      allowedFunctionTypes.push("composite");
-    }
-
-    return allowedFunctionTypes;
-  }
-
-  const layers = getSupportedLayers().map((layerName) => {
-    return {
-      name: layerName,
-      properties: getPropertiesForLayer(layerName),
-    };
-  });
-
-  // add light as a layer
-  layers.push({ name: "light", properties: getPropertiesForLight() });
-
-  // autogenerate code
-  await Promise.all(
-    TEMPLATE_MAPPINGS.map(async ({ input, output }) => {
-      const filename = path.parse(output).base;
-
-      console.log(`Generating ${filename}`);
-      const tmpl = ejs.compile(await fs.readFile(input, "utf8"), {
-        strict: true,
-        async: true,
-      });
-      let results = await tmpl({ layers, helpers: TemplateHelpers });
-      if (filename.endsWith("ts")) {
-        results = await prettier.format(results, {
-          filepath: filename,
-        });
-        // Ensure all enums are exported
-        results = results.replace(/enum (\w+Enum) \{[^}]+}\n/g, "export $&");
-        // Replace Array<any> with any[]
-        results = results.replace(/Array<any>/g, "any[]");
-        // Replace padding type with float array
-        results = results.replace(/padding: string;/g, "padding: number[];");
-      }
-      await fs.writeFile(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 {
-    exec(
-      `git diff --exit-code docs/ ${TEMPLATE_MAPPINGS.map((m) => m.output).join(" ")}`,
-    );
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  } 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/templates/MaplibreStyles.ts.ejs

@@ -1,100 +0,0 @@
-<%
-  const layers = locals.layers;
-  const helpers = locals.helpers;
--%>
-/* 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 helpers.getEnums(layers)) { _%>
-  enum <%- helpers.pascalCase(enumInfo.name) %>Enum {
-    <%_ for (let k of Object.keys(enumInfo.values)) { _%>
-      /** <%- enumInfo.values[k].doc %> */
-      <%- helpers.pascalCase(k) %> = '<%- k %>',
-    <%_ } _%>
-  }
-  type <%- helpers.pascalCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>;
-<%_ } _%>
-
-type Enum<EnumType, EnumValues> = EnumType | EnumValues;
-
-<%_ for (let layer of layers) { _%>
-  export interface <%- helpers.pascalCase(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 %>?: <%- helpers.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 => `${helpers.pascalCase(l.name)}LayerStyleProps`).join("|") -%>;

package/scripts/templates/RCTMLNStyle.h.ejs

@@ -1,34 +0,0 @@
-<%
-  const layers = locals.layers;
-  const helpers = locals.helpers;
--%>
-// 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)<%- helpers.setLayerMethodName(layer, 'ios') -%>:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle isValid:(BOOL (^)(void)) isValid;
-<%_ } _%>
-
-<%_ for (const layer of layers) { _%>
-<%_ for (const prop of layer.properties) { _%>
-- (void)set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(prop.name)) -%>:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
-<%_ if (prop.transition) { _%>
-- (void)set<%- helpers.iosPropMethodName(layer, helpers.pascalCase(prop.name)) -%>Transition:(<%- helpers.getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMLNStyleValue *)styleValue;
-<%_ } _%>
-<%_ } _%>
-<% } %>
-
-@end