hyperscript-rxjs 1.3.14 → 1.3.15

package/src/props/setProps.js

@@ -0,0 +1,47 @@
+import { splitObjectByObservable } from '../object/splitObjectByObservable';
+import { setProp } from './setProp';
+import { subscribeProp } from './subscribeProp';
+
+/**
+ * 为 DOM 元素设置属性，包括静态属性和动态属性（Observable）。
+ *
+ * @param {HTMLElement} element - 要设置属性的 DOM 元素。
+ * @param {Object} props - 包含属性键值对的对象，其中值可以是普通值或 Observable。
+ * @returns {HTMLElement} - 返回元素本身，支持链式调用。
+ * @throws {Error} 如果参数无效或设置属性失败。
+ */
+export function setProps(element, props) {
+    // 参数检查
+    if (!(element instanceof HTMLElement)) {
+        throw new Error('参数 "element" 必须是一个有效的 DOM 元素。');
+    }
+    if (typeof props !== 'object' || props === null) {
+        throw new Error('参数 "props" 必须是一个非空对象。');
+    }
+
+    // 将属性分为 Observable 和普通值
+    const [observables, scalars] = splitObjectByObservable(props);
+
+    // 设置普通属性
+    Object.entries(scalars)
+        .forEach(([key, value]) => {
+            try {
+                setProp(element, key, value);
+            } catch (error) {
+                console.error(`设置属性 "${key}" 时发生错误:`, error);
+            }
+        });
+
+    // 注意顺序，订阅动态属性要在设置静态属性之后
+    Object.entries(observables)
+        .forEach(([key, value$]) => {
+            try {
+                subscribeProp(element, key, value$);
+            } catch (error) {
+                console.error(`订阅属性 "${key}" 时发生错误:`, error);
+            }
+        });
+
+    // 返回元素本身，支持链式调用
+    return element;
+}

package/src/props/setProps.test.js

@@ -0,0 +1,97 @@
+import { setProps } from './setProps';
+import { setProp } from './setProp';
+import { subscribeProp } from './subscribeProp';
+import { of } from 'rxjs';
+
+jest.mock('./setProp');
+jest.mock('./subscribeProp');
+
+describe('setProps', () => {
+    let div;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        jest.clearAllMocks();
+    });
+
+    test('should set static properties correctly', () => {
+        const props = {
+            id: 'myDiv',
+            className: 'container',
+            style: { color: 'red' }
+        };
+
+        setProps(div, props);
+
+        expect(setProp).toHaveBeenCalledWith(div, 'id', 'myDiv');
+        expect(setProp).toHaveBeenCalledWith(div, 'className', 'container');
+        expect(setProp).toHaveBeenCalledWith(div, 'style', { color: 'red' });
+    });
+
+    test('should subscribe to observable properties', () => {
+        const props = {
+            textContent$: of('Hello', 'World')
+        };
+
+        setProps(div, props);
+
+        expect(subscribeProp).toHaveBeenCalledWith(div, 'textContent$', expect.any(Object));
+    });
+
+    test('should handle both static and observable properties', () => {
+        const props = {
+            id: 'myDiv',
+            textContent$: of('Hello', 'World')
+        };
+
+        setProps(div, props);
+
+        expect(setProp).toHaveBeenCalledWith(div, 'id', 'myDiv');
+        expect(subscribeProp).toHaveBeenCalledWith(div, 'textContent$', expect.any(Object));
+    });
+
+    test('should throw an error if element is not a valid DOM element', () => {
+        const props = { id: 'myDiv' };
+
+        expect(() => setProps(null, props)).toThrow('参数 "element" 必须是一个有效的 DOM 元素。');
+        expect(() => setProps({}, props)).toThrow('参数 "element" 必须是一个有效的 DOM 元素。');
+    });
+
+    test('should throw an error if props is not a valid object', () => {
+        expect(() => setProps(div, null)).toThrow('参数 "props" 必须是一个非空对象。');
+        expect(() => setProps(div, 'invalid')).toThrow('参数 "props" 必须是一个非空对象。');
+    });
+
+    test('should log errors when setProp fails', () => {
+        const props = { id: 'myDiv' };
+        setProp.mockImplementation(() => {
+            throw new Error('Failed to set property');
+        });
+
+        console.error = jest.fn();
+
+        setProps(div, props);
+
+        expect(console.error).toHaveBeenCalledWith('设置属性 "id" 时发生错误:', expect.any(Error));
+    });
+
+    test('should log errors when subscribeProp fails', () => {
+        const props = { textContent$: of('Hello') };
+        subscribeProp.mockImplementation(() => {
+            throw new Error('Failed to subscribe to property');
+        });
+
+        console.error = jest.fn();
+
+        setProps(div, props);
+
+        expect(console.error).toHaveBeenCalledWith('订阅属性 "textContent$" 时发生错误:', expect.any(Error));
+    });
+
+    test('should return the element itself for chainable calls', () => {
+        const props = { id: 'myDiv' };
+        const result = setProps(div, props);
+
+        expect(result).toBe(div);
+    });
+});

