Merge pull request #1 from itenl/dev-1.1.0

Dev 1.1.0

Author: itenl

README.md

@@ -1,15 +1,22 @@
 # react-native-vdebug
 
+
+[![NPM Version](http://img.shields.io/npm/v/react-native-vdebug.svg?style=flat)](https://www.npmjs.org/package/react-native-vdebug)
+[![NPM Downloads](https://img.shields.io/npm/dm/react-native-vdebug.svg?style=flat)](https://npmcharts.com/compare/react-native-vdebug?minimal=true)
+[![install size](https://packagephobia.now.sh/badge?p=react-native-vdebug)](https://packagephobia.now.sh/result?p=react-native-vdebug)
+
+
 `React-Native 调试工具`
 
 ### 支持情况
 - [x] Command 自定义上下文
 - [x] 复制 cURL 至粘贴板
 - [x] 重新请求 URL
 - [x] 可视化 Response
+- [x] Log 等级分类
+- [x] 关键字过滤 Log / Network
 - [ ] Command 历史记录 (ing...)
-- [ ] Log 等级分类 (ing...)
-- [ ] 关键字过滤 Log / Network (ing...)
+- [ ] 导出所有 Log / Network (ing...)
 
 ## Install
 
@@ -30,17 +37,17 @@ return <VDebug info={{ obj: 'your object' }} />
 
 ## Snapshot
 
-<img src="./snapshot/z3mcx-duskg.gif" />
-
-<img src="./snapshot/Snipaste_2020-10-07_18-14-33.png" />
-
-<img src="./snapshot/Snipaste_2020-10-07_18-14-48.png" />
-
-<img src="./snapshot/Snipaste_2020-10-07_18-15-06.png" />
+<img src="./snapshot/79tx5-qew2r.gif" />
+<br />
+<img src="./snapshot/abovz-11w3r.jpg" />
+<br />
+<img src="./snapshot/aka6s-nqpkq.jpg" />
+<br />
 
 -------------------
 
 `禁止商业用途 ❤ 研究学习范畴 ❤ 作者保留解释权`
+<br />
 Commercial use is forbidden and The author reserves the right of interpretion
 
 [✶ MIT ✶](./LICENSE)

index.js

@@ -1,33 +1,27 @@
 import React, { PureComponent } from 'react';
 import { ScrollView, View, Text, TouchableOpacity, PanResponder, Animated, Dimensions, StyleSheet, TextInput, Keyboard, NativeModules, Platform, KeyboardAvoidingView } from 'react-native';
 import event from './src/event';
-import Network from './src/network';
-import Log from './src/console';
+import Network, { traceNetwork } from './src/network';
+import Log, { traceLog } from './src/log';
 import Info from './src/info';
 const { width, height } = Dimensions.get('window');
 
-let externalContext = {};
+let commandContext = global;
 
-export const setExternalContext = context => {
-  externalContext = context || {};
+export const setExternalContext = externalContext => {
+  if (externalContext) commandContext = externalContext;
 };
 
-function evalInContext(js, context) {
-  return function (str) {
-    let result = '';
-    try {
-      // eslint-disable-next-line no-eval
-      result = eval(str);
-    } catch (err) {
-      result = 'Invalid input';
-    }
-    return event.trigger('addLog', result);
-  }.call(context, `with(this) { ${js} } `);
-}
+// Log/network trace when Element is not initialized.
+export const initTrace = () => {
+  traceLog();
+  traceNetwork();
+};
 
 class VDebug extends PureComponent {
   constructor(props) {
     super(props);
+    initTrace();
     this.state = {
       commandValue: '',
       showPanel: false,
@@ -37,11 +31,11 @@ class VDebug extends PureComponent {
       panels: [
         {
           title: 'Log',
-          component: Log
+          component: <Log />
         },
         {
           title: 'Network',
-          component: Network
+          component: <Network />
         },
         {
           title: 'Info',
@@ -105,16 +99,28 @@ class VDebug extends PureComponent {
     NativeModules?.DevMenu?.reload();
   }
 
-  execCommand = () => {
+  evalInContext(js, context) {
+    return function (str) {
+      let result = '';
+      try {
+        // eslint-disable-next-line no-eval
+        result = eval(str);
+      } catch (err) {
+        result = 'Invalid input';
+      }
+      return event.trigger('addLog', result);
+    }.call(context, `with(this) { ${js} } `);
+  }
+
+  execCommand() {
     if (!this.state.commandValue) return;
-    const context = externalContext;
-    evalInContext(this.state.commandValue, context);
+    this.evalInContext(this.state.commandValue, commandContext);
     Keyboard.dismiss();
-  };
+  }
 
-  clearCommand = () => {
+  clearCommand() {
     this.textInput.clear();
-  };
+  }
 
   scrollToPage(index, animated = true) {
     this.scrollToCard(index, animated);
@@ -156,14 +162,14 @@ class VDebug extends PureComponent {
           }}
           style={styles.commandBarInput}
           placeholderTextColor={'#000000a1'}
-          placeholder="command..."
+          placeholder="Command..."
           onChangeText={text => this.setState({ commandValue: text })}
           value={this.state.commandValue}
         />
-        <TouchableOpacity style={styles.commandBarBtn} onPress={() => this.clearCommand()}>
+        <TouchableOpacity style={styles.commandBarBtn} onPress={this.clearCommand.bind(this)}>
           <Text>X</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.commandBarBtn} onPress={() => this.execCommand()}>
+        <TouchableOpacity style={styles.commandBarBtn} onPress={this.execCommand.bind(this)}>
           <Text>OK</Text>
         </TouchableOpacity>
       </View>
@@ -189,7 +195,7 @@ class VDebug extends PureComponent {
   }
 
   onScrollAnimationEnd({ nativeEvent }) {
-    const currentPageIndex = Math.floor(nativeEvent.contentOffset.x / width);
+    const currentPageIndex = Math.floor(nativeEvent.contentOffset.x / Math.floor(width));
     currentPageIndex != this.state.currentPageIndex &&
       this.setState({
         currentPageIndex: currentPageIndex

package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-native-vdebug",
-  "version": "1.0.0",
-  "description": "`React-Native 调试工具`",
+  "version": "1.1.0",
+  "description": "React-Native 调试工具",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/itenl/react-native-vdebug.git"
+    "url": "https://github.com/itenl/react-native-vdebug.git"
   },
   "keywords": [
     "react-native",
@@ -20,5 +20,8 @@
   "bugs": {
     "url": "https://github.com/itenl/react-native-vdebug/issues"
   },
+  "engines": {
+    "node": ">=8.11.0"
+  },
   "homepage": "https://github.com/itenl/react-native-vdebug#readme"
 }