Polish a lot of things

README.md

@@ -1,33 +1,44 @@
 <div align="center">
-  <img src="./docs/wiretap.png" alt="Wiretap" height="200">
-  <h3 align="center">Stare into the soul of your observables</h3>
+  <img src="./docs/wiretap.png" alt="Wiretap" height="100">
+    <h3 align="center">Stare at the soul of your mobx and mobx state tree observables</h3>
 </div>
 
-# Work in progress. App is coming soon.
+ <img src="./docs/wiretap.gif" alt="Wiretap">
 
-Monitor (Wiretap) and update your mobx observables. A dope way to debug your app. Inspired by [Reactotron](https://github.com/infinitered/reactotron).
+
+
+The dev tool you and your mobx and mobx-state-tree apps deserve.
 
 ## Features
-- Monitor observables
-- Update observables through the UI
-- Log objects (A fancier console)
-- And many more coming soon. Open an issue if you have a feature request.
+- Mobx
+  - Live inspection of observable state
+  - Update observable state
+  - Listen to action logs
+  - Invoke actions
+- Mobx state tree
+  - Live inspection of state tree
+  - View action, snapshot and patch logs
+  - Apply snapshots and patches
+  - Invoke actions with arguments
+  - Record and replay actions
+
+## Getting started
 
-## Get started
+### 1) Download the app
+- [OS X]()
+- [Windows]()
 
-### Install the module
+### 2) Install the npm module
 ```
-yarn add mobx-wiretap
+yarn add mobx-wiretap --dev
 ```
 
-### Initialize wiretap and start inspecting
+### 3) Inspecting mobx observables
 ```javascript
-import {observable} from "mobx";
-import { wiretap, inspect, log } from "mobx-wiretap";
+import { observable } from "mobx";
+import { wiretap, inspect } from "mobx-wiretap";
 
-// This initializes the connection with the dashboard.
-// You have to invoke this before any other methods from mobx-wiretap
-// Pass any name as the app name
+// Provide a name as the app name.
 wiretap("My awesome app");
 
 const todos = observable([{
@@ -36,17 +47,71 @@ const todos = observable([{
 }])
 
 // Now you are inspecting todos.
-// Changes will reflect in the dashboard as your app changes them.
-// First parameter is a mandotory label
+// Changes will reflect in real time in the app.
+// First parameter is a required label.
 inspect("Todos", todos);
+```
+
+### 4) Inspecting Mobx-state-tree observables
+```javascript
+import { types } from "mobx-state-tree";
+// Please note that you have to require from '/mst'.
+import { wiretap, inspect } from "mobx-wiretap/mst";
+
+// Provide a name as the app name.
+wiretap("My awesome app");
+
+const Todo = types.model("Todo", {
+    title: types.string,
+    done: false
+}).actions(self => ({
+    toggle() {
+        self.done = !self.done
+    }
+}));
+
+const todo = Todo.create({
+    title: "Get coffee",
+    done: false
+});
 
-// Just a fancier console.log
-// First parameter is a mandotory label
-log("Custom log", {
-    text: "What's up?" 
+// Now you are inspecting todos.
+// Changes will reflect in real time in the app.
+// First parameter is a required label.
+inspect("Todo", todo);
+```
+
+### 5) Printing plain objects with log()
+```javascript
+import { wiretap, log } from "mobx-wiretap";
+wiretap("My awesome app");
+
+// Call log
+log("CustomObject", {
+    question: "Are unicorns real?"
 });
 ```
 
+# How does this differ from mobx-dev-tools?
+Mobx-dev-tools is an awesome tool to inspect your react app and see how the UI reacts to state changes. Wiretap focues more on the state itself. You would still need mobx-dev-tools to keep an eye on the react components.
+
+# The road ahead
+ - Support for mobx computed properties.
+ - Support for mobx-state-tree views.
+ - Support for react native.
+
+ ## Looking for your suggestions
+ Let me know what you want to see in wiretap. Go right ahead and share your feedback and thoughts by creating an issue.
+
+# Inspiration
+Inspired by [Reactotron](https://github.com/infinitered/reactotron).
 
 # Thanks
 Thanks [Alex Bergin](https://codepen.io/abergin/pen/XpwRpE)  for the awesome loading animation.
+
+# License
+MIT © [Raathigeshan](https://twitter.com/Raathigeshan)
+
+<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/2VtFmV65B5vo13VnsCfGqKU8/Raathigesh/wiretap'>
+  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/2VtFmV65B5vo13VnsCfGqKU8/Raathigesh/wiretap.svg' />
+</a>

packages/app/package.json

@@ -2,19 +2,17 @@
   "name": "wiretap",
   "productName": "Wiretap",
   "main": "./dist/main/index.js",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "Wiretap your mobx observables",
   "scripts": {
     "dev": " cross-env ELECTRON_WEBPACK_WDS_PORT=9080 electron-webpack dev",
     "compile": "electron-webpack",
+    "mac": "npm run compile && node_modules/.bin/build --mac",
     "win": "npm run compile && node_modules/.bin/build --win",
-    "all-build": "compile && node_modules/.bin/build --win --mac",
-    "ship": "compile && node_modules/.bin/build --win --mac -p always"
+    "all-build": "npm run compile && node_modules/.bin/build --win --mac",
+    "ship": "npm run compile && node_modules/.bin/build --win --mac -p always"
   },
-  "keywords": [
-    "mobx",
-    "dev-tools"
-  ],
+  "keywords": ["mobx", "dev-tools"],
   "author": "Raathigesh",
   "license": "MIT",
   "dependencies": {
@@ -60,11 +58,8 @@
     "productName": "Mobx Wiretap",
     "mac": {
       "category": "dev.tools",
-      "target": [
-        "zip",
-        "dmg"
-      ],
-      "identity": null
+      "target": ["zip", "dmg"],
+      "identity": "Raathigeshan Kugarajan (PU9359K4W8)"
     },
     "nsis": {
       "perMachine": true
@@ -73,7 +68,7 @@
       {
         "provider": "github",
         "owner": "Raathigesh",
-        "repo": "wiretap"
+        "repo": "wiretap-release-test"
       }
     ]
   }

packages/app/src/main/menu.js

@@ -55,7 +55,7 @@ export default class MenuBuilder {
         submenu: [
           {
             label: "Open dev tools",
-            click() {
+            click: () => {
               this.mainWindow.webContents.openDevTools();
             }
           },

packages/app/src/renderer/components/EmptyContent.js

@@ -9,11 +9,11 @@ const ContentContainer = styled.div`
   padding: 0px;
 `;
 
-export default function EmptyContent({ title, subtitle }) {
+export default function EmptyContent({ title, subtitle, icon = "icon-emoji" }) {
   return (
     <ContentContainer className="empty">
       <div className="empty-icon">
-        <i className="icon icon-3x icon-emoji" />
+        <i className={`icon icon-3x ${icon}`} />
       </div>
       <p className="empty-title h5">{title}</p>
       <p className="empty-subtitle">{subtitle}</p>

packages/app/src/renderer/components/Sidebar/Footer.js

@@ -41,14 +41,20 @@ function Footer({ connectionInfo, updater }) {
         {updater.updateStatus === UpdaterStatus.UpdateAvailableForDownload && (
           <UpdateButton
             className="btn btn-link"
-            onClick={updater.downloadUpdate}
+            onClick={() => {
+              updater.downloadUpdate();
+            }}
           >
             Download and Install
           </UpdateButton>
         )}
         {updater.updateStatus === UpdaterStatus.DownloadingUpdate && (
           <UpdateLabel>Downloading update</UpdateLabel>
         )}
+        {updater.updateStatus === UpdaterStatus.DownloadingUpdate && (
+          <progress className="progress" value={updater.progress} max="100" />
+        )}
+
         {updater.updateStatus === UpdaterStatus.InstallingUpdate && (
           <UpdateLabel>Installing update</UpdateLabel>
         )}

packages/app/src/renderer/components/executionPanel/Actions.js

@@ -19,7 +19,7 @@ const Header = styled.div`
   padding-top: 6px;
   background-color: #f1f1f1;
   font-size: 16px;
-  height: 37px;
+  min-height: 37px;
 `;
 
 const PopoverCard = styled.div`
@@ -38,7 +38,6 @@ const ActionsColumn = styled.div`
   overflow: auto;
   color: #fffbfb;
   flex-wrap: wrap;
-  flex-grow: 1;
 `;
 
 const ExecuteButton = styled.button`margin-top: 8px;`;
@@ -93,6 +92,7 @@ class Actions extends Component {
             <EmptyContent
               title="No actions"
               subtitle="This observable does not have any actions associated."
+              icon="icon-apps"
             />
           )}
         </ActionsColumn>

packages/app/src/renderer/components/executionPanel/Recording.js

@@ -13,6 +13,7 @@ const RecordingContainer = styled.div`
   padding-left: 15px;
   margin: 5px;
   color: #727e96;
+  min-height: 33px;
 `;
 
 const RecodingLabel = styled.span``;

packages/app/src/renderer/components/executionPanel/Recordings.js

@@ -18,7 +18,13 @@ const RecordingsHeader = styled.div`
   padding: 7px;
   background-color: #f1f1f1;
   font-size: 16px;
-  height: 37px;
+  min-height: 37px;
+`;
+
+const RecordingsContent = styled.div`
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
 `;
 
 const Header = styled.div`
@@ -46,7 +52,7 @@ function Recordings({
     // mst node
     title = "Not supported";
     subtitle =
-      "Mobx does not support recording actions. Checkout mobx state tree. Seriously!";
+      "Mobx does not support recording actions. Record and replay is supported with Mobx state tree.";
   }
 
   return (
@@ -71,21 +77,23 @@ function Recordings({
           </button>
         )}
       </RecordingsHeader>
-      {recordings.map((recording, index) => {
-        return (
-          <Recording
-            key={index}
-            currentTracker={currentTracker}
-            trackerId={trackerId}
-            recording={recording}
-            playRecording={playRecording}
-            renameRecording={renameRecording}
-            removeRecording={removeRecording}
-          />
-        );
-      })}
+      <RecordingsContent>
+        {recordings.map((recording, index) => {
+          return (
+            <Recording
+              key={index}
+              currentTracker={currentTracker}
+              trackerId={trackerId}
+              recording={recording}
+              playRecording={playRecording}
+              renameRecording={renameRecording}
+              removeRecording={removeRecording}
+            />
+          );
+        })}
+      </RecordingsContent>
       {recordings.length === 0 && (
-        <EmptyContent title={title} subtitle={subtitle} />
+        <EmptyContent title={title} subtitle={subtitle} icon="icon-apps" />
       )}
     </RecordingContainer>
   );

packages/app/src/renderer/components/logs/LogPanel.js

@@ -12,13 +12,14 @@ const ContentContainer = styled.div`
 const TraceContainer = styled.div`overflow: auto;`;
 
 const ClearButton = styled.button`float: right;`;
+const CardHeader = styled.div`margin-bottom: 10px;`;
 
 class Spy extends Component {
   render() {
     const { tracker, applySnapshot, applyPatch, clearLogs } = this.props;
     return (
       <ContentContainer className="card">
-        <div className="card-header">
+        <CardHeader className="card-header">
           <div className="card-title h5">
             Debug panel{" "}
             <ClearButton
@@ -32,9 +33,9 @@ class Spy extends Component {
           </div>
 
           <div className="card-subtitle text-gray">
-            Actions, snaphots and patches
+            Logs for taking a close look at the changes
           </div>
-        </div>
+        </CardHeader>
         {tracker.nodeType === 1 && (
           <div>
             <ul className="tab tab-block">

packages/app/src/renderer/index.js

@@ -41,7 +41,6 @@ class App extends Component {
 
     return (
       <AppContainer>
-        <DevTools />
         <Sidebar store={state} updater={updater} />
         <Wrapper>
           <MainCotent>