DSX Rendering Pipeline

Last Updated: May 19, 2025

This document provides an overview of the rendering pipeline in the DSX (Dynamic Schema eXecution) system of the Typus Development Framework.

Introduction

The DSX Rendering Pipeline is the process by which TypeScript configuration objects are transformed into interactive UI components. This pipeline handles everything from parsing configuration to managing data flow, rendering components, and handling user interactions.

Pipeline Components

The DSX rendering pipeline consists of three main components that work together:

1. DsxPageRendererWithContext

The top-level component that:

• Creates and manages the page context
• Processes the page configuration
• Renders blocks in the specified layout
• Handles page-level data loading and lifecycle events

2. DsxBlockRendererWithContext

The mid-level component that:

• Creates and manages block contexts
• Processes block configurations
• Renders components within blocks
• Handles block-level data loading and lifecycle events

3. DsxComponentRendererWithContext

The low-level component that:

• Renders individual UI components
• Binds data from contexts to components
• Processes component-specific configurations
• Handles component lifecycle events and user interactions

Rendering Process

1. Page Initialization

When a DSX page is loaded:

1. The page configuration is passed to DsxPageRendererWithContext
2. A page context is created with the specified model and mode
3. If in CREATE mode, an empty data object is initialized
4. If in EDIT mode, data is loaded from the DSL model
5. The page layout is rendered (typically a grid)

2. Block Processing

For each block in the page configuration:

1. The block configuration is enhanced with page context information
2. A block context is created (shared or isolated)
3. Block data is loaded if a dataSource is specified
4. Components within the block are prepared for rendering

3. Component Rendering

For each component in a block:

1. Component configuration is processed
2. Data binding is set up if the component has a dataValue
3. Lifecycle hooks are executed (setup, beforeDataFetch, etc.)
4. Data is loaded from the component's dataSource if specified
5. The component is rendered with the processed configuration
6. Event handlers are attached to the component

4. Data Flow and Updates

When data changes occur:

1. Component events trigger updates to block context data
2. Block context notifies dependent components of changes
3. Components re-render with updated data
4. Changes can be saved back to the DSL model

Lifecycle Hooks

The DSX Rendering Pipeline provides hooks at various stages:

Page Lifecycle Hooks

• beforeLoad: Before the page begins loading
• onLoad: When the page has loaded but before rendering
• afterLoad: After the page has fully rendered

Block Lifecycle Hooks

• beforeDataLoad: Before block data is loaded
• afterDataLoad: After block data has been loaded
• beforeDataUpdate: Before block data is updated
• afterDataUpdate: After block data has been updated
• onDataError: When an error occurs during data operations

Component Lifecycle Hooks

• beforeDataFetch: Before component data is fetched
• afterDataFetch: After component data has been fetched
• beforeRender: Before the component is rendered
• setup: Component setup function or class

Context System Integration

The DSX rendering pipeline is tightly integrated with the context system:

1. Page Context: Created by DsxPageRendererWithContext and provides:

   • Page-level state and methods
   • Access to the DSL model
   • Navigation methods
   • Shared data storage

2. Block Context: Created by DsxBlockRendererWithContext and provides:

   • Block-level state and methods
   • Data loading and saving
   • Form validation
   • Change tracking

3. Context Scopes: Contexts can be:

   • SHARED: Multiple components share the same context
   • ISOLATED: Component has its own isolated context

Data Binding

Components can be bound to data in the context:

1. Explicit Binding: Using the dataValue property to bind to a specific field
2. Computed Binding: Using computed properties to transform data
3. Event Binding: Using events to update data in the context

Error Handling

The pipeline includes robust error handling:

• Data loading errors are captured and can be handled by error hooks
• Rendering errors are contained within error boundaries
• All errors are logged with detailed context information

Debug Mode

The DSX rendering pipeline includes a debug mode that:

• Shows component boundaries
• Displays context information
• Shows data binding details
• Helps troubleshoot rendering issues

Conclusion

The DSX Rendering Pipeline transforms TypeScript configuration into interactive UI through a hierarchical rendering process. This architecture provides a powerful foundation for building dynamic, data-driven interfaces with minimal code while maintaining flexibility and performance.

By understanding the pipeline components and how data flows through the system, developers can effectively leverage the DSX system to create sophisticated user interfaces with minimal effort.