package/src/props/subscribeProp.d.ts

@@ -0,0 +1,16 @@
+import { Observable } from 'rxjs';
+
+/**
+ * 订阅一个 Observable，将其发出的值动态设置为指定 DOM 元素的属性值。
+ * 
+ * @param element - 要设置属性的 DOM 元素。
+ * @param key - 属性名称，支持普通属性、嵌套属性（如 "style.color"）或以 "." 开头的类名（如 ".active"）。
+ * @param value$ - 一个 RxJS Observable ，用于发出属性值。
+ * @returns 返回元素本身，支持链式调用。
+ * @throws 如果参数无效或订阅失败会抛出错误。
+ */
+export function subscribeProp(
+  element: HTMLElement,
+  key: string,
+  value$: Observable<any>
+): HTMLElement;

package/src/props/subscribeProp.js

@@ -0,0 +1,47 @@
+import { startWith } from 'rxjs/operators';
+import { attachSubscriptionToNode } from '../nodes/attachSubscriptionToNode';
+import { setProp } from './setProp';
+import { isObservable, Observable } from 'rxjs';
+
+/**
+ * 
+ * 订阅一个 BehaviorSubject，将其发出的值动态设置为指定 DOM 元素的属性值。
+ * 
+ * @template T
+ * @param {HTMLElement} element - 要设置属性的 DOM 元素。
+ * @param {string} key - 属性名称，支持普通属性、嵌套属性（如 "style.color"）或以 "." 开头的类名（如 ".active"）。
+ * @param {Observable<T>} value$ - 一个 RxJS Observable ，用于发出属性值。
+ * @returns {HTMLElement} - 返回元素本身，支持链式调用。
+ * @throws {Error} 如果参数无效或订阅失败。
+ */
+export function subscribeProp(element, key, value$) {
+    // 参数检查，确保输入有效
+    if (!(element instanceof HTMLElement)) {
+        throw new Error('参数 "element" 必须是一个有效的 DOM 元素。');
+    }
+    if (typeof key !== 'string') {
+        throw new Error('参数 "key" 必须是一个字符串。');
+    }
+    if (!isObservable(value$)) {
+        throw new Error('参数 "value$" 必须是一个有效的 Observable。');
+    }
+
+    // 创建订阅，将 BehaviorSubject 的值动态设置为元素的属性
+    const subscription =
+        value$.pipe(
+            startWith(0)
+        ).subscribe({
+            next: value => {
+                setProp(element, key, value);
+            },
+            error: e => {
+                setProp(element, key, e.message);
+            }
+        });
+
+    // 将订阅附加到 DOM 节点，便于统一管理
+    attachSubscriptionToNode(element, subscription);
+
+    // 返回元素本身，支持链式调用
+    return element;
+}

package/src/props/subscribeProp.test.js

