@rnmapbox/maps 10.0.0-beta.28 → 10.0.0-beta.31

package/.eslintrc.js

@@ -79,6 +79,7 @@ module.exports = {
     'fp/no-mutating-methods': 'warn',
     'react-native/no-inline-styles': 0,
   },
+  ignorePatterns: ['**/rnmapbox.web.symlink'],
   overrides: [
     {
       // Match TypeScript Files

package/javascript/components/AbstractLayer.js

@@ -1,11 +1,8 @@
 /* eslint react/prop-types:0  */
 import React from 'react';
 import { processColor } from 'react-native';
-import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 
 import { getFilter } from '../utils/filterUtils';
-import { getStyleType } from '../utils/styleMap';
-import BridgeValue from '../utils/BridgeValue';
 import { transformStyle } from '../utils/StyleValue';
 
 class AbstractLayer extends React.PureComponent {

package/javascript/components/Images.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { requireNativeComponent } from 'react-native';
-import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+import { requireNativeComponent, Image } from 'react-native';
 
 import { viewPropTypes } from '../utils';
 
@@ -73,7 +72,7 @@ class Images extends React.Component {
         } else if (_isUrlOrPath(value)) {
           images[imageName] = value;
         } else {
-          const res = resolveAssetSource(value);
+          const res = Image.resolveAssetSource(value);
           if (res && res.uri) {
             images[imageName] = res;
           }

package/javascript/index.web.js

@@ -0,0 +1,2 @@
+export * from './web';
+export { default } from './web';

package/javascript/utils/StyleValue.ts

@@ -1,5 +1,4 @@
-import { processColor } from 'react-native';
-import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+import { processColor, Image } from 'react-native';
 
 import { getStyleType } from './styleMap';
 import BridgeValue from './BridgeValue';
@@ -30,7 +29,7 @@ export function transformStyle(
     if (styleType === 'color' && typeof rawStyle === 'string') {
       rawStyle = processColor(rawStyle);
     } else if (styleType === 'image' && typeof rawStyle === 'number') {
-      rawStyle = resolveAssetSource(rawStyle) || {};
+      rawStyle = Image.resolveAssetSource(rawStyle) || {};
     }
 
     const bridgeValue = new BridgeValue(rawStyle);

package/javascript/utils/index.js

@@ -1,7 +1,12 @@
 import React from 'react';
-import { View, NativeModules, findNodeHandle, Platform } from 'react-native';
+import {
+  View,
+  NativeModules,
+  findNodeHandle,
+  Platform,
+  Image,
+} from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
-import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 import PropTypes from 'prop-types';
 
 function getAndroidManagerInstance(module) {
@@ -108,7 +113,7 @@ export function cloneReactChildrenWithProps(children, propsToAdd = {}) {
 }
 
 export function resolveImagePath(imageRef) {
-  const res = resolveAssetSource(imageRef);
+  const res = Image.resolveAssetSource(imageRef);
   return res.uri;
 }
 

package/javascript/web/MapContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const MapContext = React.createContext({});
+
+export default MapContext;

package/javascript/web/MapboxModule.js

@@ -0,0 +1,16 @@
+import mapboxgl from 'mapbox-gl';
+
+const MapboxModule = {
+  LineJoin: {},
+
+  StyleURL: {
+    Street: 'mapbox://styles/mapbox/streets-v11',
+    Satellite: 'mapbox://styles/mapbox/satellite-v9',
+  },
+
+  setAccessToken: (token) => {
+    mapboxgl.accessToken = token;
+  },
+};
+
+export default MapboxModule;

package/javascript/web/UnimplementedComponent.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const UnimplementedComponent = (name) =>
+  class SymbolLater extends React.Component {
+    render() {
+      return <div>TODO implement {name}</div>;
+    }
+  };
+
+export default UnimplementedComponent;

package/javascript/web/index.js

@@ -0,0 +1,18 @@
+import MapboxModule from './MapboxModule';
+import Camera from './components/Camera';
+import MapView from './components/MapView';
+import Logger from './utils/Logger';
+
+const ExportedComponents = {
+  Camera,
+  MapView,
+  Logger,
+};
+
+const Mapbox = {
+  ...MapboxModule,
+  ...ExportedComponents,
+};
+
+export { Camera, MapView, Logger };
+export default Mapbox;

package/javascript/web/utils/Logger.ts

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+type LogMessage = {
+  level: LogLevel;
+  message: string;
+  tag: string;
+};
+type LogCallback = (log: LogMessage) => boolean;
+type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
+
+class Logger {
+  static instance: Logger | null = null;
+
+  level: LogLevel = 'info';
+  logCallback: LogCallback | null;
+  startedCount = 0;
+
+  static sharedInstance() {
+    if (this.instance === null) {
+      this.instance = new Logger();
+    }
+    return this.instance;
+  }
+
+  constructor() {
+    this.logCallback = null;
+  }
+
+  /**
+   * Set custom logger function.
+   * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then
+   * default logging will take place.
+   */
+  static setLogCallback(logCallback: LogCallback) {
+    this.sharedInstance().setLogCallback(logCallback);
+  }
+
+  /**
+   * Set custom logger function.
+   * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then
+   * default logging will take place.
+   */
+  setLogCallback(logCallback: LogCallback) {
+    this.logCallback = logCallback;
+  }
+
+  /**
+   * This callback is displayed as part of the Requester class.
+   * @callback Logger~logCallback
+   * @param {object} log
+   * @param {string} log.message - the message of the log
+   * @param {string} log.level - log level
+   * @param {string} log.tag - optional tag used on android
+   */
+
+  /**
+   * setLogLevel
+   * @param {LogLevel} level
+   */
+  static setLogLevel(level: LogLevel) {
+    this.sharedInstance().level = level;
+  }
+
+  start() {}
+
+  stop() {}
+
+  subscribe() {
+    //TODO
+  }
+
+  unsubscribe() {
+    //TODO
+  }
+
+  effectiveLevel(log: LogMessage): LogLevel {
+    const { level, message, tag } = log;
+
+    if (level === 'warning') {
+      if (
+        tag === 'Mbgl-HttpRequest' &&
+        message.startsWith('Request failed due to a permanent error: Canceled')
+      ) {
+        // this seems to happening too much to show a warning every time
+        return 'info';
+      }
+    }
+    return level;
+  }
+
+  onLog(log: LogMessage) {
+    if (!this.logCallback || !this.logCallback(log)) {
+      const { message } = log;
+      const level = this.effectiveLevel(log);
+      if (level === 'error') {
+        console.error('Mapbox error', message, log);
+      } else if (level === 'warning') {
+        console.warn('Mapbox warning', message, log);
+      } else {
+        console.log(`Mapbox [${level}]`, message, log);
+      }
+    }
+  }
+}
+
+Logger.sharedInstance().start();
+
+export default Logger;

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.28",
+  "version": "10.0.0-beta.31",
   "publishConfig": {
     "access": "public"
   },
   "author": "React Native Mapbox Team",
   "main": "./javascript/index.js",
+  "browser": "./javascript/index.web.js",
+  "react-native": "./javascript/index.js",
   "keywords": [
     "gl",
     "ios",
@@ -35,7 +37,13 @@
   "peerDependencies": {
     "prop-types": ">=15.5.8",
     "react": ">=16.6.1",
-    "react-native": ">=0.59.9"
+    "react-native": ">=0.59.9",
+    "mapbox-gl": "^ 2.9.0"
+  },
+  "peerDependenciesMeta": {
+    "mapbox-gl": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@expo/config-plugins": "^4.0.3",

package/scripts/autogenHelpers/DocJSONBuilder.js

@@ -23,6 +23,7 @@ const IGNORE_FILES = [
   'AbstractSource',
   'NativeBridgeComponent',
 ];
+const IGNORE_PATTERN = /\.web\./;
 
 const IGNORE_METHODS = ['setNativeProps'];
 
@@ -267,8 +268,10 @@ class DocJSONBuilder {
           }
 
           let fileName = fileNameWithExt.replace(/.(js)/, '');
-
-          if (IGNORE_FILES.includes(fileName)) {
+          if (
+            IGNORE_FILES.includes(fileName) ||
+            fileName.match(IGNORE_PATTERN)
+          ) {
             next();
             return;
           }
@@ -282,7 +285,7 @@ class DocJSONBuilder {
 
           this.postprocess(results[fileName], fileName);
 
-          next();
+          return next();
         },
         () => resolve(),
       );