mirror of
https://github.com/morten-olsen/react-native-debug-console.git
synced 2026-02-08 00:36:26 +01:00
update
This commit is contained in:
10
demo/App.js
10
demo/App.js
@@ -1,7 +1,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {
|
import {
|
||||||
StyleSheet,
|
StyleSheet,
|
||||||
Text,
|
|
||||||
View,
|
View,
|
||||||
Button,
|
Button,
|
||||||
KeyboardAvoidingView,
|
KeyboardAvoidingView,
|
||||||
@@ -17,7 +16,7 @@ import {
|
|||||||
} from 'react-native-debug-console';
|
} from 'react-native-debug-console';
|
||||||
|
|
||||||
network.attach();
|
network.attach();
|
||||||
log.attach();
|
log.attach(true);
|
||||||
|
|
||||||
console.log('fooo');
|
console.log('fooo');
|
||||||
let xhr = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
@@ -117,8 +116,13 @@ export default class App extends React.Component {
|
|||||||
style={{
|
style={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
}}
|
}}
|
||||||
|
storageProvider={AsyncStorage}
|
||||||
|
context={global}
|
||||||
|
/>
|
||||||
|
<DevToolModal
|
||||||
|
storageProvider={AsyncStorage}
|
||||||
|
context={global}
|
||||||
/>
|
/>
|
||||||
<DevToolModal storage={AsyncStorage} />
|
|
||||||
</KeyboardAvoidingView>
|
</KeyboardAvoidingView>
|
||||||
</SafeAreaView>
|
</SafeAreaView>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import {
|
|||||||
StyleSheet,
|
StyleSheet,
|
||||||
View,
|
View,
|
||||||
TextInput,
|
TextInput,
|
||||||
|
Platform,
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import styled from 'styled-components/native';
|
import styled from 'styled-components/native';
|
||||||
import { createContext } from '../../../console';
|
import { createContext } from '../../../console';
|
||||||
@@ -33,11 +34,29 @@ const styles = StyleSheet.create({
|
|||||||
|
|
||||||
const Input = ({
|
const Input = ({
|
||||||
provider,
|
provider,
|
||||||
logs,
|
context: baseContext,
|
||||||
}) => {
|
}) => {
|
||||||
const [text, setText] = useState('');
|
const [text, setText] = useState('');
|
||||||
const [history, setHistory] = useState([]);
|
const [history, setHistory] = useState([]);
|
||||||
const [historyOffset, setHistoryOffset] = useState();
|
const [historyOffset, setHistoryOffset] = useState();
|
||||||
|
|
||||||
|
const send = () => {
|
||||||
|
const newHistory = [...history, text];
|
||||||
|
const context = createContext({
|
||||||
|
logProvider: provider,
|
||||||
|
}, baseContext);
|
||||||
|
const contextKeys = Object.keys(context);
|
||||||
|
const contextValues = Object.values(context);
|
||||||
|
const fn = new Function(...contextKeys, text);
|
||||||
|
try {
|
||||||
|
fn(...contextValues);
|
||||||
|
setText('');
|
||||||
|
setHistoryOffset(undefined);
|
||||||
|
setHistory(newHistory);
|
||||||
|
} catch (err) {
|
||||||
|
provider.error([err]);
|
||||||
|
}
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<Button
|
<Button
|
||||||
@@ -75,25 +94,16 @@ const Input = ({
|
|||||||
style={styles.input}
|
style={styles.input}
|
||||||
value={text}
|
value={text}
|
||||||
onChangeText={text => setText(text)}
|
onChangeText={text => setText(text)}
|
||||||
/>
|
onKeyPress={(evt) => {
|
||||||
<Button
|
global.proxyConsole.log(Platform.OS === 'web' && evt.key === 'Enter' && evt.shiftKey);
|
||||||
onPress={() => {
|
if (Platform.OS === 'web' && evt.key === 'Enter' && !evt.shiftKey) {
|
||||||
const newHistory = [...history, text];
|
send();
|
||||||
const context = createContext({
|
return false;
|
||||||
logProvider: provider,
|
|
||||||
});
|
|
||||||
const contextKeys = Object.keys(context);
|
|
||||||
const contextValues = Object.values(context);
|
|
||||||
const fn = new Function(...contextKeys, text);
|
|
||||||
try {
|
|
||||||
fn(...contextValues);
|
|
||||||
setText('');
|
|
||||||
setHistoryOffset(undefined);
|
|
||||||
setHistory(newHistory);
|
|
||||||
} catch (err) {
|
|
||||||
provider.error([err]);
|
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onPress={() => send()}
|
||||||
>
|
>
|
||||||
<Icon name="play" />
|
<Icon name="play" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -32,6 +32,7 @@ const initFilters = [
|
|||||||
const Console = ({
|
const Console = ({
|
||||||
includeStackTrace,
|
includeStackTrace,
|
||||||
provider,
|
provider,
|
||||||
|
context,
|
||||||
}) => {
|
}) => {
|
||||||
const logs = useLog(provider);
|
const logs = useLog(provider);
|
||||||
const [filters, setFilters] = useState(initFilters);
|
const [filters, setFilters] = useState(initFilters);
|
||||||
@@ -55,7 +56,7 @@ const Console = ({
|
|||||||
/>
|
/>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
<Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
|
<Output filter={filters.filter(f => f.selected).map(f => f.name)} logs={logs} includeStackTrace={includeStackTrace} />
|
||||||
<Input provider={provider} />
|
<Input provider={provider} context={context} />
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ class Events extends Component {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SafeAreaView
|
<SafeAreaView
|
||||||
forceInset={{ top: 'always', vertical: 'always' }}
|
forceInset={{ top: 'always', vertical: 'always', bottom: 'always' }}
|
||||||
style={{flex: 1}}
|
style={{flex: 1}}
|
||||||
>
|
>
|
||||||
<KeyboardAvoidingView
|
<KeyboardAvoidingView
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ const DevTool = ({
|
|||||||
onClose,
|
onClose,
|
||||||
logProvider = log,
|
logProvider = log,
|
||||||
storageProvider,
|
storageProvider,
|
||||||
|
context = {},
|
||||||
requestProvider = network,
|
requestProvider = network,
|
||||||
additionalTools = [],
|
additionalTools = [],
|
||||||
}) => {
|
}) => {
|
||||||
@@ -36,6 +37,7 @@ const DevTool = ({
|
|||||||
<Console
|
<Console
|
||||||
includeStackTrace={includeStackTrace}
|
includeStackTrace={includeStackTrace}
|
||||||
provider={logProvider}
|
provider={logProvider}
|
||||||
|
context={context}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
getData: log.get,
|
getData: log.get,
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
export const createContext = ({
|
export const createContext = ({
|
||||||
logProvider,
|
logProvider,
|
||||||
}) => ({
|
}, baseContext = {}) => ({
|
||||||
log: (...args) => logProvider.log(...args),
|
log: (...args) => logProvider.log(...args),
|
||||||
clear: logProvider.clear,
|
clear: logProvider.clear,
|
||||||
|
window: baseContext,
|
||||||
|
global: baseContext,
|
||||||
|
context: baseContext,
|
||||||
});
|
});
|
||||||
@@ -60,11 +60,12 @@ class Log {
|
|||||||
|
|
||||||
handleError(err) {
|
handleError(err) {
|
||||||
if (err && err.error) {
|
if (err && err.error) {
|
||||||
this.error([err.error], true);
|
this.error([err.error]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
attach(keep) {
|
attach(keep) {
|
||||||
|
global.proxyConsole = proxyConsole;
|
||||||
const redirected = Object.keys(proxyConsole).reduce((output, key) => ({
|
const redirected = Object.keys(proxyConsole).reduce((output, key) => ({
|
||||||
...output,
|
...output,
|
||||||
[key]: keep ? (...args) => proxyConsole[key](...args) : () => {},
|
[key]: keep ? (...args) => proxyConsole[key](...args) : () => {},
|
||||||
|
|||||||
Reference in New Issue
Block a user