Arrow function causes stack dump

[bartmichu]

Hi. I'm playing with j5e examples and I've noticed that using arrow function in event listener causes reboot loop and stack dump. Not sure if this should be reported here or in Moddable repo directly.

Code sample:

import Button from 'j5e/button';

const button = await new Button({
  pin: 0,
  mode: 'InputPullUp'
});

button.on('close', () => {
  trace(`CLOSE event, closed: ${button.isClosed}\n`);
});

Console output after uploading:

Exception (28):
epc1=0x40223e35 epc2=0x00000000 epc3=0x00000000 excvaddr=0x00000000 depc=0x00000000
ctx: cont 
sp: 3ffe9940 end: 3ffe9ee0 offset: 01a0
>>>stack>>>
3ffe9ae0:  00000015 3fff868c 3fff0a35 40223935  
3ffe9af0:  3fff5aac 3fff8a04 3fff0a2c 402190bd  
3ffe9b00:  3fff8a04 3fff880c 3fff886c 3fff87dc  
3ffe9b10:  40254d55 0000000a 3fff882c 3fff884c  
3ffe9b20:  00000000 00000000 00000000 000000a1  
3ffe9b30:  00000000 00000000 00000000 000000a1  
3ffe9b40:  00000000 00000000 00000704 3fff874c  
3ffe9b50:  3fff5cd4 3fff5f0c 3fff5bbc 3ffe9ba0  
3ffe9b60:  3fff5b9c 3fff5b7c 3fff602c 3fff8a04  
3ffe9b70:  3fff5bc1 3fff5aac 3fff85fc 4021a2aa  
3ffe9b80:  00000000 00000000 000006a4 3fff5ca0  
3ffe9b90:  3fff5c9c 00000000 00000000 4021acbf  
3ffe9ba0:  4021ac3a 3ffe9ba0 00000000 00000000  
3ffe9bb0:  3fff5c9c 3fff5ca0 3ffe9c20 3fff88bc  
3ffe9bc0:  3fff88cc 3fff88ec 00000000 00000000  
3ffe9bd0:  00000000 4024baea 3ffe9c20 3fff88bc  
3ffe9be0:  3fff8a04 3fff5ccc 3fff5aac 3fff5b7c  
3ffe9bf0:  00000000 3fff5b9c 1e000000 4023809f  
3ffe9c00:  3fff8a04 3fff5aac 3fff88bc 4024baea  
3ffe9c10:  4024b6e8 3fff5e7c 00000000 4021a46c  
3ffe9c20:  4021a445 3ffe9c20 00000000 00000002  
3ffe9c30:  4024b6e8 4024baea 3ffe9c80 3fff88bc  
3ffe9c40:  3fff88cc 3fff88ec 00000008 00000000  
3ffe9c50:  00000000 00000001 3fff0a14 3fff876c  
3ffe9c60:  3fff8a04 3fff88bc 3fff5aac 40262de0  
3ffe9c70:  4024b6e8 00000002 00000000 4021a8ab  
3ffe9c80:  4021a870 3ffe9c80 3fff8a04 00000000  
3ffe9c90:  4024b6e8 4024baea 3ffe9ce0 3fff88bc  
3ffe9ca0:  3fff88cc 3fff88ec 3fff886c 00000000  
3ffe9cb0:  00000000 000000ad 3fff884c 3fff883c  
3ffe9cc0:  3fff8a04 3fff88bc 3fff5aac 00000001  
3ffe9cd0:  3fff8a04 00000000 3fff8a04 402390a2  
3ffe9ce0:  40239072 3ffe9ce0 3fff8a04 4024b6e8  
3ffe9cf0:  00000000 4024baea 00000000 3fff893c  
3ffe9d00:  00000000 00000000 00000000 00000000  
3ffe9d10:  00000000 3fff88ec 3fff5bfc 00000000  
3ffe9d20:  3fff8a04 4024b6e3 00000000 3fff884c  
3ffe9d30:  00000000 4024b6e8 3fff8a04 402391fc  
3ffe9d40:  00000001 4024b6e8 3fff8a04 402399ac  
3ffe9d50:  75746573 656e2f70 726f7774 7378006b  
3ffe9d60:  00000062 00000000 00000000 00000000  
3ffe9d70:  00000000 00000000 00000000 00000000  
3ffe9d80:  00000000 00000000 00000000 00000000  
3ffe9d90:  00000000 00000000 00000000 00000000  
3ffe9da0:  00000000 00000000 00000000 00000000  
3ffe9db0:  00000000 00000000 00000000 00000000  
3ffe9dc0:  00000000 00000000 00000000 00000000  
3ffe9dd0:  00000000 00000000 00000000 00000000  
3ffe9de0:  00000000 00000000 00000000 00000000  
3ffe9df0:  00000000 00000000 00000000 00000000  
3ffe9e00:  00000000 00000000 00000000 00000000  
3ffe9e10:  00000000 00000000 00000000 3ff1fe00  
3ffe9e20:  3ffe9e7c 402836f6 00000000 00000000  
3ffe9e30:  00000000 00000000 00008000 00000000  
3ffe9e40:  00000000 00000000 00008000 40238ff5  
3ffe9e50:  40239790 3ffe9d50 3ffe9f04 00000000  
3ffe9e60:  3fffdad0 3ffe9f0c 00000000 3fff893c  
3ffe9e70:  00000000 00000000 00000000 00000000  
3ffe9e80:  00000000 4024f864 00000000 4020249c  
3ffe9e90:  3fff8a04 4024fd48 00000021 3fff88cc  
3ffe9ea0:  3ffef39c 4027b3b2 3ffe9f04 3ffe9f0c  
3ffe9eb0:  3fffdad0 00000000 3ffe9f04 40246498  
3ffe9ec0:  feefeffe feefeffe feefeffe 40246284  
3ffe9ed0:  feefeffe feefeffe 3ffe8ec0 40100114  
<<<stack<<<

