Added custom component

.eslintrc.json

@@ -5,6 +5,7 @@
 		"mocha": true
 	},
 	"extends": "eslint:recommended",
+	"ignorePatterns": ["src/**/*.*", "gulpfile.js"],
 	"rules": {
 		"indent": [
 			"error",

.gitignore

@@ -17,3 +17,5 @@ admin/i18n/*/flat.txt
 system.config.json
 *.code-workspace
 package-lock.json
+/src/build
+/admin/custom

.releaseconfig.json

@@ -1,4 +1,7 @@
 {
   "dry": false,
-  "plugins": ["iobroker", "license"]
+  "plugins": ["iobroker", "license"],
+  "exec": {
+    "before_commit": "npm run build"
+  }
 }

admin/jsonCustom.json

@@ -6,58 +6,12 @@
             "hidden": "data.isLinked !== undefined",
             "type": "panel",
             "items": {
-                "_prefixId": {
-                    "type": "autocompleteSendTo",
-                    "label": "prefix for id of linked object",
-                    "sm": 8,
-                    "noMultiEdit": true,
-                    "freeSolo": true,
-                    "noTranslation": true,
-                    "command": "suggestions_prefixId",
-                    "maxLength": 255,
-                    "defaultFunc": {
-                        "func": "(data.linkedId || '').includes('.') ? data.linkedId.substring(0, data.linkedId.lastIndexOf('.')) : ''",
-                        "alsoDependsOn": [
-                            "linkedId"
-                        ]
-                    },
-                    "validator": "data._prefixId && data._prefixId.length > 0 && !(/[*?\"'`´,;:<>#/{}ß\\[\\]\\s]/).test(data._prefixId) || data._prefixId === ''",
-                    "help": "${data._prefixId && data._prefixId.length > 0 && !(/[*?\"'`´,;:<>#/{}ß\\[\\]\\s]/).test(data._prefixId) || data._prefixId === '' ? '' : 'the following chars are not allowed \\'*?\"\\'`´,;:<>#/{}ß[] \\''}"
-                },
-                "_stateId": {
-                    "type": "autocompleteSendTo",
-                    "label": "id of linked object",
-                    "sm": 4,
-                    "noMultiEdit": true,
-                    "freeSolo": true,
-                    "noTranslation": true,
-                    "command": "suggestions_stateId",
-                    "maxLength": 255,
-                    "defaultFunc": {
-                        "func": "(data.linkedId || '').split('.').pop()",
-                        "alsoDependsOn": [
-                            "linkedId"
-                        ]
-                    },
-                    "validator": "data._stateId && data._stateId.length > 0 && !(/[*?\"'`´,;:<>#/{}ß\\[\\]\\s]/).test(data._stateId)",
-                    "help": "${data._stateId && data._stateId.length > 0 && !(/[*?\"'`´,;:<>#/{}ß\\[\\]\\s]/).test(data._stateId) ? '' : 'please enter a valid id, the following chars are not allowed \\'*?\"\\'`´,;:<>#/{}ß[] \\''}"
-                },
                 "linkedId": {
-                    "type": "text",
-                    "label": "composite id of linked object",
-                    "sm": 12,
-                    "noMultiEdit": true,
-                    "maxLength": 255,
-                    "disabled": "true",
-                    "defaultFunc": "data.linkedId || customObj._id.substring(customObj._id.lastIndexOf('.') + 1)",
-                    "onChange": {
-                        "alsoDependsOn": [
-                            "_prefixId",
-                            "_stateId"
-                        ],
-                        "calculateFunc": "data._prefixId.length > 0 && data._stateId.length > 0 ? (data._prefixId || '') + '.' + (data._stateId || '') : (data._stateId || '')",
-                        "ignoreOwnChanges": true
-                    }
+                    "type": "custom",
+                    "name": "AdminComponentLinkedDevicesSet/Components/LinkedIdComponent",
+                    "i18n": false,
+                    "url": "custom/customComponents.js",
+                    "sm": 12
                 },
                 "name": {
                     "type": "autocompleteSendTo",

gulpfile.js

@@ -1,3 +1,88 @@
-"use strict";
+const gulp = require('gulp');
+const fs = require('fs');
+const cp = require('child_process');
+const del = require('del');
+const src = `${__dirname}/src/`;
 
-module.exports = require("@iobroker/adapter-dev/gulp")();
+function npmInstall() {
+    return new Promise((resolve, reject) => {
+        // Install node modules
+        const cwd = src.replace(/\\/g, '/');
+
+        const cmd = `npm install -f`;
+        console.log(`"${cmd} in ${cwd}`);
+
+        // System call used for update of js-controller itself,
+        // because during installation npm packet will be deleted too, but some files must be loaded even during the install process.
+        const exec = cp.exec;
+        const child = exec(cmd, {cwd});
+
+        child.stderr.pipe(process.stderr);
+        child.stdout.pipe(process.stdout);
+
+        child.on('exit', (code /* , signal */) => {
+            // code 1 is strange error that cannot be explained. Everything is installed but error :(
+            if (code && code !== 1) {
+                reject('Cannot install: ' + code);
+            } else {
+                console.log(`"${cmd} in ${cwd} finished.`);
+                // command succeeded
+                resolve();
+            }
+        });
+    });
+}
+
+function build() {
+    const version = JSON.parse(fs.readFileSync(__dirname + '/package.json').toString('utf8')).version;
+    const data    = JSON.parse(fs.readFileSync(src + 'package.json').toString('utf8'));
+
+    data.version = version;
+
+    fs.writeFileSync(src + 'package.json', JSON.stringify(data, null, 4));
+
+    return new Promise((resolve, reject) => {
+        const options = {
+            stdio: 'pipe',
+            cwd:   src
+        };
+
+        console.log(options.cwd);
+
+        let script = src + 'node_modules/@craco/craco/bin/craco.js';
+        if (!fs.existsSync(script)) {
+            script = __dirname + '/node_modules/@craco/craco/bin/craco.js';
+        }
+        if (!fs.existsSync(script)) {
+            console.error('Cannot find execution file: ' + script);
+            reject('Cannot find execution file: ' + script);
+        } else {
+            const child = cp.fork(script, ['build'], options);
+            child.stdout.on('data', data => console.log(data.toString()));
+            child.stderr.on('data', data => console.log(data.toString()));
+            child.on('close', code => {
+                console.log(`child process exited with code ${code}`);
+                code ? reject(`Exit code: ${code}`) : resolve();
+            });
+        }
+    });
+}
+
+gulp.task('0-clean', () => del(['admin/custom/*', 'admin/custom/**/*', 'src/build/**/*']));
+
+gulp.task('1-npm', async () => npmInstall());
+gulp.task('2-compile', async () => build());
+
+gulp.task('3-copy', () => Promise.all([
+    gulp.src(['src/build/static/js/*.js']).pipe(gulp.dest('admin/custom/static/js')),
+    gulp.src(['src/build/static/js/*.map']).pipe(gulp.dest('admin/custom/static/js')),
+    gulp.src(['src/build/customComponents.js']).pipe(gulp.dest('admin/custom')),
+    gulp.src(['src/build/customComponents.js.map']).pipe(gulp.dest('admin/custom')),
+    gulp.src(['src/src/i18n/*.json']).pipe(gulp.dest('admin/custom/i18n')),
+]));
+
+gulp.task('build', gulp.series(['0-clean', '1-npm', '2-compile', '3-copy']));
+
+gulp.task('default', gulp.series(['build']));
+
+// gulp.task('translate', async () => require('@iobroker/adapter-dev').translate());