@@ -0,0 +1,81 @@
+import { of, throwError } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { subscribeProp } from './subscribeProp';
+import { setProp } from './setProp';
+import { attachSubscriptionToNode } from '../nodes/attachSubscriptionToNode';
+
+jest.mock('./setProp');
+jest.mock('../nodes/attachSubscriptionToNode');
+
+describe('subscribeProp', () => {
+    let div;
+
+    beforeEach(() => {
+        div = document.createElement('div');
+        jest.clearAllMocks();
+    });
+
+    test('should set a property dynamically based on Observable values', (done) => {
+        const value$ = of('red', 'blue', 'green').pipe(delay(10));
+        subscribeProp(div, 'style.color', value$);
+
+        setTimeout(() => {
+            expect(setProp).toHaveBeenCalledWith(div, 'style.color', 'red');
+            expect(setProp).toHaveBeenCalledWith(div, 'style.color', 'blue');
+            expect(setProp).toHaveBeenCalledWith(div, 'style.color', 'green');
+            done();
+        }, 50);
+    });
+
+    test('should handle errors in Observable and set error message as property', (done) => {
+        const error$ = throwError(() => new Error('Something went wrong')).pipe(delay(10));
+        subscribeProp(div, 'textContent', error$);
+
+        setTimeout(() => {
+            expect(setProp).toHaveBeenCalledWith(div, 'textContent', 'Something went wrong');
+            done();
+        }, 20);
+    });
+
+    test('should attach subscription to the DOM node', () => {
+        const value$ = of('test');
+        subscribeProp(div, 'id', value$);
+
+        expect(attachSubscriptionToNode).toHaveBeenCalledTimes(1);
+        expect(attachSubscriptionToNode).toHaveBeenCalledWith(
+            div,
+            expect.any(Object) // 确保传递的是一个订阅对象
+        );
+    });
+
+    test('should throw an error if element is not a valid DOM element', () => {
+        const value$ = of('test');
+        expect(() => subscribeProp(null, 'id', value$)).toThrow(
+            '参数 "element" 必须是一个有效的 DOM 元素。'
+        );
+        expect(() => subscribeProp({}, 'id', value$)).toThrow(
+            '参数 "element" 必须是一个有效的 DOM 元素。'
+        );
+    });
+
+    test('should throw an error if key is not a string', () => {
+        const value$ = of('test');
+        expect(() => subscribeProp(div, null, value$)).toThrow('参数 "key" 必须是一个字符串。');
+        expect(() => subscribeProp(div, 123, value$)).toThrow('参数 "key" 必须是一个字符串。');
+    });
+
+    test('should throw an error if value$ is not a valid Observable', () => {
+        expect(() => subscribeProp(div, 'id', null)).toThrow(
+            '参数 "value$" 必须是一个有效的 Observable。'
+        );
+        expect(() => subscribeProp(div, 'id', {})).toThrow(
+            '参数 "value$" 必须是一个有效的 Observable。'
+        );
+    });
+
+    test('should support chainable calls', () => {
+        const value$ = of('test');
+        const result = subscribeProp(div, 'id', value$);
+        expect(result).toBe(div);
+    });
+});

package/src/ramda/compose.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 函数优先的管道组合工具（从右向左执行）。
+ * @public
+ * @param fns - 要组合的函数列表。
+ * @returns 组合后的函数（无参数时返回恒等函数 x => x）。
+ * @throws {TypeError} 当参数包含非函数时抛出错误。
+ */
+export function compose(
+  ...fns: Array<(arg: any) => any>
+): (input: any) => any;

package/src/ramda/compose.js

