@design-edito/tools 0.5.23 → 0.5.25
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/agnostic/arrays/index.d.ts +2 -2
- package/agnostic/arrays/index.js +2 -2
- package/agnostic/colors/index.d.ts +2 -2
- package/agnostic/colors/index.js +2 -2
- package/agnostic/css/index.d.ts +1 -1
- package/agnostic/css/index.js +1 -1
- package/agnostic/errors/index.d.ts +1 -1
- package/agnostic/errors/index.js +1 -1
- package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts +11 -11
- package/agnostic/html/hyper-json/smart-tags/coalesced/index.js +11 -11
- package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts +1 -1
- package/agnostic/html/hyper-json/smart-tags/isolated/index.js +1 -1
- package/agnostic/html/index.d.ts +1 -1
- package/agnostic/html/index.js +1 -1
- package/agnostic/index.d.ts +7 -7
- package/agnostic/index.js +7 -7
- package/agnostic/misc/index.d.ts +3 -3
- package/agnostic/misc/index.js +3 -3
- package/agnostic/numbers/index.d.ts +1 -1
- package/agnostic/numbers/index.js +1 -1
- package/agnostic/objects/index.d.ts +2 -2
- package/agnostic/objects/index.js +2 -2
- package/agnostic/strings/index.d.ts +2 -2
- package/agnostic/strings/index.js +2 -2
- package/components/ScrollListener/index.d.ts +45 -18
- package/components/ScrollListener/index.js +55 -22
- package/components/ScrollListener/types.d.ts +31 -0
- package/components/ScrollListener/types.js +14 -0
- package/components/Sequencer/index.d.ts +22 -5
- package/components/Sequencer/index.js +80 -4
- package/components/index.d.ts +2 -2
- package/components/index.js +2 -2
- package/components/utils/types.d.ts +5 -15
- package/node/@aws-s3/storage/directory/index.d.ts +1 -1
- package/node/@aws-s3/storage/directory/index.js +1 -1
- package/node/@aws-s3/storage/file/index.d.ts +2 -2
- package/node/@aws-s3/storage/file/index.js +2 -2
- package/node/@google-cloud/storage/file/index.d.ts +2 -2
- package/node/@google-cloud/storage/file/index.js +2 -2
- package/node/@google-cloud/storage/index.d.ts +1 -1
- package/node/@google-cloud/storage/index.js +1 -1
- package/node/ftps/file/index.d.ts +1 -1
- package/node/ftps/file/index.js +1 -1
- package/node/images/index.d.ts +1 -1
- package/node/images/index.js +1 -1
- package/node/images/transform/operations/index.d.ts +3 -3
- package/node/images/transform/operations/index.js +3 -3
- package/node/index.d.ts +1 -1
- package/node/index.js +1 -1
- package/node/process/index.d.ts +1 -1
- package/node/process/index.js +1 -1
- package/node/sftp/file/index.d.ts +2 -2
- package/node/sftp/file/index.js +2 -2
- package/package.json +5 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as dedupe from './dedupe/index.js'
|
|
2
2
|
export * as findDuplicates from './find-duplicates/index.js'
|
|
3
|
+
export * as isArrayOf from './is-array-of/index.js'
|
|
3
4
|
export * as make from './make/index.js'
|
|
4
|
-
export * as randomPick from './random-pick/index.js'
|
|
5
5
|
export * as shuffle from './shuffle/index.js'
|
|
6
|
-
export * as
|
|
6
|
+
export * as randomPick from './random-pick/index.js'
|
package/agnostic/arrays/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as dedupe from './dedupe/index.js'
|
|
2
2
|
export * as findDuplicates from './find-duplicates/index.js'
|
|
3
|
+
export * as isArrayOf from './is-array-of/index.js'
|
|
3
4
|
export * as make from './make/index.js'
|
|
4
|
-
export * as randomPick from './random-pick/index.js'
|
|
5
5
|
export * as shuffle from './shuffle/index.js'
|
|
6
|
-
export * as
|
|
6
|
+
export * as randomPick from './random-pick/index.js'
|
|
@@ -3,10 +3,10 @@ export * as contrast from './contrast/index.js'
|
|
|
3
3
|
export * as convert from './convert/index.js'
|
|
4
4
|
export * as grayscale from './grayscale/index.js'
|
|
5
5
|
export * as distance from './distance/index.js'
|
|
6
|
+
export * as invert from './invert/index.js'
|
|
7
|
+
export * as palette from './palette/index.js'
|
|
6
8
|
export * as lerp from './lerp/index.js'
|
|
7
9
|
export * as luminance from './luminance/index.js'
|
|
8
10
|
export * as rotate from './rotate/index.js'
|
|
9
11
|
export * as tidy from './tidy/index.js'
|
|
10
|
-
export * as invert from './invert/index.js'
|
|
11
12
|
export * as typechecks from './typechecks/index.js'
|
|
12
|
-
export * as palette from './palette/index.js'
|
package/agnostic/colors/index.js
CHANGED
|
@@ -3,10 +3,10 @@ export * as contrast from './contrast/index.js'
|
|
|
3
3
|
export * as convert from './convert/index.js'
|
|
4
4
|
export * as grayscale from './grayscale/index.js'
|
|
5
5
|
export * as distance from './distance/index.js'
|
|
6
|
+
export * as invert from './invert/index.js'
|
|
7
|
+
export * as palette from './palette/index.js'
|
|
6
8
|
export * as lerp from './lerp/index.js'
|
|
7
9
|
export * as luminance from './luminance/index.js'
|
|
8
10
|
export * as rotate from './rotate/index.js'
|
|
9
11
|
export * as tidy from './tidy/index.js'
|
|
10
|
-
export * as invert from './invert/index.js'
|
|
11
12
|
export * as typechecks from './typechecks/index.js'
|
|
12
|
-
export * as palette from './palette/index.js'
|
package/agnostic/css/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as bem from './bem/index.js'
|
|
2
2
|
export * as clss from './clss/index.js'
|
|
3
|
+
export * as generateNiceColor from './generate-nice-color/index.js'
|
|
3
4
|
export * as isValidCssClassName from './is-valid-css-class-name/index.js'
|
|
4
5
|
export * as scale from './scale/index.js'
|
|
5
|
-
export * as generateNiceColor from './generate-nice-color/index.js'
|
|
6
6
|
export * as stylesSet from './styles-set/index.js'
|
package/agnostic/css/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as bem from './bem/index.js'
|
|
2
2
|
export * as clss from './clss/index.js'
|
|
3
|
+
export * as generateNiceColor from './generate-nice-color/index.js'
|
|
3
4
|
export * as isValidCssClassName from './is-valid-css-class-name/index.js'
|
|
4
5
|
export * as scale from './scale/index.js'
|
|
5
|
-
export * as generateNiceColor from './generate-nice-color/index.js'
|
|
6
6
|
export * as stylesSet from './styles-set/index.js'
|
package/agnostic/errors/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * as add from './add/index.js'
|
|
2
2
|
export * as addclass from './addclass/index.js'
|
|
3
3
|
export * as and from './and/index.js'
|
|
4
|
-
export * as at from './at/index.js'
|
|
5
4
|
export * as append from './append/index.js'
|
|
5
|
+
export * as at from './at/index.js'
|
|
6
6
|
export * as call from './call/index.js'
|
|
7
7
|
export * as clone from './clone/index.js'
|
|
8
8
|
export * as deleteproperties from './deleteproperties/index.js'
|
|
@@ -10,43 +10,43 @@ export * as equals from './equals/index.js'
|
|
|
10
10
|
export * as getproperties from './getproperties/index.js'
|
|
11
11
|
export * as getattribute from './getattribute/index.js'
|
|
12
12
|
export * as getproperty from './getproperty/index.js'
|
|
13
|
+
export * as hjparse from './hjparse/index.js'
|
|
13
14
|
export * as hjstringify from './hjstringify/index.js'
|
|
14
|
-
export * as if from './if/index.js'
|
|
15
15
|
export * as initialize from './initialize/index.js'
|
|
16
|
+
export * as if from './if/index.js'
|
|
16
17
|
export * as join from './join/index.js'
|
|
17
18
|
export * as length from './length/index.js'
|
|
18
19
|
export * as map from './map/index.js'
|
|
19
20
|
export * as negate from './negate/index.js'
|
|
20
|
-
export * as hjparse from './hjparse/index.js'
|
|
21
|
-
export * as or from './or/index.js'
|
|
22
21
|
export * as notrailing from './notrailing/index.js'
|
|
22
|
+
export * as or from './or/index.js'
|
|
23
23
|
export * as pickrandom from './pickrandom/index.js'
|
|
24
|
-
export * as print from './print/index.js'
|
|
25
24
|
export * as populate from './populate/index.js'
|
|
26
|
-
export * as
|
|
25
|
+
export * as print from './print/index.js'
|
|
27
26
|
export * as pusheach from './pusheach/index.js'
|
|
27
|
+
export * as push from './push/index.js'
|
|
28
28
|
export * as recordtoarray from './recordtoarray/index.js'
|
|
29
29
|
export * as removeattribute from './removeattribute/index.js'
|
|
30
30
|
export * as removeclass from './removeclass/index.js'
|
|
31
31
|
export * as renameproperty from './renameproperty/index.js'
|
|
32
32
|
export * as replace from './replace/index.js'
|
|
33
|
-
export * as set from './set/index.js'
|
|
34
33
|
export * as select from './select/index.js'
|
|
34
|
+
export * as set from './set/index.js'
|
|
35
35
|
export * as setattribute from './setattribute/index.js'
|
|
36
36
|
export * as setproperty from './setproperty/index.js'
|
|
37
37
|
export * as sorton from './sorton/index.js'
|
|
38
|
-
export * as split from './split/index.js'
|
|
39
38
|
export * as spread from './spread/index.js'
|
|
39
|
+
export * as split from './split/index.js'
|
|
40
40
|
export * as toarray from './toarray/index.js'
|
|
41
41
|
export * as toboolean from './toboolean/index.js'
|
|
42
42
|
export * as toelement from './toelement/index.js'
|
|
43
43
|
export * as toggleclass from './toggleclass/index.js'
|
|
44
|
-
export * as tonull from './tonull/index.js'
|
|
45
44
|
export * as tonodelist from './tonodelist/index.js'
|
|
45
|
+
export * as tonull from './tonull/index.js'
|
|
46
46
|
export * as tonumber from './tonumber/index.js'
|
|
47
47
|
export * as torecord from './torecord/index.js'
|
|
48
48
|
export * as toref from './toref/index.js'
|
|
49
|
-
export * as tostring from './tostring/index.js'
|
|
50
49
|
export * as totext from './totext/index.js'
|
|
51
|
-
export * as
|
|
50
|
+
export * as tostring from './tostring/index.js'
|
|
52
51
|
export * as transformselected from './transformselected/index.js'
|
|
52
|
+
export * as trim from './trim/index.js'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * as add from './add/index.js'
|
|
2
2
|
export * as addclass from './addclass/index.js'
|
|
3
3
|
export * as and from './and/index.js'
|
|
4
|
-
export * as at from './at/index.js'
|
|
5
4
|
export * as append from './append/index.js'
|
|
5
|
+
export * as at from './at/index.js'
|
|
6
6
|
export * as call from './call/index.js'
|
|
7
7
|
export * as clone from './clone/index.js'
|
|
8
8
|
export * as deleteproperties from './deleteproperties/index.js'
|
|
@@ -10,43 +10,43 @@ export * as equals from './equals/index.js'
|
|
|
10
10
|
export * as getproperties from './getproperties/index.js'
|
|
11
11
|
export * as getattribute from './getattribute/index.js'
|
|
12
12
|
export * as getproperty from './getproperty/index.js'
|
|
13
|
+
export * as hjparse from './hjparse/index.js'
|
|
13
14
|
export * as hjstringify from './hjstringify/index.js'
|
|
14
|
-
export * as if from './if/index.js'
|
|
15
15
|
export * as initialize from './initialize/index.js'
|
|
16
|
+
export * as if from './if/index.js'
|
|
16
17
|
export * as join from './join/index.js'
|
|
17
18
|
export * as length from './length/index.js'
|
|
18
19
|
export * as map from './map/index.js'
|
|
19
20
|
export * as negate from './negate/index.js'
|
|
20
|
-
export * as hjparse from './hjparse/index.js'
|
|
21
|
-
export * as or from './or/index.js'
|
|
22
21
|
export * as notrailing from './notrailing/index.js'
|
|
22
|
+
export * as or from './or/index.js'
|
|
23
23
|
export * as pickrandom from './pickrandom/index.js'
|
|
24
|
-
export * as print from './print/index.js'
|
|
25
24
|
export * as populate from './populate/index.js'
|
|
26
|
-
export * as
|
|
25
|
+
export * as print from './print/index.js'
|
|
27
26
|
export * as pusheach from './pusheach/index.js'
|
|
27
|
+
export * as push from './push/index.js'
|
|
28
28
|
export * as recordtoarray from './recordtoarray/index.js'
|
|
29
29
|
export * as removeattribute from './removeattribute/index.js'
|
|
30
30
|
export * as removeclass from './removeclass/index.js'
|
|
31
31
|
export * as renameproperty from './renameproperty/index.js'
|
|
32
32
|
export * as replace from './replace/index.js'
|
|
33
|
-
export * as set from './set/index.js'
|
|
34
33
|
export * as select from './select/index.js'
|
|
34
|
+
export * as set from './set/index.js'
|
|
35
35
|
export * as setattribute from './setattribute/index.js'
|
|
36
36
|
export * as setproperty from './setproperty/index.js'
|
|
37
37
|
export * as sorton from './sorton/index.js'
|
|
38
|
-
export * as split from './split/index.js'
|
|
39
38
|
export * as spread from './spread/index.js'
|
|
39
|
+
export * as split from './split/index.js'
|
|
40
40
|
export * as toarray from './toarray/index.js'
|
|
41
41
|
export * as toboolean from './toboolean/index.js'
|
|
42
42
|
export * as toelement from './toelement/index.js'
|
|
43
43
|
export * as toggleclass from './toggleclass/index.js'
|
|
44
|
-
export * as tonull from './tonull/index.js'
|
|
45
44
|
export * as tonodelist from './tonodelist/index.js'
|
|
45
|
+
export * as tonull from './tonull/index.js'
|
|
46
46
|
export * as tonumber from './tonumber/index.js'
|
|
47
47
|
export * as torecord from './torecord/index.js'
|
|
48
48
|
export * as toref from './toref/index.js'
|
|
49
|
-
export * as tostring from './tostring/index.js'
|
|
50
49
|
export * as totext from './totext/index.js'
|
|
51
|
-
export * as
|
|
50
|
+
export * as tostring from './tostring/index.js'
|
|
52
51
|
export * as transformselected from './transformselected/index.js'
|
|
52
|
+
export * as trim from './trim/index.js'
|
|
@@ -8,6 +8,6 @@ export * as nodelist from './nodelist/index.js'
|
|
|
8
8
|
export * as null from './null/index.js'
|
|
9
9
|
export * as number from './number/index.js'
|
|
10
10
|
export * as record from './record/index.js'
|
|
11
|
-
export * as ref from './ref/index.js'
|
|
12
11
|
export * as string from './string/index.js'
|
|
13
12
|
export * as text from './text/index.js'
|
|
13
|
+
export * as ref from './ref/index.js'
|
|
@@ -8,6 +8,6 @@ export * as nodelist from './nodelist/index.js'
|
|
|
8
8
|
export * as null from './null/index.js'
|
|
9
9
|
export * as number from './number/index.js'
|
|
10
10
|
export * as record from './record/index.js'
|
|
11
|
-
export * as ref from './ref/index.js'
|
|
12
11
|
export * as string from './string/index.js'
|
|
13
12
|
export * as text from './text/index.js'
|
|
13
|
+
export * as ref from './ref/index.js'
|
package/agnostic/html/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * as deepSelect from './deep-select/index.js'
|
|
2
|
+
export * as getNodeAncestors from './get-node-ancestors/index.js'
|
|
2
3
|
export * as getPositionInsideParent from './get-position-inside-parent/index.js'
|
|
3
4
|
export * as hyperJson from './hyper-json/index.js'
|
|
4
5
|
export * as insertNode from './insert-node/index.js'
|
|
@@ -7,4 +8,3 @@ export * as replaceInElement from './replace-in-element/index.js'
|
|
|
7
8
|
export * as selectorToElement from './selector-to-element/index.js'
|
|
8
9
|
export * as stringToNodes from './string-to-nodes/index.js'
|
|
9
10
|
export * as watchSelection from './watch-selection/index.js'
|
|
10
|
-
export * as getNodeAncestors from './get-node-ancestors/index.js'
|
package/agnostic/html/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * as deepSelect from './deep-select/index.js'
|
|
2
|
+
export * as getNodeAncestors from './get-node-ancestors/index.js'
|
|
2
3
|
export * as getPositionInsideParent from './get-position-inside-parent/index.js'
|
|
3
4
|
export * as hyperJson from './hyper-json/index.js'
|
|
4
5
|
export * as insertNode from './insert-node/index.js'
|
|
@@ -7,4 +8,3 @@ export * as replaceInElement from './replace-in-element/index.js'
|
|
|
7
8
|
export * as selectorToElement from './selector-to-element/index.js'
|
|
8
9
|
export * as stringToNodes from './string-to-nodes/index.js'
|
|
9
10
|
export * as watchSelection from './watch-selection/index.js'
|
|
10
|
-
export * as getNodeAncestors from './get-node-ancestors/index.js'
|
package/agnostic/index.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
export * as arrays from './arrays/index.js'
|
|
2
1
|
export * as booleans from './booleans/index.js'
|
|
2
|
+
export * as arrays from './arrays/index.js'
|
|
3
|
+
export * as css from './css/index.js'
|
|
3
4
|
export * as colors from './colors/index.js'
|
|
5
|
+
export * as html from './html/index.js'
|
|
4
6
|
export * as errors from './errors/index.js'
|
|
5
|
-
export * as css from './css/index.js'
|
|
6
7
|
export * as misc from './misc/index.js'
|
|
7
|
-
export * as
|
|
8
|
-
export * as html from './html/index.js'
|
|
8
|
+
export * as numbers from './numbers/index.js'
|
|
9
9
|
export * as optim from './optim/index.js'
|
|
10
|
-
export * as
|
|
10
|
+
export * as objects from './objects/index.js'
|
|
11
11
|
export * as regexps from './regexps/index.js'
|
|
12
|
+
export * as random from './random/index.js'
|
|
12
13
|
export * as strings from './strings/index.js'
|
|
13
|
-
export * as sanitization from './sanitization/index.js'
|
|
14
14
|
export * as subtitles from './subtitles/index.js'
|
|
15
15
|
export * as time from './time/index.js'
|
|
16
|
+
export * as sanitization from './sanitization/index.js'
|
|
16
17
|
export * as typescript from './typescript/index.js'
|
|
17
|
-
export * as numbers from './numbers/index.js'
|
package/agnostic/index.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
export * as arrays from './arrays/index.js'
|
|
2
1
|
export * as booleans from './booleans/index.js'
|
|
2
|
+
export * as arrays from './arrays/index.js'
|
|
3
|
+
export * as css from './css/index.js'
|
|
3
4
|
export * as colors from './colors/index.js'
|
|
5
|
+
export * as html from './html/index.js'
|
|
4
6
|
export * as errors from './errors/index.js'
|
|
5
|
-
export * as css from './css/index.js'
|
|
6
7
|
export * as misc from './misc/index.js'
|
|
7
|
-
export * as
|
|
8
|
-
export * as html from './html/index.js'
|
|
8
|
+
export * as numbers from './numbers/index.js'
|
|
9
9
|
export * as optim from './optim/index.js'
|
|
10
|
-
export * as
|
|
10
|
+
export * as objects from './objects/index.js'
|
|
11
11
|
export * as regexps from './regexps/index.js'
|
|
12
|
+
export * as random from './random/index.js'
|
|
12
13
|
export * as strings from './strings/index.js'
|
|
13
|
-
export * as sanitization from './sanitization/index.js'
|
|
14
14
|
export * as subtitles from './subtitles/index.js'
|
|
15
15
|
export * as time from './time/index.js'
|
|
16
|
+
export * as sanitization from './sanitization/index.js'
|
|
16
17
|
export * as typescript from './typescript/index.js'
|
|
17
|
-
export * as numbers from './numbers/index.js'
|
package/agnostic/misc/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * as assert from './assert/index.js'
|
|
2
2
|
export * as cast from './cast/index.js'
|
|
3
|
-
export * as connection from './connection/index.js'
|
|
4
3
|
export * as crawler from './crawler/index.js'
|
|
5
|
-
export * as dataSize from './data-size/index.js'
|
|
6
4
|
export * as crossenv from './crossenv/index.js'
|
|
7
|
-
export * as
|
|
5
|
+
export * as connection from './connection/index.js'
|
|
6
|
+
export * as dataSize from './data-size/index.js'
|
|
8
7
|
export * as isNullish from './is-nullish/index.js'
|
|
8
|
+
export * as isConstructorFunction from './is-constructor-function/index.js'
|
|
9
9
|
export * as logs from './logs/index.js'
|
|
10
10
|
export * as loremIpsum from './lorem-ipsum/index.js'
|
|
11
11
|
export * as normalizeExtension from './normalize-extension/index.js'
|
package/agnostic/misc/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * as assert from './assert/index.js'
|
|
2
2
|
export * as cast from './cast/index.js'
|
|
3
|
-
export * as connection from './connection/index.js'
|
|
4
3
|
export * as crawler from './crawler/index.js'
|
|
5
|
-
export * as dataSize from './data-size/index.js'
|
|
6
4
|
export * as crossenv from './crossenv/index.js'
|
|
7
|
-
export * as
|
|
5
|
+
export * as connection from './connection/index.js'
|
|
6
|
+
export * as dataSize from './data-size/index.js'
|
|
8
7
|
export * as isNullish from './is-nullish/index.js'
|
|
8
|
+
export * as isConstructorFunction from './is-constructor-function/index.js'
|
|
9
9
|
export * as logs from './logs/index.js'
|
|
10
10
|
export * as loremIpsum from './lorem-ipsum/index.js'
|
|
11
11
|
export * as normalizeExtension from './normalize-extension/index.js'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as absoluteModulo from './absolute-modulo/index.js'
|
|
2
2
|
export * as approximateRational from './approximate-rational/index.js'
|
|
3
|
+
export * as clamp from './clamp/index.js'
|
|
3
4
|
export * as geometricProgressions from './geometric-progressions/index.js'
|
|
4
5
|
export * as interpolate from './interpolate/index.js'
|
|
5
|
-
export * as clamp from './clamp/index.js'
|
|
6
6
|
export * as round from './round/index.js'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as absoluteModulo from './absolute-modulo/index.js'
|
|
2
2
|
export * as approximateRational from './approximate-rational/index.js'
|
|
3
|
+
export * as clamp from './clamp/index.js'
|
|
3
4
|
export * as geometricProgressions from './geometric-progressions/index.js'
|
|
4
5
|
export * as interpolate from './interpolate/index.js'
|
|
5
|
-
export * as clamp from './clamp/index.js'
|
|
6
6
|
export * as round from './round/index.js'
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export * as deepGetProperty from './deep-get-property/index.js'
|
|
2
|
-
export * as enums from './enums/index.js'
|
|
3
2
|
export * as flattenGetters from './flatten-getters/index.js'
|
|
3
|
+
export * as enums from './enums/index.js'
|
|
4
4
|
export * as isObject from './is-object/index.js'
|
|
5
5
|
export * as isRecord from './is-record/index.js'
|
|
6
6
|
export * as recordFormat from './record-format/index.js'
|
|
7
7
|
export * as recordMap from './record-map/index.js'
|
|
8
|
-
export * as sortKeys from './sort-keys/index.js'
|
|
9
8
|
export * as validation from './validation/index.js'
|
|
9
|
+
export * as sortKeys from './sort-keys/index.js'
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export * as deepGetProperty from './deep-get-property/index.js'
|
|
2
|
-
export * as enums from './enums/index.js'
|
|
3
2
|
export * as flattenGetters from './flatten-getters/index.js'
|
|
3
|
+
export * as enums from './enums/index.js'
|
|
4
4
|
export * as isObject from './is-object/index.js'
|
|
5
5
|
export * as isRecord from './is-record/index.js'
|
|
6
6
|
export * as recordFormat from './record-format/index.js'
|
|
7
7
|
export * as recordMap from './record-map/index.js'
|
|
8
|
-
export * as sortKeys from './sort-keys/index.js'
|
|
9
8
|
export * as validation from './validation/index.js'
|
|
9
|
+
export * as sortKeys from './sort-keys/index.js'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * as charCodes from './char-codes/index.js'
|
|
2
2
|
export * as matches from './matches/index.js'
|
|
3
3
|
export * as normalizeIndent from './normalize-indent/index.js'
|
|
4
|
-
export * as parseTable from './parse-table/index.js'
|
|
5
4
|
export * as replaceAll from './replace-all/index.js'
|
|
6
5
|
export * as splitTrim from './split-trim/index.js'
|
|
7
|
-
export * as toAlphanum from './to-alphanum/index.js'
|
|
8
6
|
export * as trim from './trim/index.js'
|
|
7
|
+
export * as toAlphanum from './to-alphanum/index.js'
|
|
8
|
+
export * as parseTable from './parse-table/index.js'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * as charCodes from './char-codes/index.js'
|
|
2
2
|
export * as matches from './matches/index.js'
|
|
3
3
|
export * as normalizeIndent from './normalize-indent/index.js'
|
|
4
|
-
export * as parseTable from './parse-table/index.js'
|
|
5
4
|
export * as replaceAll from './replace-all/index.js'
|
|
6
5
|
export * as splitTrim from './split-trim/index.js'
|
|
7
|
-
export * as toAlphanum from './to-alphanum/index.js'
|
|
8
6
|
export * as trim from './trim/index.js'
|
|
7
|
+
export * as toAlphanum from './to-alphanum/index.js'
|
|
8
|
+
export * as parseTable from './parse-table/index.js'
|
|
@@ -1,43 +1,59 @@
|
|
|
1
1
|
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
-
import type { WithClassName
|
|
2
|
+
import type { WithClassName } from '../utils/types.js';
|
|
3
|
+
import type { ViewportBehaviours } from '../utils/viewport-behaviours/types.js';
|
|
3
4
|
import { type ScrollState } from './utils.js';
|
|
5
|
+
import type { ScrollListenerAction } from './types.js';
|
|
4
6
|
/**
|
|
5
7
|
* Props for the {@link ScrollListener} component.
|
|
6
8
|
*
|
|
7
|
-
* @property
|
|
8
|
-
*
|
|
9
|
-
* @property
|
|
10
|
-
*
|
|
9
|
+
* @property tracking - Whether the component is measuring, taken over by the consumer.
|
|
10
|
+
* Provided, it is the whole answer and the instructions no longer reach it.
|
|
11
|
+
* @property defaultTracking - Whether it starts measuring on mount. `true` by default,
|
|
12
|
+
* which is what this component has always done — a starting point and not a setting,
|
|
13
|
+
* hence `default…`. `defaultTracking={false}` with `whenVisible='track'` is the old
|
|
14
|
+
* `startOnVisible`, written in the shared grammar.
|
|
15
|
+
* @property behavioursSuspended - Holds back the instructions that **start** something,
|
|
16
|
+
* and lets through those that stop it. A gate reaches `'track'`: measuring a subtree
|
|
17
|
+
* nobody is being shown is work done for no one.
|
|
18
|
+
* @property onIsTrackingChanged - Called once the effective tracking state changed.
|
|
11
19
|
* @property onScrollStateChanged - Called after the measured {@link ScrollState}
|
|
12
20
|
* changed. Receives `undefined` until the first measurement lands.
|
|
13
|
-
* @property onVisibilityChanged - Called
|
|
14
|
-
*
|
|
21
|
+
* @property onVisibilityChanged - Called when the component enters or leaves the
|
|
22
|
+
* viewport, on the **settled** state — the `visibility…` delays included, so a consumer
|
|
23
|
+
* watching visibility and a consumer running instructions are told the same story.
|
|
15
24
|
* @property onScrollProgressChanged - Called after the element's vertical outer
|
|
16
25
|
* scroll progress changed: `0` when it is about to enter the viewport, `1` once
|
|
17
26
|
* it has fully left it. Never on mount.
|
|
18
27
|
* @property onScrollDirectionChanged - Called after the document scroll
|
|
19
28
|
* direction changed, with `'up'` or `'down'`. Never on mount.
|
|
20
|
-
* @property
|
|
21
|
-
* counts as visible
|
|
22
|
-
* @property
|
|
23
|
-
* @property
|
|
29
|
+
* @property visibilityThreshold - How much of the component has to be in view before it
|
|
30
|
+
* counts as visible. See `VisibilityOptions` for this and the four that follow it.
|
|
31
|
+
* @property visibilityRoot - The box visibility is measured against.
|
|
32
|
+
* @property visibilityRootMargin - Grows or shrinks that box before measuring.
|
|
33
|
+
* @property visibilityOnAfterMs - How long it must stay visible to count as visible.
|
|
34
|
+
* @property visibilityOffAfterMs - The same, on the way out.
|
|
24
35
|
* @property className - Optional additional class name(s) applied to the root element.
|
|
25
36
|
* @property children - React nodes rendered inside the scroll listener container.
|
|
26
37
|
*/
|
|
27
|
-
export type Props = PropsWithChildren<WithClassName<
|
|
28
|
-
|
|
29
|
-
|
|
38
|
+
export type Props = PropsWithChildren<WithClassName<{
|
|
39
|
+
tracking?: boolean;
|
|
40
|
+
defaultTracking?: boolean;
|
|
41
|
+
onIsTrackingChanged?: (isTracking: boolean) => void;
|
|
30
42
|
onScrollStateChanged?: (scrollState?: ScrollState) => void;
|
|
31
|
-
onVisibilityChanged?: (isVisible: boolean) => void;
|
|
32
43
|
onScrollProgressChanged?: (progress: number) => void;
|
|
33
44
|
onScrollDirectionChanged?: (direction: 'up' | 'down') => void;
|
|
34
|
-
}
|
|
45
|
+
}>> & ViewportBehaviours<ScrollListenerAction> & {
|
|
46
|
+
behavioursSuspended?: boolean;
|
|
47
|
+
};
|
|
35
48
|
/**
|
|
36
49
|
* Exposes scroll metrics — both the document's and its own — as CSS custom
|
|
37
50
|
* properties on its root element, so scroll-driven styling needs no JavaScript
|
|
38
51
|
* of its own.
|
|
39
52
|
*
|
|
40
53
|
* ### Root element modifiers
|
|
54
|
+
* - `--tracking` — the component is measuring. The state, where `--measured` is its
|
|
55
|
+
* consequence: a listener that has stopped keeps its last values, so it can be
|
|
56
|
+
* measured and no longer tracking.
|
|
41
57
|
* - `--measured` — a first measurement landed, so the properties below are set.
|
|
42
58
|
* - `--scrolling-up` / `--scrolling-down` — the document's last known direction.
|
|
43
59
|
* Neither is present before the first scroll.
|
|
@@ -66,10 +82,21 @@ export type Props = PropsWithChildren<WithClassName<WithViewportObservation<{
|
|
|
66
82
|
*
|
|
67
83
|
* @param props - Component properties.
|
|
68
84
|
* @see {@link Props}
|
|
69
|
-
* @returns A container exposing the metrics,
|
|
70
|
-
* {@link IntersectionObserverComponent}.
|
|
85
|
+
* @returns A container exposing the metrics, with the children as its own.
|
|
71
86
|
*
|
|
72
87
|
* @remarks
|
|
88
|
+
* **Viewport-driven behaviour is declared, not named by a prop.** `whenVisible` and
|
|
89
|
+
* `whenHidden` take `'track'`, `'untrack'`, or a list, each optionally suffixed by
|
|
90
|
+
* `':once'` and `':force'`. The old `startOnVisible` is `defaultTracking={false}` plus
|
|
91
|
+
* `whenVisible='track'`, and `stopOnHidden` is `whenHidden='untrack'`. See
|
|
92
|
+
* `components/utils/viewport-behaviours` for the grammar, and the `visibility…` props for
|
|
93
|
+
* what « visible » means and how long it has to have been true.
|
|
94
|
+
*
|
|
95
|
+
* **The observer runs on the root itself.** There is no inner box between this element
|
|
96
|
+
* and the children any more, and that matters here more than anywhere else in the
|
|
97
|
+
* library: the whole point is a stylesheet animating on the properties this element
|
|
98
|
+
* carries, which it cannot do if what it wants to move sits one level below.
|
|
99
|
+
*
|
|
73
100
|
* All mounted instances share a single pair of `scroll` / `resize` listeners and
|
|
74
101
|
* a single measurement pass per animation frame — the document is measured once
|
|
75
102
|
* for everyone, each element only for itself. The listeners exist only while at
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { clss } from '../../agnostic/css/clss/index.js';
|
|
4
4
|
import { randomHash } from '../../agnostic/random/uuid/index.js';
|
|
5
|
-
import { IntersectionObserverComponent } from '../IntersectionObserver/index.js';
|
|
6
5
|
import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
|
|
6
|
+
import { useViewportBehaviours } from '../utils/viewport-behaviours/index.js';
|
|
7
7
|
import { scrollListener as publicClassName } from '../public-classnames.js';
|
|
8
8
|
import { getScrollProgress, subscribe, toScrollCssProps, unsubscribe } from './utils.js';
|
|
9
9
|
import cssModule from './styles.module.css';
|
|
@@ -13,6 +13,9 @@ import cssModule from './styles.module.css';
|
|
|
13
13
|
* of its own.
|
|
14
14
|
*
|
|
15
15
|
* ### Root element modifiers
|
|
16
|
+
* - `--tracking` — the component is measuring. The state, where `--measured` is its
|
|
17
|
+
* consequence: a listener that has stopped keeps its last values, so it can be
|
|
18
|
+
* measured and no longer tracking.
|
|
16
19
|
* - `--measured` — a first measurement landed, so the properties below are set.
|
|
17
20
|
* - `--scrolling-up` / `--scrolling-down` — the document's last known direction.
|
|
18
21
|
* Neither is present before the first scroll.
|
|
@@ -41,26 +44,63 @@ import cssModule from './styles.module.css';
|
|
|
41
44
|
*
|
|
42
45
|
* @param props - Component properties.
|
|
43
46
|
* @see {@link Props}
|
|
44
|
-
* @returns A container exposing the metrics,
|
|
45
|
-
* {@link IntersectionObserverComponent}.
|
|
47
|
+
* @returns A container exposing the metrics, with the children as its own.
|
|
46
48
|
*
|
|
47
49
|
* @remarks
|
|
50
|
+
* **Viewport-driven behaviour is declared, not named by a prop.** `whenVisible` and
|
|
51
|
+
* `whenHidden` take `'track'`, `'untrack'`, or a list, each optionally suffixed by
|
|
52
|
+
* `':once'` and `':force'`. The old `startOnVisible` is `defaultTracking={false}` plus
|
|
53
|
+
* `whenVisible='track'`, and `stopOnHidden` is `whenHidden='untrack'`. See
|
|
54
|
+
* `components/utils/viewport-behaviours` for the grammar, and the `visibility…` props for
|
|
55
|
+
* what « visible » means and how long it has to have been true.
|
|
56
|
+
*
|
|
57
|
+
* **The observer runs on the root itself.** There is no inner box between this element
|
|
58
|
+
* and the children any more, and that matters here more than anywhere else in the
|
|
59
|
+
* library: the whole point is a stylesheet animating on the properties this element
|
|
60
|
+
* carries, which it cannot do if what it wants to move sits one level below.
|
|
61
|
+
*
|
|
48
62
|
* All mounted instances share a single pair of `scroll` / `resize` listeners and
|
|
49
63
|
* a single measurement pass per animation frame — the document is measured once
|
|
50
64
|
* for everyone, each element only for itself. The listeners exist only while at
|
|
51
65
|
* least one instance is tracking.
|
|
52
66
|
*/
|
|
53
|
-
export const ScrollListener = ({
|
|
67
|
+
export const ScrollListener = ({ tracking, defaultTracking, behavioursSuspended, visibilityThreshold, visibilityRoot, visibilityRootMargin, visibilityOnAfterMs, visibilityOffAfterMs, whenVisible, whenHidden, onIsTrackingChanged, onScrollStateChanged, onVisibilityChanged, onScrollProgressChanged, onScrollDirectionChanged, className, children }) => {
|
|
54
68
|
// State & refs
|
|
55
69
|
const [subscriberId] = useState(() => randomHash(6));
|
|
70
|
+
const [internalTracking, setInternalTracking] = useState(defaultTracking ?? true);
|
|
56
71
|
const [scrollState, setScrollState] = useState();
|
|
57
72
|
const [scrollDirection, setScrollDirection] = useState(null);
|
|
58
73
|
const rootRef = useRef(null);
|
|
59
74
|
const previousScrollYRef = useRef(null);
|
|
75
|
+
const isTracking = tracking ?? internalTracking;
|
|
60
76
|
const scrollProgress = scrollState === undefined
|
|
61
77
|
? undefined
|
|
62
78
|
: getScrollProgress(scrollState).y;
|
|
79
|
+
// Viewport behaviours
|
|
80
|
+
// Measuring is the only thing this component does, so starting and stopping it is the
|
|
81
|
+
// whole vocabulary. `track` and `untrack` need no guard against a controlled
|
|
82
|
+
// `tracking`: the effective state reads the prop first, so the internal one they write
|
|
83
|
+
// is simply never consulted.
|
|
84
|
+
const actions = {
|
|
85
|
+
track: { kind: 'start', domain: 'tracking', run: () => setInternalTracking(true) },
|
|
86
|
+
untrack: { kind: 'stop', domain: 'tracking', run: () => setInternalTracking(false) }
|
|
87
|
+
};
|
|
88
|
+
// The surrender half of the result is dropped: this component has no control a reader
|
|
89
|
+
// could take over. The observer runs on the root itself — there is no inner box any
|
|
90
|
+
// more, and that matters more here than anywhere: a stylesheet reads the measurements
|
|
91
|
+
// off this element, so its children have to be its children.
|
|
92
|
+
useViewportBehaviours(rootRef, {
|
|
93
|
+
visibilityThreshold,
|
|
94
|
+
visibilityRoot,
|
|
95
|
+
visibilityRootMargin,
|
|
96
|
+
visibilityOnAfterMs,
|
|
97
|
+
visibilityOffAfterMs,
|
|
98
|
+
whenVisible,
|
|
99
|
+
whenHidden,
|
|
100
|
+
onVisibilityChanged
|
|
101
|
+
}, actions, behavioursSuspended === true);
|
|
63
102
|
// State dispatch
|
|
103
|
+
useChangeDispatch(isTracking, onIsTrackingChanged);
|
|
64
104
|
useChangeDispatch(scrollState, onScrollStateChanged);
|
|
65
105
|
useChangeDispatch(scrollProgress, progress => { if (progress !== undefined)
|
|
66
106
|
onScrollProgressChanged?.(progress); });
|
|
@@ -77,27 +117,20 @@ export const ScrollListener = ({ startOnVisible, stopOnHidden, threshold, root,
|
|
|
77
117
|
return;
|
|
78
118
|
setScrollDirection(y > previous ? 'down' : 'up');
|
|
79
119
|
}, [scrollState]);
|
|
80
|
-
// Fx.
|
|
81
|
-
// The
|
|
120
|
+
// Fx. dep. `isTracking` - the subscription follows the state, and nothing else opens
|
|
121
|
+
// or closes it. The measurements are left on their last values when it closes: a
|
|
122
|
+
// stylesheet reading `--lm-scroll-listener-scroll-y` must not see it drop to zero
|
|
123
|
+
// because the element went off screen.
|
|
82
124
|
useEffect(() => {
|
|
83
|
-
if (
|
|
84
|
-
|
|
85
|
-
}
|
|
125
|
+
if (!isTracking)
|
|
126
|
+
return;
|
|
127
|
+
subscribe(subscriberId, { rootRef, onScrollStateChange: setScrollState });
|
|
86
128
|
return () => unsubscribe(subscriberId);
|
|
87
|
-
}, []);
|
|
88
|
-
// User action handlers
|
|
89
|
-
const handleIntersection = useCallback(({ ioEntry }) => {
|
|
90
|
-
const isVisible = ioEntry?.isIntersecting ?? false;
|
|
91
|
-
onVisibilityChanged?.(isVisible);
|
|
92
|
-
if (isVisible && startOnVisible === true) {
|
|
93
|
-
subscribe(subscriberId, { rootRef, onScrollStateChange: setScrollState });
|
|
94
|
-
}
|
|
95
|
-
if (!isVisible && stopOnHidden === true)
|
|
96
|
-
unsubscribe(subscriberId);
|
|
97
|
-
}, [startOnVisible, stopOnHidden, onVisibilityChanged]);
|
|
129
|
+
}, [isTracking]);
|
|
98
130
|
// Rendering
|
|
99
131
|
const c = clss(publicClassName, { cssModule });
|
|
100
132
|
const rootClss = mergeClassNames(c(null, {
|
|
133
|
+
tracking: isTracking,
|
|
101
134
|
measured: scrollState !== undefined,
|
|
102
135
|
'scrolling-up': scrollDirection === 'up',
|
|
103
136
|
'scrolling-down': scrollDirection === 'down'
|
|
@@ -105,5 +138,5 @@ export const ScrollListener = ({ startOnVisible, stopOnHidden, threshold, root,
|
|
|
105
138
|
const customProps = scrollState === undefined
|
|
106
139
|
? {}
|
|
107
140
|
: toScrollCssProps(scrollState);
|
|
108
|
-
return _jsx("div", { className: rootClss, ref: rootRef, style: { ...customProps }, children:
|
|
141
|
+
return _jsx("div", { className: rootClss, ref: rootRef, style: { ...customProps }, children: children });
|
|
109
142
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The verbs a scroll listener answers to.
|
|
3
|
+
*
|
|
4
|
+
* Two, and there could not be more: measuring is the only thing this component does, so
|
|
5
|
+
* starting and stopping it is the whole of what a trigger can act on. `track` is the old
|
|
6
|
+
* `startOnVisible` and `untrack` the old `stopOnHidden`, said in the grammar the library
|
|
7
|
+
* shares rather than in two props of its own.
|
|
8
|
+
*
|
|
9
|
+
* Neither takes an argument.
|
|
10
|
+
*/
|
|
11
|
+
export declare const SCROLL_LISTENER_VERBS: readonly ["track", "untrack"];
|
|
12
|
+
export type ScrollListenerVerb = typeof SCROLL_LISTENER_VERBS[number];
|
|
13
|
+
/**
|
|
14
|
+
* The instructions a consumer writes in `whenVisible` / `whenHidden`.
|
|
15
|
+
*
|
|
16
|
+
* No verb takes an argument here, so an action *is* a verb. Both take the `':once'` and
|
|
17
|
+
* `':force'` suffixes, which are the generic layer's and are not restated here.
|
|
18
|
+
*/
|
|
19
|
+
export type ScrollListenerAction = ScrollListenerVerb;
|
|
20
|
+
/**
|
|
21
|
+
* What a verb competes with — one domain, and it is a formality.
|
|
22
|
+
*
|
|
23
|
+
* **This component has no controls**: nothing to click, so nothing a reader can take over
|
|
24
|
+
* and nothing that ever surrenders. The field is part of `ActionSpec` and is declared
|
|
25
|
+
* honestly rather than split into domains no hand could ever tell apart. The consequence
|
|
26
|
+
* is that `':force'` has no trigger here.
|
|
27
|
+
*
|
|
28
|
+
* A gate is the other brake, and it does reach `track`: measuring a subtree nobody is
|
|
29
|
+
* being shown is work done for no one.
|
|
30
|
+
*/
|
|
31
|
+
export type ScrollListenerDomain = 'tracking';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The verbs a scroll listener answers to.
|
|
3
|
+
*
|
|
4
|
+
* Two, and there could not be more: measuring is the only thing this component does, so
|
|
5
|
+
* starting and stopping it is the whole of what a trigger can act on. `track` is the old
|
|
6
|
+
* `startOnVisible` and `untrack` the old `stopOnHidden`, said in the grammar the library
|
|
7
|
+
* shares rather than in two props of its own.
|
|
8
|
+
*
|
|
9
|
+
* Neither takes an argument.
|
|
10
|
+
*/
|
|
11
|
+
export const SCROLL_LISTENER_VERBS = [
|
|
12
|
+
'track',
|
|
13
|
+
'untrack'
|
|
14
|
+
];
|
|
@@ -3,10 +3,11 @@ import type { WithClassName } from '../utils/types.js';
|
|
|
3
3
|
import type { ViewportBehaviours } from '../utils/viewport-behaviours/types.js';
|
|
4
4
|
import type { SequencerAction } from './types.js';
|
|
5
5
|
/**
|
|
6
|
-
* @property totalSteps - How many steps the sequence has. Falls back to the
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
6
|
+
* @property totalSteps - How many steps the sequence has. Falls back to the first child
|
|
7
|
+
* marked `data-last-step`, which sets the count to its own position plus one, and then
|
|
8
|
+
* to the number of **element** children: text and whitespace never count, which matters
|
|
9
|
+
* more than it looks — an article writes its children across several lines, and a text
|
|
10
|
+
* node counting as a step would put every index out by one.
|
|
10
11
|
* @property stepMap - Rewrites what a position means, **by position and nothing else**:
|
|
11
12
|
* at position `i` the active step is `stepMap[i]` when there is one, and `i` otherwise.
|
|
12
13
|
* `[2, 6, 7]` over seven steps plays `2, 6, 7, 3, 4, 5, 6` — a step may be skipped, may
|
|
@@ -73,7 +74,23 @@ export type Props = PropsWithChildren<WithClassName<{
|
|
|
73
74
|
* modifiers, silently.
|
|
74
75
|
*
|
|
75
76
|
* Children that are not elements — text, whitespace — are rendered untouched and take no
|
|
76
|
-
* part: they carry no class, so they simply stay visible throughout.
|
|
77
|
+
* part: they carry no class, so they simply stay visible throughout. **A fragment is
|
|
78
|
+
* opened rather than counted**: it groups without rendering an element of its own, so
|
|
79
|
+
* there would be nothing to class and nothing to show for the step it would consume.
|
|
80
|
+
*
|
|
81
|
+
* ### Where the sequence ends
|
|
82
|
+
* A child marked `data-last-step` ends it, and what follows still takes part — through
|
|
83
|
+
* `data-steps` alone. That is what lets an article write the steps in reading order and
|
|
84
|
+
* put the children belonging to several of them at once **after**, where they read as
|
|
85
|
+
* what they are, rather than having their position counted as a step of its own:
|
|
86
|
+
*
|
|
87
|
+
* ```html
|
|
88
|
+
* <div>1</div><div>2</div><div data-last-step>3</div>
|
|
89
|
+
* <div data-steps="0, 1">both of the first two</div>
|
|
90
|
+
* ```
|
|
91
|
+
*
|
|
92
|
+
* Three steps, four children. A trailing child that names no step never lights up, which
|
|
93
|
+
* is the honest reading of « it is not part of the sequence ».
|
|
77
94
|
*
|
|
78
95
|
* @remarks
|
|
79
96
|
* **Viewport-driven behaviour is declared, not named by a prop.** `whenVisible` and
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { Children, cloneElement, Fragment, isValidElement, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { absoluteModulo } from '../../agnostic/numbers/absolute-modulo/index.js';
|
|
4
4
|
import { clamp } from '../../agnostic/numbers/clamp/index.js';
|
|
5
5
|
import { clss } from '../../agnostic/css/clss/index.js';
|
|
@@ -20,6 +20,23 @@ import cssModule from './styles.module.css';
|
|
|
20
20
|
* and a stylesheet can select on it.
|
|
21
21
|
*/
|
|
22
22
|
const STEPS_ATTRIBUTE = 'data-steps';
|
|
23
|
+
/**
|
|
24
|
+
* The attribute a child uses to say that the sequence ends on it.
|
|
25
|
+
*
|
|
26
|
+
* It answers a shape the positional fallback could not: an article writes the steps in
|
|
27
|
+
* reading order, then — **after** the sequence proper — the children that belong to
|
|
28
|
+
* several steps at once and name them with {@link STEPS_ATTRIBUTE}. Those trailing
|
|
29
|
+
* children would each claim a step of their own in the count, and the sequence would run
|
|
30
|
+
* on into steps where nothing but them is lit.
|
|
31
|
+
*
|
|
32
|
+
* Marking the last step is what separates the two halves, and it is written where the
|
|
33
|
+
* separation is rather than recounted in a prop — the same reason `data-steps` lives on
|
|
34
|
+
* the child. A child after the mark that names no step therefore never lights up, which
|
|
35
|
+
* is the honest reading of « it is not part of the sequence ».
|
|
36
|
+
*
|
|
37
|
+
* Valueless, as an HTML boolean attribute: what matters is that it is there.
|
|
38
|
+
*/
|
|
39
|
+
const LAST_STEP_ATTRIBUTE = 'data-last-step';
|
|
23
40
|
/**
|
|
24
41
|
* `data-steps="2, 6"` into the steps it names.
|
|
25
42
|
*
|
|
@@ -38,6 +55,43 @@ function parseSteps(raw) {
|
|
|
38
55
|
return null;
|
|
39
56
|
return steps;
|
|
40
57
|
}
|
|
58
|
+
/**
|
|
59
|
+
* The children, with fragments opened.
|
|
60
|
+
*
|
|
61
|
+
* **`Children.toArray` does not go through a `<>…</>`**: a fragment is one element to it,
|
|
62
|
+
* and one that cannot be classed either — `cloneElement` on it would hand `className` to
|
|
63
|
+
* `React.Fragment`, which warns and drops it. So a consumer whose children arrive wrapped
|
|
64
|
+
* in one gets a sequence of exactly one step, stuck on position `0`.
|
|
65
|
+
*
|
|
66
|
+
* That consumer is not hypothetical: lm-link renders an article's `<nodelist>` through
|
|
67
|
+
* `lm-html`, which returns `<>{children}</>` — every sequence written in hyper-json
|
|
68
|
+
* therefore arrives wrapped. Opening them here rather than asking each consumer to
|
|
69
|
+
* flatten is the only place the fix belongs: a fragment is a grouping with no rendered
|
|
70
|
+
* element of its own, so it has no business consuming a step.
|
|
71
|
+
*/
|
|
72
|
+
function flattenChildren(nodes) {
|
|
73
|
+
return Children.toArray(nodes).flatMap((child) => {
|
|
74
|
+
if (!isValidElement(child) || child.type !== Fragment)
|
|
75
|
+
return [child];
|
|
76
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- a fragment's props are its children and its key, whatever else they are
|
|
77
|
+
const { children } = child.props;
|
|
78
|
+
return flattenChildren(children);
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Whether a child carries {@link LAST_STEP_ATTRIBUTE}.
|
|
83
|
+
*
|
|
84
|
+
* Present is enough — `data-last-step` alone gives `''` through lm-html, and `true`
|
|
85
|
+
* written in JSX. Only an explicit denial is read as one, so that a consumer computing
|
|
86
|
+
* the attribute can write `false` without having to leave it out.
|
|
87
|
+
*/
|
|
88
|
+
function isLastStep(child) {
|
|
89
|
+
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- a React element's props are a record, whatever else they are
|
|
90
|
+
const raw = child.props[LAST_STEP_ATTRIBUTE];
|
|
91
|
+
if (raw === undefined || raw === null)
|
|
92
|
+
return false;
|
|
93
|
+
return raw !== false && raw !== 'false';
|
|
94
|
+
}
|
|
41
95
|
/** The steps a child answers to: what it declares, or where it sits. */
|
|
42
96
|
function stepsOf(child, elementIndex) {
|
|
43
97
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion -- a React element's props are a record, whatever else they are
|
|
@@ -56,7 +110,23 @@ function stepsOf(child, elementIndex) {
|
|
|
56
110
|
* modifiers, silently.
|
|
57
111
|
*
|
|
58
112
|
* Children that are not elements — text, whitespace — are rendered untouched and take no
|
|
59
|
-
* part: they carry no class, so they simply stay visible throughout.
|
|
113
|
+
* part: they carry no class, so they simply stay visible throughout. **A fragment is
|
|
114
|
+
* opened rather than counted**: it groups without rendering an element of its own, so
|
|
115
|
+
* there would be nothing to class and nothing to show for the step it would consume.
|
|
116
|
+
*
|
|
117
|
+
* ### Where the sequence ends
|
|
118
|
+
* A child marked `data-last-step` ends it, and what follows still takes part — through
|
|
119
|
+
* `data-steps` alone. That is what lets an article write the steps in reading order and
|
|
120
|
+
* put the children belonging to several of them at once **after**, where they read as
|
|
121
|
+
* what they are, rather than having their position counted as a step of its own:
|
|
122
|
+
*
|
|
123
|
+
* ```html
|
|
124
|
+
* <div>1</div><div>2</div><div data-last-step>3</div>
|
|
125
|
+
* <div data-steps="0, 1">both of the first two</div>
|
|
126
|
+
* ```
|
|
127
|
+
*
|
|
128
|
+
* Three steps, four children. A trailing child that names no step never lights up, which
|
|
129
|
+
* is the honest reading of « it is not part of the sequence ».
|
|
60
130
|
*
|
|
61
131
|
* @remarks
|
|
62
132
|
* **Viewport-driven behaviour is declared, not named by a prop.** `whenVisible` and
|
|
@@ -95,9 +165,15 @@ export const Sequencer = ({ totalSteps, stepMap, step, defaultStep, play, defaul
|
|
|
95
165
|
const [hasLapped, setHasLapped] = useState(0);
|
|
96
166
|
const rootRef = useRef(null);
|
|
97
167
|
// Children, split once: what takes part and what merely renders.
|
|
98
|
-
const childrenArr =
|
|
168
|
+
const childrenArr = flattenChildren(children);
|
|
99
169
|
const elements = childrenArr.filter(isValidElement);
|
|
100
|
-
|
|
170
|
+
// Three answers to « how long is the sequence », in decreasing order of explicitness:
|
|
171
|
+
// the prop, then the child that says the sequence ends on it, then the count of
|
|
172
|
+
// element children. The prop wins because it is the one a consumer writes knowing the
|
|
173
|
+
// whole, where the mark only knows where it sits.
|
|
174
|
+
const markedLast = elements.findIndex(isLastStep);
|
|
175
|
+
const impliedSteps = markedLast === -1 ? elements.length : markedLast + 1;
|
|
176
|
+
const stepsCount = Math.max(totalSteps ?? impliedSteps, 0);
|
|
101
177
|
// The two numbers
|
|
102
178
|
const rawStep = step ?? internalStep;
|
|
103
179
|
const position = stepsCount > 0
|
package/components/index.d.ts
CHANGED
|
@@ -13,8 +13,8 @@ export * as jsonEditor from './JsonEditor/index.js'
|
|
|
13
13
|
export * as lightbox from './Lightbox/index.js'
|
|
14
14
|
export * as listLoader from './ListLoader/index.js'
|
|
15
15
|
export * as overlayer from './Overlayer/index.js'
|
|
16
|
-
export * as resizeObserver from './ResizeObserver/index.js'
|
|
17
16
|
export * as paginator from './Paginator/index.js'
|
|
17
|
+
export * as resizeObserver from './ResizeObserver/index.js'
|
|
18
18
|
export * as scrllgngn from './Scrllgngn/index.js'
|
|
19
19
|
export * as scrollListener from './ScrollListener/index.js'
|
|
20
20
|
export * as select from './Select/index.js'
|
|
@@ -22,8 +22,8 @@ export * as sequencer from './Sequencer/index.js'
|
|
|
22
22
|
export * as shadowRoot from './ShadowRoot/index.js'
|
|
23
23
|
export * as subtitles from './Subtitles/index.js'
|
|
24
24
|
export * as textarea from './Textarea/index.js'
|
|
25
|
-
export * as uiModule from './UIModule/index.js'
|
|
26
25
|
export * as video from './Video/index.js'
|
|
26
|
+
export * as uiModule from './UIModule/index.js'
|
|
27
27
|
export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
|
|
28
28
|
export * as wipIcon from './_WIP_Icon/index.js'
|
|
29
29
|
export * as utils from './utils/index.js'
|
package/components/index.js
CHANGED
|
@@ -13,8 +13,8 @@ export * as jsonEditor from './JsonEditor/index.js'
|
|
|
13
13
|
export * as lightbox from './Lightbox/index.js'
|
|
14
14
|
export * as listLoader from './ListLoader/index.js'
|
|
15
15
|
export * as overlayer from './Overlayer/index.js'
|
|
16
|
-
export * as resizeObserver from './ResizeObserver/index.js'
|
|
17
16
|
export * as paginator from './Paginator/index.js'
|
|
17
|
+
export * as resizeObserver from './ResizeObserver/index.js'
|
|
18
18
|
export * as scrllgngn from './Scrllgngn/index.js'
|
|
19
19
|
export * as scrollListener from './ScrollListener/index.js'
|
|
20
20
|
export * as select from './Select/index.js'
|
|
@@ -22,8 +22,8 @@ export * as sequencer from './Sequencer/index.js'
|
|
|
22
22
|
export * as shadowRoot from './ShadowRoot/index.js'
|
|
23
23
|
export * as subtitles from './Subtitles/index.js'
|
|
24
24
|
export * as textarea from './Textarea/index.js'
|
|
25
|
-
export * as uiModule from './UIModule/index.js'
|
|
26
25
|
export * as video from './Video/index.js'
|
|
26
|
+
export * as uiModule from './UIModule/index.js'
|
|
27
27
|
export * as wipAudioQuote from './_WIP_AudioQuote/index.js'
|
|
28
28
|
export * as wipIcon from './_WIP_Icon/index.js'
|
|
29
29
|
export * as utils from './utils/index.js'
|
|
@@ -17,24 +17,14 @@ export type WithClassName<T extends Record<string, unknown>> = T & {
|
|
|
17
17
|
* They mirror `ObserverOptions` of the `IntersectionObserver` component, where they
|
|
18
18
|
* end up. Restated here rather than imported from it: that component reads
|
|
19
19
|
* {@link WithClassName} from this very file, and the two shouldn't import each other.
|
|
20
|
+
*
|
|
21
|
+
* **`ListLoader` is the last consumer**, and that is the shape of things: a component
|
|
22
|
+
* that watches itself to *do* something now takes `ViewportBehaviours` instead, which
|
|
23
|
+
* carries its own `visibility…` dial. What is left here is for the one that watches a
|
|
24
|
+
* sentinel to load more — no vocabulary, no instructions, just an observer.
|
|
20
25
|
*/
|
|
21
26
|
export type ViewportObserverOptions = {
|
|
22
27
|
threshold?: number | number[];
|
|
23
28
|
root?: HTMLElement;
|
|
24
29
|
rootMargin?: string;
|
|
25
30
|
};
|
|
26
|
-
/**
|
|
27
|
-
* Extends a type with an internal observer's settings and with what it sees.
|
|
28
|
-
*
|
|
29
|
-
* For a component observing **one** element — itself, usually. A component with
|
|
30
|
-
* several observers takes {@link ViewportObserverOptions} alone, since a single
|
|
31
|
-
* visibility handler couldn't say which of them crossed.
|
|
32
|
-
*
|
|
33
|
-
* `Scrllgngn` deliberately stays out of both: its observers take a `rootMargin`
|
|
34
|
-
* derived from its `viewportOffset*` props, which are its own version of the dial.
|
|
35
|
-
*
|
|
36
|
-
* @template T - The base type to extend.
|
|
37
|
-
*/
|
|
38
|
-
export type WithViewportObservation<T extends Record<string, unknown>> = T & ViewportObserverOptions & {
|
|
39
|
-
onVisibilityChanged?: (isVisible: boolean) => void;
|
|
40
|
-
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
2
|
export * as download from './download/index.js'
|
|
3
3
|
export * as exists from './exists/index.js'
|
|
4
|
-
export * as remove from './remove/index.js'
|
|
5
4
|
export * as move from './move/index.js'
|
|
6
|
-
export * as
|
|
5
|
+
export * as remove from './remove/index.js'
|
|
7
6
|
export * as stat from './stat/index.js'
|
|
7
|
+
export * as upload from './upload/index.js'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
2
|
export * as download from './download/index.js'
|
|
3
3
|
export * as exists from './exists/index.js'
|
|
4
|
-
export * as remove from './remove/index.js'
|
|
5
4
|
export * as move from './move/index.js'
|
|
6
|
-
export * as
|
|
5
|
+
export * as remove from './remove/index.js'
|
|
7
6
|
export * as stat from './stat/index.js'
|
|
7
|
+
export * as upload from './upload/index.js'
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
|
-
export * as download from './download/index.js'
|
|
3
2
|
export * as exists from './exists/index.js'
|
|
3
|
+
export * as download from './download/index.js'
|
|
4
4
|
export * as generateSignedUrl from './generate-signed-url/index.js'
|
|
5
5
|
export * as getMetadata from './get-metadata/index.js'
|
|
6
|
+
export * as getPermissions from './get-permissions/index.js'
|
|
6
7
|
export * as move from './move/index.js'
|
|
7
8
|
export * as remove from './remove/index.js'
|
|
8
|
-
export * as getPermissions from './get-permissions/index.js'
|
|
9
9
|
export * as revokeSignedUrls from './revoke-signed-urls/index.js'
|
|
10
10
|
export * as stat from './stat/index.js'
|
|
11
11
|
export * as updateMetadata from './update-metadata/index.js'
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
|
-
export * as download from './download/index.js'
|
|
3
2
|
export * as exists from './exists/index.js'
|
|
3
|
+
export * as download from './download/index.js'
|
|
4
4
|
export * as generateSignedUrl from './generate-signed-url/index.js'
|
|
5
5
|
export * as getMetadata from './get-metadata/index.js'
|
|
6
|
+
export * as getPermissions from './get-permissions/index.js'
|
|
6
7
|
export * as move from './move/index.js'
|
|
7
8
|
export * as remove from './remove/index.js'
|
|
8
|
-
export * as getPermissions from './get-permissions/index.js'
|
|
9
9
|
export * as revokeSignedUrls from './revoke-signed-urls/index.js'
|
|
10
10
|
export * as stat from './stat/index.js'
|
|
11
11
|
export * as updateMetadata from './update-metadata/index.js'
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
|
-
export * as exists from './exists/index.js'
|
|
3
2
|
export * as download from './download/index.js'
|
|
3
|
+
export * as exists from './exists/index.js'
|
|
4
4
|
export * as move from './move/index.js'
|
|
5
5
|
export * as remove from './remove/index.js'
|
|
6
6
|
export * as stat from './stat/index.js'
|
package/node/ftps/file/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
|
-
export * as exists from './exists/index.js'
|
|
3
2
|
export * as download from './download/index.js'
|
|
3
|
+
export * as exists from './exists/index.js'
|
|
4
4
|
export * as move from './move/index.js'
|
|
5
5
|
export * as remove from './remove/index.js'
|
|
6
6
|
export * as stat from './stat/index.js'
|
package/node/images/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
export * as create from './create/index.js'
|
|
1
2
|
export * as format from './format/index.js'
|
|
2
3
|
export * as metadata from './metadata/index.js'
|
|
3
4
|
export * as transform from './transform/index.js'
|
|
4
5
|
export * as utils from './utils/index.js'
|
|
5
|
-
export * as create from './create/index.js'
|
package/node/images/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
export * as create from './create/index.js'
|
|
1
2
|
export * as format from './format/index.js'
|
|
2
3
|
export * as metadata from './metadata/index.js'
|
|
3
4
|
export * as transform from './transform/index.js'
|
|
4
5
|
export * as utils from './utils/index.js'
|
|
5
|
-
export * as create from './create/index.js'
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
export * as blur from './blur/index.js'
|
|
2
2
|
export * as brighten from './brighten/index.js'
|
|
3
3
|
export * as extend from './extend/index.js'
|
|
4
|
-
export * as flatten from './flatten/index.js'
|
|
5
4
|
export * as extract from './extract/index.js'
|
|
5
|
+
export * as flatten from './flatten/index.js'
|
|
6
6
|
export * as flip from './flip/index.js'
|
|
7
|
-
export * as hue from './hue/index.js'
|
|
8
7
|
export * as flop from './flop/index.js'
|
|
8
|
+
export * as hue from './hue/index.js'
|
|
9
9
|
export * as level from './level/index.js'
|
|
10
10
|
export * as lighten from './lighten/index.js'
|
|
11
11
|
export * as normalize from './normalize/index.js'
|
|
12
|
+
export * as overlay from './overlay/index.js'
|
|
12
13
|
export * as resize from './resize/index.js'
|
|
13
14
|
export * as rotate from './rotate/index.js'
|
|
14
|
-
export * as overlay from './overlay/index.js'
|
|
15
15
|
export * as saturate from './saturate/index.js'
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
export * as blur from './blur/index.js'
|
|
2
2
|
export * as brighten from './brighten/index.js'
|
|
3
3
|
export * as extend from './extend/index.js'
|
|
4
|
-
export * as flatten from './flatten/index.js'
|
|
5
4
|
export * as extract from './extract/index.js'
|
|
5
|
+
export * as flatten from './flatten/index.js'
|
|
6
6
|
export * as flip from './flip/index.js'
|
|
7
|
-
export * as hue from './hue/index.js'
|
|
8
7
|
export * as flop from './flop/index.js'
|
|
8
|
+
export * as hue from './hue/index.js'
|
|
9
9
|
export * as level from './level/index.js'
|
|
10
10
|
export * as lighten from './lighten/index.js'
|
|
11
11
|
export * as normalize from './normalize/index.js'
|
|
12
|
+
export * as overlay from './overlay/index.js'
|
|
12
13
|
export * as resize from './resize/index.js'
|
|
13
14
|
export * as rotate from './rotate/index.js'
|
|
14
|
-
export * as overlay from './overlay/index.js'
|
|
15
15
|
export * as saturate from './saturate/index.js'
|
package/node/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * as awsS3 from './@aws-s3/index.js'
|
|
2
2
|
export * as designEdito from './@design-edito/index.js'
|
|
3
3
|
export * as express from './@express/index.js'
|
|
4
|
-
export * as googleCloud from './@google-cloud/index.js'
|
|
5
4
|
export * as cloudStorage from './cloud-storage/index.js'
|
|
5
|
+
export * as googleCloud from './@google-cloud/index.js'
|
|
6
6
|
export * as encryption from './encryption/index.js'
|
|
7
7
|
export * as files from './files/index.js'
|
|
8
8
|
export * as ftps from './ftps/index.js'
|
package/node/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export * as awsS3 from './@aws-s3/index.js'
|
|
2
2
|
export * as designEdito from './@design-edito/index.js'
|
|
3
3
|
export * as express from './@express/index.js'
|
|
4
|
-
export * as googleCloud from './@google-cloud/index.js'
|
|
5
4
|
export * as cloudStorage from './cloud-storage/index.js'
|
|
5
|
+
export * as googleCloud from './@google-cloud/index.js'
|
|
6
6
|
export * as encryption from './encryption/index.js'
|
|
7
7
|
export * as files from './files/index.js'
|
|
8
8
|
export * as ftps from './ftps/index.js'
|
package/node/process/index.d.ts
CHANGED
package/node/process/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
2
|
export * as download from './download/index.js'
|
|
3
|
-
export * as exists from './exists/index.js'
|
|
4
|
-
export * as move from './move/index.js'
|
|
5
3
|
export * as remove from './remove/index.js'
|
|
4
|
+
export * as move from './move/index.js'
|
|
5
|
+
export * as exists from './exists/index.js'
|
|
6
6
|
export * as stat from './stat/index.js'
|
|
7
7
|
export * as upload from './upload/index.js'
|
package/node/sftp/file/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
2
|
export * as download from './download/index.js'
|
|
3
|
-
export * as exists from './exists/index.js'
|
|
4
|
-
export * as move from './move/index.js'
|
|
5
3
|
export * as remove from './remove/index.js'
|
|
4
|
+
export * as move from './move/index.js'
|
|
5
|
+
export * as exists from './exists/index.js'
|
|
6
6
|
export * as stat from './stat/index.js'
|
|
7
7
|
export * as upload from './upload/index.js'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design-edito/tools",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.25",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Maxime Fabas",
|
|
6
6
|
"license": "ISC",
|
|
@@ -1544,6 +1544,10 @@
|
|
|
1544
1544
|
"./components/ScrollListener/index.js": {
|
|
1545
1545
|
"import": "./components/ScrollListener/index.js"
|
|
1546
1546
|
},
|
|
1547
|
+
"./components/ScrollListener/types.js": {
|
|
1548
|
+
"import": "./components/ScrollListener/types.js",
|
|
1549
|
+
"types": "./components/ScrollListener/types.d.ts"
|
|
1550
|
+
},
|
|
1547
1551
|
"./components/Select": {
|
|
1548
1552
|
"import": "./components/Select/index.js",
|
|
1549
1553
|
"types": "./components/Select/index.d.ts"
|