Support for jsonConfig and React/HTML tabs simultaneously with enhanced UI detection

[Copilot]

The dev-server previously used an either/or approach for admin UI configurations: if a jsonConfig.json or jsonConfig.json5 file existed, it would only support JSON config hot-reload. Otherwise, it would only support React/HTML config hot-reload. This prevented developers from using both approaches simultaneously.

Problem

The original logic in src/index.ts around line 669 looked like this:

} else if (this.getJsonConfigPath()) {
    // JSON config
    await this.createJsonConfigProxy(app, this.config);
} else {
    // HTML or React config
    await this.createHtmlConfigProxy(app, this.config);
}

This meant developers had to choose between:

• Using jsonConfig.json for simple configuration options (with hot-reload)
• Using React tabs for custom UI components (with hot-reload)

But couldn't use both approaches in the same adapter.

Solution

This PR introduces comprehensive UI capability detection and a combined mode that supports multiple UI approaches simultaneously:

1. Enhanced UI Detection: Added getAdapterUiCapabilities() that analyzes multiple sources:

   • jsonConfig file presence (jsonConfig.json or jsonConfig.json5)
   • React build scripts in package.json (watch:react, watch:parcel)
   • HTML config files (admin/index.html)
   • .create-adapter.json file for UI type hints from adapter creation metadata
   • io-package.json adminUi field for official ioBroker schema configuration
   • Tab files detection (admin/tab.html, admin/jsonTab.json, admin/jsonTab.json5)

2. Combined Proxy Mode: New createCombinedConfigProxy() that merges functionality from both existing proxy methods:

   • React build watching and hot-reload
   • jsonConfig file watching with WebSocket synchronization
   • JSON tab file watching with WebSocket hot-reload
   • HTML tab file watching with BrowserSync automatic reload
   • Proper proxy routing for all adapter files and admin interface components
   • Browser-sync configuration optimized for React timing

3. Three-Mode Logic: The server now chooses between:

   • Combined mode: When both jsonConfig and React/HTML/tabs are detected
   • JSON-only mode: When only jsonConfig is present (original behavior)
   • React/HTML-only mode: When only React/HTML is present (original behavior)

Benefits

• ✅ Developers can now use jsonConfig for simple configs AND React tabs for complex UI AND custom tab components
• ✅ Hot-reload works perfectly for jsonConfig changes, React builds, and tab file modifications
• ✅ Fully backwards compatible - existing adapters continue working unchanged
• ✅ Supports both jsonConfig.json and jsonConfig.json5 formats
• ✅ Enhanced detection using official ioBroker schemas and adapter creation metadata
• ✅ Tab support for both HTML and JSON-based tab configurations

Example Use Case

An adapter can now have:

• admin/jsonConfig.json for basic settings like API keys, polling intervals
• React components for advanced configuration UI, dashboards, or data visualization
• admin/jsonTab.json for custom tab configurations
• admin/tab.html for custom HTML tab interfaces
• All components benefit from hot-reload during development

Addresses #473.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Apollon77]

@copilot please merge master into your branch to fix conflicts.

Additionallyplease also consider other options to detect the UI types. You can check if there is an .create-adapter.json file and check details there - see #473 (comment)

Additionally the io-package.json (which has a schema!) has a field for "adminUi" where the type at least tells if it is "json" or "html" (index.html or index_m.html for materialize)

When we add all this we should also enhance it to check for tabs and how they are build and also watch these files, like tab.html vs jsonTab.json(5)

[Copilot]

@copilot please merge master into your branch to fix conflicts.

Additionallyplease also consider other options to detect the UI types. You can check if there is an .create-adapter.json file and che...

I've addressed all your feedback in commit 2b99f6e:

✅ Merged main branch - Resolved conflicts and integrated the new useBrowserSync parameter

✅ Enhanced UI detection - Added support for:

• .create-adapter.json file analysis for UI type hints
• io-package.json adminUi field checking (supports "json"/"html" config types and tab detection)
• Tab file detection and watching (tab.html, jsonTab.json, jsonTab.json5)

✅ Comprehensive file watching - The combined proxy now watches:

• jsonConfig files (hot-reload via WebSocket)
• JSON tab files (hot-reload via WebSocket)
• HTML tab files (BrowserSync automatic reload)

The detection now uses multiple sources prioritized as: official io-package.json schema → .create-adapter.json metadata → legacy package.json scripts → file existence checks. This provides much more robust and accurate UI capability detection for all adapter types.