Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitede6e87

Browse files
committed
update readme
1 parent63b867a commitede6e87

File tree

6 files changed

+59
-16
lines changed

6 files changed

+59
-16
lines changed

‎readme.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,29 @@
11
#dob-react-devtools[![npm version](https://img.shields.io/npm/v/dob-react-devtools.svg?style=flat)](https://www.npmjs.com/package/dob-react-devtools)
2+
3+
Devtools for dob-react, with action and ui two way binding.
4+
5+
![dob-react-devtools demo](https://user-images.githubusercontent.com/7970947/31849585-433f33d2-b60a-11e7-9a31-da84032b692a.gif)
6+
7+
##Usage
8+
9+
```typescript
10+
import"dob-react-devtools"
11+
import {startDebug }from"dob-react"
12+
13+
startDebug()
14+
```
15+
16+
##Installation
17+
18+
Dob-react-devtools is available as the dob package on[npm](https://www.npmjs.com/package/dob-react-devtools).
19+
20+
```
21+
tnpm i dob-react-devtools
22+
```
23+
24+
##Features
25+
26+
- UI elements that are decorated with Connect, will highlight when dob triggers rerender.
27+
- Visually record the triggered action history and display data changes.
28+
- When UI element rerender, you can see the list of action associated with it.
29+
- View each UI element, that each action triggerd.

‎src/demo/pages/simple-crud/article/index.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ export default class Article extends PureComponent<Props, State> {
1212
return(
1313
<li>
1414
<p>
15-
文章名：{this.props.article.title}
15+
title:{this.props.article.title}
1616
</p>
1717
<p>
18-
作者：{this.props.article.author}
18+
author:{this.props.article.author}
1919
</p>
2020
<input
21-
placeholder="输入修改当前文章名.."
21+
placeholder="change current article's title.."
2222
onChange={event=>{
2323
this.props.ArticleAction.changeArticleTitle(this.props.index,event.currentTarget.value)
2424
}}

‎src/demo/pages/simple-crud/index.component.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,19 @@ export default class Page1 extends PureComponent<Props, State> {
1919
<div>
2020
<buttononClick={()=>{
2121
this.props.ArticleAction.addArticle()
22-
}}>添加文章</button>
22+
}}>add article</button>
2323

2424
<buttononClick={()=>{
25-
this.props.ArticleAction.multipleAction('123')
26-
}}>添加文章并修改文章名为123</button>
25+
this.props.ArticleAction.addArticleAndChangeTitle('custom name')
26+
}}>add article and change name</button>
2727

2828
<buttononClick={()=>{
2929
this.props.ArticleAction.runAsyncTest()
30-
}}>测试异步方法，值为{this.props.ArticleStore.a.b.c.d}</button>
30+
}}>test async action{this.props.ArticleStore.a.b.c.d}</button>
31+
32+
<buttononClick={()=>{
33+
this.props.ArticleAction.runAnonymousTest()
34+
}}>test anonymous action</button>
3135

3236
<ul>
3337
{Articles}

‎src/demo/stores/article/action.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class ArticleAction {
1414
@ActionaddArticle(){
1515
returnthis.ArticleStore.articles.push({
1616
id:Math.random(),
17-
title:'测试',
17+
title:'test dob-react-devtools',
1818
author:'ascoders'
1919
})
2020
}
@@ -28,7 +28,7 @@ export class ArticleAction {
2828
this.ArticleStore.articles.splice(index,1)
2929
}
3030

31-
@ActionmultipleAction(title:string){
31+
@ActionaddArticleAndChangeTitle(title:string){
3232
constindex=this.addArticle()
3333
this.changeArticleTitle(index-1,title)
3434
}
@@ -42,14 +42,17 @@ export class ArticleAction {
4242
}
4343
}
4444
waitOneMinute().then(()=>{
45-
Action(()=>{
46-
this.ArticleStore.a.b.c.d=7
47-
this.ArticleStore.a.b.c.d=8
48-
this.ArticleStore.a.b.c.d=9
49-
})
5045
this.ArticleStore.a.b.c.d=7
5146
this.ArticleStore.a.b.c.d=8
5247
this.ArticleStore.a.b.c.d=9
5348
})
5449
}
50+
51+
@ActionrunAnonymousTest(){
52+
this.ArticleStore.a.b.c.d=7
53+
Action(()=>{
54+
this.ArticleStore.a.b.c.d=8
55+
})
56+
this.ArticleStore.a.b.c.d=9
57+
}
5558
}

‎src/tool-box/debug-line/action/action.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export class Action extends React.PureComponent<Props, State>{
7070
privaterenderTitle(){
7171
if(this.props.debugInfo.name===null){
7272
return(
73-
<S.UnknowTitle>Unknow</S.UnknowTitle>
73+
<S.AnonymousTitle>Anonymous</S.AnonymousTitle>
7474
)
7575
}
7676

‎src/tool-box/debug-line/action/action.style.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const Title = styled.div`
3535
`}
3636
`
3737

38-
exportconstUnknowTitle=styled.div`
38+
exportconstAnonymousTitle=styled.div`
3939
text-shadow: 1px 1px #666, 0px 0px #111;
4040
`
4141

@@ -49,6 +49,14 @@ export const ChangeContainer = styled.div`
4949
border-top: 1px solid #111;
5050
border-bottom: 1px solid #404040;
5151
overflow-x: auto;
52+
&::-webkit-scrollbar-thumb {
53+
background-color: #333;
54+
}
55+
&::-webkit-scrollbar {
56+
width: 5px;
57+
height: 8px;
58+
background-color: #666;
59+
}
5260
`
5361

5462
exportconstChangeBox=styled.div`

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp