fix web dependency handling and example testing mechanism (#6)

Author: connectdotz

.circleci/config.yml

@@ -109,10 +109,9 @@ jobs:
         command: |-
           cd example/ToolbarAndroidExample-061
           rm -rf node_modules
-
-          # to avoid yarn integrity failure due to our file-based package installation
-          rm yarn.lock
           yarn cache clean
+
+          yarn sync & wait
           yarn install --network-concurrency 1 --non-interactive --cache-folder ~/.cache/yarn & wait
     - persist_to_workspace:
         root: .

.gitignore

@@ -29,6 +29,7 @@ DerivedData
 *.ipa
 *.xcuserstate
 project.xcworkspace
+*.tgz
 
 
 # Android/IntelliJ

example/ToolbarAndroidExample-060/README.md

@@ -0,0 +1,9 @@
+
+# Examples
+These examples are meant to test with the local toolbar-android changes.
+
+# How to run: 
+
+ - install `@react-native-community/toolbar-android` from local repo: `yarn sync` (this is a passive sync, i.e. you need to do this manually when you want to test the changes)
+ - test: `yarn test`
+ - run: `yarn ios` or `yarn android`

example/ToolbarAndroidExample-060/__tests__/App-test.js

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../ToolbarAndroidExample';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

example/ToolbarAndroidExample-060/package.json

@@ -3,11 +3,15 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "sync": "../scripts/update-local-pkg.sh ../..",
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
     "start": "react-native start",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@react-native-community/toolbar-android": "file:../../react-native-community-toolbar-android-0.1.0-rc.1.tgz",
+    "@react-native-community/toolbar-android": "file:../../react-native-community-toolbar-android-current.tgz",
     "react": "16.8.6",
     "react-native": "0.60.0"
   },

example/ToolbarAndroidExample-060/yarn.lock

@@ -928,9 +928,9 @@
     eslint-plugin-react-native "3.6.0"
     prettier "1.16.4"
 
-"@react-native-community/toolbar-android@file:../../react-native-community-toolbar-android-0.1.0-rc.1.tgz":
+"@react-native-community/toolbar-android@file:../../react-native-community-toolbar-android-current.tgz":
   version "0.1.0-rc.1"
-  resolved "file:../../react-native-community-toolbar-android-0.1.0-rc.1.tgz#5cd8451295628d6a5f87b2e6c162a94c0124de8d"
+  resolved "file:../../react-native-community-toolbar-android-current.tgz#d88a050f13df0c50eb03bb2e993d1ebbf6483751"
 
 "@types/babel__core@^7.1.0":
   version "7.1.3"

example/ToolbarAndroidExample-061/README.md

@@ -0,0 +1,9 @@
+
+# Examples
+These examples are meant to test with the local toolbar-android changes.
+
+# How to run: 
+
+ - install `@react-native-community/toolbar-android` from local repo: `yarn sync` (this is a passive sync, i.e. you need to do this manually when you want to test the changes)
+ - test: `yarn test`
+ - run: `yarn ios` or `yarn android`

example/ToolbarAndroidExample-061/__tests__/App-test.js

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../ToolbarAndroidExample';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

example/ToolbarAndroidExample-061/package.json

@@ -3,14 +3,15 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
+    "sync": "../scripts/update-local-pkg.sh ../..",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint ."
   },
   "dependencies": {
-    "@react-native-community/toolbar-android": "file:../../react-native-community-toolbar-android-0.1.0-rc.1.tgz",
+    "@react-native-community/toolbar-android": "file:../../react-native-community-toolbar-android-current.tgz",
     "react": "16.9.0",
     "react-native": "0.61.5"
   },

example/ToolbarAndroidExample-061/yarn.lock

@@ -948,9 +948,9 @@
     eslint-plugin-react-native "3.6.0"
     prettier "1.16.4"
 
-"@react-native-community/toolbar-android@file:../../react-native-community-toolbar-android-0.1.0-rc.1.tgz":
+"@react-native-community/toolbar-android@file:../../react-native-community-toolbar-android-current.tgz":
   version "0.1.0-rc.1"
-  resolved "file:../../react-native-community-toolbar-android-0.1.0-rc.1.tgz#5cd8451295628d6a5f87b2e6c162a94c0124de8d"
+  resolved "file:../../react-native-community-toolbar-android-current.tgz#d88a050f13df0c50eb03bb2e993d1ebbf6483751"
 
 "@types/babel__core@^7.1.0":
   version "7.1.3"

example/scripts/update-local-pkg.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+#
+# setup example environment by creating a local repo for main code base
+# Note: this should be executed from the actual example directory
+#
+PROJECT_ROOT="$1"
+PKG_NAME="@react-native-community/toolbar-android"
+LOCAL_REPO="../${SCRIPT_DIR}/repo"
+PKG_CURRENT="react-native-community-toolbar-android-current.tgz"
+CWD=`pwd`
+
+echo "** packaging @react-native-community/toolbar-android..."
+cd "${PROJECT_ROOT}"
+PKG_FILE=`npm pack 2> /dev/null`
+mv "${PKG_FILE}" "${PKG_CURRENT}"
+echo "${PKG_FILE} => ${PKG_CURRENT}"
+echo "${PKG_CURRENT} is ready..."
+
+cd ${CWD}
+echo "** install the local package..."
+yarn cache clean 
+yarn add "file:${PROJECT_ROOT}/${PKG_CURRENT}" 

js/ToolbarAndroid.web.js

@@ -9,4 +9,15 @@
 
 'use strict';
 
-module.exports = require('react-native/Libraries/Components/UnimplementedViews/UnimplementedView');
+let m;
+try {
+  // This is an optional dependency. However, webpack might still show warning message.
+  m = require('react-native/Libraries/Components/UnimplementedViews/UnimplementedView');
+} catch {
+  // If failed to find react-native UnimplementedView, just returns an empty module so
+  // this won't cause bundling related error, however any subsequent attempt of using this module
+  // in such situation shall caused compile-error because it really should not be used for web.
+  m = {};
+}
+
+module.exports = m;