Component Outputs

This node defines the output interface for custom components.

The Component Outputs node allows you to create dynamic output ports that become the external interface of your component.

The Component Outputs node is used within component definitions to specify which data and signals the component provides to the outside world. It acts as the bridge between internal component logic and external connections.

Usage

The Component Outputs node functions as the output port definition interface:

Dynamic Port Creation

• Visual Port Editor: Use the built-in port editor to create output ports
• Flexible Types: Support for any data type (*) including numbers, strings, objects, arrays, and signals
• Grouping: Organize related ports into logical groups
• Live Updates: Ports update dynamically as you add or remove them

Component Interface Design

When you add a Component Outputs node to your component:

1. Define Ports: Use the port editor to create named output ports
2. Set Types: Specify appropriate data types for each port
3. Organize: Group related outputs for better organization
4. Connect: Wire internal component logic to these outputs

Inputs

Dynamic Inputs

The Component Outputs node automatically creates inputs corresponding to each defined output port:

Data	Description
[Port Name]	Input corresponding to each defined output port

Usage Patterns

Value Propagation

Internal component nodes connect to the Component Outputs node inputs, which then:

1. Receive Values: Accept data and signals from internal component logic
2. Forward Values: Propagate values to external connections through the component instance
3. Maintain State: Preserve output values for external access
4. Signal Events: Forward signal events to external listeners

Example Use Cases

1. Custom UI Components: Expose component state and events

   Outputs: isActive, onClick, onHover, currentValue
   Used by: External systems monitoring component state

2. Data Processing Components: Provide processed results

   Outputs: processedData, errorStatus, completionSignal
   Used by: Downstream data processing stages

3. Animation Components: Report animation state and completion

   Outputs: currentProgress, onComplete, onStart, finalValue
   Used by: Animation sequence coordinators

4. Business Logic Components: Return computation results

   Outputs: validationResult, calculatedTotal, errorMessages
   Used by: Application logic and UI updates

Advanced Features

Signal Forwarding: Forward internal signals to external handlers State Exposure: Expose internal component state for monitoring Event Aggregation: Combine multiple internal events into summary outputs Data Transformation: Process internal data before external exposure

Integration Workflow

1. Internal Generation: Component logic generates data or signals
2. Output Connection: Internal nodes connect to Component Outputs inputs
3. Value Reception: Component Outputs receives and processes values
4. External Propagation: Values are forwarded to external connections via component instance
5. External Consumption: External nodes receive and process the output values

Best Practices

1. Clear Naming: Use descriptive names that clearly indicate the output's purpose
2. Type Consistency: Maintain consistent data types across similar components
3. Event Semantics: Use clear event naming conventions (onComplete, onError, etc.)
4. State Minimization: Only expose necessary internal state
5. Documentation: Provide clear descriptions of output behavior

Component Architecture Benefits

Encapsulation: Internal logic details are hidden from external consumers Reusability: Well-defined outputs make components reusable across contexts Testability: Clear output contracts enable component testing Maintainability: Changes to internal logic don't affect external interfaces Modularity: Components can be developed and tested independently

Development Workflow

1. Design Interface: Plan what outputs your component should provide
2. Add Component Outputs Node: Place the node in your component
3. Configure Ports: Use the port editor to define outputs
4. Connect Internally: Wire internal component logic to output inputs
5. Test Externally: Verify that external connections receive expected values
6. Document: Maintain clear documentation of output contracts

Error Handling

• Validation: Validate internal values before outputting
• Error Signals: Provide error outputs for exceptional conditions
• Graceful Degradation: Handle missing or invalid internal values
• Status Reporting: Include status outputs for complex operations

The Component Outputs node is essential for creating well-defined, reusable components with clear external interfaces.