hyperscript-rxjs 1.3.14 → 1.3.15

package/src/hyperscript-rxjs/tags.test.js

@@ -0,0 +1,75 @@
+import { div, br, img, span, p, option } from './tags';
+
+describe('tags', () => {
+    test('should create a div element with props and children', () => {
+        const props = { id: 'test', className: 'example' };
+        const child1 = 'Hello';
+        const child2 = 'World';
+
+        const element = div(props, child1, child2);
+
+        expect(element.tagName).toBe('DIV');
+        expect(element.id).toBe('test');
+        expect(element.className).toBe('example');
+        expect(element.childNodes.length).toBe(2);
+        expect(element.childNodes[0].textContent).toBe('Hello');
+        expect(element.childNodes[1].textContent).toBe('World');
+    });
+
+    test('should create a br element with no props or children', () => {
+        const element = br();
+
+        expect(element.tagName).toBe('BR');
+        expect(element.childNodes.length).toBe(0);
+    });
+
+    test('should create an img element with only props', () => {
+        const props = { id: 'test', src: 'image.png', alt: 'Example Image' };
+
+        const element = img(props);
+
+        expect(element.tagName).toBe('IMG');
+        expect(element.id).toBe('test');
+        expect(element.src).toContain('image.png');
+        expect(element.alt).toBe('Example Image');
+    });
+
+    test('should create a span element with only children', () => {
+        const child1 = 'Hello';
+        const child2 = 'World';
+
+        const element = span(null, child1, child2);
+
+        expect(element.tagName).toBe('SPAN');
+        expect(element.childNodes.length).toBe(2);
+        expect(element.childNodes[0].textContent).toBe('Hello');
+        expect(element.childNodes[1].textContent).toBe('World');
+    });
+
+    test('should create a p element with both props and children', () => {
+        const props = { id: 'test', className: 'example' };
+        const child1 = 'Hello';
+        const child2 = 'World';
+
+        const element = p(props, child1, child2);
+
+        expect(element.tagName).toBe('P');
+        expect(element.id).toBe('test');
+        expect(element.className).toBe('example');
+        expect(element.childNodes.length).toBe(2);
+        expect(element.childNodes[0].textContent).toBe('Hello');
+        expect(element.childNodes[1].textContent).toBe('World');
+    });
+
+    test('should create an option element with props and children', () => {
+        const props = { value: '1', selected: true };
+        const child = 'Option 1';
+
+        const element = option(props, child);
+
+        expect(element.tagName).toBe('OPTION');
+        expect(element.value).toBe('1');
+        expect(element.selected).toBe(true);
+        expect(element.textContent).toBe('Option 1');
+    });
+});

package/src/hyperscript-rxjs/textNode.d.ts

@@ -0,0 +1,11 @@
+import { Observable, Subscription } from 'rxjs';
+
+/**
+ * 创建一个文本节点，支持静态文本和基于 Observable 的动态文本。
+ * 
+ * @param text - Observable<any> | any。
+ * @returns 文本节点，若为动态文本节点则带有 unsubscribe 方法。
+ */
+export function textNode(
+  text: any
+): Text & { subscription?: Subscription, unsubscribe?: () => void };

package/src/hyperscript-rxjs/textNode.js

