Offload HMR code

plugin_creator/frontend.py

@@ -112,9 +112,10 @@ def update_frontend(plugin_dir: str, context: dict) -> None:
             remove_file(plugin_dir, "frontend", "src", f"{feature.capitalize()}.tsx")
 
     if not translation:
+        # Remove translation files and configuration from the frontend code
         remove_dir(plugin_dir, "frontend", "src", "locales")
         remove_file(plugin_dir, "frontend", "src", "locales.tsx")
-        remove_file(plugin_dir, "frontend", ".linguirc")
+        remove_file(plugin_dir, "frontend", "lingui.config.ts")
 
         # Remove the translation check from the CI configuration
         remove_file(plugin_dir, ".github", "workflows", "translations.yaml")

plugin_creator/template/{{ cookiecutter.plugin_name }}/frontend/src/Panel.tsx

@@ -8,7 +8,8 @@ import { useQuery } from '@tanstack/react-query';
 
 {% if cookiecutter.frontend.translation -%}
 import { t } from '@lingui/core/macro';
-import { LocalizedComponent } from './locale';
+import { LocalizedComponent } from '@inventreedb/ui';
+import { loadLocale } from './locales';
 {%- endif %}
 
 // Import for type checking
@@ -161,18 +162,22 @@ function {{ cookiecutter.plugin_name }}Panel({
                     </Stack>
                 </Alert>
                 {%- endif %}
-                <Group justify='apart' wrap='nowrap' gap='sm'>
+                <Stack gap='xs'>
+                <Group grow justify='apart' wrap='nowrap' gap='sm'>
                     <Button color='blue' onClick={gotoDashboard}>
                         Go to Dashboard
                     </Button>
                     {partId && <Button color='green' onClick={openForm}>
-                        Edit  Part
+                        Edit Part
                     </Button>}
+                </Group>
+                <Group grow justify='apart' wrap='nowrap' gap='sm'>
                     <Button onClick={() => setCounter(counter + 1)}>
                         Increment Counter
                     </Button>
                     <Text size='xl'>Counter: {counter}</Text>
                 </Group>
+                </Stack>
                 {instance ? (
                     <Alert title="Instance Data" color="blue">
                         {instance}
@@ -254,7 +259,7 @@ export function Render{{ cookiecutter.plugin_name }}Panel(context: InvenTreePlug
 
     {% if cookiecutter.frontend.translation -%}
     return (
-        <LocalizedComponent locale={context.locale}>
+        <LocalizedComponent i18n={context.i18n} locale={context.locale} loadLocale={loadLocale}>
             <{{ cookiecutter.plugin_name }}Panel context={context} />
         </LocalizedComponent>
     );

plugin_creator/template/{{ cookiecutter.plugin_name }}/frontend/src/locales.tsx

@@ -0,0 +1,4 @@
+import { type LocaleLoader } from '@inventreedb/ui';
+
+// Necessary callback function to dynamically load the locale messages for the plugin
+export const loadLocale: LocaleLoader = async (locale: string) => import(`./locales/${locale}/messages.ts`).catch(() => null);

plugin_creator/template/{{ cookiecutter.plugin_name }}/frontend/vite.dev.config.ts

@@ -2,47 +2,13 @@
 import { defineConfig } from 'vite'
 import { viteExternalsPlugin } from 'vite-plugin-externals'
 import viteConfig, { externalLibs } from './vite.config'
+import InventreeHmrPlugin from '@inventreedb/ui/vite';
 
 {% if cookiecutter.frontend.translation -%}
 import react from "@vitejs/plugin-react-swc"
 import { lingui } from "@lingui/vite-plugin"
 {%- endif %}
 
-import type { Plugin } from 'vite'
-
-// Enable HMR support for this plugin by hooking into the InvenTree vite dev server
-function inventreeHmrPlugin(): Plugin {
-  const fileRegex = /\.(js|jsx|ts|tsx)(\?|$)/;
-
-  const hmrBlock = [
-    '',
-    '// __inventree_hmr_injected__',
-    'if (import.meta.hot) {',
-    '  import.meta.hot.accept((newModule) => {',
-    '    const key = new URL(import.meta.url).origin + new URL(import.meta.url).pathname;',
-    '    window.__plugin_hmr_callbacks?.[key]?.forEach(callback => {',
-    '      callback(newModule);',
-    '    });',
-    '  })',
-    '}',
-  ];
-
-  return {
-    name: 'inventree-hmr-plugin',
-    enforce: 'post',
-
-    transform(code, id) {
-      if (!fileRegex.test(id)) return;
-      if (id.includes('node_modules')) return;
-      if (code.includes('__inventree_hmr_injected__')) return;
-
-      return {
-        code: code + hmrBlock.join('\n'),
-        map: null,
-      }
-    }
-  }
-}
 
 /**
  * Vite config to run the frontend plugin in development mode.
@@ -81,7 +47,7 @@ export default defineConfig((cfg) => {
     }),
     {%- endif %}
     viteExternalsPlugin(externalLibs),
-    inventreeHmrPlugin(),
+    InventreeHmrPlugin(),
   ];
 
   return config;