Add HMR and React Fast Refresh support (#12060)

* Add HMR and React Fast Refresh support

* Run pre-commit hooks

* Fix 'hmrSetModule' module loading

The incoming module needs to include the URL from which it was loaded,
so that it's possible to enforce only loading modules imported from the same
pathname as the current module.

* Add error handling and improvements

- Add error handling to `useRemotePlugin` and simplify `RemoteComponent`
- Improve HMR to use a registry instead of a single global callback.
  This should now handle two legacy plugin entry points being used at
  the same time via RemoteComponent.

* Update docs

* Update CHANGELOG

* Remove use of LanguageContext from RemoteComponent

LanguageContext should not be necessary here, as it's provided in
ThemeContext, which is used in InvenTree's frontend entry.

* Fix incorrect import.meta.hot access

* Update Playwright test to match UI text changes

---------

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

docs/docs/plugins/creator.md

@@ -214,10 +214,10 @@ The frontend code for your plugin is located in the `frontend/src` directory. Yo
 
 Refer to the `./frontend/src/Panel.tsx` file as a starting point. This is where the custom panel for the part detail page is implemented. You can modify this file to change the content and behavior of the panel.
 
-While the `npm dev` server is running, any changes you make to the frontend code will be automatically reloaded allowing for rapid development and testing of your plugin's frontend features. This avoids the need to rebuild the frontend code every time you make a change.
+While the `npm dev` server is running, any changes to the frontend are reflected in the browser using React Fast Refresh, allowing for rapid development without rebuilding the frontend with every change.
 
 !!! info "Page Reload"
-    Due to the way the InvenTree frontend is structured, you will need to manually refresh the page in your browser to see changes to the frontend code. The development server will automatically reload the frontend code, but the InvenTree server needs to be aware of the changes.
+    All exports in plugin modules that export React components must start with a capital letter. Otherwise, React Fast Refresh will fall back to a full page reload instead of performing a component-level update. Additionally, any render functions referenced from Python must also be capitalized.
 
 ## Build Plugin
 

docs/docs/plugins/walkthrough.md

@@ -119,7 +119,7 @@ function AttachmentCarouselPanel({context}: {context: InvenTreePluginContext;})
 }
 
 // This is the function which is called by InvenTree to render the actual panel component
-export function renderAttachmentCarouselPanel(context: InvenTreePluginContext) {
+export function RenderAttachmentCarouselPanel(context: InvenTreePluginContext) {
     checkPluginVersion(context);
     return <AttachmentCarouselPanel context={context} />;
 }
@@ -300,7 +300,7 @@ Back to the walkthrough, open `core.py` in the `attachment_carousel` folder and
                     'title': 'Attachment Carousel',
                     'description': 'Custom panel description',
                     'icon': 'ti:carousel-horizontal:outline',
-                    'source': self.plugin_static_file('Panel.js:renderAttachmentCarouselPanel'),
+                    'source': self.plugin_static_file('Panel.js:RenderAttachmentCarouselPanel'),
                     'context': {
                         # Provide additional context data to the panel
                         'settings': self.get_settings_dict(),
@@ -385,7 +385,7 @@ panels.append({
     'description': 'Custom panel description',
 -   'icon': 'ti:mood-smile:outline',
 +   'icon': 'ti:carousel-horizontal:outline',
-    'source': self.plugin_static_file('Panel.js:renderAttachmentCarouselPanel'),
+    'source': self.plugin_static_file('Panel.js:RenderAttachmentCarouselPanel'),
     'context': {
         # Provide additional context data to the panel
         'settings': self.get_settings_dict(),
@@ -519,7 +519,7 @@ panels.append({
     'title': 'Attachment Carousel',
     'description': 'Custom panel description',
     'icon': 'ti:carousel-horizontal:outline',
-    'source': self.plugin_static_file('Panel.js:renderAttachmentCarouselPanel'),
+    'source': self.plugin_static_file('Panel.js:RenderAttachmentCarouselPanel'),
     'context': {
         # Provide additional context data to the panel
         'settings': self.get_settings_dict(),