# Adalo Runner

The runner package connects to `web-preview` and `web-runtime` to render the apps that users have built.

## Setup

1. Install packages for `runner` and create symlink of package.

```
yarn
yarn link
yarn start
```

Runner is now running and you should see log updates anytime you save within a file.

2. Once this app is up and running, you can link to it in the `web-preview`. Make sure you are in the `web-preview` repository when you run these commands.

```
yarn link "@protonapp/proton-runner"
yarn
yarn start
```

## Debug

### Performance

We know there are various performance aspects that can be improved on Runner.

One of these is our handling of Adalo Collection (internal, external, Xano) data from the Database service where we're often loading more data than we need.

To confirm the amount of data being loaded for a slow app screen:

1. open an app in Preview/Share
2. open your browser's developer tools (the following assumes Chrome, but this will work for other browsers)
3. go to the Application tab
4. on the left panel, select Storage and then Local Storage
5. select the Adalo Previewer/Share host
6. add a key called `debugStorage` with any value
7. go to the Console tab
8. continue to use the application, you should see various console table logs appear

### why-did-you-render

As a debugging tool in development, we're using [`@welldone-software/why-did-you-render`](https://github.com/welldone-software/why-did-you-render).

The dependency isn't installed in runner itself (as it causes issues with the build process). Instead it's installed in `web-preview`. To see the development logs, when starting `web-preview` use the command: `yarn start:wdyr`

Most of the tool works out of the box, but anonymous function components might not have any "names" wdyr can use to display in the logs, and will log out without a name. To work around this, you can add a property to the anonymous function component for `why-did-you-render` to pick up:

```typescript
const RandomComponent = () => </>

RandomComponent.whyDidYouRender = {
  logOnDifferentValues: true,
  customName: 'RandomComponent',
}

```