System Implementation in Source Academy Frontend

This page contains developer information regarding the interaction between the Source Modules system and the Source Academy frontend cadet-frontend.

In the Redux store of the Source Academy frontend, there is the debuggerContext that Source Module developers should be concerned about. The debuggerContext is collected from the Saga middleware, specifically at WorkspaceSaga during evaluation of any Source program. After evaluation of the Source program, an action loaded with debuggerContext is dispatched. The corresponding reducer, WorkspaceReducer, saves the debuggerContext into the Redux store.

Previously, there is almost no information passed by frontend to the Source Module's tabs. In other words, the Source Module tabs and bundle do not have direct access to the program being evaluated.

 ---> = data flow
 ---+ = child component (no data flow)               
                                    
program ---> sagas ---> front-end ---+ source module tab

In the event that the source module tab requires additional information, they have to invent a way to collect the information and pass it to their corresponding module tab. This introduces many 'inventive' ways throughout the code base for their data collection.

 ---> = data flow
 ---+ = child component (no data flow)

                      _______________________
                     |                       |  'inventive' collection of data from sagas
                     |                       v               
program ---> sagas ---> front-end ---+ source module tab

As such, the solution is to introduce a formalised pipeline such that module tabs are able to easily access their required information. The front-end now saves the required data and save it into the store, where module tabs can easily access the required information. This eliminates the need for other 'inventive' ways to be deployed and clutter the code base.

 ---> = data flow
 ---+ = child component (no data flow)

                            ------> redux store     
                            |            |               
program ---> sagas ---> front-end        | debuggerContext passed as react component props
                            |            v
                            ---+ source module tab