@@ -0,0 +1,36 @@
+/**
+ * 函数优先的管道组合工具（从右向左执行）
+ * @public
+ * @param {...function(*): *} fns - 要组合的函数列表
+ * @returns {function(*): *} 组合后的函数（无参数时返回恒等函数 x => x）
+ * @throws {TypeError} 当参数包含非函数时抛出错误
+ */
+export const compose = (...fns) => {
+  if (!fns || fns.length === 0) {
+    /** @param {*} x */
+    return x => x;
+  }
+
+  const firstNonFunctionIndex = fns.findIndex(fn => typeof fn !== 'function');
+  if (firstNonFunctionIndex !== -1) {
+    const invalidFn = fns[firstNonFunctionIndex];
+    const errorType =
+      invalidFn === null ? 'null' :
+        invalidFn === undefined ? 'undefined' :
+          typeof invalidFn;
+    throw new TypeError(
+      `所有参数必须是函数，但第 ${firstNonFunctionIndex} 个参数是: ${errorType}`
+    );
+  }
+
+  if (fns.length === 1) {
+    return fns[0];
+  }
+
+  // 标注 args 类型
+  return fns.reduce(
+    (acc, fn) =>
+      /** @returns {*} */
+      (...args) => acc(fn(...args))
+  );
+};

package/src/ramda/compose.test.js

@@ -0,0 +1,73 @@
+import { compose } from './compose';
+
+describe('compose function', () => {
+  describe('基础功能', () => {
+    test('空参数时返回恒等函数', () => {
+      const identity = compose();
+      expect(identity(42)).toBe(42);
+      expect(identity('hello')).toBe('hello');
+      expect(identity(null)).toBeNull();
+      expect(identity(undefined)).toBeUndefined();
+    });
+
+    test('单函数时直接返回该函数', () => {
+      const mockFn = jest.fn(x => x * 2);
+      const result = compose(mockFn);
+      expect(result).toBe(mockFn);
+      expect(result(5)).toBe(10);
+      expect(mockFn).toHaveBeenCalledWith(5);
+    });
+
+    test('正确执行从右向左的函数组合', () => {
+      const add1 = x => x + 1;
+      const square = x => x * x;
+      const double = x => x * 2;
+      
+      const composed = compose(add1, square, double);
+      expect(composed(3)).toBe(37); // (3*2)^2 + 1 = 37
+    });
+
+    test('处理多参数函数', () => {
+      const sum = (a, b) => a + b;
+      const triple = x => x * 3;
+      
+      const composed = compose(triple, sum);
+      expect(composed(2, 4)).toBe(18); // (2+4)*3
+    });
+  });
+
+  describe('类型检查', () => {
+    test('检测第一个非函数参数并报错', () => {
+      const errorCases = [
+        { input: [42], expected: '第 0 个参数是: number' },
+        { input: [x => x, null], expected: '第 1 个参数是: null' },
+        { input: [undefined, x => x], expected: '第 0 个参数是: undefined' },
+        { input: ['text', x => x], expected: '第 0 个参数是: string' },
+        { input: [{}, x => x], expected: '第 0 个参数是: object' },
+        { input: [[], x => x], expected: '第 0 个参数是: object' }
+      ];
+
+      errorCases.forEach(({ input, expected }) => {
+        expect(() => compose(...input)).toThrow(TypeError);
+        expect(() => compose(...input)).toThrow(expected);
+      });
+    });
+
+    test('混合类型参数中检测第一个错误', () => {
+      const add1 = x => x + 1;
+      expect(() => compose(add1, 'text', 42, null))
+        .toThrow('第 1 个参数是: string');
+    });
+  });
+
+  describe('边界情况', () => {
+    test('处理返回undefined的函数', () => {
+      const noop = () => undefined;
+      const toString = x => String(x);
+      
+      const composed = compose(toString, noop);
+      expect(composed(123)).toBe('undefined');
+    });
+
+  });
+});

package/src/ramda/cond.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 条件分支函数，根据分支依次判断并执行。
+ * @public
+ * @param branches - 分支数组，每个分支可以是函数或 [predicate, action] 形式的数组。
+ * @returns 一个函数，调用时会依次判断分支并返回第一个匹配的结果。
+ */
+export function cond<T extends any[], R>(
+  branches: (
+    | ((...args: T) => R | undefined | void | null | false)
+    | [ (...args: T) => any, (...args: [...T, any]) => R ]
+  )[]
+): (...args: T) => R | undefined;

