|
1 | 1 | import*asReactfrom'react' |
2 | | -import*asCRfrom'typings' |
3 | | -importchannelfrom'../../services/channel' |
4 | | -importmessageBusReceiverfrom'../../services/channel/receiver' |
5 | | -importmachinefrom'../../services/state/machine' |
| 2 | +import{createMachine}from'../../services/state/machine' |
6 | 3 | import{useMachine}from'../../services/xstate-react' |
7 | | -importdebuggerWrapperfrom'../Debugger/debuggerWrapper' |
8 | 4 | importRoutefrom'./Route' |
9 | 5 | importonErrorfrom'../../services/sentry/onError' |
10 | 6 |
|
11 | 7 | interfaceProps{ |
12 | 8 | children:any |
13 | 9 | } |
14 | 10 |
|
15 | | -interfaceCloneElementProps{ |
16 | | -context:CR.MachineContext |
17 | | -send(action:CR.Action):void |
18 | | -} |
| 11 | +declareletacquireVsCodeApi:any |
19 | 12 |
|
20 | | -// router finds first state match of <Route path='' /> |
21 | | -constRouter=({ children}:Props):React.ReactElement<CloneElementProps>|null=>{ |
22 | | -const[state,send]=useMachine(machine,{ |
23 | | -interpreterOptions:{ |
24 | | -logger:console.log.bind('XSTATE:'), |
25 | | -}, |
26 | | -}) |
| 13 | +consteditor=acquireVsCodeApi() |
27 | 14 |
|
28 | | -channel.setMachineSend(send) |
| 15 | +// router finds first state match of <Route path='' /> |
| 16 | +constuseRouter=()=>{ |
| 17 | +const[state,send]=useMachine(createMachine({editorSend:editor.postMessage})) |
29 | 18 |
|
30 | 19 | // event bus listener |
31 | | -React.useEffect(messageBusReceiver,[]) |
32 | | - |
33 | | -constchildArray=React.Children.toArray(children) |
34 | | -for(constchildofchildArray){ |
35 | | -const{ path}=child.props |
36 | | -letpathMatch |
37 | | -if(typeofpath==='string'){ |
38 | | -pathMatch=state.matches(path) |
39 | | -}elseif(Array.isArray(path)){ |
40 | | -pathMatch=path.some(p=>state.matches(p)) |
41 | | -}else{ |
42 | | -thrownewError(`Invalid route path${JSON.stringify(path)}`) |
| 20 | +React.useEffect(()=>{ |
| 21 | +constlistener='message' |
| 22 | +// propograte channel event to state machine |
| 23 | +consthandler=(action:any)=>{ |
| 24 | +// NOTE: must call event.data, cannot destructure. VSCode acts odd |
| 25 | +constevent=action.data |
| 26 | +// ignore browser events from plugins |
| 27 | +if(event.source){ |
| 28 | +return |
| 29 | +} |
| 30 | +send(event) |
| 31 | +} |
| 32 | +window.addEventListener(listener,handler) |
| 33 | +return()=>{ |
| 34 | +window.removeEventListener(listener,handler) |
43 | 35 | } |
44 | | -if(pathMatch){ |
45 | | -constelement=React.cloneElement<CloneElementProps>(child.props.children,{ send,context:state.context}) |
46 | | -returndebuggerWrapper(element,state) |
| 36 | +},[]) |
| 37 | + |
| 38 | +constRouter=({ children}:Props):React.ReactElement<any>|null=>{ |
| 39 | +constchildArray=React.Children.toArray(children) |
| 40 | +for(constchildofchildArray){ |
| 41 | +// match path |
| 42 | +const{ path}=child.props |
| 43 | +letpathMatch |
| 44 | +if(typeofpath==='string'){ |
| 45 | +pathMatch=state.matches(path) |
| 46 | +}elseif(Array.isArray(path)){ |
| 47 | +pathMatch=path.some(p=>state.matches(p)) |
| 48 | +}else{ |
| 49 | +thrownewError(`Invalid route path${JSON.stringify(path)}`) |
| 50 | +} |
| 51 | +if(pathMatch){ |
| 52 | +//@ts-ignore |
| 53 | +returnchild.props.children |
| 54 | +} |
47 | 55 | } |
| 56 | +constmessage=`No Route matches for${JSON.stringify(state)}` |
| 57 | +onError(newError(message)) |
| 58 | +console.warn(message) |
| 59 | +returnnull |
48 | 60 | } |
49 | | -constmessage=`No Route matches for${JSON.stringify(state)}` |
50 | | -onError(newError(message)) |
51 | | -console.warn(message) |
52 | | -returnnull |
53 | | -} |
54 | 61 |
|
55 | | -Router.Route=Route |
| 62 | +return{ |
| 63 | +context:state.context, |
| 64 | + send, |
| 65 | + Router, |
| 66 | + Route, |
| 67 | +} |
| 68 | +} |
56 | 69 |
|
57 | | -exportdefaultRouter |
| 70 | +exportdefaultuseRouter |