rx4u

A lightweight reactive data stream processing library with a clean functional programming API.

✨ Features

• ⚡ High Performance: Optimized reactive data stream processing
• 🚀 Lightweight: Zero dependencies, small bundle size
• 🔧 Clean API: Intuitive functional programming interface
• 📦 Tree Shaking: Full ES6 modules and Tree Shaking support
• 💪 TypeScript: Complete TypeScript type support
• 🌐 Multi-environment: Supports ESM, CommonJS, and direct CDN usage

📦 Installation

# pnpm
pnpm add rx4u

# npm
npm install rx4u

# yarn
yarn add rx4u

🚀 Quick Start

ES6 Modules

import {pipeFrom, of, map} from 'rx4u';

// Create data stream
const number$ = of(1, 2, 3, 4, 5);
const double$ = pipeFrom(
  number$,
  map((x) => x * 2)
);

const unsub = double$(
  (value) => console.log(value), // Output: 2, 4, 6, 8, 10
  (error) => console.error(error),
  () => console.log('Complete')
);

// Unsubscribe
unsub();

CommonJS

const {pipeFrom, of, map, filter} = require('rx4u');

// Same usage

CDN Usage

<script src="https://unpkg.com/rx4u/index.min.js"></script>
<script>
  const {from, map, filter} = rx4u;

  // Same usage
</script>

📚 Core API

Creation Functions

from(source)

Create a data stream from creator.

import {from} from 'rx4u';

// Create from array
from(() => [1, 2, 3])(console.log);

// Create from Promise
from(() => fetch('https://example.org/products.json'))(console.log, console.error, console.warn);

of(...values)

Create a data stream from given values.

import {of} from 'rx4u';

of(1, 2, 3)(console.log); // Output: 1, 2, 3

interval(ms)

Create a timer data stream.

import {interval} from 'rx4u';

const unsub = interval(1000)(console.log); // Output incremental numbers every second

Pipeline Operations

pipeFrom(source, ...operators)

Process data streams using pipeline operators.

import {pipeFrom, of, map, filter} from 'rx4u';

const result$ = pipeFrom(
  of(1, 2, 3, 4, 5),
  filter((x) => x > 2),
  map((x) => x * 2)
);

result$(console.log); // Output: 6, 8, 10

State Management

createState(initialValue)

Create reactive state.

import {createState} from 'rx4u';

const [state$, setState, getState] = createState(0);

// Subscribe to state changes
state$((value) => console.log('State:', value));

// Update state
setState(1); // Output: State: 1
console.log('Current State1:', getState()); // Output: State: 1
setState((prev) => prev + 1); // Output: State: 2
console.log('Current State2:', getState()); // Output: State: 2

Utility Functions

firstValueFrom(source)

Get the first value from a data stream as a Promise.

import {firstValueFrom, of} from 'rx4u';

const firstValue = await firstValueFrom(of(1, 2, 3));
console.log(firstValue); // Output: 1

🔧 Operators

Transformation Operators

• map(fn) - Transform each value
• scan(fn, seed) - Accumulation operation
• switchMap(fn) - Switch to a new data stream

Filtering Operators

• filter(predicate) - Filter values
• take(count) - Take the first N values
• skip(count) - Skip the first N values
• distinct() - Remove duplicates

Combination Operators

• merge(...sources) - Merge multiple data streams
• combineLatest(...sources) - Combine latest values

Error Handling

• catchError(handler) - Catch errors
• retry(count) - Retry

Utility Operators

• tap(fn) - Side effect operations
• delay(ms) - Delay
• debounce(ms) - Debounce
• throttle(ms) - Throttle

💡 Usage Examples

Basic Data Processing

import {pipeFrom, of, map, filter, take} from 'rx4u';

// Process user list
const users = [
  {id: 1, name: 'Alice', age: 25},
  {id: 2, name: 'Bob', age: 30},
  {id: 3, name: 'Charlie', age: 35},
];

const user$ = pipeFrom(
  of(...users),
  filter((user) => user.age > 25),
  map((user) => user.name),
  take(2)
);

const unsub = user$(console.log); // Output: Bob, Charlie

Async Data Processing

import {pipeFrom, from, switchMap, of, catchError} from 'rx4u';

// API call handling
const users$ = pipeFrom(
  from(() => fetch('https://example.com/api/users')),
  switchMap((response) => response.json()),
  catchError((error) => {
    console.error('API Error:', error);
    return of([]); // Return empty array as default value
  })
);

const unsub = users$((users) => {
  console.log('User Data:', users);
});

Error Handling

import {pipeFrom, from, switchMap, of, retry, catchError} from 'rx4u';

// API call handling
const data$ = pipeFrom(
  from(() => fetch('https://example.com/api/data')),
  switchMap((response) => {
    if (!response.ok) {
      throw new Error('Network error');
    }
    return response.json();
  }),
  retry(3), // Retry 3 times
  catchError((error) => {
    console.error('Request failed:', error);
    return of({error: 'Data loading failed'});
  })
);

const unsub = data$((data) => {
  console.log('Data:', data);
});

### More Operator Examples

#### Combination Operators

```javascript
import { pipeFrom, combineLatest, of, map } from 'rx4u';

const weight$ = of(70, 72, 76, 79, 75);
const height$ = of(1.76, 1.77, 1.78);

const bmi$ = pipeFrom(
  combineLatest([weight$, height$]),
  map(([w, h]) => w / (h * h))
);

bmi$(console.log);

Time-based Operators

import {pipeFrom, fromEvent, debounceTime, map} from 'rx4u';

const input = document.querySelector('input');
const input$ = fromEvent(input, 'input');

pipeFrom(
  input$,
  map((e) => e.target.value),
  debounceTime(300) // Wait for 300ms pause
)((value) => {
  console.log('Search for:', value);
});

Accumulation Operators

import {pipeFrom, of, scan} from 'rx4u';

const numbers$ = of(1, 2, 3);

pipeFrom(
  numbers$,
  scan((acc, curr) => acc + curr, 0) // Sum: 1, 3, 6
)(console.log);

🔗 TypeScript Support

rx4u provides complete TypeScript type definitions:

import {pipeFrom, of, map, filter, Sub} from 'rx4u';

// Type-safe data stream processing
interface User {
  id: number;
  name: string;
  age: number;
}

const users: User[] = [
  {id: 1, name: 'Alice', age: 18},
  {id: 2, name: 'Bob', age: 30},
];

// TypeScript will automatically infer types
const user$: Sub<User> = of(...users);
const adultName$ = pipeFrom(
  user$,
  filter((user: User) => user.age > 18), // User type
  map((user: User) => user.name) // string type
);

const unsub = adultName$((name: string) => {
  // string type
  console.log(name);
});

📄 License

MIT License

🤝 Contributing

Issues and Pull Requests are welcome!

📞 Support

If you encounter any problems during usage, please:

1. Check the documentation and examples
2. Search existing Issues
3. Create a new Issue describing the problem

rx4u - Making reactive programming simpler! 🚀