Prepare package for publishing

Author: mchudy

.npmignore

@@ -1,2 +1,3 @@
 example
-src
+src
+screenshots

README.md

@@ -5,6 +5,8 @@
 
 Redux DevTools implementation for React Native based on [redux-devtools-inspector](https://github.com/alexkuz/redux-devtools-inspector).
 
+For now, it's mostly a one-to-one port adjusted for mobile. Some features might be missing but I plan to implement in the future.
+
 ![](https://raw.githubusercontent.com/mchudy/react-native-redux-devtools/master/screenshots/counter.png)
 
 ### Installation
@@ -17,8 +19,37 @@ yarn add react-native-redux-devtools
 
 ### Usage
 
+Create store composed with devtools:
 ```js
+import { createStore, compose, applyMiddleware } from 'redux';
+import reducer from './reducer';
+import { DevTools } from 'react-native-redux-devtools';
+
+const enhancer = compose(
+    applyMiddleware(), // apply middlewares that you are using
+    DevTools.instrument() 
+);
+
+export const store = createStore(reducer, enhancer);
+```
 
+Then you can render devtools in your application:
+```jsx
+import * as React from 'react';
+import { View } from 'react-native';
+import { DevTools } from 'react-native-redux-devtools';
+
+class App extends React.Component {
+  render() {
+    return (
+      <View>
+        {/* Your app content */}
+        <DevTools />
+      </View>
+    );
+  }
+}
 ```
 
-More details on how to set up devtools can be found in [redux-devtools documentation](https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md).
+Remember not to enable devtools in production builds!
+More details on how to set up devtools can be found in [redux-devtools documentation](https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md).

example/App.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
 import { actions } from './src/actions';
 import { connect, Provider } from 'react-redux';
 import { store } from './src/store';
-import DevTools from './src/DevTools';
+import { DevTools } from 'react-native-redux-devtools';
 
 export default class Root extends React.Component {
   render() {

example/package.json

@@ -9,31 +9,18 @@
   },
   "dependencies": {
     "bind-decorator": "^1.0.11",
-    "dateformat": "^3.0.3",
-    "hex-rgba": "^1.0.2",
-    "immutable": "^4.0.0-rc.12",
-    "javascript-stringify": "^1.6.0",
-    "jsondiffpatch": "^0.3.11",
-    "moment": "^2.22.2",
     "react": "16.5.0",
-    "react-base16-styling": "^0.6.0",
     "react-native": "0.57.2",
-    "react-native-json-tree": "^1.2.0",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
-    "redux-devtools": "^3.4.1",
-    "redux-devtools-themes": "^1.0.0"
+    "react-native-redux-devtools": "file:.."
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.1.2",
-    "@types/dateformat": "^1.0.1",
-    "@types/hex-rgba": "^1.0.0",
-    "@types/immutable": "^3.8.7",
     "@types/react": "^16.4.15",
     "@types/react-native": "^0.57.2",
     "@types/react-redux": "^6.0.9",
     "@types/redux": "^3.6.0",
-    "@types/redux-devtools": "^3.0.44",
     "babel-jest": "23.6.0",
     "jest": "23.6.0",
     "metro-react-native-babel-preset": "0.48.0",

example/src/actions.ts

@@ -6,10 +6,6 @@ export enum ActionTypes {
 export const actions = {
     increment: () => ({
         type: ActionTypes.INCREMENT,
-        payload: {
-            a: 1,
-            b: true
-        }
     }),
     decrement: () => ({
         type: ActionTypes.DECREMENT

example/src/store.ts

@@ -1,6 +1,6 @@
 import { createStore, compose, applyMiddleware } from 'redux';
 import reducer from './reducer';
-import DevTools from './DevTools';
+import { DevTools } from 'react-native-redux-devtools';
 
 const enhancer = compose(
     applyMiddleware(),

example/yarn.lock

@@ -662,23 +662,6 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@types/dateformat@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/dateformat/-/dateformat-1.0.1.tgz#2e5b235c8c55652c4fec284506d2a36fe65fe87e"
-  integrity sha1-LlsjXIxVZSxP7ChFBtKjb+Zf6H4=
-
-"@types/hex-rgba@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/hex-rgba/-/hex-rgba-1.0.0.tgz#b2aed2aa9fdd6152b7f0ac5e3733b974d4eba35a"
-  integrity sha512-u3AGV8fjRsDBqY4wOvVWhVCgKDfh2b0h3mux7KPKU1cm/6mJp14OWBINLgBypeBTM89Nm2j+eKQqIoIe7150DA==
-
-"@types/immutable@^3.8.7":
-  version "3.8.7"
-  resolved "https://registry.yarnpkg.com/@types/immutable/-/immutable-3.8.7.tgz#536d33d30f3f3d9a6d4642a219419fd82af633fb"
-  integrity sha1-U20z0w8/PZptRkKiGUGf2Cr2M/s=
-  dependencies:
-    immutable "*"
-
 "@types/prop-types@*":
   version "15.5.6"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
@@ -708,14 +691,6 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/redux-devtools@^3.0.44":
-  version "3.0.44"
-  resolved "https://registry.yarnpkg.com/@types/redux-devtools/-/redux-devtools-3.0.44.tgz#2781b87067b8aec3102d4cb4a478feb340df5259"
-  integrity sha512-FzLlfbx35XjYSY3lboIGwU/8dkwHoeFhxFxVz2KVgExH6eQNJUtFQ3W54tSrn/6mRHKDs/XFleaKhIXjrflTtA==
-  dependencies:
-    "@types/react" "*"
-    redux "^3.6.0"
-
 "@types/redux@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
@@ -2922,11 +2897,6 @@ image-size@^0.6.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
-immutable@*:
-  version "3.8.2"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
-  integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
-
 immutable@^4.0.0-rc.12:
   version "4.0.0-rc.12"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"
@@ -3888,7 +3858,7 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.17.5, lodash-es@^4.2.1:
+lodash-es@^4.17.5:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
   integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
@@ -3928,7 +3898,7 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -4360,11 +4330,6 @@ mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
-moment@^2.22.2:
-  version "2.22.2"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
-  integrity sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=
-
 morgan@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.1.tgz#0a8d16734a1d9afbc824b99df87e738e58e2da59"
@@ -5064,6 +5029,20 @@ react-native-json-tree@^1.2.0:
     prop-types "^15.6.0"
     react-base16-styling "github:dean177/react-base16-styling#fbc6593"
 
+"react-native-redux-devtools@file:..":
+  version "0.0.1"
+  dependencies:
+    dateformat "^3.0.3"
+    hex-rgba "^1.0.2"
+    immutable "^4.0.0-rc.12"
+    javascript-stringify "^1.6.0"
+    jsondiffpatch "^0.3.11"
+    react-base16-styling "^0.6.0"
+    react-native-json-tree "^1.2.0"
+    redux "^4.0.0"
+    redux-devtools "^3.4.1"
+    redux-devtools-themes "^1.0.0"
+
 react-native-typescript-transformer@^1.2.10:
   version "1.2.10"
   resolved "https://registry.yarnpkg.com/react-native-typescript-transformer/-/react-native-typescript-transformer-1.2.10.tgz#6f76c1449028cdeafa184b533301ecd547367ed1"
@@ -5272,16 +5251,6 @@ redux@*, redux@^4.0.0:
     loose-envify "^1.1.0"
     symbol-observable "^1.2.0"
 
-redux@^3.6.0:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
-  integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
-  dependencies:
-    lodash "^4.2.1"
-    lodash-es "^4.2.1"
-    loose-envify "^1.1.0"
-    symbol-observable "^1.0.3"
-
 regenerate-unicode-properties@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-7.0.0.tgz#107405afcc4a190ec5ed450ecaa00ed0cafa7a4c"
@@ -5937,7 +5906,7 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-symbol-observable@^1.0.2, symbol-observable@^1.0.3, symbol-observable@^1.2.0:
+symbol-observable@^1.0.2, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==

package.json

@@ -14,10 +14,22 @@
     "url": "git://github.com/mchudy/react-native-redux-devtools.git"
   },
   "dependencies": {
-    "moment": "^2.22.2",
-    "redux-devtools": "^3.4.1"
+    "dateformat": "^3.0.3",
+    "hex-rgba": "^1.0.2",
+    "immutable": "^4.0.0-rc.12",
+    "javascript-stringify": "^1.6.0",
+    "jsondiffpatch": "^0.3.11",
+    "react-base16-styling": "^0.6.0",
+    "react-native-json-tree": "^1.2.0",
+    "redux": "^4.0.0",
+    "redux-devtools": "^3.4.1",
+    "redux-devtools-themes": "^1.0.0"
   },
   "devDependencies": {
+    "@types/hex-rgba": "^1.0.0",
+    "@types/react": "^16.7.3",
+    "@types/react-native": "^0.57.7",
+    "bind-decorator": "^1.0.11",
     "typescript": "^3.1.1"
   }
 }

screenshots/counter.png

@@ -32,16 +32,11 @@ export class ActionList extends React.Component<ActionListProps> {
     const {
       actions,
       actionIds,
-      onToggleAction,
       skippedActionIds,
-      selectedActionId,
-      startActionId,
       onSearch,
       searchValue,
-      currentActionId,
       onCommit,
       onSweep,
-      onJumpToState,
       styling
     } = this.props;
     const lowerSearchValue = searchValue && searchValue.toLowerCase();

example/src/@types/JSONTree.d.ts renamed to src/@types/JSONTree.d.ts

@@ -8,10 +8,9 @@ export class ActionListHeader extends React.Component<ActionListHeaderProps> {
       styling,
       onSearch,
       hasSkippedActions,
-      hasStagedActions,
-      onCommit,
-      onSweep
+      hasStagedActions
     } = this.props;
+
     return (
       <View {...styling('actionListHeader')}>
         <TextInput
@@ -23,7 +22,7 @@ export class ActionListHeader extends React.Component<ActionListHeaderProps> {
           }
         />
         {!!hasStagedActions && (
-          <View style={{ flexDirection: 'row' }}>
+          <View {...styling('actionListHeaderButtonContainer')}>
             {!!hasSkippedActions &&
               this.renderButton(Button.SWEEP, ['selectorButtonFirst'])}
             {this.renderButton(Button.COMMIT, [
@@ -60,11 +59,6 @@ export class ActionListHeader extends React.Component<ActionListHeaderProps> {
   }
 }
 
-const getActiveButtons = (hasSkippedActions: boolean): Button[] =>
-  [hasSkippedActions ? Button.SWEEP : null, Button.COMMIT].filter(
-    Boolean
-  ) as Button[];
-
 enum Button {
   SWEEP = 'Sweep',
   COMMIT = 'Commit'

example/src/@types/redux-devtools-themes.d.ts renamed to src/@types/themes.d.ts

@@ -32,7 +32,7 @@ export class ActionListRow extends React.Component<
     } = this.props;
     const timeDelta = timestamps.current - timestamps.previous;
     const showButtons = (this.state.showButtons && !isInitAction) || isSkipped;
-    console.warn(isInFuture);
+
     let actionType = action.type;
     if (typeof actionType === 'undefined') {
       actionType = '<UNDEFINED>';

example/src/ActionList.tsx renamed to src/ActionList.tsx

@@ -33,8 +33,6 @@ export class ActionPreview extends React.Component<ActionPreviewProps> {
       delta,
       error,
       nextState,
-      onInspectPath,
-      inspectedPath,
       tabName,
       onSelectTab,
       action,
@@ -64,7 +62,7 @@ export class ActionPreview extends React.Component<ActionPreviewProps> {
       <View {...styling('actionPreviewContainer')}>
         <ActionPreviewHeader
           tabs={renderedTabs}
-          {...{ inspectedPath, onInspectPath, tabName, onSelectTab, styling }}
+          {...{ tabName, onSelectTab, styling }}
         />
         {!error && (
           <ScrollView>
@@ -86,31 +84,22 @@ export class ActionPreview extends React.Component<ActionPreviewProps> {
             )}
           </ScrollView>
         )}
-        {error &&
-          <Text {...styling('stateError')}>{error}</Text>
-        }
+        {error && <Text {...styling('stateError')}>{error}</Text>}
       </View>
     );
   }
 
   @bind
   private labelRenderer(
-    [key, ...rest]: any,
-    nodeType: string,
+    [key, ..._rest]: any,
+    _nodeType: string,
     expanded: boolean
   ) {
-    const { styling, onInspectPath, inspectedPath } = this.props;
+    const { styling } = this.props;
 
     return (
       <Text>
         <Text {...styling('treeItemKey')}>{key}</Text>
-        {/* <span {...styling('treeItemPin')}
-              onClick={() => onInspectPath([
-                ...inspectedPath.slice(0, inspectedPath.length - 1),
-                ...[key, ...rest].reverse()
-              ])}>
-          {'(pin)'}
-        </span> */}
         {!expanded && ': '}
       </Text>
     );
@@ -120,8 +109,6 @@ export class ActionPreview extends React.Component<ActionPreviewProps> {
 interface ActionPreviewProps {
   tabs?: ((defaultTabs: Tab[]) => Tab[]) | Tab[];
   tabName: TabName;
-  inspectedPath: string[];
-  onInspectPath: (path: string[]) => void;
   delta?: Delta;
   error?: string;
   onSelectTab: (tabName: TabName) => void;