The issue reporter integrated with ui.
npm install issue-reporter-web
# or use yarn
yarn add issue-reporter-webimport * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as IssueReporterWeb from 'issue-reporter-web'
import 'issue-reporter-web/lib/style.less'
// 或者 import 'issue-reporter-web/lib/style.css'
ReactDOM.render(<IssueReporterWeb />, window.root)使用 preact + react-pizza 打包
import * as issueReporterRender from 'issue-reporter-web/standalone'
// standalone 样式相比于上面组件样式，多了固定定位在页面右下角
import 'issue-reporter-web/standalone.less'
// import 'issue-reporter-web/standalone.css'
const reporter = issueReporterRender('#root', {
/* ...props */
})
reporter.setProps({
// ...
})
// 更多 standalone 用法请查看 react-pizza https://github.com/imcuttle/react-pizza<body>
<div id="root"></div>
<script>
(function () {
var s = document.createElement('script');
s.src = '//unpkg.com/issue-reporter-web@0';
s.async = 'async';
s.defer = 'defer';
s.onload = function () {
if (window.IssueReporterWeb) {
window.IssueReporterWeb('#root')
}
}
var lk = document.createElement('link');
lk.rel = 'stylesheet';
lk.href = '//unpkg.com/issue-reporter-web@0/dist/style.css';
(document.head || document.getElementsByTagName('head')[0]).appendChild(s);
(document.head || document.getElementsByTagName('head')[0]).appendChild(lk);
})()
</script>
</body>React 组件的 Props
报告文本的模板字符串
-
Type:
string | () => string -
Default:
;[ '**Environments:**', '- URL: ${url}', '- OS: ${os}', '- Browser: ${browser} ${browserVersion}', '${ error ? "- Error: `" + error + "`" : "" }' ].join('\n')
用于 templateString 的参数，其中的 os / browser / browserVersion / url 会根据浏览器信息预设值。
特殊的, 如果设置了 $openUrl，则会调用 window.open 打开其链接
-
Type:
{$openUrl?: string} | () => object -
Example
{ $openUrl: 'https://example.com' }
>=0.1.0
是否在同一个窗口中打开 $openUrl
- Type:
boolean - Default:
true
是否复制最终的报告文本
- Type:
boolean - Default:
true
当复制成功时，打开 url 的延迟毫秒
- Type:
number - Default:
1000
在整合了数据后，触发 transformEnv 方法，一般用来转换 envInfo
-
Example
env => Object.assign(env, { name: 'imcuttle' })
当根据 envInfo 和 templateString 生成了文本后，触发该方法。
可以使用该方法，来设置 $openUrl
-
Type:
(text: string, envInfo: object) => void 0 -
Example
;(text, env) => { Object.assign(env, { $openUrl: 'http://example.com/new/issue?body=' + encodeURIComponent(text) }) }
使用 @rcp/hoc.i18n 做组件国际化
- Type:
'en-us'|'zh-cn' - Default:
'en-us'
允许外部设置国际化字典
-
Type:
{} -
Example:
{ 'copy.null.template': '不存在需要复制的文本模板', 'copy.fail': '复制失败', 'copy.success': '复制成功', 'issue.report': '发现 Bug' }
赋值给 envInfo，与 props.envInfo 的区别是，其优先级较低。
-
Example
reporterRef.assignEnvInfo({ name: 'imcuttle' })
重置 envInfo
-
Example
reporterRef.setEnvInfo({ name: 'imcuttle' })
展示提示框
复制文本，点击按钮也是触发该方法
为了方便外部扩展，使用 await-event-emitter 提供了钩子，使用如下
reporterRef.hooks.once('text', ({ text, env }) => {
// ...
})
reporterRef.hooks.on('text', ({ text, env }) => {
// ...
})以下钩子，触发的时间顺序排列
异步钩子
在获取完整环境变量后触发
-
env({}): 环境变量集合 -
Example:
reporterRef.hooks.on('env', async env => { // Yield for something await tick() })
同步钩子
在生成报告文本后触发
-
data({})data.text(string) - 生成的报告文本data.env({}) - 当前的环境变量
- Fork it!
- Create your new branch:
git checkout -b feature-neworgit checkout -b fix-which-bug - Start your magic work now
- Make sure npm test passes
- Commit your changes:
git commit -am 'feat: some description (close #123)'orgit commit -am 'fix: some description (fix #123)' - Push to the branch:
git push - Submit a pull request :)
This library is written and maintained by be-fe, [email protected].
MIT