Code works as expected when I change event listener to:

button.on('close', function () {
  trace(`CLOSE event, closed: ${button.isClosed}\n`);
});

[dtex]

I'll try to replicate this when I get home tonight.

I do have a guess... Did you update your Moddable version recently? I did and started seeing stack dumps after upload. I didn't check to see if it was being caused by an arrow function, I just emptied out the $MODDABLE/build/tmp directory forcing everything to recompile and it worked.

[phoddie]

Looks like a real bug. Seems to be an interaction between top level await and the creation of arrow function. You can reproduce it without j5e in the simulator by changing helloworld/main.js to :

class Button {}
const button = await new Button;
button.on = () => {};

We'll look into that. Meanwhile, you can work around the problem by wrapping the top-level module code in a function, which eliminates the top-level await.

import Button from "j5e/button";
import LED from "j5e/led";

export default async function() {
	const button = await new Button(device.pins.button);
	const led = await new LED(device.pins.led);

	button.on("open", () => {
	  trace("off\n");
	  led.stop().off();
	});
}

[bartmichu]

@phoddie works like a charm and as a bonus it stops linter from complaining about top level await. Thanks.

[phoddie]

Glad that helps. We'll get the problem fixed too -- that should work.

FWIW - the reason that the Moddable SDK allows exporting a function from main is to allow all that code to be preloaded, which loads faster and can save some RAM.

[phoddie]

The problem has been fixed. It was in the parser, which likely means it has been around for a while. Nice find. Thank you!

[dtex]

Thank you both!

@barmichu TLA has reached stage 4 and we should see it implemented in ESLint soon so no more warnings there. Is that what you're using?

[bartmichu]

@dtex thanks for the tip, that's good news. You are correct, I'm using ESLint with StandardJS style. I'm overwriting some rules tho i.e. semicolons :)