ioBroker · GermanBluefox · Feb 2, 2025 · Feb 3, 2025 · Feb 8, 2025 · Feb 8, 2025
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,4 @@ packages/admin/README.md
 /packages/jsonConfig/test/testSchema.js.map
 /packages/adapter-react-v5/i18n/
 /packages/adapter-react-v5/index.css
+/packages/admin/src-admin/.__mf__temp
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/adapter-react-v5/src/assets/devices.json b/packages/adapter-react-v5/src/assets/devices.json
diff --git a/packages/adapter-react-v5/src/assets/rooms.json b/packages/adapter-react-v5/src/assets/rooms.json
diff --git a/packages/adapter-react-v5/src/index.ts b/packages/adapter-react-v5/src/index.ts
@@ -135,3 +135,5 @@ export type {
     Width,
     GenericAppState,
 } from './types';
+
+export { ModuleFederationShared } from './modulefederation.admin.config';
diff --git a/packages/adapter-react-v5/src/modulefederation.admin.config.ts b/packages/adapter-react-v5/src/modulefederation.admin.config.ts
@@ -0,0 +1,31 @@
+const makeShared = (pkgs: string[]): Record<string, { requiredVersion: '*', singleton: true }> => {
+    const result: Record<string, { requiredVersion: '*', singleton: true }> = {};
+    pkgs.forEach(packageName => {
+        result[packageName] = {
+            requiredVersion: '*',
+            singleton: true,
+        };
+    });
+    return result;
+};
+
+// Admin shares these modules for all components
+export const ModuleFederationShared = () => makeShared([
+        '@emotion/react',
+        '@emotion/styled',
+        '@iobroker/adapter-react-v5',
+        '@iobroker/json-config',
+        '@iobroker/dm-gui-components',
+        // '@mui/icons-material',
+        '@mui/material',
+        '@mui/x-date-pickers',
+        'date-fns',
+        'leaflet',
+        'leaflet-geosearch',
+        'prop-types',
+        'react',
+        'react-ace',
+        'react-dom',
+        // 'react-dropzone',
+        'semver',
+    ])
diff --git a/packages/admin/admin/jsonConfig.json5 b/packages/admin/admin/jsonConfig.json5
@@ -295,6 +295,7 @@
                     newLine: true,
                     url: 'custom/customComponents.js',
                     name: 'AdminComponentEasyAccessSet/Components/ConfigCustomEasyAccess',
+                    bundlerType: 'module',
                 },
             },
         },

diff --git a/packages/admin/src-admin/craco.config.js b/packages/admin/src-admin/craco.config.js
diff --git a/packages/admin/src-admin/public/index.html → packages/admin/src-admin/index.html b/packages/admin/src-admin/public/index.html → packages/admin/src-admin/index.html
@@ -2,13 +2,13 @@
 <html lang="en" translate="no">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" href="./favicon.ico" />
+        <link rel="icon" href="favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
         <meta name="theme-color" content="#000000" />
         <meta name="description" content="admin - ioBroker" />
-        <link rel="apple-touch-icon" href="./logo192.png" />
-        <link rel="stylesheet" href="./css/leaflet.css" />
-        <link rel="manifest" href="./manifest.json" crossorigin="use-credentials" />
+        <link rel="apple-touch-icon" href="logo192.png" />
+        <link rel="stylesheet" href="css/leaflet.css" />
+        <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
         <script>
             const script = document.createElement('script');
 
@@ -78,20 +78,20 @@
                 const body = document.body;
                 if (window.location.search.includes('?login')) {
                     // apply image and background color to the whole page as fast as possible
-                    if (window.loginBackgroundColor && window.loginBackgroundColor.indexOf('loginBackgroundColor') === -1) {
+                    if (window.loginBackgroundColor && !window.loginBackgroundColor.includes('loginBackgroundColor')) {
                         body.style.backgroundColor = window.loginBackgroundColor;
                     }
-                    if (window.loginBackgroundImage && window.loginBackgroundImage.indexOf('loginBackgroundImage') === -1) {
-                        body.style.backgroundImage = 'url(' + window.loginBackgroundImage + ')';
+                    if (window.loginBackgroundImage && !window.loginBackgroundImage.includes('loginBackgroundImage')) {
+                        body.style.backgroundImage = `url(${window.loginBackgroundImage})`;
                         body.style.backgroundSize  = 'cover';
                     }
                 } else {
                     // apply image and background color to the whole page as fast as possible
-                    if (window.loadingBackgroundColor && window.loadingBackgroundColor.indexOf('loadingBackgroundColor') === -1) {
+                    if (window.loadingBackgroundColor && !window.loadingBackgroundColor.includes('loadingBackgroundColor')) {
                         body.style.backgroundColor = window.loadingBackgroundColor;
                     }
-                    if (window.loadingBackgroundImage && window.loadingBackgroundImage.indexOf('loadingBackgroundImage') === -1) {
-                        body.style.backgroundImage = 'url(' + window.loadingBackgroundImage + ')';
+                    if (window.loadingBackgroundImage && !window.loadingBackgroundImage.includes('loadingBackgroundImage')) {
+                        body.style.backgroundImage = `url(${window.loadingBackgroundImage})`;
                         body.style.backgroundSize  = 'cover';
                     }
                 }
@@ -120,7 +120,10 @@
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
-        <div id="root">
-        </div>
+        <div id="root"></div>
+        <script
+            type="module"
+            src="src/index.tsx"
+        ></script>
     </body>
 </html>
diff --git a/...react-v5/modulefederation.admin.config.js → ...rc-admin/modulefederation.admin.config.ts b/...react-v5/modulefederation.admin.config.js → ...rc-admin/modulefederation.admin.config.ts
@@ -1,17 +1,16 @@
-function makeShared(pkgs) {
-    const result = {};
+const makeShared = (pkgs: string[]): Record<string, { requiredVersion: '*', singleton: true }> => {
+    const result: Record<string, { requiredVersion: '*', singleton: true }> = {};
     pkgs.forEach(packageName => {
         result[packageName] = {
             requiredVersion: '*',
             singleton: true,
         };
     });
     return result;
-}
+};
 
 // Admin shares these modules for all components
-module.exports = {
-    shared: makeShared([
+export const ModuleFederationShared = makeShared([
         '@emotion/react',
         '@emotion/styled',
         '@iobroker/adapter-react-v5',
@@ -20,7 +19,7 @@ module.exports = {
         '@mui/icons-material',
         '@mui/material',
         '@mui/x-date-pickers',
-        'date-fns/locale',
+        'date-fns',
         'leaflet',
         'leaflet-geosearch',
         'prop-types',
@@ -29,5 +28,4 @@ module.exports = {
         'react-dom',
         'react-dropzone',
         'semver',
-    ]),
-};
+    ])
diff --git a/packages/admin/src-admin/modulefederation.config.js b/packages/admin/src-admin/modulefederation.config.js
diff --git a/packages/admin/src-admin/package.json b/packages/admin/src-admin/package.json
@@ -2,11 +2,12 @@
     "name": "src-rx",
     "private": true,
     "homepage": ".",
+    "type": "module",
     "scripts": {
-        "start": "set DANGEROUSLY_DISABLE_HOST_CHECK=true && craco start",
+        "start": "vite --port 3000",
         "lint": "eslint -c eslint.config.mjs src",
-        "patch-webpack": "node ../tasks --patch-webpack",
-        "build": "npm run patch-webpack && craco build",
+        "build": "tsc && vite build",
+        "preview": "vite preview --port 3000",
         "check-ts": "tsc --noEmit --checkJS false",
         "tsc": "tsc --project tsconfig.json",
         "prettier": "prettier --write src/**/*.{ts,tsx,js,jsx,json,css,scss,md,html}",
@@ -21,23 +22,22 @@
         "not op_mini all"
     ],
     "dependencies": {
+        "@iobroker/adapter-react-v5": "file:../../adapter-react-v5",
         "@iobroker/dm-gui-components": "file:../../dm-gui-components",
         "@iobroker/json-config": "file:../../jsonConfig",
-        "@iobroker/adapter-react-v5": "file:../../adapter-react-v5",
         "http-proxy-middleware": "^3.0.3"
     },
     "devDependencies": {
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@craco/craco": "^7.1.0",
         "@devbookhq/splitter": "^1.4.2",
-        "@dilesoft/vite-plugin-federation-dynamic": "^1.1.9",
         "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
         "@fnando/sparkline": "^0.3.10",
         "@foxriver76/iob-component-lib": "^0.2.0",
         "@honkhonk/vite-plugin-svgr": "^1.1.0",
         "@iobroker/admin-component-easy-access": "^1.0.11",
         "@iobroker/dm-utils": "^1.0.9",
-        "@iobroker/socket-client": "4.0.21",
+        "@iobroker/socket-client": "^4.1.0",
+        "@module-federation/runtime": "^0.10.0",
+        "@module-federation/vite": "^1.2.4",
         "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@react-leaflet/core": "^2.1.0",
         "@tsconfig/node16": "^16.1.3",
@@ -51,9 +51,8 @@
         "@types/react": "^18.3.18",
         "@types/react-color": "^3.0.13",
         "@types/react-dom": "^18.3.5",
+        "@vitejs/plugin-react": "^4.3.4",
         "buffer": "^6.0.3",
-        "craco-babel-loader": "^1.0.4",
-        "craco-module-federation": "^1.1.0",
         "cron-parser": "^5.0.4",
         "crypto-js": "^4.2.0",
         "date-fns": "^4.1.0",
@@ -64,7 +63,7 @@
         "ipaddr.js": "^2.2.0",
         "json5": "^2.2.3",
         "leaflet": "^1.9.4",
-        "leaflet-geosearch": "^4.2.0",
+        "leaflet-geosearch": "^4.1.0",
         "less": "^4.2.2",
         "lodash": "^4.17.21",
         "moment": "^2.30.1",
@@ -86,7 +85,11 @@
         "react-showdown": "^2.3.1",
         "react-sortable-hoc": "^2.0.0",
         "semver": "^7.7.1",
-        "tsconfig-paths-webpack-plugin": "^4.2.0"
+        "tsconfig-paths-webpack-plugin": "^4.2.0",
+        "vite": "6.2.0",
+        "vite-plugin-commonjs": "^0.10.4",
+        "vite-plugin-svgr": "^4.3.0",
+        "vite-tsconfig-paths": "^5.1.4"
     },
     "resolutions": {
         "webpack": "5.95.0"
@@ -106,5 +109,5 @@
             }
         ]
     ],
-    "version": "7.5.2"
+    "version": "7.4.20"
 }
diff --git a/packages/admin/src-admin/src/bootstrap.tsx b/packages/admin/src-admin/src/bootstrap.tsx
@@ -1,3 +1,4 @@
+import 'ace-builds/src-noconflict/ace';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import * as Sentry from '@sentry/browser';

diff --git a/packages/admin/src-admin/src/components/Adapters/AdapterGeneric.tsx b/packages/admin/src-admin/src/components/Adapters/AdapterGeneric.tsx
@@ -418,10 +418,10 @@ export default abstract class AdapterGeneric<
                 href={link}
                 target="_blank"
                 rel="noopener"
-                sx={(theme: IobTheme) => ({
+                sx={((theme: IobTheme) => ({
                     color: theme.palette.mode === 'dark' ? 'white' : 'black',
                     '&:hover': { color: theme.palette.mode === 'dark' ? 'white' : 'black' },
-                })}
+                })) as any}
             >
                 {adapter.licenseInformation?.type === 'paid' ? (
                     <Tooltip

diff --git a/packages/admin/src-admin/src/index.tsx b/packages/admin/src-admin/src/index.tsx
@@ -1 +1 @@
-void import('./bootstrap');
+import('./bootstrap');
diff --git a/packages/admin/src-admin/src/tabs/Config.tsx b/packages/admin/src-admin/src/tabs/Config.tsx
@@ -755,33 +755,33 @@ class Config extends Component<ConfigProps, ConfigState> {
                             ) : null}
                             <Box
                                 component="span"
-                                sx={(theme: IobTheme): any => ({
+                                sx={((theme: IobTheme): any => ({
                                     [theme.breakpoints.down('md')]: {
                                         display: 'none',
                                     },
                                     marginRight: '8px',
-                                })}
+                                })) as any}
                             >
                                 {`${this.props.t('Instance settings')}:`}
                             </Box>
                             {`${this.props.adapter}.${this.props.instance}`}
                             <Box
                                 component="div"
-                                sx={(theme: IobTheme): any => ({
+                                sx={((theme: IobTheme): any => ({
                                     [theme.breakpoints.down('sm')]: {
                                         display: 'none',
                                     },
-                                })}
+                                })) as any}
                             >
                                 {buttons}
                             </Box>
                             <Box
                                 component="span"
-                                sx={(theme: IobTheme): any => ({
+                                sx={((theme: IobTheme): any => ({
                                     [theme.breakpoints.up('sm')]: {
                                         display: 'none',
                                     },
-                                })}
+                                })) as any}
                             >
                                 <IconButton
                                     style={{ marginLeft: 8 }}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		void import('./bootstrap');
		import('./bootstrap');