Is HMR here a really Hot Module Replacement or just an Auto Reload?

[supfiger]

Because my app state does not persist after I make a change in my code + it is accompanied by a visual “reboot” effect in the Popup in the UI in a browser.

[aklinker1]

Should be real HMR. What framework are you using?

[supfiger]

React with TS.

[supfiger]

I created the project via command yarn create vite-plugin-web-extension.

• chose react-ts as template,
• and yarn as package manager.

Then, ran yarn dev.

Made a change in the code only in the Popup.tsx to the following:

import {useEffect, useState} from 'react';
import "./Popup.css";

export default function() {
  const [amount, setAmount] = useState(0)

  useEffect(() => {
    console.log("Hello from the popup!");
  }, []);

  const increment = () => setAmount(prev => prev + 1)

  return (
    <div>
      <img src="/icon-with-shadow.svg" />
      <h1>vite-plugin-web-extension</h1>
      <p>
        Template: <code>react-ts</code>
      </p>
      <p>Test string 1</p>
      <button onClick={increment}>Increment</button>
      <p>Amount: {amount}</p>
    </div>
  )
}

Then, in UI (Popup) in a browser, I incremented the amount (clicked on the button), and then I edited some text in the code (Popup.tsx): as the result, in the UI I saw, that state was reset and a visual “reboot” effect fired.

[aklinker1]

There are issues with react and this plugin, could be related. See #139. You could try using WXT instead, react doesn't have any issues during development using that tool instead.

https://wxt.dev

[supfiger]

Thanks a lot! This plugin, and especially WXT are so awesome!
The docs, the ecosystem... all is so good.