package/src/ramda/cond.js

@@ -0,0 +1,29 @@
+/**
+ * 条件分支函数，依次判断分支并返回第一个匹配的结果。
+ *
+ * @public
+ * @param {Array<Function|[Function, Function]>} branches - 分支数组，每个分支可以是函数或 [谓词函数, 动作函数] 形式
+ * @returns {function(...*): *} 组合后的条件函数
+ */
+export const cond = function cond(branches) {
+  /**
+   * @this any
+   */
+  return function () {
+    for (const branch of branches) {
+      if (typeof branch === 'function') {
+        let tryAction = branch.apply(this, arguments)
+        if (tryAction) {
+          return tryAction;
+        }
+      } else if (Array.isArray(branch)) {
+        let predicate = branch[0].apply(this, arguments)
+        if (predicate) {
+          let args = Array.from(arguments)
+          args[args.length] = predicate
+          return branch[1].apply(this, args);
+        }
+      }
+    }
+  }
+}

package/src/ramda/cond.test.js

@@ -0,0 +1,88 @@
+import { cond } from './cond'
+
+describe('cond', () => {
+  test('returns a function', () => {
+    let y = typeof cond([])
+    expect(y).toEqual('function');
+  });
+
+  test('returns a conditional function', () => {
+    let fn = cond([
+      [x => x === 0, x => ('water freezes at 0°C')],
+      [x => x === 100, x => ('water boils at 100°C')],
+      [x => true, function (temp) { return 'nothing special happens at ' + temp + '°C'; }]
+    ]);
+
+    expect(fn(0)).toEqual('water freezes at 0°C');
+    expect(fn(50)).toEqual('nothing special happens at 50°C');
+    expect(fn(100)).toEqual('water boils at 100°C');
+  });
+
+  test('returns a function which returns undefined if none of the predicates matches', () => {
+    let fn = cond([
+      [x => x === ('foo'), x => (1)],
+      [x => x === ('bar'), x => (2)]
+    ]);
+    expect(fn('quux')).toEqual(undefined);
+  });
+
+  test('predicates are tested in order', () => {
+    let fn = cond([
+      [x => true, x => ('foo')],
+      [x => true, x => ('bar')],
+      [x => true, x => ('baz')]
+    ]);
+    expect(fn()).toEqual('foo');
+  });
+
+  test('forwards all arguments to predicates and to transformers', () => {
+    let fn = cond([
+      [function (_, x) { return x === 42; }, (...args) => args]
+    ]);
+    expect(fn(21, 42, 84)).toEqual([21, 42, 84, true]);
+  });
+
+});
+
+describe('cond new featrues', () => {
+
+  test('just predicate and return result', () => {
+    let fmt = cond([x => x.trim()]);
+    let x = fmt(" ")
+    expect(x).toEqual(undefined)
+    let y = fmt("  x  ")
+    expect(y).toEqual("x")
+    let z = fmt("")
+    expect(z).toEqual(undefined)
+  });
+
+  test('cache predicate result', () => {
+    let fmt = cond([
+      [x => x.trim(), (_, res) => ({ res })],
+    ]);
+    let y = fmt("  x  ")
+    expect(y).toEqual({ res: "x" })
+    let z = fmt("")
+    expect(z).toEqual(undefined)
+    let x = fmt(" ")
+    expect(x).toEqual(undefined)
+  });
+
+  test('an example in world', () => {
+    let token = cond([
+      input => {
+        let mtch = /^\d+/.exec(input)
+        if (mtch && mtch.length > 0) {
+          let lexeme = mtch[0]
+          let restInput = input.slice(lexeme.length)
+          return { token: { number: parseInt(lexeme) }, restInput }
+        } else {
+          return null
+        }
+      }
+    ]);
+    let y = token("123+234")
+    expect(y).toEqual({ "restInput": "+234", "token": { "number": 123 } })
+  });
+
+});

