hyperscript-rxjs 1.3.14 → 1.3.15

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

@@ -0,0 +1,20 @@
+import { Observable, Observer, Subscription } from 'rxjs';
+
+type HyperscriptExtensions<T extends HTMLElement> =
+  T & {
+
+    pipeEvent(
+      event: string,
+      subscriber: (input$: Observable<Event>) => Subscription
+    ): HyperscriptExtensions<T>;
+
+    subscribeEvent(
+      event: string,
+      observer: ((value: Event) => void) | Partial<Observer<Event>>
+    ): HyperscriptExtensions<T>;
+
+    unsubscribe(): void;
+
+    subscription?: Subscription;
+
+  };

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

@@ -0,0 +1,13 @@
+import { BehaviorSubject } from 'rxjs';
+import { HyperscriptExtensions } from './HyperscriptExtensions';
+
+/**
+ * 创建一个支持 RxJS 的复选框组件
+ * @param props - 复选框的属性对象
+ * @param props.checked - 可选的 RxJS BehaviorSubject，用于绑定复选框的选中状态
+ * @returns 返回一个增强的复选框元素
+ */
+export function checkbox(props: {
+  checked?: BehaviorSubject<boolean>,
+  [key: string]: any
+}): HyperscriptExtensions<HTMLInputElement>;

package/src/hyperscript-rxjs/checkbox.js

@@ -0,0 +1,47 @@
+import { map } from 'rxjs/operators';
+import { input } from './tags';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+/**
+ * @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLInputElement>} HyperscriptInputElement
+ */
+
+/**
+ * 创建一个支持 RxJS 的复选框组件。
+ *
+ * @param {{checked?:BehaviorSubject<boolean>, [key: string]: any}} props - 复选框的属性对象。
+ * @returns {HyperscriptInputElement} - 返回一个复选框元素。
+ */
+export function checkbox(props) {
+    if (typeof props !== 'object' || props === null) {
+        throw new Error('`checkbox` requires a `props` object.');
+    }
+
+    // 创建复选框元素，确保 type 为 'checkbox'
+    const elem = /** @type {HyperscriptInputElement}*/ (input({ ...props, type: 'checkbox' }));
+
+    // 如果传入了 checked 属性
+    if (props.checked && props.checked instanceof BehaviorSubject) {
+        // 监听复选框的 input 事件，并将选中状态推送到 Observable/Subject
+        let subscriber =
+            /**
+             * 
+             * @param {Observable<Event>} input$ 
+             * @returns 
+             */
+            input$ =>
+                input$.pipe(
+                    map(
+                        e => /** @type {HTMLInputElement} */(e.target).checked
+                    ) // 提取复选框的选中状态
+                ).subscribe(props.checked); // 推送选中状态到 Observable/Subject
+
+        elem.pipeEvent('input', subscriber); // 绑定事件处理器
+    } else {
+        throw new Error(
+            '`checkbox` requires a `checked` prop that is an instance of BehaviorSubject.'
+        );
+    }
+
+    return elem; // 返回复选框元素
+}

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

