Valdi UI Framework

The rxjs-valdi module provides a specialized version of RxJS tailored for Valdi components. It is a mirror of the npm rxjs package, specifically containing files from rx/src/internal, but with certain web-specific and problematic code paths removed to ensure stability in Valdi environments.

Key Differences from Standard RxJS

Removed Web-Specific Modules: To maintain compatibility with the Valdi runtime, the following modules have been stripped out:

• rx/src/internal/ajax
• rx/src/internal/observable/dom
• rx/src/internal/observable/bindNodeCallback.ts

Stability Optimizations: To prevent stack overflow issues on Android, the following changes were made to Observable.ts and Subject.ts:

• The useDeprecatedSynchronousErrorHandling code path has been removed.
• errorContext wrapping has been removed.

Check the package.json file in the module directory to determine the exact version of RxJS being used.

Valdi is a cross-platform native UI framework built around TypeScript and Bazel. Use the following comparison to determine if Valdi meets your technical requirements compared to React Native, Flutter, or pure Native development:

Valdi components are inspired by Functional Reactive Programming, similar to React, but they use a different class structure. While React uses function components and class React.Component, Valdi uses Component (stateless) and StatefulComponent (stateful) classes.

Key Mapping

• Props $\rightarrow$ ViewModel: In Valdi, what React calls Props are called ViewModel. They are provided by the parent via JSX attributes and are ReadOnly.
• State $\rightarrow$ State: Both use State for internal properties that trigger re-renders when changed via this.setState().
• Context $\rightarrow$ Context: Valdi's Context is a third generic parameter used for native API integration, distinct from React's Context API.

Rendering Trigger

Just like React, a render pass is triggered when:

1. The ViewModel (props) changes from a parent.
2. this.setState() is called with new values.

import { StatefulComponent } from "valdi_core/src/Component";

interface ViewModel {
  label: string;
  onDoThing: (count: number) => void;
}

interface State {
  counter: number;
}

class MyComponent extends StatefulComponent<ViewModel, State> {
  state = {
    counter: 0,
  };

  handleTap = () => {
    const counter = this.state.counter + 1;
    this.setState({ counter });
    this.viewModel.onDoThing(counter);
  };

  onRender(): void {
    <view onTap={this.handleTap}>
      <label
        value={`$${this.viewModel.label} (click count ${this.state.counter})`}
      />
    </view>;
  }
}

Valdi enables cross-platform communication by maintaining a mapping between TypeScript and platform (iOS/Android) code.

• Native Reference: A C++, Objective-C, or Kotlin object or function exposed to TypeScript.
• JS Value Reference: A TypeScript function exposed to C++, Objective-C, or Kotlin.

The runtime automatically manages these references during the lifetime of your TypeScript component. When you call a TypeScript function backed by an Objective-C method, the runtime handles the bridge, and vice versa.

// @ViewModel
// @ExportModel
interface ViewModel {
  fetchUserIds(cb: (userIds: string[]) => void): void;
}

// @ExportModel
export class MyComponent extends Component<ViewModel> {
  onCreate() {
    // fetchUserIds is a Native Reference (from platform)
    const fetchUserIds = this.viewModel.fetchUserIds;

    // Passing an arrow function creates a JS Value Reference
    fetchUserIds((userIds) => {
      // logic
    });
  }
}