@protonapp/proton-runner

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.

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:

const RandomComponent = () => </>

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