Better seperation

demo/App.js

@@ -14,12 +14,10 @@ import {
   log,
   network,
   show,
-  context,
 } from 'react-native-debug-console';
 
 network.attach();
 log.attach();
-context.hello = () => 'earth';
 
 console.log('fooo');
 let xhr = new XMLHttpRequest();

lib/src/components/DevTool/Console/Input.js

@@ -5,8 +5,7 @@ import {
   TextInput,
 } from 'react-native';
 import styled from 'styled-components/native';
-import { context } from '../../../console';
-import log from '../../../log';
+import { createContext } from '../../../console';
 import Icon from '../../base/Icon';
 
 const Button = styled.TouchableOpacity`
@@ -33,6 +32,7 @@ const styles = StyleSheet.create({
 });
 
 const Input = ({
+  provider,
   logs,
 }) => {
   const [text, setText] = useState('');
@@ -79,6 +79,9 @@ const Input = ({
       <Button
         onPress={() => {
           const newHistory = [...history, text];
+          const context = createContext({
+            logProvider: provider,
+          });
           const contextKeys = Object.keys(context);
           const contextValues = Object.values(context);
           const fn = new Function(...contextKeys, text);
@@ -88,7 +91,7 @@ const Input = ({
             setHistoryOffset(undefined);
             setHistory(newHistory);
           } catch (err) {
-            log.error([err]);
+            provider.error([err]);
           }
         }}
       >

lib/src/components/DevTool/Console/index.js

@@ -3,7 +3,6 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import log from '../../../log';
 import useLog from '../../data/log';
 import Toolbar, {
   Button,
@@ -32,8 +31,9 @@ const initFilters = [
 
 const Console = ({
   includeStackTrace,
+  provider,
 }) => {
-  const logs = useLog();
+  const logs = useLog(provider);
   const [filters, setFilters] = useState(initFilters);
   return (
     <View style={styles.container}>
@@ -51,11 +51,11 @@ const Console = ({
         <Button
           name="Clear"
           icon="trash"
-          onPress={() => log.clear()}
+          onPress={() => provider.clear()}
         />
       </Toolbar>
       <Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
-      <Input />
+      <Input provider={provider} />
     </View>
   );
 };

lib/src/components/DevTool/Requests/index.js

@@ -26,8 +26,10 @@ const styles = StyleSheet.create({
   },
 });
 let i = 0;
-const Console = () => {
-  const requests = useRequests();
+const Console = ({
+  provider,
+}) => {
+  const requests = useRequests(provider);
   const [active, setActive] = useState();
   const selected = active >= 0 ? requests[active] : undefined;
   return (

lib/src/components/DevTool/index.js

@@ -22,33 +22,38 @@ const DevTool = ({
   style,
   includeStackTrace,
   onClose,
-  showNetwork = true,
-  showConsole = true,
+  logProvider = log,
+  storageProvider,
+  requestProvider = network,
   additionalTools = [],
-  storage,
 }) => {
   const views = [];
 
-  if (showConsole) {
+  if (logProvider) {
     views.push({
       name: 'Console',
-      view: <Console includeStackTrace={includeStackTrace} />,
+      view: (
+        <Console
+          includeStackTrace={includeStackTrace}
+          provider={logProvider}
+        />
+      ),
       getData: log.get,
     });
   }
 
-  if (showNetwork) {
+  if (requestProvider) {
     views.push({
       name: 'Network',
-      view: <Requests />,
+      view: <Requests provider={requestProvider} />,
       getData: network.get,
     });
   }
 
-  if (storage) {
+  if (storageProvider) {
     views.push({
       name: 'Storage',
-      view: <Storage provider={storage} />,
+      view: <Storage provider={storageProvider} />,
     });
   }
 

lib/src/components/data/Log.js

@@ -1,16 +1,15 @@
 import { useEffect, useState } from 'react';
-import log from '../../log';
 
-const useLog = () => {
+const useLog = (provider) => {
   const [logs, setLogs] = useState([]);
   useEffect(() => {
     const update = (newLogs) => {
       setLogs([...newLogs]);
     }
-    log.listen(update);
+    provider.listen(update);
 
     return () => {
-      log.unlisten(update);
+      provider.unlisten(update);
     }
   }, []);
   return logs;

lib/src/components/data/requests.js

@@ -1,16 +1,15 @@
 import { useState, useEffect } from 'react';
-import network from '../../network';
 
-const useRequests = () => {
+const useRequests = (provider) => {
   const [requests, setRequests] = useState([]);
   useEffect(() => {
     const update = (newRequests) => {
       setRequests(newRequests);
     };
 
-    network.listen(update);
+    provider.listen(update);
     return () => {
-      network.unlisten(update);
+      provider.unlisten(update);
     };
   }, []);
   return requests;

lib/src/console.js

@@ -1,6 +1,6 @@
-import log from './log';
-
-export const context = {
-  log: (...args) => console.log(...args),
-  clear: log.clear,
-};
+export const createContext = ({
+  logProvider,
+}) => ({
+  log: (...args) => logProvider.log(...args),
+  clear: logProvider.clear,
+});

lib/src/index.js

@@ -3,7 +3,6 @@ import DevToolModal from './components/DevTool/Modal';
 import log from './log';
 import network from './network';
 import events from './events';
-import { context } from './console';
 
 const show = () => events.publish('SHOW_DEVTOOLS');
 const hide = () => events.publish('HIDE_DEVTOOLS');
@@ -13,7 +12,6 @@ export {
   DevToolModal,
   log,
   network,
-  context,
   show,
   hide,
 };

lib/src/log.js

@@ -6,6 +6,7 @@ class Log {
     this.listeners = [];
     this.clear = this.clear.bind(this);
     this.get = this.get.bind(this);
+    this.handleError = this.handleError.bind(this);
   }
 
   listen(fn) {
@@ -57,6 +58,12 @@ class Log {
     this.log('debug', data, keep);
   }
 
+  handleError(err) {
+    if (err && err.error) {
+      this.error([err.error], true);
+    }
+  }
+
   attach(keep) {
     const redirected = Object.keys(proxyConsole).reduce((output, key) => ({
       ...output,
@@ -76,12 +83,15 @@ class Log {
         this.error([err], keep);
       });
     }
+    window.addEventListener('error', this.handleError);
   }
 
   detach() {
     overrides.forEach((key) => {
       window.console[key] = proxies[key];
     });
+
+    window.removeEventListener('error', this.handleError);
   }
 }