hyperscript-rxjs 1.3.1 → 1.3.2

package/package.json

@@ -16,7 +16,7 @@
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "typescript": "5.8.3",
-    "webpack": "5.99.8",
+    "webpack": "5.99.9",
     "webpack-cli": "6.0.1",
     "webpack-dev-server": "5.2.1",
     "webpack-merge": "6.0.1"
@@ -34,14 +34,14 @@
     "build": "webpack --config webpack.prod.js",
     "start": "webpack serve --config webpack.dev.js",
     "test": "jest",
-    "dts:build": "tsc",
+    "type-check": "tsc --noEmit",
     "dts:extract": "api-extractor run --local"
   },
   "name": "hyperscript-rxjs",
   "description": "A js UI library that uses rxjs to handle dom directly.",
   "main": "dist/hyperscript-rxjs.js",
   "types": "dist/hyperscript-rxjs.d.ts",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "author": "cuishengli<34696643@qq.com>",
   "keywords": [
     "ui",

package/readme.md

@@ -1,151 +1,123 @@
-
 # hyperscript-rxjs
 
-A JavaScript UI library that uses RxJS to handle DOM directly.
+A reactive JavaScript UI library that uses RxJS for direct DOM manipulation with observable data binding.
 
 ## Features
 
-- Reactive programming with RxJS.
-- Direct DOM manipulation.
-- Lightweight and flexible.
-
----
+- **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
 
 ## Installation
 
-Install the library via npm:
-
 ```bash
 npm install hyperscript-rxjs
 ```
 
----
-
-## Usage
-
-### Basic Example
+## Quick Start
 
+### Basic Element Creation
 ```javascript
-import { Comparer } from "hyperscript-rxjs";
+import { div, h1, textNode } from 'hyperscript-rxjs';
+import { BehaviorSubject } from 'rxjs';
 
-const comparer = new Comparer((a, b) => a - b);
-console.log(comparer.sort([3, 1, 2])); // Output: [1, 2, 3]
-```
+const title$ = new BehaviorSubject('Hello World');
+const app = div(
+  h1(textNode(title$))
+);
 
-### Importing Specific Modules
-
-You can import specific modules as needed:
-
-```javascript
-import { nestedCombineLatest } from "hyperscript-rxjs";
+document.body.appendChild(app);
 ```
 
----
-
-## API
-
-### Exported Modules
-
-#### Comparers
-- `Comparer`
-- `defaultComparer`
-- `keyComparer`
-- `keyPathComparer`
-- `entryComparer`
-
-#### Reactive Utilities
-- `isRxType`
-- `ObservableArray`
-
-#### Other Utilities
-- `Deep`
-- `nodes`
-- `object`
-- `props`
-- `ramda`
-- `structures`
-- `unquoted-json`
-
----
-
-## Development
-
-### Prerequisites
-
-Ensure you have the following installed:
-- Node.js (>= 14.x)
-- npm (>= 6.x)
+### Reactive Form Controls
+```javascript
+import { textbox, checkbox, button } from 'hyperscript-rxjs';
+import { BehaviorSubject } from 'rxjs';
 
-### Clone the Repository
+const name$ = new BehaviorSubject('');
+const active$ = new BehaviorSubject(true);
 
-```bash
-git clone https://github.com/xp44mm/hyperscript-rxjs.git
-cd hyperscript-rxjs
+const form = div(
+  textbox({ value: name$ }),
+  checkbox({ checked: active$ }),
+  button('Submit')
+);
 ```
 
-### Install Dependencies
+## Core API Overview
 
-```bash
-npm install
+### Element Creation
+Functions for all HTML elements:
+```typescript
+a(), abbr(), address(), article(), aside(), audio(), 
+button(), div(), form(), h1()-h6(), input(), 
+select(), table(), textarea(), video(), ...and more
 ```
 
-### Build the Project
-
-```bash
-npm run build
+### Specialized Components
+- `tabControl()` - Reactive tab components
+- `textbox()`, `checkbox()`, `radio()`, `select()` - Form controls with binding
+- `ObservableArray` - Reactive array with change notifications
+- `Deep` - Nested observable data structures
+
+### Reactive Utilities
+- `bindTabIndex()` - Tab navigation binding
+- `collapse()` - Observable-controlled visibility
+- `flip()` - Toggle between two elements
+- `pipeEvent()` - RxJS-powered event handling
+- `subscribeProp()` - Bind observables to element properties
+
+### Data Transformation
+- `Comparer` - Sorting and collection utilities
+- `flat()`/`erectObject()` - Object flattening/unflattening
+- `restore()` - Deep observable updates
+- `tojs()` - Convert flat data to nested objects
+
+## Advanced Usage
+
+### Custom Element Extensions
+All elements support RxJS extensions:
+```typescript
+const btn = button('Click me')
+  .pipeEvent('click', click$ => 
+    click$.subscribe(() => console.log('Clicked!'))
+  .subscribeEvent('mouseover', 
+    () => console.log('Mouse over'));
 ```
 
-The build output will be located in the `dist/` directory.
-
----
-
-## Testing
-
-### Run Tests
-
-```bash
-npm test
+### Observable Arrays
+```typescript
+const items = new ObservableArray<string>();
+items.insertBefore('New Item');
+items.action$.subscribe(change => {
+  console.log('Array changed:', change);
+});
 ```
 
-### Watch Tests
+## Development
 
+### Build
 ```bash
-npm run test:watch
+npm run build
 ```
 
-### Test Coverage
-
+### Test
 ```bash
-npm run test:coverage
+npm test
 ```
 
----
-
-## Contributing
-
-Contributions are welcome! Please follow these steps:
-
-1. Fork the repository.
-2. Create a new branch for your feature or bugfix.
-3. Commit your changes and push the branch.
-4. Submit a pull request.
-
----
-
 ## License
 
-This project is licensed under the **LGPL-3.0-or-later** license. See the [LICENSE](LICENSE) file for details.
-
----
+LGPL-3.0-or-later
 
 ## Repository
 
 [GitHub Repository](https://github.com/xp44mm/hyperscript-rxjs)
 
----
-
 ## Author
 
 **cuishengli**  
 Email: 34696643@qq.com
-```