@@ -0,0 +1,68 @@
+import { BehaviorSubject } from 'rxjs';
+import { checkbox } from './checkbox';
+
+describe('checkbox', () => {
+    test('should create a checkbox element with default properties', () => {
+        const checked$ = new BehaviorSubject(false);
+        const elem = checkbox({ checked: checked$ });
+
+        // 验证元素类型
+        expect(elem.tagName).toBe('INPUT');
+        expect(elem.type).toBe('checkbox');
+
+        // 验证初始选中状态
+        expect(elem.checked).toBe(false);
+    });
+
+    test('should update BehaviorSubject when checkbox is toggled', () => {
+        const checked$ = new BehaviorSubject(false);
+        const elem = checkbox({ checked: checked$ });
+
+        // 初始状态
+        expect(checked$.value).toBe(false);
+
+        // 模拟用户点击复选框
+        elem.checked = true;
+        elem.dispatchEvent(new Event('input'));
+
+        // 验证 BehaviorSubject 的值是否更新
+        expect(checked$.value).toBe(true);
+
+        // 再次切换状态
+        elem.checked = false;
+        elem.dispatchEvent(new Event('input'));
+
+        // 验证 BehaviorSubject 的值是否更新
+        expect(checked$.value).toBe(false);
+    });
+
+    test('should throw an error if props is not an object', () => {
+        let errorMessage = '`checkbox` requires a `props` object.';
+        expect(() => checkbox(null)).toThrow(errorMessage);
+        expect(() => checkbox(undefined)).toThrow(errorMessage);
+        expect(() => checkbox()).toThrow(errorMessage);
+        expect(() => checkbox(42)).toThrow(errorMessage);
+    });
+
+    test('should throw an error if checked is not a BehaviorSubject', () => {
+        let errorMessage = '`checkbox` requires a `checked` prop that is an instance of BehaviorSubject.';
+        expect(() => checkbox({ checked: true })).toThrow(
+            errorMessage
+        );
+        expect(() => checkbox({ checked: null })).toThrow(
+            errorMessage
+        );
+        expect(() => checkbox({})).toThrow(
+            errorMessage
+        );
+    });
+
+    test('should support additional properties', () => {
+        const checked$ = new BehaviorSubject(false);
+        const elem = checkbox({ checked: checked$, id: 'test-checkbox', className: 'custom-class' });
+
+        // 验证额外属性
+        expect(elem.id).toBe('test-checkbox');
+        expect(elem.className).toBe('custom-class');
+    });
+});

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

@@ -0,0 +1,13 @@
+import { Observable } from 'rxjs';
+
+/**
+ * 根据 chosen$ 的字符值动态显示或隐藏一组不同字符标签的可能性元素块。
+ * 
+ * @param chosen$ - 一个可观察对象（如 BehaviorSubject），表示当前选中的可能性名称。
+ * @param possibilities - 一个对象，键为可能性名称，值为对应的 HTML 元素或 HTML 元素数组。
+ * @returns 包含所有可能性的 HTML 元素数组。
+ */
+export function choice(
+  chosen$: Observable<string>,
+  possibilities: Record<string, HTMLElement | HTMLElement[]>
+): HTMLElement[];

package/src/hyperscript-rxjs/choice.js

@@ -0,0 +1,24 @@
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { collapse } from './collapse';
+
+/**
+ * @param {Observable<string>} chosen$ 
+ * @param {Record<string, HTMLElement | HTMLElement[]>} possibilities 
+ * @returns {HTMLElement[]}
+ */
+export function choice(chosen$, possibilities) {
+    // 遍历 possibilities，将每个可能性绑定到 collapse
+    const elems = Object.entries(possibilities)
+        .map(([key, possibility]) => {
+            const hidden$ =
+                chosen$.pipe(
+                    map(selectedKey => selectedKey !== key) // 如果当前选中的键不是当前可能性，则隐藏
+                );
+            return collapse(hidden$, possibility); // 绑定 hidden 属性
+        })
+        .reduce((acc, cur) => [...acc, ...cur], []); // 扁平化数组
+
+    return elems;
+}

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