package.json

@@ -45,12 +45,14 @@
     "chai": "^4.3.6",
     "eslint": "^7.32.0",
     "gulp": "^4.0.2",
-    "mocha": "^9.2.2"
+    "mocha": "^9.2.2",
+    "del": "^6.1.1"
   },
   "main": "main.js",
   "scripts": {
     "test": "node node_modules/mocha/bin/mocha --exit",
     "translate": "node node_modules/gulp/bin/gulp.js adminWords2languages",
+    "build": "gulp",
     "release": "release-script",
     "release-patch": "release-script patch --c .releaseconfig.json --all",
     "release-minor": "release-script minor --c .releaseconfig.json --all",

src/craco.config.js

@@ -0,0 +1,33 @@
+const CracoEsbuildPlugin = require('craco-esbuild');
+const { ProvidePlugin } = require('webpack');
+const cracoModuleFederation = require('craco-module-federation');
+
+module.exports = {
+    plugins: [
+        { plugin: CracoEsbuildPlugin },
+        { plugin: cracoModuleFederation, options: { useNamedChunkIds: true } }
+    ],
+    devServer: {
+        proxy: {
+            '/files': 'http://localhost:8081',
+            '/adapter': 'http://localhost:8081',
+            '/session': 'http://localhost:8081',
+            '/log': 'http://localhost:8081',
+            '/lib': 'http://localhost:8081',
+        }
+    },
+    webpack: {
+        output: {
+            publicPath: './',
+        },
+        plugins: [
+            new ProvidePlugin({
+                React: 'react',
+            }),
+        ],
+        configure: webpackConfig => {
+            webpackConfig.output.publicPath = './';
+            return webpackConfig;
+        },
+    },
+};

src/modulefederation.config.js

@@ -0,0 +1,21 @@
+const makeShared = pkgs => {
+    const result = {};
+    pkgs.forEach(
+        packageName => {
+            result[packageName] = {
+                requiredVersion: '*',
+                singleton: true,
+            };
+        },
+    );
+    return result;
+};
+
+module.exports = {
+    name: 'AdminComponentLinkedDevicesSet',
+    filename: 'customComponents.js',
+    exposes: {
+        './Components': './src/Components.jsx',
+    },
+    shared: makeShared(['@mui/material', '@mui/styles', '@iobroker/adapter-react-v5', 'react', 'react-dom', 'prop-types'])
+};

src/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "iobroker-admin-component-easy-access",
+    "private": true,
+    "version": "1.5.5",
+    "scripts": {
+        "start": "set PORT=4173 && craco start",
+        "build": "craco build"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@iobroker/adapter-react-v5": "^3.0.14",
+        "@mui/material": "^5.8.1",
+        "@mui/styles": "^5.8.0",
+        "prop-types": "^15.8.1",
+        "react": "^18.1.0",
+        "react-ace": "^10.1.0",
+        "react-dom": "^18.1.0",
+        "react-scripts": "^5.0.1",
+        "react-refresh": "^0.14.0",
+        "@originjs/vite-plugin-federation": "^1.1.6",
+        "@rollup/plugin-babel": "^5.3.1",
+        "@rollup/plugin-commonjs": "^22.0.0",
+        "@rollup/plugin-node-resolve": "^13.3.0",
+        "@rollup/plugin-replace": "^4.0.0",
+        "@types/react": "^18.0.9",
+        "@types/react-dom": "^18.0.5",
+        "@craco/craco": "^6.4.3",
+        "craco-esbuild": "^0.5.1",
+        "craco-module-federation": "^1.1.0"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}

src/public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin App</title>
+    <script>
+      var script = document.createElement('script');
+      window.registerSocketOnLoad = function (cb) {
+        window.socketLoadedHandler = cb;
+      };
+      script.onload = function () { typeof window.socketLoadedHandler === 'function' && window.socketLoadedHandler(); };
+      setTimeout(() => {
+        script.src = window.location.port.startsWith('300') ? window.location.protocol + '//' + window.location.hostname + ':8081/lib/js/socket.io.js' : '%PUBLIC_URL%/../../lib/js/socket.io.js';
+      }, 1000);
+
+      document.head.appendChild(script);
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>