hyperscript-rxjs 1.3.15 → 1.3.16

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

@@ -1,15 +0,0 @@
-import { Observable } from 'rxjs';
-
-/**
- * 动态切换两个元素或元素数组的显示状态。
- * 
- * @param yinHidden$ - 一个 Observable，表示 yin 是否隐藏。
- * @param yin - 需要动态控制显示状态的第一个元素或元素数组。
- * @param yang - 需要动态控制显示状态的第二个元素或元素数组。
- * @returns 包含所有元素的数组。
- */
-export function flip(
-  yinHidden$: Observable<boolean>,
-  yin: HTMLElement | HTMLElement[],
-  yang: HTMLElement | HTMLElement[]
-): HTMLElement[];

package/src/hyperscript-rxjs/flip.js

@@ -1,29 +0,0 @@
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators'
-import { collapse } from './collapse'
-
-/**
- * 动态切换两个元素或元素数组的显示状态。
- *
- * `flip` 函数根据 `yinHidden$` 的值动态控制 `yinElement` 和 `yangElement` 的显示状态：
- * - 当 `yinHidden$` 为 `true` 时，隐藏 `yinElement`，显示 `yangElement`。
- * - 当 `yinHidden$` 为 `false` 时，显示 `yinElement`，隐藏 `yangElement`。
- *
- * @param {Observable<boolean>} yinHidden$ - 一个 Observable，表示 `yinElement` 是否隐藏。
- * @param {HTMLElement|HTMLElement[]} yin - 需要动态控制显示状态的第一个元素或元素数组。
- * @param {HTMLElement|HTMLElement[]} yang - 需要动态控制显示状态的第二个元素或元素数组。
- * @returns {HTMLElement[]} - 包含所有元素的数组。
- *
- */
-export function flip(yinHidden$, yin, yang) {
-    // 创建一个 Observable，用于控制 yangElement 的隐藏状态
-    const yangHidden$ = yinHidden$.pipe(
-        map(isHidden => !isHidden)
-    );
-
-    // 阴阳交叉
-    return [
-        ...collapse(yangHidden$, yin),
-        ...collapse(yinHidden$, yang)
-    ];
-}

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

@@ -1,85 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { flip } from './flip';
-import { div } from './tags';
-
-describe('flip', () => {
-    test('should toggle visibility between yin and yang elements', () => {
-        const yinHidden$ = new BehaviorSubject(false);
-
-        const yin = div('Yin');
-        const yang = div('Yang');
-
-        const elements = flip(yinHidden$, yin, yang);
-
-        // 初始状态：显示 Yin，隐藏 Yang
-        expect(elements).toEqual([yin, yang]);
-        expect(yin.hidden).toBe(true);
-        expect(yang.hidden).toBe(false);
-
-        // 切换状态：隐藏 Yin，显示 Yang
-        yinHidden$.next(true);
-        expect(yin.hidden).toBe(false);
-        expect(yang.hidden).toBe(true);
-
-        // 切换回初始状态：显示 Yin，隐藏 Yang
-        yinHidden$.next(false);
-        expect(yin.hidden).toBe(true);
-        expect(yang.hidden).toBe(false);
-    });
-
-    test('should handle yin and yang as arrays', () => {
-        const yinHidden$ = new BehaviorSubject(false);
-
-        const yin1 = div('yin1');
-        const yin2 = div('yin2');
-        const yang1 = div('yang1');
-        const yang2 = div('yang2');
-
-        const elements = flip(yinHidden$, [yin1, yin2], [yang1, yang2]);
-
-        // 初始状态：显示 Yin 数组，隐藏 Yang 数组
-        expect(elements).toEqual([yin1, yin2, yang1, yang2]);
-        expect(yin1.hidden).toBe(true);
-        expect(yin2.hidden).toBe(true);
-        expect(yang1.hidden).toBe(false);
-        expect(yang2.hidden).toBe(false);
-
-        // 切换状态：隐藏 Yin 数组，显示 Yang 数组
-        yinHidden$.next(true);
-        expect(yin1.hidden).toBe(false);
-        expect(yin2.hidden).toBe(false);
-        expect(yang1.hidden).toBe(true);
-        expect(yang2.hidden).toBe(true);
-    });
-
-    test('should handle empty yin and yang arrays', () => {
-        const yinHidden$ = new BehaviorSubject(false);
-
-        const elements = flip(yinHidden$, [], []);
-
-        // 初始状态：没有元素
-        expect(elements).toEqual([]);
-    });
-
-    test('should handle mixed types (single elements and arrays)', () => {
-        const yinHidden$ = new BehaviorSubject(false);
-
-        const yin1 = div('yin1');
-        const yin2 = div('yin2');
-        const yang = div('yang');
-
-        const elements = flip(yinHidden$, [yin1, yin2], yang);
-
-        // 初始状态：显示 Yin 数组，隐藏 Yang
-        expect(elements).toEqual([yin1, yin2, yang]);
-        expect(yin1.hidden).toBe(true);
-        expect(yin2.hidden).toBe(true);
-        expect(yang.hidden).toBe(false);
-
-        // 切换状态：隐藏 Yin 数组，显示 Yang
-        yinHidden$.next(true);
-        expect(yin1.hidden).toBe(false);
-        expect(yin2.hidden).toBe(false);
-        expect(yang.hidden).toBe(true);
-    });
-});

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

@@ -1,10 +0,0 @@
-/**
- * 插入一组元素，返回包含所有子节点的 DocumentFragment。
- * 
- * @param childNodes - 要插入的子节点，可以是单个节点、多个节点或节点数组。
- * @returns 包含所有子节点的 DocumentFragment。
- * @throws 如果传入的子节点不是有效的 DOM 节点会抛出错误。
- */
-export function fragment(
-  ...childNodes: (Node | Node[])[]
-): DocumentFragment;

package/src/hyperscript-rxjs/fragment.js

@@ -1,22 +0,0 @@
-import { normalizeChildNodes } from '../nodes/normalizeChildNodes';
-
-/**
- * 用途：插入一组元素，不必使用循环语句，fragment 用后即弃。
- *
- * @param {...Node|Node[]} childNodes - 要插入的子节点，可以是单个节点、多个节点或节点数组。
- * @returns {DocumentFragment} - 返回包含所有子节点的 DocumentFragment。
- * @throws {Error} 如果传入的子节点不是有效的 DOM 节点。
- */
-export function fragment(...childNodes) {
-    // 创建一个 DocumentFragment
-    const frag = new DocumentFragment();
-
-    // 验证并附加子节点
-    normalizeChildNodes(childNodes)
-        .forEach(child => {
-            frag.appendChild(child); // 将子节点附加到元素
-        });
-
-    // 返回 DocumentFragment
-    return frag;
-}

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

@@ -1,70 +0,0 @@
-import { fragment } from './fragment';
-import { div } from './tags';
-import { textNode } from './textNode';
-
-describe('fragment', () => {
-    test('should return a DocumentFragment', () => {
-        const frag = fragment();
-        expect(frag).toBeInstanceOf(DocumentFragment);
-    });
-
-    test('should append multiple nodes to the fragment', () => {
-        const div1 = div('div1');
-        const div2 = div('div2');
-
-        const frag = fragment(div1, div2);
-
-        expect(frag.childNodes.length).toBe(2);
-        expect(frag.firstChild).toBe(div1);
-        expect(frag.lastChild).toBe(div2);
-    });
-
-    test('should handle an array of nodes', () => {
-        const div1 = div('div1');
-        const div2 = div('div2');
-
-        const frag = fragment([div1, div2]);
-
-        expect(frag.childNodes.length).toBe(2);
-        expect(frag.firstChild).toBe(div1);
-        expect(frag.lastChild).toBe(div2);
-    });
-
-    test('should handle text nodes and elements', () => {
-        const textNode1 = textNode('Hello');
-        const div1 = div('div');
-
-        const frag = fragment(textNode1, div1);
-
-        expect(frag.childNodes.length).toBe(2);
-        expect(frag.firstChild.nodeType).toBe(Node.TEXT_NODE);
-        expect(frag.firstChild.textContent).toBe('Hello');
-        expect(frag.lastChild).toBe(div1);
-    });
-
-    test('should handle invalid child nodes gracefully', () => {
-        // 测试 undefined
-        const fragUndefined = fragment(undefined);
-        expect(fragUndefined.childNodes.length).toBe(1);
-        expect(fragUndefined.firstChild.nodeType).toBe(Node.TEXT_NODE);
-        expect(fragUndefined.firstChild.textContent).toBe('undefined');
-    
-        // 测试 null
-        const fragNull = fragment(null);
-        expect(fragNull.childNodes.length).toBe(1);
-        expect(fragNull.firstChild.nodeType).toBe(Node.TEXT_NODE);
-        expect(fragNull.firstChild.textContent).toBe('null');
-    
-        // 测试对象
-        const fragObj = fragment({});
-        expect(fragObj.childNodes.length).toBe(1);
-        expect(fragObj.firstChild.nodeType).toBe(Node.TEXT_NODE);
-        expect(fragObj.firstChild.textContent).toBe("[object Object]");
-
-    });
-
-
-
-
-
-});

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

