Using yield* in a flow function produces strict-mode warning

[sixtram]

I have a flow function with the usual yields in it. I want to call another function from it that also has yields, so I'm using yield*. However, after that, MobX doesn't wrap the state changing blocks into actions correctly and produces the warning "Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed".

Interestingly, adding an empty yield after the yield* solves the problem. Here is a sample code, commenting or uncommenting a line in the increaseLot() function change shows/hides the error.

What is the correct way to call another function from a flow function? I also tried to add flow annotation to the inner function, but that produces JavaScript errors down the line.

import { observable, action, autorun, makeObservable, makeAutoObservable, flow } from "mobx";

class Cart {
    itemCount = 0;
    constructor(initialValue) {
        this.itemCount = initialValue;
        makeObservable(this, {
            itemCount: observable,
            increase: action,
            increaseLot: flow,
        });
    }

    increase() {
        this.itemCount++;
    }

    async *increaseLot() {
        this.itemCount++;
        yield Promise.resolve(true);
        this.itemCount++;

        yield* this.increaseInner();
        //yield; // ***** comment/uncomment this line to show the MobX warning

        this.itemCount++;
    }

    async *increaseInner() {
        yield this.itemCount++;
        yield this.itemCount++;
        yield Promise.resolve(true);
        yield this.itemCount++;
        yield this.itemCount++;
    }
}

let cart = new Cart(0);

autorun(() => {

    console.log(`The Cart contains ${cart.itemCount} item(s).`);

});

cart.increase();
cart.increaseLot();

[urugator]

Flow transforms a sync generator function into an async function:

  increase() {
        this.itemCount++;
    }

   // async keyword removed
   *increaseLot() {
        this.itemCount++;
        yield Promise.resolve(true);
        this.itemCount++;

        yield this.increaseInner(); // increaseInner returns Promise not a generator, therefore only yield without *

        this.itemCount++;
    }

    // async keyword removed
    *increaseInner() {
        this.itemCount++;
        this.itemCount++;
        yield Promise.resolve(true);
        this.itemCount++;
        this.itemCount++;
    }

[sixtram]

Thank you @urugator . Removing the async modifier as you suggested helped, but you still need yield* to call another generator from the first generator.

So the correct code is the following, which prints the correct sequence. I have added comments for clarity. Thanks again for the help.

class Cart {
    itemCount = 0;
    constructor(initialValue) {
        this.itemCount = initialValue;
        makeObservable(this, {
            itemCount: observable,
            increase: action,
            increaseLot: flow,
        });
    }

    increase() {
        this.itemCount++;
    }

    *increaseLot() {
        this.itemCount++; // Will print 2 items
        yield Promise.resolve(true);

        this.itemCount++; // Will print 3 items - Won't print it (supressed), as it will run in the same action as the next yielded group
        yield* this.increaseInner();

        this.itemCount++; // Will print 8 items - Won't print it (supressed), as it will run in the same action as the next yielded group
        this.itemCount++; // Will print 9 items
    }

    *increaseInner() {
        console.log("Entering inner");
        yield this.itemCount++; // Will print 4 items
        yield this.itemCount++; // Will print 5 items
        yield Promise.resolve(true);
        yield this.itemCount++; // Will print 6 items
        yield this.itemCount++; // Will print 7 items
    }
}

let cart = new Cart(0);

autorun(() => {

    console.log(`The Cart contains ${cart.itemCount} item(s).`);

});

cart.increase(); // Will print 1 item
await flowResult(cart.increaseLot());

console.log(`Finished with ${cart.itemCount} item(s).`);

[urugator]

you still need yield* to call another generator from the first generator.

Again, flow converts a sync generator function into non-generator async function, so this.increaseInner() returns Promise not an iterator, therefore you shouldn't yield*, but only yield. This transformation happens behind the scenes so it's not reflected by the type visible by IDE/TS. You can use the following syntax as a workaround:

increaseInner = flow(function* () {
       console.log("Entering inner");
        yield this.itemCount++; // Will print 4 items
        yield this.itemCount++; // Will print 5 items
        yield Promise.resolve(true);
        yield this.itemCount++; // Will print 6 items
        yield this.itemCount++; // Will print 7 items
})

or you can cast the result with flowResult helper function.
See https://mobx.js.org/actions.html#using-flow-instead-of-async--await- for details

[urugator]

Oh, I didn't notice you did not annotate increaseInner with a flow - in that case it does return iterator and you do need to yield*, but I don't think that's actually what you want to do.

[sixtram]

@urugator - True, if I add the flow annotation to the inner then it will iterate through it and I don't need yield*. I went down this whole rabbit hole because originally I marked all my flow functions as async, but not making them async and marking them all as flow function produces the same output with much cleaner code. Thanks.