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

Commit073a742

Browse files
committed
refactor debugger
1 parentdf5ff83 commit073a742

File tree

8 files changed

+61
-57
lines changed

8 files changed

+61
-57
lines changed

‎typings/index.d.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ export interface MachineStateSchema {
125125
states:{
126126
Start:{
127127
states:{
128-
Initial:{}
129128
Startup:{}
130129
NewTutorial:{
131130
states:{

‎web-app/src/App.tsx‎

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,13 @@ import * as CR from 'typings'
44

55
importclientfrom'./services/apollo'
66
importcurrentTutorialfrom'./services/current'
7-
importDebuggerfrom'./components/Debugger'
87
importRoutesfrom'./Routes'
98

109
interfaceReceivedEvent{
1110
data:CR.Action
1211
}
1312

1413
constApp=()=>{
15-
constinitialState='Start.Initial'
16-
17-
// set state machine state
18-
const[state,setState]=React.useState(initialState)
19-
const[debuggerInfo,setDebuggerInfo]=React.useState({
20-
progress:{levels:{},stages:{},steps:{},complete:false},
21-
position:{levelId:'',stageId:'',stepId:''},
22-
})
2314

2415
// event bus listener
2516
React.useEffect(()=>{
@@ -28,17 +19,13 @@ const App = () => {
2819
constmessage=event.data
2920
// messages from core
3021

31-
if(message.type==='SET_STATE'){
32-
// SET_STATE - set state machine state
33-
setState(message.payload.state)
34-
35-
}elseif(message.type==='SET_DATA'){
22+
if(message.type==='SET_DATA'){
3623
// SET_DATA - set state machine context
3724
console.log('SET_DATA updated')
3825
const{ progress, position}=message.payload
3926
if(process.env.REACT_APP_DEBUG){
4027
console.log(`Position:${position.levelId}/${position.stageId}/${position.stepId}`)
41-
setDebuggerInfo({ progress, position})
28+
//setDebuggerInfo({ progress, position })
4229
}
4330
console.log('set currentTutorial')
4431
currentTutorial.set({ position, progress})
@@ -53,18 +40,9 @@ const App = () => {
5340
}
5441
},[])
5542

56-
// trigger progress when webview loaded
57-
// React.useEffect(() => {
58-
// editorDispatch('WEBVIEW_LOADED')
59-
// }, [])
60-
61-
// TODO: refactor cond to user <Router><Route> and accept first route as if/else if
6243
return(
6344
<ApolloProviderclient={client}>
64-
<div>
65-
{process.env.REACT_APP_DEBUG&&<Debuggerstate={state}{...debuggerInfo}/>}
66-
<Routesstate={state}/>
67-
</div>
45+
<Routes/>
6846
</ApolloProvider>
6947
)
7048
}

‎web-app/src/Routes.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,14 @@ import CompletedPage from './containers/Tutorial/CompletedPage'
1212

1313
const{ Route}=Router
1414

15-
interfaceProps{
16-
state:any
17-
}
18-
1915
conststyles={
2016
page:{
2117
margin:0,
2218
backgroundColor:'white',
2319
},
2420
}
2521

26-
constRoutes=({ state}:Props)=>{
22+
constRoutes=()=>{
2723
const[dimensions,setDimensions]=React.useState({
2824
width:window.innerWidth-20,
2925
height:window.innerHeight-20,
@@ -45,10 +41,7 @@ const Routes = ({ state }: Props) => {
4541

4642
return(
4743
<divstyle={{ ...styles.page, ...dimensions}}>
48-
<Routerstate={state}>
49-
<Routepath="Start.Initial">
50-
<div>Initial</div>
51-
</Route>
44+
<Router>
5245
<Routepath="Start.Startup">
5346
<LoadingPagetext="Launching..."/>
5447
</Route>

‎web-app/src/components/Debugger/index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ import * as CR from 'typings'
33

44
interfaceProps{
55
state:string
6-
position:CR.Position
7-
progress:CR.Progress
6+
// position: CR.Position
7+
// progress: CR.Progress
8+
children:React.ReactElement
89
}
910

10-
constDebugger=({ state,position, progress}:Props)=>(
11+
constDebugger=({ state,children}:Props)=>(
1112
<divstyle={{backgroundColor:'#FFFF99',color:'black',padding:'.5rem'}}>
1213
<h4>state:{state}</h4>
13-
<pstyle={{backgroundColor:'khaki',padding:'.5rem'}}>position:{JSON.stringify(position)}</p>
14-
<pstyle={{backgroundColor:'moccasin',padding:'.5rem'}}>progress:{JSON.stringify(progress)}</p>
14+
{/* <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
15+
<p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p> */}
16+
{children}
1517
</div>
1618
)
1719

‎web-app/src/components/Router/index.tsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,44 @@
11
import*asReactfrom'react'
22
import{useMachine}from'@xstate/react'
33
importmachinefrom'../../services/state/machine'
4+
importDebuggerfrom'../Debugger'
45
importRoutefrom'./Route'
6+
importstateToStringfrom'./stateToString'
57

68
interfaceProps{
7-
state:string
89
children:any
910
}
1011

11-
// const stateMatch = (state: string, path: string) => {
12-
// return !!(new RegExp(`^${state}`).exec(path))
13-
// }
12+
{/* {process.env.REACT_APP_DEBUG && <Debugger {...debuggerInfo} />} */}
13+
14+
constwrapDebugger=(element:React.ReactElement,state:any)=>{
15+
if(process.env.REACT_APP_DEBUG){
16+
return(
17+
<Debuggerstate={stateToString(state.value)}>
18+
{element}
19+
</Debugger>
20+
)
21+
}
22+
returnelement
23+
}
1424

1525
// router finds first state match of <Route path='' />
1626
constRouter=({ children}:Props)=>{
17-
const[current,send]=useMachine(machine)
27+
const[state,send]=useMachine(machine)
1828

1929
constchildArray=React.Children.toArray(children)
2030
for(constchildofchildArray){
21-
if(current.matches(child.props.path)){
31+
if(state.matches(child.props.path)){
32+
letelement
2233
if(child.props.send){
23-
returnReact.cloneElement(child.props.children,{ send})
34+
element=React.cloneElement(child.props.children,{ send})
2435
}else{
25-
returnchild.props.children
36+
element=child.props.children
2637
}
27-
38+
returnwrapDebugger(element,state)
2839
}
2940
}
30-
console.warn(`No Route matches for${JSON.stringify(current)}`)
41+
console.warn(`No Route matches for${JSON.stringify(state)}`)
3142
returnnull
3243
}
3344

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
conststateToString=(state:string|object,str:string=''):string=>{
2+
if(typeofstate==='object'){
3+
constkeys=Object.keys(state)
4+
if(keys&&keys.length){
5+
constkey=keys[0]
6+
//@ts-ignore
7+
returnstateToString(state[key],str.length ?`${str}.${key}` :key)
8+
}
9+
returnstr
10+
}elseif(typeofstate==='string'){
11+
returnstr.length ?`${str}.${state}` :state
12+
}
13+
return''
14+
}
15+
16+
exportdefaultstateToString

‎web-app/src/services/state/actions/index.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import{send}from'xstate'
12
// import {machine} from '../../extension'
23
// import {cache} from '../../services/apollo'
34
// import {editorDispatch} from '../../services/vscode'
@@ -6,7 +7,16 @@
67
// import tutorialConfig from '../../services/apollo/queries/tutorialConfig'
78

89

9-
exportdefault{}
10+
exportdefault{
11+
asyncnewOrContinue(){
12+
console.log('new or continue')
13+
// verify that the user has an existing tutorial to continue
14+
15+
// TODO: verify continue or new
16+
consthasExistingTutorial:boolean=false
17+
send(hasExistingTutorial ?'CONTINUE' :'NEW')
18+
},
19+
}
1020

1121
// export default {
1222
// async newOrContinue() {

‎web-app/src/services/state/machine.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,8 @@ export const machine = Machine<{}, CR.MachineStateSchema, CR.MachineEvent>(
1010
initial:'Start',
1111
states:{
1212
Start:{
13-
initial:'Initial',
13+
initial:'Startup',
1414
states:{
15-
Initial:{
16-
on:{
17-
WEBVIEW_INITIALIZED:'Startup',
18-
},
19-
},
2015
Startup:{
2116
onEntry:['newOrContinue'],
2217
on:{

0 commit comments

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