samdenty / console-feed

Captures console.log's into a React Component 🔥
https://stackblitz.com/~/github.com/samdenty/console-feed
MIT License
662 stars 110 forks source link

add `async` option to `Hook` so `setTimeout` in console methods can be disabled #77

Open joshuahhh opened 3 years ago

joshuahhh commented 3 years ago

Problem

Because console-feed runs console methods in setTimeout, it cannot capture changes happening synchronously between logs. For instance,

var arr = [];
console.log("before", arr);
arr.push(3);
console.log("after", arr);

will log:

before ▶︎ [3]
after ▶︎ [3]

I believe this setTimeout was added for performance reasons. I'm sure that's preferable for some use-cases, but for other use-cases, it is confusing and certainly not ideal. (For example: https://github.com/processing/p5.js-web-editor/issues/1203#issuecomment-629722076.)

I believe this issue is the root cause of #23 & #66.

Possible solution

I don't know the details of the performance issues the setTimeout was added to mitigate. It's possible the setTimeout should simply be removed.

If not, then it would be great if this behavior could be customizable. In this PR, I add a new option called async to Hook. By default, async is true, reproducing the current behavior. But if async is set to false, the setTimeout is replaced with immediate execution of its contents.

Hook already has a single boolean argument to control encode. Having multiple boolean arguments results in less-readable code, so I replaced this with an options object. (For backwards-compatibility, a user can still just pass in a single boolean for encode.)

Please let me know what you think of this approach! I'd be happy to make changes depending on what you think is best.

Thanks a bunch!

catarak commented 3 years ago

This is rad! Thank you for working on this fix ✨

joshuahhh commented 3 years ago

Hi @samdenty! Have you had a chance to look at this? I'd much appreciate your feedback. Thanks!

catarak commented 3 years ago

Just wanted to bump this PR 😄 It would be great to fix this! FYI this bug is reproducible on CodeSandbox and the p5.js Editor.