✨ Auto Flush for SDK extension

[liywjl]

Motivation

Add Auto Flush checkbox for SDK extensions

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[BenoitZugmeyer]

I'd like to move away from the background store: the state of the devtools panel should be local to the devtools instance/tab. Could you remove it here?

[liywjl]

isnt background store more about having defaults?

[BenoitZugmeyer]

no, it's a centralized store I used at the beginning when the extension was an icon next to the URL bar. Now that it is a devtools extension, it makes more sense to not use a centralized store, but keep each tab / devtools instance separated.

[BenoitZugmeyer]

🔨 warning: ‏disabling auto flush won't work, as we don't check for the autoFlush variable

🔨 warning: ‏usehooks-ts is not compatible with our nodejs version (kind of weird but well...)

💬 suggestion: ‏write a more well-suited hook ourselves:

function useAutoFlushEvents(enabled: boolean) {
  useEffect(() => {
    if (enabled) {
      flushEvents()
      const id = setInterval(flushEvents, FLUSH_EVENTS_INTERVAL)
      return () => clearInterval(id)
    }
  }, [enabled])
}


// then use it in the `ActionBar` component like that:
useAutoFlushEvents(autoFlush)