@@ -0,0 +1,108 @@
+import { BehaviorSubject } from 'rxjs';
+import { choice } from './choice';
+import { div } from './tags';
+
+describe('choice', () => {
+    test('should display the chosen possibility and hide others', () => {
+        const chosen = new BehaviorSubject('option1');
+
+        const div1 = div({ hidden: false }, 'Option 1');
+        const div2 = div('Option 2');
+
+        const possibilities = {
+            option1: div1,
+            option2: div2,
+        };
+
+        choice(chosen, possibilities);
+
+        // 初始状态：显示 div1，隐藏 div2
+        expect(div1.hidden).toBe(false);
+        expect(div2.hidden).toBe(true);
+
+        // 更新 chosen
+        chosen.next('option2');
+        expect(div1.hidden).toBe(true);
+        expect(div2.hidden).toBe(false);
+    });
+
+    test('should handle nested arrays of possibilities', () => {
+        const chosen = new BehaviorSubject('group1');
+
+        const group1 = [
+            div({ hidden: false }, 'Group 1 - Item 1'),
+            div({ hidden: false }, 'Group 1 - Item 2'),
+        ];
+
+        const group2 = [
+            div('Group 2 - Item 1'),
+            div('Group 2 - Item 2'),
+        ];
+
+        const possibilities = {
+            group1: group1,
+            group2: group2,
+        };
+
+        choice(chosen, possibilities);
+
+        // 初始状态：显示 group1，隐藏 group2
+        group1.forEach(item => expect(item.hidden).toBe(false));
+        group2.forEach(item => expect(item.hidden).toBe(true));
+
+        // 更新 chosen
+        chosen.next('group2');
+        group1.forEach(item => expect(item.hidden).toBe(true));
+        group2.forEach(item => expect(item.hidden).toBe(false));
+    });
+
+    test('should return all elements as a flat array', () => {
+        const chosen = new BehaviorSubject('option1');
+
+        const div1 = div();
+        const div2 = div();
+        const div3 = div();
+
+        const possibilities = {
+            option1: [div1, div2],
+            option2: div3,
+        };
+
+        const result = choice(chosen, possibilities);
+
+        expect(result).toEqual([div1, div2, div3]);
+    });
+
+    test('should handle empty possibilities', () => {
+        const chosen = new BehaviorSubject('option1');
+
+        const possibilities = {};
+
+        const result = choice(chosen, possibilities);
+
+        expect(result).toEqual([]);
+    });
+
+    test('should handle invalid chosen values gracefully', () => {
+        const chosen = new BehaviorSubject('invalidOption');
+
+        const div1 = div();
+        const div2 = div();
+
+        const possibilities = {
+            option1: div1,
+            option2: div2,
+        };
+
+        choice(chosen, possibilities);
+
+        // 初始状态：所有元素都隐藏
+        expect(div1.hidden).toBe(true);
+        expect(div2.hidden).toBe(true);
+
+        // 更新 chosen
+        chosen.next('option1');
+        expect(div1.hidden).toBe(false);
+        expect(div2.hidden).toBe(true);
+    });
+});

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

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+
+/**
+ * 显示或隐藏包含的元素，通过绑定 hidden 属性实现动态显示或隐藏。
+ * 
+ * @param hidden$ - 一个可观察对象（如 BehaviorSubject），用于控制元素的 hidden 属性。
+ * @param elements - 一个或多个 HTML 元素，或者包含 HTML 元素的数组。
+ * @returns 处理后的元素数组。
+ * @throws 如果 elements 中包含非 HTMLElement 节点会抛出错误。
+ */
+export function collapse(
+  hidden$: Observable<boolean>,
+  ...elements: (HTMLElement | HTMLElement[])[]
+): HTMLElement[];

package/src/hyperscript-rxjs/collapse.js

@@ -0,0 +1,32 @@
+import { Observable } from 'rxjs';
+
+import { unwrapArgs } from '../array/unwrapArgs';
+import { subscribeProp } from '../props/subscribeProp';
+
+/**
+ * 显示或隐藏包含的元素。
+ * 
+ * `collapse` 函数通过绑定 `hidden` 属性，实现一组 HTML 元素的动态显示或隐藏。
+ * 
+ * @param {Observable<boolean>} hidden$ - 一个可观察对象（如 BehaviorSubject），用于控制元素的 `hidden` 属性。
+ * @param {...HTMLElement|HTMLElement[]} elements - 一个或多个 HTML 元素，或者包含 HTML 元素的数组。
+ * @returns {HTMLElement[]} - 处理后的元素数组。
+ * 
+ * @throws {Error} 如果 `elements` 中包含非元素节点（如 TextNode）。
+ * 
+ */
+export function collapse(hidden$, ...elements) {
+    // 支持子元素包含在数组中：collapse([a, b, c]) 或 collapse(a, b, c)
+    let elems = unwrapArgs(elements);
+
+    elems.forEach(elem => {
+        if (!(elem instanceof HTMLElement)) {
+            throw new Error('`collapse` only supports HTMLElement nodes.');
+        }
+
+        // 绑定 hidden 属性到可观察对象
+        subscribeProp(elem, 'hidden', hidden$);
+    });
+
+    return elems;
+}

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

@@ -0,0 +1,67 @@
+import { BehaviorSubject } from 'rxjs';
+import { collapse } from './collapse';
+import { div } from './tags';
+import { textNode } from './textNode';
+
+describe('collapse', () => {
+    test('should bind hidden property to a single element', () => {
+        const hidden = new BehaviorSubject(false);
+        const div1 = div();
+
+        collapse(hidden, div1);
+
+        // 初始状态
+        expect(div1.hidden).toBe(false);
+
+        // 更新 BehaviorSubject
+        hidden.next(true);
+        expect(div1.hidden).toBe(true);
+
+        hidden.next(false);
+        expect(div1.hidden).toBe(false);
+    });
+
+    test('should bind hidden property to multiple elements', () => {
+        const hidden = new BehaviorSubject(false);
+        const div1 = div();
+        const div2 = div();
+
+        collapse(hidden, div1, div2);
+
+        // 初始状态
+        expect(div1.hidden).toBe(false);
+        expect(div2.hidden).toBe(false);
+
+        // 更新 BehaviorSubject
+        hidden.next(true);
+        expect(div1.hidden).toBe(true);
+        expect(div2.hidden).toBe(true);
+
+        hidden.next(false);
+        expect(div1.hidden).toBe(false);
+        expect(div2.hidden).toBe(false);
+    });
+
+    test('should throw an error if elements contain non-HTMLElement nodes', () => {
+        const hidden = new BehaviorSubject(false);
+        const textNode1 = textNode('This is a text node');
+
+        expect(() => collapse(hidden, textNode1)).toThrow('`collapse` only supports HTMLElement nodes.');
+    });
+
+    test('should return the processed elements', () => {
+        const hidden = new BehaviorSubject(false);
+        const div1 = div();
+        const div2 = div();
+
+        const result = collapse(hidden, div1, div2);
+
+        expect(result).toEqual([div1, div2]);
+    });
+
+    test('should handle empty elements array', () => {
+        const hidden = new BehaviorSubject(false);
+        const result = collapse(hidden);
+        expect(result).toEqual([]);
+    });
+});

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

@@ -0,0 +1,5 @@
+/**
+ * 一个包含所有 HTML 块级元素标签名称（大写）的集合。
+ * 用于判断某个标签是否为块级元素。
+ */
+export const blockLevelFamily: Set<string>;

package/src/hyperscript-rxjs/displays/blockLevelFamily.js

@@ -0,0 +1,51 @@
+/**
+ * 一个包含所有 HTML 块级元素标签名称的集合。
+ * 
+ * 块级元素是 HTML 中的一类元素，它们通常会独占一行，并且可以包含内联元素或其他块级元素。
+ * 该集合中的标签名称均为大写，便于快速判断某个元素是否为块级元素。
+ * 
+ * 常见的块级元素包括：
+ * - 文本结构元素：`P`、`H1`-`H6`、`ADDRESS` 等。
+ * - 列表元素：`UL`、`OL`、`LI`、`DL`、`DT`、`DD`。
+ * - 容器元素：`DIV`、`SECTION`、`ARTICLE`、`ASIDE`、`NAV` 等。
+ * - 表单元素：`FORM`、`FIELDSET`。
+ * - 表格元素：`TABLE`。
+ * - 其他：`BLOCKQUOTE`、`PRE`、`FIGURE` 等。
+ * 
+ * @constant {Set<string>} blockLevelFamily
+ */
+export const blockLevelFamily = new Set([
+    'ADDRESS',
+    'ARTICLE',
+    'ASIDE',
+    'BLOCKQUOTE',
+    'DD',
+    'DETAILS',
+    'DIALOG',
+    'DIV',
+    'DL',
+    'DT',
+    'FIELDSET',
+    'FIGCAPTION',
+    'FIGURE',
+    'FOOTER',
+    'FORM',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'HEADER',
+    'HGROUP',
+    'HR',
+    'LI',
+    'MAIN',
+    'NAV',
+    'OL',
+    'P',
+    'PRE',
+    'SECTION',
+    'TABLE',
+    'UL',
+])

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

@@ -0,0 +1,7 @@
+/**
+ * 获取 HTML 元素的默认 CSS `display` 值。
+ * 
+ * @param elem - 要获取 `display` 值的 HTML 元素。
+ * @returns 元素的默认 `display` 值，如 'block'、'inline'、'table-row'、'unset' 等。
+ */
+export function getDisplay(elem: HTMLElement): string;

package/src/hyperscript-rxjs/displays/getDisplay.js

@@ -0,0 +1,51 @@
+import { blockLevelFamily } from './blockLevelFamily'
+import { inlineFamily } from './inlineFamily'
+
+/**
+ * 获取 HTML 元素的默认 CSS `display` 值。
+ * 
+ * 根据元素的标签名称 (`tagName`)，返回其对应的默认 `display` 属性值。
+ * 支持表格相关标签、块级元素、内联元素等常见 HTML 标签。
+ * 
+ * @param {HTMLElement} elem - 要获取 `display` 值的 HTML 元素。
+ * @returns {string} - 元素的默认 `display` 值：
+ * - 表格相关标签：
+ *   - `TBODY` -> `'table-row-group'`
+ *   - `THEAD` -> `'table-header-group'`
+ *   - `TFOOT` -> `'table-footer-group'`
+ *   - `TR` -> `'table-row'`
+ *   - `TD`、`TH` -> `'table-cell'`
+ *   - `COLGROUP` -> `'table-column-group'`
+ *   - `COL` -> `'table-column'`
+ *   - `CAPTION` -> `'table-caption'`
+ * - 块级元素 -> `'block'`
+ * - 内联元素 -> `'inline'`
+ * - 未知标签 -> `'unset'`
+ * 
+ */
+export function getDisplay(elem) {
+    if (elem.tagName === 'TBODY') {
+        return 'table-row-group'
+    } else if (elem.tagName === 'THEAD') {
+        return 'table-header-group'
+    } else if (elem.tagName === 'TFOOT') {
+        return 'table-footer-group'
+    } else if (elem.tagName === 'TR') {
+        return 'table-row'
+    } else if (elem.tagName === 'TD' || elem.tagName === 'TH') {
+        return 'table-cell'
+    } else if (elem.tagName === 'COLGROUP') {
+        return 'table-column-group'
+    } else if (elem.tagName === 'COL') {
+        return 'table-column'
+    } else if (elem.tagName === 'CAPTION') {
+        return 'table-caption'
+    } else if (blockLevelFamily.has(elem.tagName)) {
+        return 'block'
+    } else if (inlineFamily.has(elem.tagName)) {
+        return 'inline'
+    } else {
+        return 'unset'
+    }
+}
+

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