@@ -1,15 +0,0 @@
-import { HyperscriptExtensions } from './HyperscriptExtensions';
-
-/**
- * Creates an HTML element with extended event handling capabilities
- * @public
- * @param elemName The HTML element tag name
- * @param args Optional properties and child nodes
- * @returns The created element with extended methods
- * @throws If elemName is not a valid HTML element tag name
- */
-export declare function hyperscript(
-    elemName: string,
-    ...args: any[]
-): HyperscriptExtensions<HTMLElement>;
-

package/src/hyperscript-rxjs/hyperscript.js

@@ -1,170 +0,0 @@
-import { Subscription, Observable } from 'rxjs';
-
-import { pipeEvent } from '../nodes/pipeEvent';
-import { subscribeEvent } from '../nodes/subscribeEvent';
-import { parseHyperscriptArgs } from '../nodes/parseHyperscriptArgs';
-import { setProps } from '../props/setProps';
-import { normalizeChildNodes } from '../nodes/normalizeChildNodes';
-
-/**
- * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLElement>} HyperscriptElement
- */
-
-/**
- * Creates an HTML element with extended event handling capabilities
- * @public
- * @param {string} elemName - The HTML element tag name
- * @param {...any} args - Optional properties and child nodes
- * @returns {HyperscriptElement} The created element with extended methods
- * @throws {Error} If elemName is not a valid HTML element tag name
- */
-export function hyperscript(elemName, ...args) {
-    // 参数验证，确保 elemName 是一个有效的字符串
-    if (typeof elemName !== 'string' || !tagNames.has(elemName)) {
-        throw new Error(`参数 elemName 不是一个有效的 HTML 元素标签名。`);
-    }
-
-    // 创建 HTML 元素
-
-    let element = document.createElement(elemName);
-
-    // 解析传入的参数
-    const { props, childNodes } = parseHyperscriptArgs(args);
-
-    // 设置元素属性
-    setProps(element, props);
-
-    // 添加子节点
-    normalizeChildNodes(childNodes).forEach(child => {
-        element.appendChild(child); // 将子节点附加到元素
-    });
-
-    Object.assign(element, {
-        /**
-         * 
-         * @param {string} event 
-         * @param {(event$: Observable<Event>) => Subscription} subscriber 
-         */
-        pipeEvent(event, subscriber) {
-            return pipeEvent(element)(event, subscriber)
-        },
-        /**
-         * 
-         * @param {string} event 
-         * @param {((value: Event) => void) | import('rxjs').Observer<Event>} observer 
-         */
-        subscribeEvent(event, observer) {
-            return subscribeEvent(element)(event, observer)
-        },
-
-        unsubscribe() {
-            if ('subscription' in element && element.subscription instanceof Subscription) {
-                element.subscription.unsubscribe(); // 取消订阅
-                delete element.subscription; // 删除属性
-            }
-        }
-
-    });
-
-    return /** @type {HyperscriptElement} */(element); // 返回创建的元素
-}
-
-const tagNames = new Set([
-    "a",
-    "abbr",
-    "address",
-    "area",
-    "article",
-    "aside",
-    "audio",
-    "b",
-    "bdi",
-    "bdo",
-    "blockquote",
-    "br",
-    "button",
-    "caption",
-    "cite",
-    "code",
-    "col",
-    "colgroup",
-    "data",
-    "datalist",
-    "dd",
-    "del",
-    "details",
-    "dfn",
-    "dialog",
-    "div",
-    "dl",
-    "dt",
-    "em",
-    "fieldset",
-    "figcaption",
-    "figure",
-    "footer",
-    "form",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "header",
-    "hgroup",
-    "hr",
-    "i",
-    "img",
-    "input",
-    "ins",
-    "kbd",
-    "label",
-    "legend",
-    "li",
-    "main",
-    "mark",
-    "menu",
-    "menuitem",
-    "meter",
-    "nav",
-    "ol",
-    "optgroup",
-    "option",
-    "output",
-    "p",
-    "pre",
-    "progress",
-    "q",
-    "rb",
-    "rp",
-    "rt",
-    "rtc",
-    "ruby",
-    "s",
-    "samp",
-    "section",
-    "select",
-    "small",
-    "span",
-    "strong",
-    "sub",
-    "summary",
-    "sup",
-    "table",
-    "tbody",
-    "td",
-    "textarea",
-    "tfoot",
-    "th",
-    "thead",
-    "time",
-    "tr",
-    "track",
-    "tt",
-    "u",
-    "ul",
-    "video",
-    "wbr",
-
-])
-

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

@@ -1,75 +0,0 @@
-import { hyperscript } from './hyperscript';
-
-describe('hyperscript', () => {
-    test('should throw an error if elemName is not a valid string', () => {
-        let errorMessage = '参数 elemName 不是一个有效的 HTML 元素标签名。';
-        expect(() => hyperscript('')).toThrow(errorMessage);
-        expect(() => hyperscript(null)).toThrow(errorMessage);
-        expect(() => hyperscript(123)).toThrow(errorMessage);
-    });
-
-    test('should create an HTML element with the specified tag name', () => {
-        const element = hyperscript('div');
-        expect(element).toBeInstanceOf(HTMLElement);
-        expect(element.tagName.toLowerCase()).toBe('div');
-    });
-
-    test('should set properties on the created element', () => {
-        const element = hyperscript('div', { id: 'test-id', className: 'test-class' });
-        expect(element.id).toBe('test-id');
-        expect(element.className).toBe('test-class');
-    });
-
-    test('should append child nodes to the created element', () => {
-        const child1 = hyperscript('span');
-        const child2 = 'Hello, World!'
-        const element = hyperscript('div', {}, child1, child2);
-
-        expect(element.children.length).toBe(1);
-        expect(element.firstChild).toBe(child1);
-        expect(element.lastChild.nodeValue).toBe(child2);
-    });
-
-    test('should attach pipeEvent and subscribeEvent interfaces', () => {
-        const element = hyperscript('div');
-
-        // 验证 pipeEvent 方法是否存在
-        expect(typeof element.pipeEvent).toBe('function');
-
-        // const mockPipeHandler = jest.fn();
-        // element.pipeEvent('click', mockPipeHandler);
-        // element.dispatchEvent(new Event('click'));
-        // expect(mockPipeHandler).toHaveBeenCalled();
-
-        // 验证 subscribeEvent 方法是否存在
-        expect(typeof element.subscribeEvent).toBe('function');
-
-        // const mockSubscribeHandler = jest.fn();
-        // element.subscribeEvent('mouseover', mockSubscribeHandler);
-        // element.dispatchEvent(new Event('mouseover'));
-        // expect(mockSubscribeHandler).toHaveBeenCalled();
-    });
-
-    test('should release subscriptions when unsubscribe is called', () => {
-        const element = hyperscript('div');
-
-        // // 模拟附加订阅
-        // const mockSubscription = {
-        //     unsubscribe: jest.fn(),
-        // };
-        
-        // element.subscription = mockSubscription;
-
-        // 调用 unsubscribe
-        element.unsubscribe();
-
-        // 验证 unsubscribe 是否被调用
-        // expect(mockSubscription.unsubscribe).toHaveBeenCalled();
-        expect(element.subscription).toBeUndefined(); // 验证 subscription 是否被清空
-    });
-
-    test('should handle unsubscribe when no subscription exists', () => {
-        const element = hyperscript('div');
-        expect(() => element.unsubscribe()).not.toThrow();
-    });
-});

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

@@ -1,19 +0,0 @@
-export * from './displays'
-export * from './tabControls'
-
-export * from './checkbox'
-export * from './choice'
-export * from './collapse'
-export * from './flip'
-export * from './fragment'
-export * from './hyperscript'
-export * from './multiselect'
-export * from './numberbox'
-export * from './radio'
-export * from './select'
-export * from './tags'
-
-export * from './textarea'
-export * from './textbox'
-export * from './textNode';
-

package/src/hyperscript-rxjs/index.js

@@ -1,19 +0,0 @@
-export * from './displays'
-export * from './tabControls'
-
-export * from './checkbox'
-export * from './choice'
-export * from './collapse'
-export * from './flip'
-export * from './fragment'
-export * from './hyperscript'
-export * from './multiselect'
-export * from './numberbox'
-export * from './radio'
-export * from './select'
-export * from './tags'
-
-export * from './textarea'
-export * from './textbox'
-export * from './textNode';
-

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

@@ -1,18 +0,0 @@
-import { HyperscriptExtensions } from './HyperscriptExtensions';
-
-/**
- * 创建一个支持多选功能的 <select> 元素，并绑定选项的选中状态。
- * 必须手动添加控件更新 BehaviorSubject 的事件。
- * 
- * @param props - 配置对象，包含 <select> 元素的属性。
- * @param options - 一个或多个 <option> 元素，必须是 HTMLOptionElement 类型。
- * @returns 创建的 <select> 元素。
- * @throws 如果 props 不是对象，或者 options 中的选项未正确定义 selected 属性会抛出错误。
- */
-export function multiselect(
-  props: { 
-    oninput?: (e: Event) => void, 
-    onchange?: (e: Event) => void, 
-    [key: string]: any },
-  ...options: HTMLOptionElement[]
-): HyperscriptExtensions<HTMLSelectElement>;

package/src/hyperscript-rxjs/multiselect.js

@@ -1,41 +0,0 @@
-import { hyperscript } from './hyperscript'
-
-/**
- * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLSelectElement>} HyperscriptSelectElement
- */
-
-
-/**
- * 创建一个支持多选功能的 <select> 元素，并绑定选项的选中状态。必须手动添加控件更新BehaviorSubject的事件。
- * 
- * @param {{oninput?: (e:Event)=>void, onchange?: (e:Event)=>void, [key: string]: any}} props - 配置对象，包含 <select> 元素的属性。
- * @param {...HTMLOptionElement} options - 一个或多个 <option> 元素，必须是 HTMLOptionElement 类型。
- * 每个选项需要包含一个 `selected` 属性，该属性是一个 BehaviorSubject ，用于绑定选中状态。
- * @returns {HyperscriptSelectElement} - 创建的 <select> 元素。
- * @throws {Error} 如果 `props` 不是对象，或者 `options` 中的选项未正确定义 `selected` 属性。
- * 
- */
-export function multiselect(props, ...options) {
-    if (typeof props !== 'object' || props === null) {
-        throw new Error('`select` requires a `props` object.');
-    }
-    let { oninput, onchange, ...rest } = props
-
-    let elem = hyperscript('select', { ...rest, multiple: true }, ...options);
-
-    if (typeof oninput === 'function') {
-        elem.subscribeEvent('input', e => {
-            oninput(e)
-        });
-    }
-
-    if (typeof onchange === 'function') {
-        elem.subscribeEvent('change', e => {
-            onchange(e)
-        });
-    }
-
-    return /** @type {HyperscriptSelectElement} */(elem)
-
-}
-