Hyperscript-RxJS

A reactive JavaScript UI library that uses RxJS for direct DOM manipulation with observable data binding.

Features

• Reactive DOM Elements: Create HTML elements with built-in RxJS observable support
• Comprehensive HTML Support: Functions for all standard HTML elements (div, span, input, etc.)
• Advanced Data Binding: Two-way binding for forms, tabs, and other UI components
• Observable Utilities: Specialized classes like ObservableArray for reactive collections
• Deep Data Handling: Deep class for nested observable structures
• Type Safe: Full TypeScript support with detailed type definitions
• RxJS 7.8.2 Integration: Full compatibility with latest RxJS version

Installation

npm install [email protected]

Quick Start

Basic Element Creation

import { div, h1, textNode } from 'hyperscript-rxjs';
import { BehaviorSubject } from 'rxjs';

const title$ = new BehaviorSubject('Hello World');
const app = div(
  h1(textNode(title$))
);

document.body.appendChild(app);

Reactive Form Controls

import { textbox, checkbox, button } from 'hyperscript-rxjs';
import { BehaviorSubject } from 'rxjs';

const name$ = new BehaviorSubject('');
const active$ = new BehaviorSubject(true);

const form = div(
  textbox({ value: name$ }),
  checkbox({ checked: active$ }),
  button('Submit')
);

Core API Overview

Element Creation

Functions for all HTML elements:

a(), abbr(), address(), article(), aside(), audio(), 
button(), div(), form(), h1()-h6(), input(), 
select(), table(), textarea(), video(), ...and more

Specialized Components

• tabControl() - Reactive tab components with BehaviorSubject binding
• textbox(), checkbox(), radio(), select(), multiselect() - Form controls with two-way binding
• numberbox() - Numeric input with observable binding
• ObservableArray - Reactive array with change notifications (insertBefore$, removeChild$, replaceChild$)
• Deep - Nested observable data structures with advanced manipulation methods
• collapse() - Observable-controlled visibility
• flip() - Toggle between two elements based on observable
• choice() - Dynamic element display based on observable value

Reactive Utilities

• bindTabIndex() - Tab navigation binding with BehaviorSubject
• pipeEvent() - RxJS-powered event handling pipelines
• subscribeProp() - Bind observables to element properties
• pickBehaviorSubject() - Extract BehaviorSubject values from nested objects
• restore() - Deep observable updates for complex state management

Data Transformation

• Comparer - Advanced sorting and collection utilities with custom comparison
• queryStringify - Query string serialization

Advanced Usage

Custom Element Extensions

All elements support RxJS extensions:

const btn = button('Click me')
  .pipeEvent('click', click$ => 
    click$.subscribe(() => console.log('Clicked!'))
  .subscribeEvent('mouseover', 
    () => console.log('Mouse over'));

Observable Arrays

const items = new ObservableArray<string>(()=>"");
items.insertBefore('New Item');
items.action$.subscribe(change => {
  console.log('Array changed:', change);
});

Deep Nested Observables

const deepData = new Deep([
  [['user', 'name'], 'John'],
  [['user', 'age'], 30]
]);

deepData.entries.forEach(([path, value]) => {
  console.log(`Path: ${path.join('.')}, Value: ${value}`);
});

Dependencies

• RxJS 7.8.2

License

LGPL-3.0-or-later

Repository

GitHub Repository

Author

cuishengli
Email: [email protected]