Root + Async = Headaches

Is there a good way to gracefully handle disposals where I have to build up values or data signals from within async/await code? E.g. loading an image asynchronously and then attaching some styles to the element afterward that create and use signals.

It would be nice to have something akin to Objective-C’s non-ARC autopool that acted similar to S.root() but as a bit more manual - for example, something like:

const sroot = S.root();
try {
    await myCode();
} finally {
    sroot.release();
}

[adamhaile]

I have a soft spot for making simple games. I usually use surplus-toys to avoid the need for a build system and keep them single-file.

It’s often important in S apps to avoid implicit state – application state which isn’t contained in a data signal and isn’t immediately addressable. In your app, the implicit state is whether the tile image has loaded yet. If we were to ask “has the tile loaded yet?”, we can’t really answer it. Instead, you’re using async/await to say “we won’t run this code until it has.” So the state is encoded into your execution order, which means it also has to propagate all the way up the call tree.

My advice would be to make that state explicit, by making an image data signal that starts as null and then is populated once it has arrived.

I just pulled and made the changes locally. Where you did:

		const img = await getImage();
		const imgClone = img.cloneNode();

… I changed to …

		// make image load state explicit via data signals
		const img = S.data(null);
		const imgClone = S.data(null);
		
		getImage().then(_img => {
			// populate image data signals once we have them
			img(_img);
			imgClone(_img.cloneNode());
		});

Since img was now a signal, I changed {img} to {img()} in makeTile(img).

Then strip all the async and await calls from the file.

[Qix-]

to avoid the need for a build system and keep them single-file.

I’m a build systems nerd - this is one I built up for another app that I just stripped out for this small little exercise 😃 Seems overkill, because it is haha. It’s part of a much larger project 😉 surplus-toys is super neat though!

My advice would be to make that state explicit, by making an image data signal that starts as null and then is populated once it has arrived.

Derp, that’s so obvious now. I think this is also a side effect of me mixing logic with my display code, which I did here for time’s sake but wouldn’t normally do.

Thanks, this is much better.