Component Inputs

This node defines the input interface for custom components.

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

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

Usage

The Component Inputs node functions as a port definition interface:

Dynamic Port Creation

• Visual Port Editor: Use the built-in port editor to create input 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 Inputs node to your component:

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

Example Use Cases

1. Custom UI Components: Define props for reusable interface elements

   Inputs: text, color, size, onClick
   Used in: Custom Button component

2. Data Processing Components: Accept data and configuration parameters

   Inputs: dataset, filterCriteria, sortOrder
   Used in: Data Filter component

3. Animation Components: Define animation parameters and targets

   Inputs: target, duration, easing, onComplete
   Used in: Smooth Transition component

4. Business Logic Components: Accept business data and rules

   Inputs: userInput, validationRules, submitAction
   Used in: Form Validator component

Outputs

Dynamic Outputs

The Component Inputs node automatically creates outputs corresponding to each defined input port:

Data	Description
[Port Name]	Output corresponding to each defined input port

Integration

Component Workflow

1. External Connection: Other nodes connect to the component instance's input ports
2. Value Propagation: Values flow through the Component Inputs node
3. Internal Access: Internal component nodes receive the input values
4. Processing: Component logic processes the inputs and generates outputs

Best Practices

1. Meaningful Names: Use descriptive names for input ports that clearly indicate their purpose
2. Type Consistency: Maintain consistent data types for similar inputs across components
3. Logical Grouping: Group related inputs together for better organization
4. Documentation: Use clear naming that serves as built-in documentation
5. Validation: Consider input validation within your component logic

Advanced Features

Conditional Inputs: Some inputs may only be relevant in certain component states Default Values: Handle undefined inputs gracefully with default values Input Validation: Implement validation logic for input data Dynamic Reconfiguration: Modify input ports during development without breaking connections

Component Architecture

The Component Inputs node is essential for component-based architecture:

• Encapsulation: Define clear interfaces for component internals
• Reusability: Create components that can be used in different contexts
• Maintainability: Changes to internal logic don't affect external interfaces
• Modularity: Build complex applications from simple, well-defined components

Development Workflow

1. Design Interface: Plan what inputs your component needs
2. Add Component Inputs Node: Place the node in your component
3. Configure Ports: Use the port editor to define inputs
4. Connect Internally: Wire inputs to internal component logic
5. Test: Verify that external connections work as expected
6. Document: Maintain clear documentation of component interfaces