RxJS

The RxJS Next project plan outlines a multi-phase evolution focused on architectural safety, migration reliability, and AI-agent enablement. The roadmap progresses through several key stages:

• Phase 0 (Foundation): Establishing architectural safety rails, including migration prototypes, package/install decisions, buildable packages, and lifecycle/import harnesses.
• Phase 1 (Conformance): Focusing on Web Platform Test (WPT) harness attestation and strict conformance.
• Phase 2 (Extension Kernel): Developing the core kernel for extensions.
• Phase 3 (Operator Restoration): Restoring the operator API surface.
• Phase 4 (API Contracts): Establishing intentional API and migration contracts.
• Phase 5 (Migration & AI): Enabling migration workflows and AI-driven code transformations.
• Phase 6 (Release): Final release phase.

Note that specific operator priority lists and release dates are currently out of scope.

The RxJS Next architecture is built upon several key packages. Understanding their roles helps in managing dependencies and knowing where to look for specific functionality:

• @rxjs/observable-polyfill: Supplies a conforming fallback for the ambient platform-shaped Observable, Subscriber, and native-style methods when a native Observable is not present in the runtime.
• rxjs: The main extension library. It installs entry-scoped Symbol operators, factories, and async-iteration adapters via direct Symbol assignment. It also exports intentional RxJS APIs like Subjects and producer-per-subscription primitives.
• @rxjs/migrate: A migration toolset that provides a deterministic engine and a portable 'Skill' for moving from RxJS 7. This is not a runtime dependency.
• @rxjs/test (planned/future): An implementation-neutral testing framework that consumes an active realm Observable.

An Observable is a lazy Push collection of multiple values. Unlike Pull systems (like Functions or Iterators) where the Consumer decides when to receive data, in a Push system like Observables, the Producer (the Observable) determines when to send data to the Consumer (the Observer).

Key characteristics:

• Lazy: The computation inside an Observable does not run until you subscribe to it.
• Push-based: The Observable pushes values to the subscriber at its own pace.
• Multiple Values: Unlike a Promise (which pushes a single value), an Observable can push zero, one, or many values over time, either synchronously or asynchronously.

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. Unlike plain Observables which are unicast (each subscriber gets an independent execution), a Subject maintains a registry of listeners and shares the same execution with all of them.

Key characteristics:

• Every Subject is an Observable: You can subscribe to it to receive values.
• Every Subject is an Observer: It has next(v), error(e), and complete() methods. You can feed values into it by calling next().
• Multicasting: You can use a Subject to convert a unicast Observable into a multicast one by passing the subject as an argument to an Observable's subscribe method.

import { Subject } from 'rxjs';

const subject = new Subject<number>();

subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`),
});
subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`),
});

subject.next(1);
subject.next(2);

// Logs:
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2

RxJS 9 is a platform-based generation of RxJS designed to work with the native web-platform Observable. Key architectural shifts include:

• Native Integration: It uses the native web-platform Observable when available, installing a conforming fallback via @rxjs/observable-polyfill only when necessary.
• Symbol-Keyed Extensions: Operators and factories are implemented as module-owned Symbols. This prevents RxJS from polluting the platform's Observable prototype with string-named methods.
• Explicit Producer Contracts: It distinguishes between platform Observable behavior and producer-per-subscription behavior. Use ColdObservable when every direct subscription must trigger its own producer.
• Cancellation: Built upon AbortSignal and the platform Subscriber lifecycle.
• ESM-Only: The published JavaScript is ESM-only. Node.js environments can bridge require() to these ESM files.

RxJS 9 uses module-owned exact Symbols for its operators to allow different versions to coexist without overwriting each other. To use an operator, you must import it from its specific subpath and access it on the Observable instance using bracket notation with the Symbol.

Key distinction:

• Platform contract: Uses standard string methods (e.g., observable.map(project)).
• RxJS contract: Uses the Symbol (e.g., observable[map](project)).

Importing rxjs does not replace the platform string methods; both forms remain available.

import 'rxjs';
import { filter } from 'rxjs/filter';
import { map } from 'rxjs/map';
import { switchMap } from 'rxjs/switch-map';

// Using the RxJS Symbol operators
const result = source[filter]((value) => value.active)[map]((value) => value.id);

// Comparison with platform string methods
observable.map(project); // platform contract
observable[map](project); // RxJS contract