Support Asynchronous Function Export from App's index.js

[frank-weindel]

As a Lightning developer I'd like to load in my own remote configuration data (or do other things) in an asynchronous manner before initializing my app's App component.

Using the official SDK, you must return the result of a call to Launch() to the default exported function in your app's index.js file. Unfortunately the Launch result must be returned synchronously, so there is no ability to do something asynchronously before returning that value.

For example this is the default index.js file produced by lng create:

import { Launch } from '@lightningjs/sdk'
import App from './App.js'

export default function() {
  return Launch(App, ...arguments);
}

I'd instead like to transform that function into something more like this:

import { Launch } from '@lightningjs/sdk'
import App from './App.js'
import { loadConfig } from './config';
export default async function() {
  await loadConfig();
  return Launch(App, ...arguments)
}

That way my own asynchronous initializing and config loading can happen before the app is launched. Currently this pattern does not work since the caller of the function does not support a promise result.

[frank-weindel]

@michielvandergeest @woutermeek I get that my PR was closed because of App platform work that would have to happen too. But is this something that is feasible? The workaround for modifying my index.html file for a self-hosted app (which mine is) is fine but does not work for my development with lng dev. Right now I'm stuck with npm linking mt forked version of Lightning-SDK to achieve my ideal development work flow.

[michielvandergeest]

As you say you can implement this functionality easily in the index.html created by lng dist, but the downside is indeed that you don't have the convenience of watching and automatically building (as you get with lng dev)

My first suggestion would be to add a custom watcher functionality to your own project. Could be something like this:

npm install npm-watch --save-dev

Then add this to your package.json:

{
  "name": "myproject",
  "watch": {
    "dist": "src/**/*.js"
  },
  "scripts": {
    "dist": "lng dist",
    "watch": "npm-watch"
  }  
}

Finally run npm run watch. This will trigger the lng dist command everytime a je file changes in your src folder, similar to how lng dev does it.

Possibly we can add this functionality to the CLI as well. I'm adding it to the backlog in any case.

[darioRandazzoAccedo]

Hello @michielvandergeest , I am running into the same issue, but I am not sure what is the final suggested solution, also considering that 1 year has past and maybe the lng sdk changed. Can you illustrate if there is an official way to support this? If not, what am I supposed to customize? Thanks!

[michielvandergeest]

@darioRandazzoAccedo yeah there is an official way to do this now. You can add a watch flag to the lng dist command (i.e. lng dist --watch).

I noticed that this isn't documented in the Lightning-CLI documentation, so I've added it to our log to add this option to the docs