UI Composites (Slots)

Overview

In a modular application, you often have UI areas that need to be "enriched" by multiple features. For example, a global Toolbar might need a "Save" button from the editor module and a "Help" icon from the support module.

JopiJS solves this using UI Composites. Unlike standard components that use the Replacement System, UI Composites use a Merging System.

In this guide, you will learn how to:

• Define a UI Composite namespace.
• Use numeric prefixes to control the display order.
• Render the combined result in your React pages.

1. Defining a Composite

To create a composite, add folders inside the @alias/uiComposites/ directory.

The Merging Rule

If multiple modules define the same composite folder name (e.g., mainToolbar), JopiJS will collect all sub-components from all modules and group them together.

Project Structure Example:

src/
├── mod_core/
│   └── @alias/uiComposites/mainToolbar/
│       └── 100_save_btn/
│           └── index.tsx
└── mod_analytics/
    └── @alias/uiComposites/mainToolbar/
        └── 500_report_icon/
            └── index.tsx

2. Controlling Order (Numeric Prefixes)

The order in which items appear in the composite is determined by the alphanumeric name of their parent folder. This is why we use numeric prefixes.

• 010_first/
• 100_middle/
• 999_last/

3. Using a Composite in React

Using a composite is incredibly simple. You import it from the @/uiComposites/ virtual path, and it behaves like a single React component that renders all its children in the correct order.

import MainToolbar from "@/uiComposites/mainToolbar";

export default function Layout() {
    return (
        <header>
            <nav>
                {/* 
                  This will automatically render SaveButton, 
                  ReportIcon, and any other items contributed 
                   by other modules in order.
                */}
                <MainToolbar />
            </nav>
        </header>
    );
}

4. Composites vs. Standard Components

It is important to understand the difference between these two systems: