WIP: Web support

.gitignore

@@ -53,6 +53,9 @@ node_modules
 package-lock.json
 /example/package-lock.json
 
+# Expo
+.expo
+
 # OS X
 .DS_Store
 

.travis.yml

@@ -3,7 +3,7 @@ matrix:
   - language: android
     jdk: oraclejdk8
     before_install:
-    - nvm install 10.18.1
+    - nvm install 12.16.3
     - echo yes | sdkmanager "platforms;android-28"
     - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.21.1
     - export PATH=$HOME/.yarn/bin:$PATH
@@ -56,6 +56,8 @@ install:
     gem install xcpretty
   fi
 script:
+- cd $TRAVIS_BUILD_DIR
+- yarn install
 - |
   if [ "$TRAVIS_OS_NAME" == "osx" ]; then
     cd $TRAVIS_BUILD_DIR/example/ios
@@ -66,6 +68,12 @@ script:
 - |
   if [ "$TRAVIS_OS_NAME" == "linux" ]; then
     cd $TRAVIS_BUILD_DIR/example/android
+    pwd
+    ls -la ../node_modules/react-native/Libraries/Image/AssetRegistry.js
+    ls -la ../../node_modules/react-native/Libraries/Image/AssetRegistry.js
+    ls -la ../../
+    ls -la ../../node_modules
+    cat ../../node_modules/react-native/package.json
     TERM=dumb ./gradlew assemble
   fi
 - cd $TRAVIS_BUILD_DIR

__tests__/__mocks__/react-native.mock.js

@@ -8,3 +8,16 @@ jest.mock('NativeEventEmitter', () => {
   MockEventEmitter.prototype.removeListener = function () {};
   return MockEventEmitter;
 });
+
+jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+  OS: 'android', // or 'ios'
+  select: (x) => {
+    if (x.android) {
+      return x.android;
+    } else if (x.native) {
+      return x.native;
+    } else if (x.default) {
+      return x.default;
+    }
+  },
+}));

example/app.json

@@ -1,4 +1,11 @@
 {
   "name": "RNMapboxGLExample",
-  "displayName": "RNMapboxGLExample"
+  "displayName": "RNMapboxGLExample",
+  "expo": {
+    "name": "RNMapboxGLExample",
+    "privacy": "unlisted",
+    "sdkVersion": "38.0.0",
+    "version": "1.0.0",
+    "platforms": ["ios", "android", "web"]
+  }
 }

example/babel.config.js

@@ -1,31 +1,50 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-  plugins: [
-    '@babel/plugin-transform-modules-commonjs',
-    [
-      'module-resolver',
-      {
-        alias: {
-          '@react-native-mapbox-gl/maps': '../javascript/index',
-          // from maps/package.json
-          react: './node_modules/react',
-          'react-native': './node_modules/react-native',
-          '@turf/helpers': './node_modules/@turf/helpers',
-          '@turf/distance': './node_modules/@turf/distance',
-          '@turf/nearest-point-on-line':
-            './node_modules/@turf/nearest-point-on-line',
-          '@turf/length': './node_modules/@turf/length',
-          '@turf/along': './node_modules/@turf/along',
-          '@mapbox/geo-viewport': './node_modules/@mapbox/geo-viewport',
-          debounce: './node_modules/debounce',
+module.exports = (api) => {
+  const isWeb = api.caller(isTargetWeb);
 
-          '@babel': './node_modules/@babel',
-          fbjs: './node_modules/fbjs',
-          'hoist-non-react-statics': './node_modules/hoist-non-react-statics',
-          invariant: './node_modules/invariant',
-          'prop-types': './node_modules/prop-types',
-        },
-      },
-    ],
-  ].filter(Boolean),
+  return {
+    presets: ['module:metro-react-native-babel-preset'],
+    // presets: ['babel-preset-expo'],
+    plugins: [
+      '@babel/plugin-transform-modules-commonjs',
+      isWeb
+        ? [
+            'module-resolver',
+            {
+              alias: {
+                '@react-native-mapbox-gl/maps': './rnmbgl/javascript/index.js',
+              },
+            },
+          ]
+        : [
+            'module-resolver',
+            {
+              alias: {
+                '@react-native-mapbox-gl/maps': '../javascript/index',
+                // from maps/package.json
+                react: './node_modules/react',
+                'react-native': './node_modules/react-native',
+                '@turf/helpers': './node_modules/@turf/helpers',
+                '@turf/distance': './node_modules/@turf/distance',
+                '@turf/nearest-point-on-line':
+                  './node_modules/@turf/nearest-point-on-line',
+                '@turf/length': './node_modules/@turf/length',
+                '@turf/along': './node_modules/@turf/along',
+                '@mapbox/geo-viewport': './node_modules/@mapbox/geo-viewport',
+                debounce: './node_modules/debounce',
+
+                '@babel': './node_modules/@babel',
+                fbjs: './node_modules/fbjs',
+                'hoist-non-react-statics':
+                  './node_modules/hoist-non-react-statics',
+                invariant: './node_modules/invariant',
+                'prop-types': './node_modules/prop-types',
+              },
+            },
+          ],
+    ].filter(Boolean),
+  };
 };
+
+function isTargetWeb(caller) {
+  return caller && caller.name === 'babel-loader';
+}

example/index.js

@@ -2,9 +2,14 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import {AppRegistry, Platform} from 'react-native';
 
 import App from './src/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
+
+if (Platform.OS === 'web') {
+  const rootTag = document.getElementById('root');
+  AppRegistry.runApplication(appName, { rootTag });
+}