@@ -0,0 +1,51 @@
+import { Observable, isObservable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+/**
+ * @typedef {Text & {subscription?: Subscription, unsubscribe?: ()=>void}} ObservableTextNode
+ */
+
+/**
+ * 创建一个文本节点。
+ * 支持静态文本和动态更新的文本（通过 RxJS Observable）。
+ *
+ * - 如果传入的是字符串，则创建一个静态文本节点。
+ * - 如果传入的是 RxJS Observable，则创建一个动态文本节点，并根据 Observable 的值实时更新文本内容。
+ * - 动态文本节点支持通过 `unsubscribe` 方法取消订阅。
+ *
+ * @param {any} text Observable<any> | any。
+ * @returns {ObservableTextNode}
+ *
+ */
+export function textNode(text) {
+    // 如果传入的是 Observable
+    if (isObservable(text)) {
+        const node = document.createTextNode("");
+
+        // 创建订阅并更新文本节点
+        const subscription = text.pipe(
+            map(d => String(d))
+        ).subscribe({
+            next(t) { node.nodeValue = t; },
+            error(err) { node.nodeValue = `Error: ${err.message}`; }
+        })
+
+        return Object.assign(node, {
+            subscription,
+            /**
+             * @this {ObservableTextNode}
+             */
+            unsubscribe() {
+                if (this.subscription) {
+                    this.subscription.unsubscribe();
+                    delete this.subscription; // 删除 subscription 成员
+                    delete this.unsubscribe;
+                }
+            }
+        });
+
+    } else {
+        return document.createTextNode(String(text)); // 转换为字符串
+    }
+}
+

package/src/hyperscript-rxjs/textNode.test.js

@@ -0,0 +1,56 @@
+import { BehaviorSubject, throwError, Subscription } from 'rxjs';
+import { textNode } from './textNode';
+
+describe('textNode', () => {
+    test('should create a static text node', () => {
+        const node = textNode('Hello, World!');
+        expect(node).toBeInstanceOf(Text);
+        expect(node.nodeValue).toBe('Hello, World!');
+    });
+
+    test('should create a dynamic text node from an Observable', () => {
+        const text$ = new BehaviorSubject('Initial Text');
+        const node = textNode(text$);
+
+        expect(node).toBeInstanceOf(Text);
+        expect(node.nodeValue).toBe('Initial Text');
+
+        // Update the Observable value
+        text$.next('Updated Text');
+        expect(node.nodeValue).toBe('Updated Text');
+    });
+
+    test('should handle errors from an Observable', () => {
+        const error$ = throwError(() => new Error('Something went wrong'));
+        const node = textNode(error$);
+
+        expect(node).toBeInstanceOf(Text);
+        expect(node.nodeValue).toBe('Error: Something went wrong');
+    });
+
+    test('should unsubscribe from the Observable when unsubscribeTextNode is called', () => {
+        const text$ = new BehaviorSubject('Initial Text');
+        const node = textNode(text$);
+
+        expect(node.subscription).toBeInstanceOf(Subscription);
+
+        node.unsubscribe();
+
+        expect(node.subscription).toBeUndefined();
+        expect(node.unsubscribe).toBeUndefined();
+
+    });
+
+
+    test('should convert non-string static values to text', () => {
+        const node = textNode(12345);
+        expect(node).toBeInstanceOf(Text);
+        expect(node.nodeValue).toBe('12345');
+    });
+
+    test('should handle boolean values as static text', () => {
+        const node = textNode(true);
+        expect(node).toBeInstanceOf(Text);
+        expect(node.nodeValue).toBe('true');
+    });
+});

package/src/hyperscript-rxjs/textarea.d.ts

@@ -0,0 +1,17 @@
+import { BehaviorSubject } from 'rxjs';
+import { HyperscriptExtensions } from './HyperscriptExtensions';
+
+/**
+ * 创建一个支持 RxJS 数据绑定的 <textarea> 元素。
+ * 
+ * @param props - 配置对象，包含 <textarea> 元素的属性，必须包含 value（BehaviorSubject<string>）。
+ * @returns 创建的 <textarea> 元素。
+ * @throws 如果 props 不是对象，或者 value 不是 BehaviorSubject 会抛出错误。
+ */
+export function textarea(
+  props: {
+    value: BehaviorSubject<string>,
+    [key: string]: any
+  }
+): HyperscriptExtensions<HTMLTextAreaElement>;
+

package/src/hyperscript-rxjs/textarea.js

@@ -0,0 +1,45 @@
+import { map } from 'rxjs/operators';
+import { hyperscript } from './hyperscript';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+/**
+ * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLTextAreaElement>} HyperscriptTextAreaElement
+ */
+
+/**
+ * 创建一个支持 RxJS 数据绑定的 <textarea> 元素。
+ * 
+ * @param {{value:BehaviorSubject<string>, [key:string]:any}} props - 配置对象，包含 <textarea> 元素的属性。
+ * @returns {HyperscriptTextAreaElement} - 创建的 <textarea> 元素。
+ * @throws {Error} 如果 `props` 不是对象，或者 `value` 不是 BehaviorSubject。
+ */
+export function textarea(props) {
+    if (typeof props !== 'object' || props === null) {
+        throw new Error('`textarea` requires a `props` object.');
+    }
+
+    const { value } = props;
+
+    if (!(value instanceof BehaviorSubject)) {
+        throw new Error('`value` must be an instance of BehaviorSubject.');
+    }
+
+    // 创建 <textarea> 元素
+    const elem = /** @type {HyperscriptTextAreaElement} */ (hyperscript('textarea', props));
+
+    // 订阅输入事件并更新 BehaviorSubject
+    const subscriber =
+        /**
+         * 
+         * @param {Observable<Event>} input$ 
+         * @returns 
+         */
+        input$ =>
+            input$.pipe(
+                map(e => /** @type {HTMLTextAreaElement} */ (e.target).value),
+            ).subscribe(value);
+
+    elem.pipeEvent('input', subscriber);
+
+    return elem;
+}

package/src/hyperscript-rxjs/textarea.test.js

@@ -0,0 +1,52 @@
+import { BehaviorSubject } from 'rxjs';
+import { textarea } from './textarea';
+
+describe('textarea', () => {
+    beforeEach(() => {
+        document.body.innerHTML = ''; // 清空 DOM
+    });
+
+    test('should create a <textarea> element bound to value', () => {
+        const value = new BehaviorSubject('');
+
+        const elem = textarea({ value });
+
+        // 验证返回的元素
+        expect(elem).toBeInstanceOf(HTMLTextAreaElement);
+
+        // 初始状态
+        expect(elem.value).toBe('');
+        expect(value.getValue()).toBe('');
+
+        // 更新 BehaviorSubject
+        value.next('Hello, world!');
+        expect(elem.value).toBe('Hello, world!');
+
+        // 模拟用户输入
+        elem.value = 'New input';
+        elem.dispatchEvent(new Event('input'));
+        expect(value.getValue()).toBe('New input');
+    });
+
+    test('should throw an error if props is not an object', () => {
+        expect(() => textarea(null)).toThrow('`textarea` requires a `props` object.');
+        expect(() => textarea(undefined)).toThrow('`textarea` requires a `props` object.');
+        expect(() => textarea(42)).toThrow('`textarea` requires a `props` object.');
+    });
+
+    test('should throw an error if value is not a BehaviorSubject', () => {
+        expect(() => textarea({ value: null })).toThrow('`value` must be an instance of BehaviorSubject.');
+        expect(() => textarea({ value: 42 })).toThrow('`value` must be an instance of BehaviorSubject.');
+        expect(() => textarea({ value: {} })).toThrow('`value` must be an instance of BehaviorSubject.');
+    });
+
+    test('should pass additional attributes to the <textarea> element', () => {
+        const value = new BehaviorSubject('');
+        const elem = textarea({ value, placeholder: 'Enter text', rows: 5, cols: 30 });
+
+        // 验证额外属性
+        expect(elem.placeholder).toBe('Enter text');
+        expect(elem.rows).toBe(5);
+        expect(elem.cols).toBe(30);
+    });
+});

package/src/hyperscript-rxjs/textbox.d.ts

@@ -0,0 +1,15 @@
+import { BehaviorSubject } from 'rxjs';
+import { HyperscriptExtensions } from './HyperscriptExtensions';
+
+/**
+ * 创建一个支持 RxJS 数据绑定的 <input type="text"> 元素。
+ * 
+ * @param props - 配置对象，包含 <input> 元素的属性，必须包含 value（BehaviorSubject<string>）。
+ * @returns 创建的 <input type="text"> 元素。
+ * @throws 如果 props 不是对象，或者 value 不是 BehaviorSubject 会抛出错误。
+ */
+export function textbox(props: {
+  value: BehaviorSubject<string>,
+  [key: string]: any
+}): HyperscriptExtensions<HTMLInputElement>;
+

package/src/hyperscript-rxjs/textbox.js

@@ -0,0 +1,42 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { input } from './tags';
+
+/**
+ * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLInputElement>} HyperscriptInputElement
+ */
+
+/**
+ * 创建一个支持 RxJS 数据绑定的 <input type="text"> 元素。
+ * 
+ * @param {{value: BehaviorSubject<string>, [key: string]: any}} props - 配置对象，包含 <input> 元素的属性。
+ * @returns {HyperscriptInputElement} - 创建的 <input type="text"> 元素。
+ * @throws {Error} 如果 `props` 不是对象，或者 `value` 不是 BehaviorSubject。
+ */
+export function textbox(props) {
+    if (typeof props !== 'object' || props === null) {
+        throw new Error('`textbox` requires a `props` object.');
+    }
+
+    const { value } = props;
+
+    if (!(value instanceof BehaviorSubject)) {
+        throw new Error('`value` must be an instance of BehaviorSubject.');
+    }
+
+    // 创建 <input type="text"> 元素
+    const elem = /** @type {HyperscriptInputElement} */ (input({ ...props, type: 'text' }));
+
+    // 订阅输入事件并更新 BehaviorSubject
+    const subscriber =
+        /**
+         * @param {Observable<Event>} input$ 
+         * @returns 
+         */
+        input$ =>
+            input$.pipe(
+                map(e => /** @type {HTMLInputElement} */(e.target).value),
+            ).subscribe(value);
+    elem.pipeEvent('input', subscriber);
+    return elem;
+}

package/src/hyperscript-rxjs/textbox.test.js

@@ -0,0 +1,52 @@
+import { BehaviorSubject } from 'rxjs';
+import { textbox } from './textbox';
+
+describe('textbox', () => {
+    beforeEach(() => {
+        document.body.innerHTML = ''; // 清空 DOM
+    });
+
+    test('should create a <input type="text"> element bound to value', () => {
+        const value = new BehaviorSubject('');
+
+        const elem = textbox({ value });
+
+        // 验证返回的元素
+        expect(elem).toBeInstanceOf(HTMLInputElement);
+        expect(elem.type).toBe('text');
+
+        // 初始状态
+        expect(elem.value).toBe('');
+        expect(value.getValue()).toBe('');
+
+        // 更新 BehaviorSubject
+        value.next('Hello, world!');
+        expect(elem.value).toBe('Hello, world!');
+
+        // 模拟用户输入
+        elem.value = 'New input';
+        elem.dispatchEvent(new Event('input'));
+        expect(value.getValue()).toBe('New input');
+    });
+
+    test('should throw an error if props is not an object', () => {
+        expect(() => textbox(null)).toThrow('`textbox` requires a `props` object.');
+        expect(() => textbox(undefined)).toThrow('`textbox` requires a `props` object.');
+        expect(() => textbox(42)).toThrow('`textbox` requires a `props` object.');
+    });
+
+    test('should throw an error if value is not a BehaviorSubject', () => {
+        expect(() => textbox({ value: null })).toThrow('`value` must be an instance of BehaviorSubject.');
+        expect(() => textbox({ value: 42 })).toThrow('`value` must be an instance of BehaviorSubject.');
+        expect(() => textbox({ value: {} })).toThrow('`value` must be an instance of BehaviorSubject.');
+    });
+
+    test('should pass additional attributes to the <input> element', () => {
+        const value = new BehaviorSubject('');
+        const elem = textbox({ value, placeholder: 'Enter text', maxLength: 50 });
+
+        // 验证额外属性
+        expect(elem.placeholder).toBe('Enter text');
+        expect(elem.maxLength).toBe(50);
+    });
+});

package/src/index.d.ts

@@ -0,0 +1,19 @@
+// 将所有命名导出作为当前模块的命名导出
+export * from "./array"
+
+export * from "./comparers"
+export * from "./comparison"
+
+export * from "./deep"
+export * from "./deep-rxjs"
+export * from "./hyperscript-rxjs"
+
+export * from "./nodes"
+export * from "./object"
+export * from "./props"
+
+export * from "./ramda"
+
+export * from "./structures"
+
+export * from "./unquoted-json"

package/src/index.js

@@ -0,0 +1,19 @@
+// 将所有命名导出作为当前模块的命名导出
+export * from "./array"
+
+export * from "./comparers"
+export * from "./comparison"
+
+export * from "./deep"
+export * from "./deep-rxjs"
+export * from "./hyperscript-rxjs"
+
+export * from "./nodes"
+export * from "./object"
+export * from "./props"
+
+export * from "./ramda"
+
+export * from "./structures"
+
+export * from "./unquoted-json"

package/src/nodes/attachSubscriptionToNode.d.ts

@@ -0,0 +1,13 @@
+import { Subscription } from 'rxjs';
+
+/**
+ * 将 RxJS 订阅对象附加到 DOM 节点上，便于管理。
+ * @private
+ * @param elem - 要附加订阅的 DOM 节点。
+ * @param subscription - 要附加的 RxJS Subscription 对象。
+ * @throws 如果参数无效会抛出错误。
+ */
+export function attachSubscriptionToNode(
+  elem: Node & { subscription?: Subscription },
+  subscription: Subscription
+): void;

package/src/nodes/attachSubscriptionToNode.js

@@ -0,0 +1,25 @@
+import { Subscription } from 'rxjs';
+
+/**
+ * Attaches an RxJS subscription to a DOM node.
+ * @param {Node & { subscription?: Subscription }} elem - DOM node to attach the subscription to.
+ * @param {Subscription} subscription - RxJS subscription to attach.
+ * @throws {Error} If parameters are invalid.
+ */
+export const attachSubscriptionToNode = (elem, subscription) => {
+    if (!(elem instanceof Node)) {
+        throw new Error('Valid DOM node required');
+    }
+
+    if (!(subscription instanceof Subscription)) {
+        throw new Error('Valid RxJS subscription required');
+    }
+
+    //新建或附加订阅
+    if (!elem.subscription) {
+        elem.subscription = subscription;
+    } else {
+        elem.subscription.add(subscription);
+    }
+
+};

package/src/nodes/attachSubscriptionToNode.test.js

@@ -0,0 +1,73 @@
+import { Subscription } from 'rxjs';
+import { attachSubscriptionToNode } from './attachSubscriptionToNode';
+
+describe('attachSubscriptionToNode', () => {
+    test('should attach a subscription to a valid DOM node', () => {
+        const elem = document.createElement('div');
+        const subscription = new Subscription();
+
+        attachSubscriptionToNode(elem, subscription);
+
+        expect(elem.subscription).toBe(subscription);
+    });
+
+    test('should add a new subscription to an existing subscription on the node', () => {
+        const elem = document.createElement('div');
+        const existingSubscription = new Subscription();
+        const newSubscription = new Subscription();
+
+        // Attach the first subscription
+        attachSubscriptionToNode(elem, existingSubscription);
+
+        // Attach the second subscription
+        attachSubscriptionToNode(elem, newSubscription);
+
+        // Verify that the existing subscription contains the new subscription
+        expect(elem.subscription).toBe(existingSubscription);
+        expect(existingSubscription.closed).toBe(false); // Ensure it's still active
+    });
+
+    test('should throw an error if the element is not a valid DOM node', () => {
+        const invalidElem = null;
+        const subscription = new Subscription();
+
+        expect(() => attachSubscriptionToNode(invalidElem, subscription)).toThrow(
+            'Valid DOM node required'
+        );
+    });
+
+    test('should throw an error if the subscription is not a valid RxJS subscription', () => {
+        const elem = document.createElement('div');
+        const invalidSubscription = {};
+
+        expect(() => attachSubscriptionToNode(elem, invalidSubscription)).toThrow(
+            'Valid RxJS subscription required'
+        );
+    });
+
+    test('should handle multiple subscriptions correctly', () => {
+        const elem = document.createElement('div');
+        const subscription1 = new Subscription();
+        const subscription2 = new Subscription();
+
+        attachSubscriptionToNode(elem, subscription1);
+        attachSubscriptionToNode(elem, subscription2);
+
+        // Ensure both subscriptions are managed
+        expect(elem.subscription).toBe(subscription1);
+        expect(subscription1.closed).toBe(false);
+        expect(subscription2.closed).toBe(false);
+    });
+
+    test('should not overwrite existing subscriptions', () => {
+        const elem = document.createElement('div');
+        const subscription1 = new Subscription();
+        const subscription2 = new Subscription();
+
+        attachSubscriptionToNode(elem, subscription1);
+        attachSubscriptionToNode(elem, subscription2);
+
+        // Ensure the original subscription is still the main subscription
+        expect(elem.subscription).toBe(subscription1);
+    });
+});

package/src/nodes/index.d.ts

@@ -0,0 +1,6 @@
+export * from './attachSubscriptionToNode';
+export * from './normalizeChildNodes';
+export * from './parseHyperscriptArgs';
+export * from './pipeEvent';
+export * from './subscribeEvent';
+

package/src/nodes/index.js

@@ -0,0 +1,6 @@
+export * from './attachSubscriptionToNode';
+export * from './normalizeChildNodes';
+export * from './parseHyperscriptArgs';
+export * from './pipeEvent';
+export * from './subscribeEvent';
+

package/src/nodes/normalizeChildNodes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 规范化子节点，将非节点转换为文本节点。
+ * 
+ * @param childNodes - 子节点数组。
+ * @returns 返回规范化后的节点数组。
+ */
+export function normalizeChildNodes(
+  childNodes: any[]
+): Node[];

package/src/nodes/normalizeChildNodes.js

@@ -0,0 +1,15 @@
+import { unwrapArgs } from '../array/unwrapArgs';
+
+/**
+ * 规范化子节点，将非节点转换为文本节点。
+ *
+ * @param {any[]} childNodes - 子节点数组。
+ * @returns {Node[]} - 返回规范化后的节点数组。
+ */
+export function normalizeChildNodes(childNodes) {
+    const normalizedNodes = unwrapArgs(childNodes); // 解构子节点数组
+
+    return normalizedNodes.map(child =>
+        child instanceof Node ? child : document.createTextNode(String(child)) // 将非节点转换为文本节点
+    );
+}