npm package: @mutua-cli/local-client
Description: This is a CLI built on a package-based architecture to launch an interactive development environment for writing and documenting Code
Latest version: 8.1.2

# Browser Based CLI
This is a CLI built on a package-based architecture to launch an interactive development environment for writing and documenting Code

## Features
1. In-Browser code Transpiling and Processing
2. Security against Potential security exploits.
3. Enables safe execution of User-provided code directly in the Browser
4. Launches and runs a Code Editor directlly in the browser (Same editor to VS Code's)
5. Leverages Web Assembly to run a code bundler directly in the Browser

## How it Works
1. User runs the command `cli serve` on the command line
2. This starts up a server on `localhost:4005`
3. User can now navigate onto that url and write code into an editor
4. Code will be bundled in the browser
5. Code will then be executed in an iframe



## Challenges
1. Code will be provided to PreviewComponent as a String and needs to be executed safely
2. The code might have advanced JS syntax(e.g JSX) in it that the browser can't execute
3. The code might have import statements for other JS Files or CSS, which have to be dealt with before executing the code

## Remote Vs Local Bundling/Transpiling
**Remote**
1. Can cache doownloaded NPM moduless to bundle code fatser
2. Works better for users with slow devices or limited internet connections.

**Local**
1. Removes an extra request to the API aserver - Faster Code Execution
2. No need to maintain an API Server
3. Less complexity - no moving code back and forth


## Considerations around Code Execution
1. User-provided code might throw errors and cause the program to crash
2. User-provided code might mutate the DOM, causing the program to crash
3. A user might accidentally run code provided by another malicious user
   
## Implementing a Secure Environment
**Direct access between the parent and child frames is allowed when:**
1. The iframe element does not have a 'sandbox' property, or has a 'sandbox="allow-same-origin" property
2. The parent HTML doc and the frame HTML doc from the same: Domain, Port and Protocol(http vs https)

   All three considerations were solved by executing the user's code in an iframe with direct communication disabled



### Modifications of the CodePen Implementation
1. Eliminate the extra API server- hence whenever the user needs to execute some code, there is no need to make an extra request to obtain the HTML document(which is largely unmodified)
2. Reload the iframe in a sandbox to eliminate connection between the parent and child
    - Users won't be able to use some in-browser features e.g cookies and localStorage in their code.


## Connecting Bundles in Redux
### Process
1. Take the store and data pieces of state and wire them up with a selector and provide an ordered list of cells to the **cellList** component.
2. **CellList** then generates some number of **cellListItem** components (CodeCells)
3. If the code belonging to a cell is unchanged after 750ms, call a bundle cell action with it.
4. After calling the BundleCell Action Creator, immediately dispatch an action of the type `BUNDLE START` to signal the bundling process has started for a certain cell.
5. When the bundle is created by the bundle cell action creator, dispatch an action of type `BUNDLE COMPLETE` with the results of the bundle and an possible errors.
6. Receive both actions in the bundles reducer and use that to update some piece of state and communicate that back to the **Code Cell** component. 
7. The **Code Cell** component can then communicate the output of the bundle down to the `PreView` component.