codepen / infiniteloopbuster Goto Github PK

Consider this snippet
https://codepen.io/gaearon/pen/aWWQOG?editors=0010

Just try writing
<button className="square" onClick={this.setState({value: 'X'})>

instead of
<button className="square" onClick={() => this.setState({value: 'X'})}>

Codepen just auto refreshes when typing the first statement, hangs eventually leading to browser and system crash (Latest chrome, Ubuntu 16).

I'm not sure if this is the right place to report this, but this is really a pain. The code is not even saved, and codepen just starts refreshing while typing and just crashes.

Say you take the entire https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js and instrument it with what is here.

You'll get some invalid JS. Here's a formatted-ish chunk of the broken JS:

if (window.CP.shouldStopExecution(22)){break;}
  d=g.value,y=h+r(d,x++),v+=o(d,y,n,i);}

// Invalid right here.
window.CP.exitedLoop(22);

else for(;!(g=E.next()).done;){if (window.CP.shouldStopExecution(23)){break;}var _=g.value;_&&(d=_[1],y=h+c.escape(_[0])+f+r(d,0),v+=o(d,y,n,i))}
window.CP.exitedLoop(23);
}

I added the stuff required for testing as 8-in.js and 8-out-broken.js.

You can run node output-checker.js to instrument and see results quickly.

We should probably NOT instrument code at all if it's being used as a

1. Web Worker AND
2. External Resource

https://twitter.com/scriptype/status/863190656738631681

We can check for the existence of window, but, that happens at a higher level than instrumentation, which just deals with strings.

When I pass the while(1) console.log(Date.now()) loop, the output is

while(1) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    console.log(Date.now());
    window.CP.exitedLoop(1);
}

Which isn't correct, since window.CP.exitedLoop(1); should come after the closing bracket. If I however pass it the same function but with a body (aka. while(1) { console.log(Date.now()); }) I get

while(1) { 
    if (window.CP.shouldStopExecution(1)) { 
        break;
    } 
    console.log(Date.now()); 
}
window.CP.exitedLoop(1);

Possible solution

I'll get this out of the way first: I have absolutely no idea why this works, I stumbled upon it by accident.

Switching the last two lines in

patches.push({ pos: start, str: prolog });
patches.push({ pos: end, str: epilog });
patches.push({ pos: node.range[1], str: LOOP_EXIT.replace('%d', loopId) });

To get

patches.push({ pos: start, str: prolog });
patches.push({ pos: node.range[1], str: LOOP_EXIT.replace('%d', loopId) });
patches.push({ pos: end, str: epilog });

Solves this problem for me.

I am learning react so i wrote wrong code for one my event handlers on react, and this made the whole browser page to freeze. I also cannot acces my codepen dashboard because of that.I cant send you the link to the proplematic pen because i cant even open any of the pens on the dashboard. my user name is Clayton Sibanda. i dont know if you guys can help with that