Skip to content

Conversation

@tariqksoliman
Copy link
Member

Closes #849

● Plugin-Components System Implementation

Summary
Implements a new Plugin-Components system that allows developers to create lightweight initialization plugins that
run once after the UI is finalized. This follows the same architecture as Plugin-Tools and Plugin-Backend, completing the plugin ecosystem for MMGIS.

Related Issue: #849

Overview

Components are one-time initialization plugins that provide a way to add:

  • Global enhancements (analytics, monitoring)
  • Background services
  • Custom keyboard shortcuts
  • Page-level functionality
  • Any initialization logic that should run after UI finalization

Components have a single init(vars) lifecycle method and receive their configured variables from the mission
configuration.

Key Features

✅ Build-time component discovery - Scans for Private-Components and Plugin-Components directories
✅ Configure page integration - New Components tab for enabling/configuring components
✅ Real-time configuration - Changes save immediately (no save button)
✅ Dynamic forms - Uses existing Maker component for variable configuration
✅ Error isolation - Component errors don't crash MMGIS
✅ Full documentation - Updated Contributing.md with component development guide
✅ Comprehensive testing - 130 new tests (all passing)

Architecture

Build System

npm run build
└─> API/updateTools.js
├─> Scans src/essence/ for component directories
├─> Reads config.json from each component
├─> Generates configure/public/componentConfigs.json
└─> Generates src/pre/components.js (ES6 imports/exports)

Runtime Flow

Frontend Load
└─> essence.js
└─> fina() // UI finalization
└─> ComponentController.initializeComponents()
├─> Reads L_.configData.components[]
├─> Filters enabled components (on: true)
├─> Calls component.init(variables) for each
└─> Logs timing and errors

Configure Page

Configure Page
└─> Components Tab (conditional rendering)
├─> Fetches componentConfigs.json on mission load
├─> Displays component cards (sorted alphabetically)
├─> Shows active/inactive status indicators
└─> Opens ComponentModal on card click
├─> ON/OFF toggle
├─> Icon field (optional)
└─> Dynamic variable form (if hasVars: true)

Files Added

Core Implementation

  • src/essence/Basics/ComponentController_/ComponentController_.js - Component initialization controller
  • src/pre/components.js - Generated component imports/exports (build artifact)
  • configure/public/componentConfigs.json - Generated component metadata (build artifact)

Configure Page

  • configure/src/components/Tabs/Components/Components.js - Components tab component
  • configure/src/components/Tabs/Components/ComponentsSlice.js - Redux slice
  • configure/src/components/Tabs/Components/Modals/ComponentModal/ComponentModal.js - Configuration modal

Example Component

  • src/essence/MMGIS-Private-Components/ExampleComponent/config.json - Component metadata
  • src/essence/MMGIS-Private-Components/ExampleComponent/ExampleComponent.js - Example implementation
  • src/essence/MMGIS-Private-Components/ExampleComponent/README.md - Component documentation

Tests

  • tests/unit/componentController.spec.js - ComponentController unit tests (23 tests)
  • tests/unit/essenceComponentIntegration.spec.js - Integration tests (24 tests)
  • tests/unit/componentsTab.spec.js - Components tab UI tests (42 tests)
  • tests/unit/componentModal.spec.js - ComponentModal tests (41 tests)

Documentation

  • specs/011-plugin-components-system/spec.md - Feature specification
  • specs/011-plugin-components-system/plan.md - Technical plan
  • specs/011-plugin-components-system/tasks.md - Task breakdown
  • specs/011-plugin-components-system/testing-summary.md - Testing summary

Files Modified

Build System

  • API/updateTools.js - Added updateComponents() function and component discovery logic

Frontend

  • src/essence/essence.js - Added ComponentController initialization after fina()

Configure Page

  • configure/src/components/Main/Main.js - Added Components tab with conditional rendering
  • configure/src/core/ConfigureStore.js - Added componentConfiguration state and modal
  • configure/src/core/utils.js - Added getComponentFromConfiguration() and updateComponentInConfiguration()

Documentation

  • docs/pages/Contributing/Contributing.md - Added Component Plugins section
  • AGENTS.md - Updated with component system info (if applicable)

Co-Authored-By: Claude noreply@anthropic.com

@tariqksoliman tariqksoliman self-assigned this Jan 14, 2026
@tariqksoliman tariqksoliman added the new feature New feature or request label Jan 14, 2026
@github-actions
Copy link
Contributor

🤖 Version Auto-Bumped

The version has been automatically incremented to 4.2.4-20260114

This commit was added to your PR branch. When you merge this PR, the new version will be included.


If you want a different version, update package.json manually and push to this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

new feature New feature or request

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

[New Feature] Plugin-Components

2 participants