Реализовать реагирующее обновление на новом сервере разработки

Question

Меня интересует использование реакции-обновления в браузере без участия Node.Js. Мой текущий сервер разработки обслуживает статические файлы (собственные модули es) и может определять, когда файл был изменен. Это обнаружение изменений передается в браузер через SSE.

Я хотел бы использовать CDN, например Skypack, для загрузки реакции-обновления и включения среды выполнения.

      import RefreshRuntime from 'https://cdn.skypack.dev/react-refresh/cjs/react-refresh-runtime.development.js';

Я прочитал первоначальное руководство Дэна по адресу https://github.com/facebook/react/issues/16604#issuecomment-528663101 , но не знаю, как собрать все воедино.

Что мне нужно сделать, чтобы включить реагирующее обновление для смонтированного компонента? Как сообщить браузеру, что импортированный модуль/компонент следует повторно импортировать?

И нужно ли мне обернуть мой компонент внутри моего модуля чем-нибудь? Эта часть озадачивает меня больше всего. Представьте, что у меня есть такой компонент, как:

      import React from 'https://cdn.skypack.dev/react';

function App() {
    return React.createElement('div', null, `App component`);
}

export default App;

Что должно произойти с этим, чтобы он мог играть в мяч с реактивным обновлением?

Мой основной модуль index.js точки входа будет выглядеть так:

      import App from './app.js';

ReactDOM.render(
    React.createElement(App, {}, null),
    document.getElementById('root')
  );

В простейшей форме я хотел бы иметь доказательство концепции, когда я загружаю компонент. Измените его локально и нажмите где-нибудь кнопку, чтобы имитировать SSE, измененный файлом. Нажатие кнопки должно затем вызвать обновление реакции, и смонтированный компонент приложения должен отразить изменение.