@typeskill/debugger
A utility to inspect, reproduce and report bugs from @typeskill/typer
.
Give the debugger a try on Expo
Setup
You must install the typeskill version you wish to test.
Example (typescript)
If you're not familiar with typescript, just copy / paste this snippet in Typeskill playground and read the transpiled source.
// App.tsx
import React, { memo, useCallback } from 'react'
import { PermissionsAndroid } from 'react-native'
import { DocumentControlAction, Toolbar, Images, GenericControlAction, buildVectorIconControlSpec } from '@typeskill/typer'
import { Debugger, DebuggerActions } from '@typeskill/debugger'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import ImagePicker from 'react-native-image-picker'
function buildMaterialControlSpec(actionType: GenericControlAction, name: string) {
return buildVectorIconControlSpec(MaterialCommunityIcons, actionType, name)
}
const toolbarLayout: Toolbar.Layout = [
buildMaterialControlSpec(DocumentControlAction.SELECT_TEXT_BOLD, 'format-bold'),
buildMaterialControlSpec(DocumentControlAction.SELECT_TEXT_ITALIC, 'format-italic'),
buildMaterialControlSpec(DocumentControlAction.SELECT_TEXT_UNDERLINE, 'format-underline'),
buildMaterialControlSpec(DocumentControlAction.SELECT_TEXT_STRIKETHROUGH, 'format-strikethrough-variant'),
buildMaterialControlSpec(DocumentControlAction.INSERT_IMAGE_AT_SELECTION, 'file-image'),
buildMaterialControlSpec(DebuggerActions.COPY_DOCUMENT_SOURCE, 'clipboard-text-outline')
]
interface ImageSource {
uri: string
name: string
}
const pickImageAsync = async () => {
await PermissionsAndroid.request('android.permission.CAMERA')
return new Promise<Images.Description<ImageSource>>((res, rej) => {
ImagePicker.showImagePicker({}, (response) => {
if (response.didCancel) {
rej(new Error('User cancelled.'))
}
if (response.error) {
rej(new Error(response.error))
}
res({
source: {
uri: response.uri,
name: response.fileName,
},
width: response.width,
height: response.height
} as Images.Description<ImageSource>)
})
})
}
const App = memo(() => {
return (
<Debugger pickOneImage={pickImageAsync} toolbarLayout={toolbarLayout} />
)
})
export default App