example/metro.config.js

@@ -26,7 +26,10 @@ function getBlacklist() {
       )}/node_modules/react-native/node_modules/@babel/*`,
     ),
   ];
-  return blacklist(nodeModuleDirs);
+  const webSupportSources = [
+    glob(`${path.resolve(__dirname, '..')}/javascript/web/*`),
+  ]
+return blacklist([...nodeModuleDirs, ...webSupportSources]);
 }
 
 module.exports = {

example/package.json

@@ -28,7 +28,7 @@
     "prop-types": "^15.7.2",
     "react": "16.11.0",
     "react-native": "0.62.1",
-    "react-native-elements": "^1.1.0",
+    "react-native-elements": "^1.2.7",
     "react-native-safe-area-view": "^0.13.1",
     "react-native-vector-icons": "^6.6.0",
 
@@ -42,7 +42,13 @@
     "url": "^0.11.0",
 
     "debounce": "^1.2.0",
-    "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0"
+    "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0",
+
+    "@react-navigation/web": "^1.0.0-alpha.9",
+    "react-native-web": "^0.11.7",
+    "expo": "^37.0.8",
+    "react-dom": "^16.13.1",
+    "mapbox-gl": "^1.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
@@ -54,7 +60,8 @@
     "babel-plugin-module-resolver": "^3.2.0",
     "jest": "^24.9.0",
     "jetifier": "^1.6.4",
-    "metro-react-native-babel-preset": "^0.56.0",
+    "metro-react-native-babel-preset": "^0.58.0",
+    "babel-preset-expo": "8.1.0",
     "react-test-renderer": "16.9.0"
   },
   "jest": {

example/rnmbgl

@@ -0,0 +1 @@
+..

javascript/components/BackgroundLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('BackgroundLayer');

javascript/components/Callout.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('Callout');

javascript/components/Camera.web.js

@@ -0,0 +1,3 @@
+import Camera from '../web/Camera';
+
+export default Camera;

javascript/components/CircleLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('CircleLayer');

javascript/components/FillExtrusionLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('FillExtrusionLayer');

javascript/components/FillLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('FillLayer');

javascript/components/HeatmapLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('HeatmapLayer');

javascript/components/ImageSource.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('ImageSource');

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;
           }

javascript/components/Images.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('Images');

javascript/components/Light.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('Light');

javascript/components/LineLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('LineLayer');

javascript/components/MapView.web.js

@@ -0,0 +1,3 @@
+import MapView from '../web/MapView';
+
+export default MapView;

javascript/components/NativeUserLocation.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('NativeUserLocation');

javascript/components/PointAnnotation.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('PointAnnotaiton');

javascript/components/RasterLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('RasterLayer');

javascript/components/RasterSource.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('RasterSource');

javascript/components/ShapeSource.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('ShapeSource');

javascript/components/SymbolLayer.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('SymbolLayer');

javascript/components/VectorSource.web.js

@@ -0,0 +1,3 @@
+import UnimplementedComponent from '../web/UnimplementedComponent';
+
+export default UnimplementedComponent('VectorSource');

javascript/index.js

@@ -1,8 +1,4 @@
-import {
-  Animated as RNAnimated,
-  NativeModules,
-  PermissionsAndroid,
-} from 'react-native';
+import {NativeModules, Platform, PermissionsAndroid} from 'react-native';
 
 import {isAndroid} from './utils';
 import MapView from './components/MapView';
@@ -37,7 +33,12 @@ import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtract
 import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordinatesArray';
 import Logger from './utils/Logger';
 
-const MapboxGL = {...NativeModules.MGLModule};
+const MapboxGL = Platform.select({
+  native: () => ({...NativeModules.MGLModule}),
+  web: () => {
+    return require('./utils/MGLModuleForWeb').default;
+  },
+})();
 
 // static methods
 MapboxGL.requestAndroidLocationPermissions = async function () {

javascript/utils/MGLModuleForWeb.js

@@ -0,0 +1,3 @@
+/**
+ * Empty - only exits as metro bundler has issue with Platform select in index.js
+ */

javascript/utils/MGLModuleForWeb.web.js

@@ -0,0 +1,3 @@
+import MGLModule from '../web/MGLModule';
+
+export default MGLModule;

javascript/utils/index.js

@@ -1,12 +1,7 @@
 import React from 'react';
-import {
-  ViewPropTypes,
-  View,
-  NativeModules,
-  findNodeHandle,
-  Platform,
-} from 'react-native';
-import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+import {NativeModules, findNodeHandle, Platform, Image} from 'react-native';
+
+import viewPropTypes from './viewPropTypes';
 
 function getAndroidManagerInstance(module) {
   const haveViewManagerConfig =
@@ -20,7 +15,7 @@ function getIosManagerInstance(module) {
   return NativeModules[getIOSModuleName(module)];
 }
 
-export const viewPropTypes = ViewPropTypes || View.props;
+export {viewPropTypes};
 
 export function isAndroid() {
   return Platform.OS === 'android';
@@ -102,7 +97,7 @@ export function cloneReactChildrenWithProps(children, propsToAdd = {}) {
 }
 
 export function resolveImagePath(imageRef) {
-  const res = resolveAssetSource(imageRef);
+  const res = Image.resolveAssetSource(imageRef);
   return res.uri;
 }
 

javascript/utils/viewPropTypes.js

@@ -0,0 +1,6 @@
+import {
+  ViewPropTypes,
+  View,
+} from 'react-native';
+
+export default ViewPropTypes || View.props;