hyperscript-rxjs 1.3.15 → 1.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hyperscript-rxjs.cjs +4114 -0
- package/dist/hyperscript-rxjs.d.ts +1438 -0
- package/package.json +21 -12
- package/src/array/advance.d.ts +0 -9
- package/src/array/advance.js +0 -13
- package/src/array/advance.test.js +0 -12
- package/src/array/arrayInsert.d.ts +0 -8
- package/src/array/arrayInsert.js +0 -13
- package/src/array/arrayInsert.test.js +0 -13
- package/src/array/arrayRemove.d.ts +0 -7
- package/src/array/arrayRemove.js +0 -15
- package/src/array/arrayRemove.test.js +0 -13
- package/src/array/findLastIndex.d.ts +0 -14
- package/src/array/findLastIndex.js +0 -20
- package/src/array/findLastIndex.test.js +0 -41
- package/src/array/index.d.ts +0 -9
- package/src/array/index.js +0 -9
- package/src/array/isRange.d.ts +0 -7
- package/src/array/isRange.js +0 -15
- package/src/array/isRange.test.js +0 -6
- package/src/array/rangeArray.d.ts +0 -7
- package/src/array/rangeArray.js +0 -10
- package/src/array/rangeArray.test.js +0 -11
- package/src/array/unwrapArgs.d.ts +0 -10
- package/src/array/unwrapArgs.js +0 -15
- package/src/array/unwrapArgs.test.js +0 -33
- package/src/array/zipArray.d.ts +0 -11
- package/src/array/zipArray.js +0 -24
- package/src/array/zipArray.test.js +0 -16
- package/src/comparers/Comparer.d.ts +0 -101
- package/src/comparers/Comparer.js +0 -149
- package/src/comparers/comparers.d.ts +0 -21
- package/src/comparers/comparers.js +0 -10
- package/src/comparers/differenceSet.d.ts +0 -20
- package/src/comparers/differenceSet.js +0 -35
- package/src/comparers/differenceSet.test.js +0 -11
- package/src/comparers/distinctArray.d.ts +0 -13
- package/src/comparers/distinctArray.js +0 -30
- package/src/comparers/distinctArray.test.js +0 -10
- package/src/comparers/findIndexInSet.d.ts +0 -20
- package/src/comparers/findIndexInSet.js +0 -27
- package/src/comparers/findIndexInSet.test.js +0 -8
- package/src/comparers/groupArrayBy.d.ts +0 -19
- package/src/comparers/groupArrayBy.js +0 -29
- package/src/comparers/groupArrayBy.test.js +0 -38
- package/src/comparers/groupSortedEntries.d.ts +0 -17
- package/src/comparers/groupSortedEntries.js +0 -38
- package/src/comparers/groupSortedEntries.test.js +0 -46
- package/src/comparers/index.d.ts +0 -14
- package/src/comparers/index.js +0 -14
- package/src/comparers/intersectSet.d.ts +0 -19
- package/src/comparers/intersectSet.js +0 -35
- package/src/comparers/intersectSet.test.js +0 -14
- package/src/comparers/isEqualset.d.ts +0 -22
- package/src/comparers/isEqualset.js +0 -33
- package/src/comparers/isEqualset.test.js +0 -22
- package/src/comparers/isSubset.d.ts +0 -21
- package/src/comparers/isSubset.js +0 -33
- package/src/comparers/isSubset.test.js +0 -21
- package/src/comparers/isSuperset.d.ts +0 -21
- package/src/comparers/isSuperset.js +0 -13
- package/src/comparers/isSuperset.test.js +0 -21
- package/src/comparers/sortedArrayToSet.d.ts +0 -20
- package/src/comparers/sortedArrayToSet.js +0 -35
- package/src/comparers/sortedArrayToSet.test.js +0 -11
- package/src/comparers/unionSet.d.ts +0 -21
- package/src/comparers/unionSet.js +0 -34
- package/src/comparers/unionSet.test.js +0 -11
- package/src/comparison/compareDate.d.ts +0 -8
- package/src/comparison/compareDate.js +0 -11
- package/src/comparison/compareEntries.d.ts +0 -13
- package/src/comparison/compareEntries.js +0 -13
- package/src/comparison/compareKey.d.ts +0 -11
- package/src/comparison/compareKey.js +0 -25
- package/src/comparison/compareKey.test.js +0 -21
- package/src/comparison/compareKeyPath.d.ts +0 -15
- package/src/comparison/compareKeyPath.js +0 -33
- package/src/comparison/compareKeyPath.test.js +0 -28
- package/src/comparison/compareNumber.d.ts +0 -11
- package/src/comparison/compareNumber.js +0 -27
- package/src/comparison/compareNumber.test.js +0 -21
- package/src/comparison/defaultCompare.d.ts +0 -8
- package/src/comparison/defaultCompare.js +0 -12
- package/src/comparison/defaultCompare.test.js +0 -24
- package/src/comparison/index.d.ts +0 -7
- package/src/comparison/index.js +0 -7
- package/src/comparison/infinity.test.js +0 -122
- package/src/comparison/typeof.test.js +0 -64
- package/src/comparison/types.d.ts +0 -5
- package/src/comparison/types.js +0 -11
- package/src/deep/Deep.d.ts +0 -58
- package/src/deep/Deep.js +0 -267
- package/src/deep/Deep.test.js +0 -130
- package/src/deep/deepCombineLatest.test.js +0 -36
- package/src/deep/deepMerge.test.js +0 -34
- package/src/deep/differenceDeep.test.js +0 -31
- package/src/deep/freshValueDeep.test.js +0 -17
- package/src/deep/index.d.ts +0 -1
- package/src/deep/index.js +0 -2
- package/src/deep/intersectDeep.test.js +0 -25
- package/src/deep/intersectEntries.d.ts +0 -13
- package/src/deep/intersectEntries.js +0 -37
- package/src/deep/intersectEntries.test.js +0 -20
- package/src/deep/objectToDeep.test.js +0 -31
- package/src/deep/replaceValueDeep.test.js +0 -21
- package/src/deep/unionDeep.test.js +0 -30
- package/src/deep/zipValueDeep.test.js +0 -21
- package/src/deep-rxjs/ObservableArray.d.ts +0 -55
- package/src/deep-rxjs/ObservableArray.js +0 -94
- package/src/deep-rxjs/ObservableArray.test.js +0 -117
- package/src/deep-rxjs/index.d.ts +0 -2
- package/src/deep-rxjs/index.js +0 -2
- package/src/deep-rxjs/isRxType.d.ts +0 -9
- package/src/deep-rxjs/isRxType.js +0 -15
- package/src/deep-rxjs/isRxType.test.js +0 -43
- package/src/hyperscript-rxjs/HyperscriptExtensions.d.ts +0 -20
- package/src/hyperscript-rxjs/checkbox.d.ts +0 -13
- package/src/hyperscript-rxjs/checkbox.js +0 -47
- package/src/hyperscript-rxjs/checkbox.test.js +0 -68
- package/src/hyperscript-rxjs/choice.d.ts +0 -13
- package/src/hyperscript-rxjs/choice.js +0 -24
- package/src/hyperscript-rxjs/choice.test.js +0 -108
- package/src/hyperscript-rxjs/collapse.d.ts +0 -14
- package/src/hyperscript-rxjs/collapse.js +0 -32
- package/src/hyperscript-rxjs/collapse.test.js +0 -67
- package/src/hyperscript-rxjs/displays/blockLevelFamily.d.ts +0 -5
- package/src/hyperscript-rxjs/displays/blockLevelFamily.js +0 -51
- package/src/hyperscript-rxjs/displays/getDisplay.d.ts +0 -7
- package/src/hyperscript-rxjs/displays/getDisplay.js +0 -51
- package/src/hyperscript-rxjs/displays/getDisplay.test.js +0 -56
- package/src/hyperscript-rxjs/displays/index.d.ts +0 -3
- package/src/hyperscript-rxjs/displays/index.js +0 -3
- package/src/hyperscript-rxjs/displays/inlineFamily.d.ts +0 -5
- package/src/hyperscript-rxjs/displays/inlineFamily.js +0 -73
- package/src/hyperscript-rxjs/flip.d.ts +0 -15
- package/src/hyperscript-rxjs/flip.js +0 -29
- package/src/hyperscript-rxjs/flip.test.js +0 -85
- package/src/hyperscript-rxjs/fragment.d.ts +0 -10
- package/src/hyperscript-rxjs/fragment.js +0 -22
- package/src/hyperscript-rxjs/fragment.test.js +0 -70
- package/src/hyperscript-rxjs/hyperscript.d.ts +0 -15
- package/src/hyperscript-rxjs/hyperscript.js +0 -170
- package/src/hyperscript-rxjs/hyperscript.test.js +0 -75
- package/src/hyperscript-rxjs/index.d.ts +0 -19
- package/src/hyperscript-rxjs/index.js +0 -19
- package/src/hyperscript-rxjs/multiselect.d.ts +0 -18
- package/src/hyperscript-rxjs/multiselect.js +0 -41
- package/src/hyperscript-rxjs/multiselect.test.js +0 -121
- package/src/hyperscript-rxjs/numberbox.d.ts +0 -14
- package/src/hyperscript-rxjs/numberbox.js +0 -73
- package/src/hyperscript-rxjs/numberbox.test.js +0 -84
- package/src/hyperscript-rxjs/radio.d.ts +0 -15
- package/src/hyperscript-rxjs/radio.js +0 -53
- package/src/hyperscript-rxjs/radio.test.js +0 -59
- package/src/hyperscript-rxjs/select.d.ts +0 -28
- package/src/hyperscript-rxjs/select.js +0 -88
- package/src/hyperscript-rxjs/select.test.js +0 -101
- package/src/hyperscript-rxjs/tabControls/bindTabIndex.d.ts +0 -12
- package/src/hyperscript-rxjs/tabControls/bindTabIndex.js +0 -59
- package/src/hyperscript-rxjs/tabControls/index.d.ts +0 -8
- package/src/hyperscript-rxjs/tabControls/index.js +0 -10
- package/src/hyperscript-rxjs/tabControls/tabControl.d.ts +0 -19
- package/src/hyperscript-rxjs/tabControls/tabControl.js +0 -40
- package/src/hyperscript-rxjs/tabControls/tabControl.test.js +0 -98
- package/src/hyperscript-rxjs/tabControls/tabNavItem.d.ts +0 -9
- package/src/hyperscript-rxjs/tabControls/tabNavItem.js +0 -30
- package/src/hyperscript-rxjs/tabControls/tabPanel.d.ts +0 -9
- package/src/hyperscript-rxjs/tabControls/tabPanel.js +0 -21
- package/src/hyperscript-rxjs/tabControls/tabRoot.d.ts +0 -7
- package/src/hyperscript-rxjs/tabControls/tabRoot.js +0 -26
- package/src/hyperscript-rxjs/tags.d.ts +0 -193
- package/src/hyperscript-rxjs/tags.js +0 -751
- package/src/hyperscript-rxjs/tags.test.js +0 -75
- package/src/hyperscript-rxjs/textNode.d.ts +0 -11
- package/src/hyperscript-rxjs/textNode.js +0 -51
- package/src/hyperscript-rxjs/textNode.test.js +0 -56
- package/src/hyperscript-rxjs/textarea.d.ts +0 -17
- package/src/hyperscript-rxjs/textarea.js +0 -45
- package/src/hyperscript-rxjs/textarea.test.js +0 -52
- package/src/hyperscript-rxjs/textbox.d.ts +0 -15
- package/src/hyperscript-rxjs/textbox.js +0 -42
- package/src/hyperscript-rxjs/textbox.test.js +0 -52
- package/src/index.d.ts +0 -19
- package/src/index.js +0 -19
- package/src/nodes/attachSubscriptionToNode.d.ts +0 -13
- package/src/nodes/attachSubscriptionToNode.js +0 -25
- package/src/nodes/attachSubscriptionToNode.test.js +0 -73
- package/src/nodes/index.d.ts +0 -6
- package/src/nodes/index.js +0 -6
- package/src/nodes/normalizeChildNodes.d.ts +0 -9
- package/src/nodes/normalizeChildNodes.js +0 -15
- package/src/nodes/normalizeChildNodes.test.js +0 -55
- package/src/nodes/parseHyperscriptArgs.d.ts +0 -10
- package/src/nodes/parseHyperscriptArgs.js +0 -57
- package/src/nodes/parseHyperscriptArgs.test.js +0 -85
- package/src/nodes/pipeEvent.d.ts +0 -15
- package/src/nodes/pipeEvent.js +0 -49
- package/src/nodes/pipeEvent.test.js +0 -97
- package/src/nodes/subscribeEvent.d.ts +0 -15
- package/src/nodes/subscribeEvent.js +0 -56
- package/src/nodes/subscribeEvent.test.js +0 -88
- package/src/object/index.d.ts +0 -10
- package/src/object/index.js +0 -11
- package/src/object/intersectObject.d.ts +0 -12
- package/src/object/intersectObject.js +0 -23
- package/src/object/intersectObject.test.js +0 -69
- package/src/object/isEmptyObject.d.ts +0 -7
- package/src/object/isEmptyObject.js +0 -13
- package/src/object/isEmptyObject.test.js +0 -33
- package/src/object/isPlainObject.d.ts +0 -11
- package/src/object/isPlainObject.js +0 -18
- package/src/object/nestedCombineLatest.d.ts +0 -11
- package/src/object/nestedCombineLatest.js +0 -18
- package/src/object/nestedCombineLatest.test.js +0 -25
- package/src/object/nestedMerge.d.ts +0 -11
- package/src/object/nestedMerge.js +0 -11
- package/src/object/nestedMerge.test.js +0 -61
- package/src/object/pickBehaviorSubject.d.ts +0 -13
- package/src/object/pickBehaviorSubject.js +0 -81
- package/src/object/pickBehaviorSubject.test.js +0 -88
- package/src/object/pluckProperty.d.ts +0 -13
- package/src/object/pluckProperty.js +0 -24
- package/src/object/pluckProperty.test.js +0 -37
- package/src/object/restore.d.ts +0 -12
- package/src/object/restore.js +0 -69
- package/src/object/restore.test.js +0 -124
- package/src/object/splitObjectByObservable.d.ts +0 -12
- package/src/object/splitObjectByObservable.js +0 -41
- package/src/object/splitObjectByObservable.test.js +0 -78
- package/src/props/getNestedProperty.d.ts +0 -12
- package/src/props/getNestedProperty.js +0 -31
- package/src/props/getNestedProperty.test.js +0 -72
- package/src/props/index.d.ts +0 -7
- package/src/props/index.js +0 -7
- package/src/props/parsePropName.d.ts +0 -13
- package/src/props/parsePropName.js +0 -45
- package/src/props/parsePropName.test.js +0 -67
- package/src/props/setProp.d.ts +0 -16
- package/src/props/setProp.js +0 -42
- package/src/props/setProp.test.js +0 -59
- package/src/props/setProps.d.ts +0 -14
- package/src/props/setProps.js +0 -47
- package/src/props/setProps.test.js +0 -97
- package/src/props/subscribeProp.d.ts +0 -16
- package/src/props/subscribeProp.js +0 -47
- package/src/props/subscribeProp.test.js +0 -81
- package/src/ramda/compose.d.ts +0 -10
- package/src/ramda/compose.js +0 -36
- package/src/ramda/compose.test.js +0 -73
- package/src/ramda/cond.d.ts +0 -12
- package/src/ramda/cond.js +0 -29
- package/src/ramda/cond.test.js +0 -88
- package/src/ramda/fold.d.ts +0 -13
- package/src/ramda/fold.js +0 -20
- package/src/ramda/fold.test.js +0 -51
- package/src/ramda/index.d.ts +0 -6
- package/src/ramda/index.js +0 -6
- package/src/ramda/pipe.d.ts +0 -13
- package/src/ramda/pipe.js +0 -27
- package/src/ramda/pipe.test.js +0 -77
- package/src/ramda/unfold.d.ts +0 -11
- package/src/ramda/unfold.js +0 -20
- package/src/ramda/unfold.test.js +0 -29
- package/src/unquoted-json/ajax.test.js +0 -1074
- package/src/unquoted-json/index.d.ts +0 -13
- package/src/unquoted-json/index.js +0 -12
- package/src/unquoted-json/queryStringify.d.ts +0 -8
- package/src/unquoted-json/queryStringify.js +0 -70
- package/src/unquoted-json/queryStringify.test.js +0 -110
- package/src/unquoted-json/stringifyKey.d.ts +0 -7
- package/src/unquoted-json/stringifyKey.js +0 -16
- package/src/unquoted-json/stringifyKey.test.js +0 -51
- package/src/unquoted-json/stringifyStringValue.d.ts +0 -7
- package/src/unquoted-json/stringifyStringValue.js +0 -17
- package/src/unquoted-json/stringifyStringValue.test.js +0 -52
- package/src/unquoted-json/unquotedJsonStringify.d.ts +0 -7
- package/src/unquoted-json/unquotedJsonStringify.js +0 -39
- package/src/unquoted-json/unquotedJsonStringify.test.js +0 -52
@@ -1,15 +0,0 @@
|
|
1
|
-
import { Observable } from 'rxjs';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* 动态切换两个元素或元素数组的显示状态。
|
5
|
-
*
|
6
|
-
* @param yinHidden$ - 一个 Observable,表示 yin 是否隐藏。
|
7
|
-
* @param yin - 需要动态控制显示状态的第一个元素或元素数组。
|
8
|
-
* @param yang - 需要动态控制显示状态的第二个元素或元素数组。
|
9
|
-
* @returns 包含所有元素的数组。
|
10
|
-
*/
|
11
|
-
export function flip(
|
12
|
-
yinHidden$: Observable<boolean>,
|
13
|
-
yin: HTMLElement | HTMLElement[],
|
14
|
-
yang: HTMLElement | HTMLElement[]
|
15
|
-
): HTMLElement[];
|
@@ -1,29 +0,0 @@
|
|
1
|
-
import { Observable } from 'rxjs';
|
2
|
-
import { map } from 'rxjs/operators'
|
3
|
-
import { collapse } from './collapse'
|
4
|
-
|
5
|
-
/**
|
6
|
-
* 动态切换两个元素或元素数组的显示状态。
|
7
|
-
*
|
8
|
-
* `flip` 函数根据 `yinHidden$` 的值动态控制 `yinElement` 和 `yangElement` 的显示状态:
|
9
|
-
* - 当 `yinHidden$` 为 `true` 时,隐藏 `yinElement`,显示 `yangElement`。
|
10
|
-
* - 当 `yinHidden$` 为 `false` 时,显示 `yinElement`,隐藏 `yangElement`。
|
11
|
-
*
|
12
|
-
* @param {Observable<boolean>} yinHidden$ - 一个 Observable,表示 `yinElement` 是否隐藏。
|
13
|
-
* @param {HTMLElement|HTMLElement[]} yin - 需要动态控制显示状态的第一个元素或元素数组。
|
14
|
-
* @param {HTMLElement|HTMLElement[]} yang - 需要动态控制显示状态的第二个元素或元素数组。
|
15
|
-
* @returns {HTMLElement[]} - 包含所有元素的数组。
|
16
|
-
*
|
17
|
-
*/
|
18
|
-
export function flip(yinHidden$, yin, yang) {
|
19
|
-
// 创建一个 Observable,用于控制 yangElement 的隐藏状态
|
20
|
-
const yangHidden$ = yinHidden$.pipe(
|
21
|
-
map(isHidden => !isHidden)
|
22
|
-
);
|
23
|
-
|
24
|
-
// 阴阳交叉
|
25
|
-
return [
|
26
|
-
...collapse(yangHidden$, yin),
|
27
|
-
...collapse(yinHidden$, yang)
|
28
|
-
];
|
29
|
-
}
|
@@ -1,85 +0,0 @@
|
|
1
|
-
import { BehaviorSubject } from 'rxjs';
|
2
|
-
import { flip } from './flip';
|
3
|
-
import { div } from './tags';
|
4
|
-
|
5
|
-
describe('flip', () => {
|
6
|
-
test('should toggle visibility between yin and yang elements', () => {
|
7
|
-
const yinHidden$ = new BehaviorSubject(false);
|
8
|
-
|
9
|
-
const yin = div('Yin');
|
10
|
-
const yang = div('Yang');
|
11
|
-
|
12
|
-
const elements = flip(yinHidden$, yin, yang);
|
13
|
-
|
14
|
-
// 初始状态:显示 Yin,隐藏 Yang
|
15
|
-
expect(elements).toEqual([yin, yang]);
|
16
|
-
expect(yin.hidden).toBe(true);
|
17
|
-
expect(yang.hidden).toBe(false);
|
18
|
-
|
19
|
-
// 切换状态:隐藏 Yin,显示 Yang
|
20
|
-
yinHidden$.next(true);
|
21
|
-
expect(yin.hidden).toBe(false);
|
22
|
-
expect(yang.hidden).toBe(true);
|
23
|
-
|
24
|
-
// 切换回初始状态:显示 Yin,隐藏 Yang
|
25
|
-
yinHidden$.next(false);
|
26
|
-
expect(yin.hidden).toBe(true);
|
27
|
-
expect(yang.hidden).toBe(false);
|
28
|
-
});
|
29
|
-
|
30
|
-
test('should handle yin and yang as arrays', () => {
|
31
|
-
const yinHidden$ = new BehaviorSubject(false);
|
32
|
-
|
33
|
-
const yin1 = div('yin1');
|
34
|
-
const yin2 = div('yin2');
|
35
|
-
const yang1 = div('yang1');
|
36
|
-
const yang2 = div('yang2');
|
37
|
-
|
38
|
-
const elements = flip(yinHidden$, [yin1, yin2], [yang1, yang2]);
|
39
|
-
|
40
|
-
// 初始状态:显示 Yin 数组,隐藏 Yang 数组
|
41
|
-
expect(elements).toEqual([yin1, yin2, yang1, yang2]);
|
42
|
-
expect(yin1.hidden).toBe(true);
|
43
|
-
expect(yin2.hidden).toBe(true);
|
44
|
-
expect(yang1.hidden).toBe(false);
|
45
|
-
expect(yang2.hidden).toBe(false);
|
46
|
-
|
47
|
-
// 切换状态:隐藏 Yin 数组,显示 Yang 数组
|
48
|
-
yinHidden$.next(true);
|
49
|
-
expect(yin1.hidden).toBe(false);
|
50
|
-
expect(yin2.hidden).toBe(false);
|
51
|
-
expect(yang1.hidden).toBe(true);
|
52
|
-
expect(yang2.hidden).toBe(true);
|
53
|
-
});
|
54
|
-
|
55
|
-
test('should handle empty yin and yang arrays', () => {
|
56
|
-
const yinHidden$ = new BehaviorSubject(false);
|
57
|
-
|
58
|
-
const elements = flip(yinHidden$, [], []);
|
59
|
-
|
60
|
-
// 初始状态:没有元素
|
61
|
-
expect(elements).toEqual([]);
|
62
|
-
});
|
63
|
-
|
64
|
-
test('should handle mixed types (single elements and arrays)', () => {
|
65
|
-
const yinHidden$ = new BehaviorSubject(false);
|
66
|
-
|
67
|
-
const yin1 = div('yin1');
|
68
|
-
const yin2 = div('yin2');
|
69
|
-
const yang = div('yang');
|
70
|
-
|
71
|
-
const elements = flip(yinHidden$, [yin1, yin2], yang);
|
72
|
-
|
73
|
-
// 初始状态:显示 Yin 数组,隐藏 Yang
|
74
|
-
expect(elements).toEqual([yin1, yin2, yang]);
|
75
|
-
expect(yin1.hidden).toBe(true);
|
76
|
-
expect(yin2.hidden).toBe(true);
|
77
|
-
expect(yang.hidden).toBe(false);
|
78
|
-
|
79
|
-
// 切换状态:隐藏 Yin 数组,显示 Yang
|
80
|
-
yinHidden$.next(true);
|
81
|
-
expect(yin1.hidden).toBe(false);
|
82
|
-
expect(yin2.hidden).toBe(false);
|
83
|
-
expect(yang.hidden).toBe(true);
|
84
|
-
});
|
85
|
-
});
|
@@ -1,10 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* 插入一组元素,返回包含所有子节点的 DocumentFragment。
|
3
|
-
*
|
4
|
-
* @param childNodes - 要插入的子节点,可以是单个节点、多个节点或节点数组。
|
5
|
-
* @returns 包含所有子节点的 DocumentFragment。
|
6
|
-
* @throws 如果传入的子节点不是有效的 DOM 节点会抛出错误。
|
7
|
-
*/
|
8
|
-
export function fragment(
|
9
|
-
...childNodes: (Node | Node[])[]
|
10
|
-
): DocumentFragment;
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import { normalizeChildNodes } from '../nodes/normalizeChildNodes';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* 用途:插入一组元素,不必使用循环语句,fragment 用后即弃。
|
5
|
-
*
|
6
|
-
* @param {...Node|Node[]} childNodes - 要插入的子节点,可以是单个节点、多个节点或节点数组。
|
7
|
-
* @returns {DocumentFragment} - 返回包含所有子节点的 DocumentFragment。
|
8
|
-
* @throws {Error} 如果传入的子节点不是有效的 DOM 节点。
|
9
|
-
*/
|
10
|
-
export function fragment(...childNodes) {
|
11
|
-
// 创建一个 DocumentFragment
|
12
|
-
const frag = new DocumentFragment();
|
13
|
-
|
14
|
-
// 验证并附加子节点
|
15
|
-
normalizeChildNodes(childNodes)
|
16
|
-
.forEach(child => {
|
17
|
-
frag.appendChild(child); // 将子节点附加到元素
|
18
|
-
});
|
19
|
-
|
20
|
-
// 返回 DocumentFragment
|
21
|
-
return frag;
|
22
|
-
}
|
@@ -1,70 +0,0 @@
|
|
1
|
-
import { fragment } from './fragment';
|
2
|
-
import { div } from './tags';
|
3
|
-
import { textNode } from './textNode';
|
4
|
-
|
5
|
-
describe('fragment', () => {
|
6
|
-
test('should return a DocumentFragment', () => {
|
7
|
-
const frag = fragment();
|
8
|
-
expect(frag).toBeInstanceOf(DocumentFragment);
|
9
|
-
});
|
10
|
-
|
11
|
-
test('should append multiple nodes to the fragment', () => {
|
12
|
-
const div1 = div('div1');
|
13
|
-
const div2 = div('div2');
|
14
|
-
|
15
|
-
const frag = fragment(div1, div2);
|
16
|
-
|
17
|
-
expect(frag.childNodes.length).toBe(2);
|
18
|
-
expect(frag.firstChild).toBe(div1);
|
19
|
-
expect(frag.lastChild).toBe(div2);
|
20
|
-
});
|
21
|
-
|
22
|
-
test('should handle an array of nodes', () => {
|
23
|
-
const div1 = div('div1');
|
24
|
-
const div2 = div('div2');
|
25
|
-
|
26
|
-
const frag = fragment([div1, div2]);
|
27
|
-
|
28
|
-
expect(frag.childNodes.length).toBe(2);
|
29
|
-
expect(frag.firstChild).toBe(div1);
|
30
|
-
expect(frag.lastChild).toBe(div2);
|
31
|
-
});
|
32
|
-
|
33
|
-
test('should handle text nodes and elements', () => {
|
34
|
-
const textNode1 = textNode('Hello');
|
35
|
-
const div1 = div('div');
|
36
|
-
|
37
|
-
const frag = fragment(textNode1, div1);
|
38
|
-
|
39
|
-
expect(frag.childNodes.length).toBe(2);
|
40
|
-
expect(frag.firstChild.nodeType).toBe(Node.TEXT_NODE);
|
41
|
-
expect(frag.firstChild.textContent).toBe('Hello');
|
42
|
-
expect(frag.lastChild).toBe(div1);
|
43
|
-
});
|
44
|
-
|
45
|
-
test('should handle invalid child nodes gracefully', () => {
|
46
|
-
// 测试 undefined
|
47
|
-
const fragUndefined = fragment(undefined);
|
48
|
-
expect(fragUndefined.childNodes.length).toBe(1);
|
49
|
-
expect(fragUndefined.firstChild.nodeType).toBe(Node.TEXT_NODE);
|
50
|
-
expect(fragUndefined.firstChild.textContent).toBe('undefined');
|
51
|
-
|
52
|
-
// 测试 null
|
53
|
-
const fragNull = fragment(null);
|
54
|
-
expect(fragNull.childNodes.length).toBe(1);
|
55
|
-
expect(fragNull.firstChild.nodeType).toBe(Node.TEXT_NODE);
|
56
|
-
expect(fragNull.firstChild.textContent).toBe('null');
|
57
|
-
|
58
|
-
// 测试对象
|
59
|
-
const fragObj = fragment({});
|
60
|
-
expect(fragObj.childNodes.length).toBe(1);
|
61
|
-
expect(fragObj.firstChild.nodeType).toBe(Node.TEXT_NODE);
|
62
|
-
expect(fragObj.firstChild.textContent).toBe("[object Object]");
|
63
|
-
|
64
|
-
});
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
});
|
@@ -1,15 +0,0 @@
|
|
1
|
-
import { HyperscriptExtensions } from './HyperscriptExtensions';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Creates an HTML element with extended event handling capabilities
|
5
|
-
* @public
|
6
|
-
* @param elemName The HTML element tag name
|
7
|
-
* @param args Optional properties and child nodes
|
8
|
-
* @returns The created element with extended methods
|
9
|
-
* @throws If elemName is not a valid HTML element tag name
|
10
|
-
*/
|
11
|
-
export declare function hyperscript(
|
12
|
-
elemName: string,
|
13
|
-
...args: any[]
|
14
|
-
): HyperscriptExtensions<HTMLElement>;
|
15
|
-
|
@@ -1,170 +0,0 @@
|
|
1
|
-
import { Subscription, Observable } from 'rxjs';
|
2
|
-
|
3
|
-
import { pipeEvent } from '../nodes/pipeEvent';
|
4
|
-
import { subscribeEvent } from '../nodes/subscribeEvent';
|
5
|
-
import { parseHyperscriptArgs } from '../nodes/parseHyperscriptArgs';
|
6
|
-
import { setProps } from '../props/setProps';
|
7
|
-
import { normalizeChildNodes } from '../nodes/normalizeChildNodes';
|
8
|
-
|
9
|
-
/**
|
10
|
-
* @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLElement>} HyperscriptElement
|
11
|
-
*/
|
12
|
-
|
13
|
-
/**
|
14
|
-
* Creates an HTML element with extended event handling capabilities
|
15
|
-
* @public
|
16
|
-
* @param {string} elemName - The HTML element tag name
|
17
|
-
* @param {...any} args - Optional properties and child nodes
|
18
|
-
* @returns {HyperscriptElement} The created element with extended methods
|
19
|
-
* @throws {Error} If elemName is not a valid HTML element tag name
|
20
|
-
*/
|
21
|
-
export function hyperscript(elemName, ...args) {
|
22
|
-
// 参数验证,确保 elemName 是一个有效的字符串
|
23
|
-
if (typeof elemName !== 'string' || !tagNames.has(elemName)) {
|
24
|
-
throw new Error(`参数 elemName 不是一个有效的 HTML 元素标签名。`);
|
25
|
-
}
|
26
|
-
|
27
|
-
// 创建 HTML 元素
|
28
|
-
|
29
|
-
let element = document.createElement(elemName);
|
30
|
-
|
31
|
-
// 解析传入的参数
|
32
|
-
const { props, childNodes } = parseHyperscriptArgs(args);
|
33
|
-
|
34
|
-
// 设置元素属性
|
35
|
-
setProps(element, props);
|
36
|
-
|
37
|
-
// 添加子节点
|
38
|
-
normalizeChildNodes(childNodes).forEach(child => {
|
39
|
-
element.appendChild(child); // 将子节点附加到元素
|
40
|
-
});
|
41
|
-
|
42
|
-
Object.assign(element, {
|
43
|
-
/**
|
44
|
-
*
|
45
|
-
* @param {string} event
|
46
|
-
* @param {(event$: Observable<Event>) => Subscription} subscriber
|
47
|
-
*/
|
48
|
-
pipeEvent(event, subscriber) {
|
49
|
-
return pipeEvent(element)(event, subscriber)
|
50
|
-
},
|
51
|
-
/**
|
52
|
-
*
|
53
|
-
* @param {string} event
|
54
|
-
* @param {((value: Event) => void) | import('rxjs').Observer<Event>} observer
|
55
|
-
*/
|
56
|
-
subscribeEvent(event, observer) {
|
57
|
-
return subscribeEvent(element)(event, observer)
|
58
|
-
},
|
59
|
-
|
60
|
-
unsubscribe() {
|
61
|
-
if ('subscription' in element && element.subscription instanceof Subscription) {
|
62
|
-
element.subscription.unsubscribe(); // 取消订阅
|
63
|
-
delete element.subscription; // 删除属性
|
64
|
-
}
|
65
|
-
}
|
66
|
-
|
67
|
-
});
|
68
|
-
|
69
|
-
return /** @type {HyperscriptElement} */(element); // 返回创建的元素
|
70
|
-
}
|
71
|
-
|
72
|
-
const tagNames = new Set([
|
73
|
-
"a",
|
74
|
-
"abbr",
|
75
|
-
"address",
|
76
|
-
"area",
|
77
|
-
"article",
|
78
|
-
"aside",
|
79
|
-
"audio",
|
80
|
-
"b",
|
81
|
-
"bdi",
|
82
|
-
"bdo",
|
83
|
-
"blockquote",
|
84
|
-
"br",
|
85
|
-
"button",
|
86
|
-
"caption",
|
87
|
-
"cite",
|
88
|
-
"code",
|
89
|
-
"col",
|
90
|
-
"colgroup",
|
91
|
-
"data",
|
92
|
-
"datalist",
|
93
|
-
"dd",
|
94
|
-
"del",
|
95
|
-
"details",
|
96
|
-
"dfn",
|
97
|
-
"dialog",
|
98
|
-
"div",
|
99
|
-
"dl",
|
100
|
-
"dt",
|
101
|
-
"em",
|
102
|
-
"fieldset",
|
103
|
-
"figcaption",
|
104
|
-
"figure",
|
105
|
-
"footer",
|
106
|
-
"form",
|
107
|
-
"h1",
|
108
|
-
"h2",
|
109
|
-
"h3",
|
110
|
-
"h4",
|
111
|
-
"h5",
|
112
|
-
"h6",
|
113
|
-
"header",
|
114
|
-
"hgroup",
|
115
|
-
"hr",
|
116
|
-
"i",
|
117
|
-
"img",
|
118
|
-
"input",
|
119
|
-
"ins",
|
120
|
-
"kbd",
|
121
|
-
"label",
|
122
|
-
"legend",
|
123
|
-
"li",
|
124
|
-
"main",
|
125
|
-
"mark",
|
126
|
-
"menu",
|
127
|
-
"menuitem",
|
128
|
-
"meter",
|
129
|
-
"nav",
|
130
|
-
"ol",
|
131
|
-
"optgroup",
|
132
|
-
"option",
|
133
|
-
"output",
|
134
|
-
"p",
|
135
|
-
"pre",
|
136
|
-
"progress",
|
137
|
-
"q",
|
138
|
-
"rb",
|
139
|
-
"rp",
|
140
|
-
"rt",
|
141
|
-
"rtc",
|
142
|
-
"ruby",
|
143
|
-
"s",
|
144
|
-
"samp",
|
145
|
-
"section",
|
146
|
-
"select",
|
147
|
-
"small",
|
148
|
-
"span",
|
149
|
-
"strong",
|
150
|
-
"sub",
|
151
|
-
"summary",
|
152
|
-
"sup",
|
153
|
-
"table",
|
154
|
-
"tbody",
|
155
|
-
"td",
|
156
|
-
"textarea",
|
157
|
-
"tfoot",
|
158
|
-
"th",
|
159
|
-
"thead",
|
160
|
-
"time",
|
161
|
-
"tr",
|
162
|
-
"track",
|
163
|
-
"tt",
|
164
|
-
"u",
|
165
|
-
"ul",
|
166
|
-
"video",
|
167
|
-
"wbr",
|
168
|
-
|
169
|
-
])
|
170
|
-
|
@@ -1,75 +0,0 @@
|
|
1
|
-
import { hyperscript } from './hyperscript';
|
2
|
-
|
3
|
-
describe('hyperscript', () => {
|
4
|
-
test('should throw an error if elemName is not a valid string', () => {
|
5
|
-
let errorMessage = '参数 elemName 不是一个有效的 HTML 元素标签名。';
|
6
|
-
expect(() => hyperscript('')).toThrow(errorMessage);
|
7
|
-
expect(() => hyperscript(null)).toThrow(errorMessage);
|
8
|
-
expect(() => hyperscript(123)).toThrow(errorMessage);
|
9
|
-
});
|
10
|
-
|
11
|
-
test('should create an HTML element with the specified tag name', () => {
|
12
|
-
const element = hyperscript('div');
|
13
|
-
expect(element).toBeInstanceOf(HTMLElement);
|
14
|
-
expect(element.tagName.toLowerCase()).toBe('div');
|
15
|
-
});
|
16
|
-
|
17
|
-
test('should set properties on the created element', () => {
|
18
|
-
const element = hyperscript('div', { id: 'test-id', className: 'test-class' });
|
19
|
-
expect(element.id).toBe('test-id');
|
20
|
-
expect(element.className).toBe('test-class');
|
21
|
-
});
|
22
|
-
|
23
|
-
test('should append child nodes to the created element', () => {
|
24
|
-
const child1 = hyperscript('span');
|
25
|
-
const child2 = 'Hello, World!'
|
26
|
-
const element = hyperscript('div', {}, child1, child2);
|
27
|
-
|
28
|
-
expect(element.children.length).toBe(1);
|
29
|
-
expect(element.firstChild).toBe(child1);
|
30
|
-
expect(element.lastChild.nodeValue).toBe(child2);
|
31
|
-
});
|
32
|
-
|
33
|
-
test('should attach pipeEvent and subscribeEvent interfaces', () => {
|
34
|
-
const element = hyperscript('div');
|
35
|
-
|
36
|
-
// 验证 pipeEvent 方法是否存在
|
37
|
-
expect(typeof element.pipeEvent).toBe('function');
|
38
|
-
|
39
|
-
// const mockPipeHandler = jest.fn();
|
40
|
-
// element.pipeEvent('click', mockPipeHandler);
|
41
|
-
// element.dispatchEvent(new Event('click'));
|
42
|
-
// expect(mockPipeHandler).toHaveBeenCalled();
|
43
|
-
|
44
|
-
// 验证 subscribeEvent 方法是否存在
|
45
|
-
expect(typeof element.subscribeEvent).toBe('function');
|
46
|
-
|
47
|
-
// const mockSubscribeHandler = jest.fn();
|
48
|
-
// element.subscribeEvent('mouseover', mockSubscribeHandler);
|
49
|
-
// element.dispatchEvent(new Event('mouseover'));
|
50
|
-
// expect(mockSubscribeHandler).toHaveBeenCalled();
|
51
|
-
});
|
52
|
-
|
53
|
-
test('should release subscriptions when unsubscribe is called', () => {
|
54
|
-
const element = hyperscript('div');
|
55
|
-
|
56
|
-
// // 模拟附加订阅
|
57
|
-
// const mockSubscription = {
|
58
|
-
// unsubscribe: jest.fn(),
|
59
|
-
// };
|
60
|
-
|
61
|
-
// element.subscription = mockSubscription;
|
62
|
-
|
63
|
-
// 调用 unsubscribe
|
64
|
-
element.unsubscribe();
|
65
|
-
|
66
|
-
// 验证 unsubscribe 是否被调用
|
67
|
-
// expect(mockSubscription.unsubscribe).toHaveBeenCalled();
|
68
|
-
expect(element.subscription).toBeUndefined(); // 验证 subscription 是否被清空
|
69
|
-
});
|
70
|
-
|
71
|
-
test('should handle unsubscribe when no subscription exists', () => {
|
72
|
-
const element = hyperscript('div');
|
73
|
-
expect(() => element.unsubscribe()).not.toThrow();
|
74
|
-
});
|
75
|
-
});
|
@@ -1,19 +0,0 @@
|
|
1
|
-
export * from './displays'
|
2
|
-
export * from './tabControls'
|
3
|
-
|
4
|
-
export * from './checkbox'
|
5
|
-
export * from './choice'
|
6
|
-
export * from './collapse'
|
7
|
-
export * from './flip'
|
8
|
-
export * from './fragment'
|
9
|
-
export * from './hyperscript'
|
10
|
-
export * from './multiselect'
|
11
|
-
export * from './numberbox'
|
12
|
-
export * from './radio'
|
13
|
-
export * from './select'
|
14
|
-
export * from './tags'
|
15
|
-
|
16
|
-
export * from './textarea'
|
17
|
-
export * from './textbox'
|
18
|
-
export * from './textNode';
|
19
|
-
|
@@ -1,19 +0,0 @@
|
|
1
|
-
export * from './displays'
|
2
|
-
export * from './tabControls'
|
3
|
-
|
4
|
-
export * from './checkbox'
|
5
|
-
export * from './choice'
|
6
|
-
export * from './collapse'
|
7
|
-
export * from './flip'
|
8
|
-
export * from './fragment'
|
9
|
-
export * from './hyperscript'
|
10
|
-
export * from './multiselect'
|
11
|
-
export * from './numberbox'
|
12
|
-
export * from './radio'
|
13
|
-
export * from './select'
|
14
|
-
export * from './tags'
|
15
|
-
|
16
|
-
export * from './textarea'
|
17
|
-
export * from './textbox'
|
18
|
-
export * from './textNode';
|
19
|
-
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import { HyperscriptExtensions } from './HyperscriptExtensions';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* 创建一个支持多选功能的 <select> 元素,并绑定选项的选中状态。
|
5
|
-
* 必须手动添加控件更新 BehaviorSubject 的事件。
|
6
|
-
*
|
7
|
-
* @param props - 配置对象,包含 <select> 元素的属性。
|
8
|
-
* @param options - 一个或多个 <option> 元素,必须是 HTMLOptionElement 类型。
|
9
|
-
* @returns 创建的 <select> 元素。
|
10
|
-
* @throws 如果 props 不是对象,或者 options 中的选项未正确定义 selected 属性会抛出错误。
|
11
|
-
*/
|
12
|
-
export function multiselect(
|
13
|
-
props: {
|
14
|
-
oninput?: (e: Event) => void,
|
15
|
-
onchange?: (e: Event) => void,
|
16
|
-
[key: string]: any },
|
17
|
-
...options: HTMLOptionElement[]
|
18
|
-
): HyperscriptExtensions<HTMLSelectElement>;
|
@@ -1,41 +0,0 @@
|
|
1
|
-
import { hyperscript } from './hyperscript'
|
2
|
-
|
3
|
-
/**
|
4
|
-
* @typedef {import("./HyperscriptExtensions").HyperscriptExtensions<HTMLSelectElement>} HyperscriptSelectElement
|
5
|
-
*/
|
6
|
-
|
7
|
-
|
8
|
-
/**
|
9
|
-
* 创建一个支持多选功能的 <select> 元素,并绑定选项的选中状态。必须手动添加控件更新BehaviorSubject的事件。
|
10
|
-
*
|
11
|
-
* @param {{oninput?: (e:Event)=>void, onchange?: (e:Event)=>void, [key: string]: any}} props - 配置对象,包含 <select> 元素的属性。
|
12
|
-
* @param {...HTMLOptionElement} options - 一个或多个 <option> 元素,必须是 HTMLOptionElement 类型。
|
13
|
-
* 每个选项需要包含一个 `selected` 属性,该属性是一个 BehaviorSubject ,用于绑定选中状态。
|
14
|
-
* @returns {HyperscriptSelectElement} - 创建的 <select> 元素。
|
15
|
-
* @throws {Error} 如果 `props` 不是对象,或者 `options` 中的选项未正确定义 `selected` 属性。
|
16
|
-
*
|
17
|
-
*/
|
18
|
-
export function multiselect(props, ...options) {
|
19
|
-
if (typeof props !== 'object' || props === null) {
|
20
|
-
throw new Error('`select` requires a `props` object.');
|
21
|
-
}
|
22
|
-
let { oninput, onchange, ...rest } = props
|
23
|
-
|
24
|
-
let elem = hyperscript('select', { ...rest, multiple: true }, ...options);
|
25
|
-
|
26
|
-
if (typeof oninput === 'function') {
|
27
|
-
elem.subscribeEvent('input', e => {
|
28
|
-
oninput(e)
|
29
|
-
});
|
30
|
-
}
|
31
|
-
|
32
|
-
if (typeof onchange === 'function') {
|
33
|
-
elem.subscribeEvent('change', e => {
|
34
|
-
onchange(e)
|
35
|
-
});
|
36
|
-
}
|
37
|
-
|
38
|
-
return /** @type {HyperscriptSelectElement} */(elem)
|
39
|
-
|
40
|
-
}
|
41
|
-
|