marko icon indicating copy to clipboard operation
marko copied to clipboard

unable to update `<await>` promise reactively

Open trusktr opened this issue 11 months ago • 1 comments

Description

The following is not working (not sure if a bug or feature not added yet, so I chose feature request). The idea is we should be able to update a promise reactively, and the <await> should be able to handle the new promise. Otherwise the <await> is only good for the initial rendering of the app but not for subequent rendering:

class {
    onCreate() {
        this.state = {
            count: 0,
            personPromise: this.makePromise(),
        }
    }

    makePromise = () => new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('hellooooooooo', this.state.count);
            setTimeout(() => this.state.personPromise = this.makePromise(), 1000);
            resolve({
                name: "Frank " + this.state.count++
            });
        }, 1000);
    });
}

<await(state.personPromise) timeout=5000>
    <@placeholder>Loading...</@placeholder>
    <@then|person|>
        <div>Hello ${person.name}! ${state.count}</div>
    </@then>
    <@catch|err|>Error: ${err.message}</@catch>
</await>

Copy/paste that code into this playground example: https://markojs.com/try-online/?file=%2Fcomponents%2Fasync%2Fawait.marko

Why

Being able to update the promise would allow loading async values over time, not just initially.

Possible Implementation & Open Questions

Is this something you're interested in working on?

Related

  • https://github.com/marko-js/marko/issues/675

trusktr avatar Mar 13 '25 01:03 trusktr

Resolved in marko@6

DylanPiercey avatar Aug 16 '25 01:08 DylanPiercey