package/src/ramda/fold.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 通用折叠（归约）函数，支持自定义迭代逻辑。
+ * @public
+ * @param fn - 迭代函数，接收 (acc, seed)，返回 [newAcc, nextSeed] 或 [newAcc] 或 null/undefined 结束。
+ * @param acc - 初始累加值。
+ * @param seed - 初始种子值。
+ * @returns 折叠后的累加结果。
+ */
+export function fold<A, S>(
+  fn: (acc: A, seed: S) => [A, S] | [A] | [] | null | undefined,
+  acc: A,
+  seed: S
+): A;

package/src/ramda/fold.js

@@ -0,0 +1,20 @@
+/**
+ * 通用折叠（递归归约）函数。
+ *
+ * @public
+ * @param {(this:any, acc: any, seed: any) => [*, *]|[any]|[]|null|undefined} fn - 处理函数，返回 [新acc, 新seed] 或 [新acc]
+ * @param {*} acc - 初始累加值
+ * @param {*} seed - 初始种子
+ * @returns {*} 折叠后的结果
+ * @this *
+ */
+export function fold(fn, acc, seed) {
+    while (seed != null) {
+        let pair = fn.call(this, acc, seed)
+        if (pair == null || pair.length === 0) break
+        acc = pair[0]
+        if (pair.length === 1) break
+        seed = pair[1]
+    }
+    return acc
+}

package/src/ramda/fold.test.js

@@ -0,0 +1,51 @@
+import { fold } from './fold.js'
+
+// addWithMaxOf10 function in functional program
+const loop = (acc, seed) => {
+    if (seed.length > 0) {
+        let nextAcc = acc + seed[0]
+        let nextSeed = seed.slice(1)
+        return nextAcc > 10 ?
+            acc                       // * difference with iterator.
+            : loop(nextAcc, nextSeed) // *
+    }
+    return null
+}
+
+describe('fold', function () {
+    let source = [1, 2, 3, 4, 5, 6, 7]
+
+    it('before last', function () {
+        let fn = function (acc, seed) {
+            if (seed.length > 0) {
+                let nextAcc = acc + seed[0]
+                let nextSeed = seed.slice(1)
+                return nextAcc > 10
+                    ? [] // last acc is `acc` to return caller
+                    : [nextAcc, nextSeed]
+            }
+            return null
+        };
+
+        let y = fold(fn, 0, source)
+        expect(y).toEqual(10)
+    });
+
+    it('include last', function () {
+        let fn = function (acc, seed) {
+            if (seed.length > 0) {
+                let nextAcc = acc + seed[0]
+                let nextSeed = seed.slice(1)
+                return nextAcc > 10
+                    ? [nextAcc] // last acc is `nextAcc` to return caller
+                    : [nextAcc, nextSeed]
+            }
+            return null
+        };
+
+        let y = fold(fn, 0, source)
+        expect(y).toEqual(15)
+
+    });
+
+});

package/src/ramda/index.d.ts

@@ -0,0 +1,6 @@
+export * from './compose';
+export * from './cond';
+export * from './fold';
+export * from './pipe';
+export * from './unfold';
+

package/src/ramda/index.js

@@ -0,0 +1,6 @@
+export * from './compose';
+export * from './cond';
+export * from './fold';
+export * from './pipe';
+export * from './unfold';
+

package/src/ramda/pipe.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 数据优先的管道处理工具（从左向右执行）。
+ * 适合一次性数据处理流程。
+ * @public
+ * @param initialValue - 初始值。
+ * @param fns - 要应用的函数管道（从左向右执行）。
+ * @returns 经过管道处理后的结果。
+ * @throws {TypeError} 当参数包含非函数时抛出错误。
+ */
+export function pipe(
+  initialValue: any,
+  ...fns: Array<(arg: any) => any>
+): any;