@@ -0,0 +1,56 @@
+import { getDisplay } from './getDisplay';
+import { blockLevelFamily } from './blockLevelFamily';
+import { inlineFamily } from './inlineFamily';
+
+describe('getDisplay', () => {
+    test('should return correct display value for table-related tags', () => {
+        const tbody = document.createElement('tbody');
+        expect(getDisplay(tbody)).toBe('table-row-group');
+
+        const thead = document.createElement('thead');
+        expect(getDisplay(thead)).toBe('table-header-group');
+
+        const tfoot = document.createElement('tfoot');
+        expect(getDisplay(tfoot)).toBe('table-footer-group');
+
+        const tr = document.createElement('tr');
+        expect(getDisplay(tr)).toBe('table-row');
+
+        const td = document.createElement('td');
+        expect(getDisplay(td)).toBe('table-cell');
+
+        const th = document.createElement('th');
+        expect(getDisplay(th)).toBe('table-cell');
+
+        const colgroup = document.createElement('colgroup');
+        expect(getDisplay(colgroup)).toBe('table-column-group');
+
+        const col = document.createElement('col');
+        expect(getDisplay(col)).toBe('table-column');
+
+        const caption = document.createElement('caption');
+        expect(getDisplay(caption)).toBe('table-caption');
+    });
+
+    test('should return "block" for block-level elements', () => {
+        blockLevelFamily.forEach(tagName => {
+            const elem = document.createElement(tagName.toLowerCase());
+            expect(getDisplay(elem)).toBe('block');
+        });
+    });
+
+    test('should return "inline" for inline elements', () => {
+        inlineFamily.forEach(tagName => {
+            const elem = document.createElement(tagName.toLowerCase());
+            expect(getDisplay(elem)).toBe('inline');
+        });
+    });
+
+    test('should return "unset" for unknown tags', () => {
+        const customElement = document.createElement('custom-element');
+        expect(getDisplay(customElement)).toBe('unset');
+
+        const unknownElement = document.createElement('unknown');
+        expect(getDisplay(unknownElement)).toBe('unset');
+    });
+});

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

@@ -0,0 +1,3 @@
+export * from './blockLevelFamily'
+export * from './getDisplay'
+export * from './inlineFamily'

package/src/hyperscript-rxjs/displays/index.js

@@ -0,0 +1,3 @@
+export * from './blockLevelFamily'
+export * from './getDisplay'
+export * from './inlineFamily'

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

@@ -0,0 +1,5 @@
+/**
+ * 一个包含所有 HTML 内联元素标签名称（大写）的集合。
+ * 用于判断某个标签是否为内联元素。
+ */
+export const inlineFamily: Set<string>;

package/src/hyperscript-rxjs/displays/inlineFamily.js

@@ -0,0 +1,73 @@
+/**
+ * 一个包含所有 HTML 内联元素标签名称的集合。
+ * 
+ * 内联元素是 HTML 中的一类元素，它们不会独占一行，通常用于包裹文本或其他内联元素。
+ * 该集合中的标签名称均为大写，便于快速判断某个元素是否为内联元素。
+ * 
+ * 常见的内联元素包括：
+ * - 文本样式：`B`、`I`、`U`、`STRONG`、`EM`、`MARK` 等。
+ * - 链接和交互：`A`、`BUTTON`、`LABEL`、`INPUT`、`SELECT`、`TEXTAREA` 等。
+ * - 媒体和嵌入：`IMG`、`SVG`、`VIDEO`、`AUDIO`、`CANVAS` 等。
+ * - 其他：`SPAN`、`BR`、`WBR`、`CODE`、`Q` 等。
+ * 
+ * @constant {Set<string>} inlineFamily
+ */
+export const inlineFamily = new Set([
+    'A',
+    'ABBR',
+    'ACRONYM',
+    'AUDIO',
+    'B',
+    'BDI',
+    'BDO',
+    'BIG',
+    'BR',
+    'BUTTON',
+    'CANVAS',
+    'CITE',
+    'CODE',
+    'DATA',
+    'DATALIST',
+    'DEL',
+    'DFN',
+    'EM',
+    'EMBED',
+    'I',
+    'IFRAME',
+    'IMG',
+    'INPUT',
+    'INS',
+    'KBD',
+    'LABEL',
+    'MAP',
+    'MARK',
+    'METER',
+    'NOSCRIPT',
+    'OBJECT',
+    'OUTPUT',
+    'PICTURE',
+    'PROGRESS',
+    'Q',
+    'RUBY',
+    'S',
+    'SAMP',
+    'SCRIPT',
+    'SELECT',
+    'SLOT',
+    'SMALL',
+    'SPAN',
+    'STRONG',
+    'SUB',
+    'SUP',
+    'SVG',
+    'TEMPLATE',
+    'TEXTAREA',
+    'TIME',
+    'TT',
+    'U',
+    'VAR',
+    'VIDEO',
+    'WBR',
+]);
+
+// developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements