clarity-js 0.8.11-beta → 0.8.11
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/.lintstagedrc.yml +3 -0
- package/biome.json +43 -0
- package/build/clarity.extended.js +1 -1
- package/build/clarity.insight.js +1 -1
- package/build/clarity.js +3182 -2963
- package/build/clarity.min.js +1 -1
- package/build/clarity.module.js +3182 -2963
- package/build/clarity.performance.js +1 -1
- package/package.json +76 -69
- package/rollup.config.ts +84 -88
- package/src/clarity.ts +34 -28
- package/src/core/config.ts +2 -2
- package/src/core/event.ts +36 -32
- package/src/core/hash.ts +5 -6
- package/src/core/history.ts +10 -11
- package/src/core/index.ts +21 -11
- package/src/core/measure.ts +9 -5
- package/src/core/report.ts +9 -5
- package/src/core/scrub.ts +29 -20
- package/src/core/task.ts +73 -45
- package/src/core/time.ts +3 -3
- package/src/core/timeout.ts +2 -2
- package/src/core/version.ts +1 -1
- package/src/data/baseline.ts +60 -55
- package/src/data/consent.ts +2 -2
- package/src/data/custom.ts +8 -13
- package/src/data/dimension.ts +11 -7
- package/src/data/encode.ts +36 -30
- package/src/data/envelope.ts +38 -38
- package/src/data/extract.ts +86 -77
- package/src/data/index.ts +10 -6
- package/src/data/limit.ts +1 -1
- package/src/data/metadata.ts +305 -266
- package/src/data/metric.ts +18 -8
- package/src/data/ping.ts +8 -4
- package/src/data/signal.ts +18 -18
- package/src/data/summary.ts +6 -4
- package/src/data/token.ts +10 -8
- package/src/data/upgrade.ts +7 -3
- package/src/data/upload.ts +100 -49
- package/src/data/variable.ts +27 -20
- package/src/diagnostic/encode.ts +2 -2
- package/src/diagnostic/fraud.ts +3 -4
- package/src/diagnostic/internal.ts +11 -5
- package/src/diagnostic/script.ts +12 -8
- package/src/global.ts +1 -1
- package/src/insight/blank.ts +4 -4
- package/src/insight/encode.ts +23 -17
- package/src/insight/snapshot.ts +57 -37
- package/src/interaction/change.ts +9 -6
- package/src/interaction/click.ts +34 -28
- package/src/interaction/clipboard.ts +2 -2
- package/src/interaction/encode.ts +35 -31
- package/src/interaction/input.ts +11 -9
- package/src/interaction/pointer.ts +42 -31
- package/src/interaction/resize.ts +5 -5
- package/src/interaction/scroll.ts +21 -18
- package/src/interaction/selection.ts +12 -8
- package/src/interaction/submit.ts +2 -2
- package/src/interaction/timeline.ts +13 -9
- package/src/interaction/unload.ts +1 -1
- package/src/interaction/visibility.ts +2 -2
- package/src/layout/animation.ts +47 -41
- package/src/layout/discover.ts +5 -5
- package/src/layout/document.ts +31 -19
- package/src/layout/dom.ts +141 -91
- package/src/layout/encode.ts +52 -37
- package/src/layout/mutation.ts +321 -318
- package/src/layout/node.ts +104 -81
- package/src/layout/offset.ts +7 -6
- package/src/layout/region.ts +67 -44
- package/src/layout/schema.ts +15 -8
- package/src/layout/selector.ts +47 -25
- package/src/layout/style.ts +44 -36
- package/src/layout/target.ts +14 -10
- package/src/layout/traverse.ts +17 -11
- package/src/performance/blank.ts +1 -1
- package/src/performance/encode.ts +4 -4
- package/src/performance/interaction.ts +58 -70
- package/src/performance/navigation.ts +2 -2
- package/src/performance/observer.ts +59 -26
- package/src/queue.ts +16 -9
- package/tsconfig.json +1 -1
- package/tslint.json +25 -32
- package/types/core.d.ts +13 -13
- package/types/data.d.ts +32 -29
- package/types/diagnostic.d.ts +1 -1
- package/types/interaction.d.ts +7 -5
- package/types/layout.d.ts +36 -21
- package/types/performance.d.ts +6 -5
package/src/data/baseline.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { BaselineData, BaselineState } from "@clarity-types/data";
|
|
1
|
+
import { BooleanFlag, Event } from "@clarity-types/data";
|
|
2
|
+
import type { BaselineData, BaselineState } from "@clarity-types/data";
|
|
3
3
|
import { time } from "@src/core/time";
|
|
4
4
|
import encode from "@src/data/encode";
|
|
5
5
|
|
|
6
6
|
export let state: BaselineState = null;
|
|
7
7
|
let buffer: BaselineData = null;
|
|
8
|
-
let update
|
|
8
|
+
let update = false;
|
|
9
9
|
|
|
10
10
|
export function start(): void {
|
|
11
11
|
update = false;
|
|
@@ -16,60 +16,65 @@ export function reset(): void {
|
|
|
16
16
|
// Baseline state holds the previous values - if it is updated in the current payload,
|
|
17
17
|
// reset the state to current value after sending the previous state
|
|
18
18
|
if (update) {
|
|
19
|
-
state = {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
19
|
+
state = {
|
|
20
|
+
time: time(),
|
|
21
|
+
event: Event.Baseline,
|
|
22
|
+
data: {
|
|
23
|
+
visible: buffer.visible,
|
|
24
|
+
docWidth: buffer.docWidth,
|
|
25
|
+
docHeight: buffer.docHeight,
|
|
26
|
+
screenWidth: buffer.screenWidth,
|
|
27
|
+
screenHeight: buffer.screenHeight,
|
|
28
|
+
scrollX: buffer.scrollX,
|
|
29
|
+
scrollY: buffer.scrollY,
|
|
30
|
+
pointerX: buffer.pointerX,
|
|
31
|
+
pointerY: buffer.pointerY,
|
|
32
|
+
activityTime: buffer.activityTime,
|
|
33
|
+
scrollTime: buffer.scrollTime,
|
|
34
|
+
pointerTime: buffer.pointerTime,
|
|
35
|
+
moveX: buffer.moveX,
|
|
36
|
+
moveY: buffer.moveY,
|
|
37
|
+
moveTime: buffer.moveTime,
|
|
38
|
+
downX: buffer.downX,
|
|
39
|
+
downY: buffer.downY,
|
|
40
|
+
downTime: buffer.downTime,
|
|
41
|
+
upX: buffer.upX,
|
|
42
|
+
upY: buffer.upY,
|
|
43
|
+
upTime: buffer.upTime,
|
|
44
|
+
pointerPrevX: buffer.pointerPrevX,
|
|
45
|
+
pointerPrevY: buffer.pointerPrevY,
|
|
46
|
+
pointerPrevTime: buffer.pointerPrevTime,
|
|
47
|
+
},
|
|
45
48
|
};
|
|
46
49
|
}
|
|
47
|
-
buffer = buffer
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
50
|
+
buffer = buffer
|
|
51
|
+
? buffer
|
|
52
|
+
: {
|
|
53
|
+
visible: BooleanFlag.True,
|
|
54
|
+
docWidth: 0,
|
|
55
|
+
docHeight: 0,
|
|
56
|
+
screenWidth: 0,
|
|
57
|
+
screenHeight: 0,
|
|
58
|
+
scrollX: 0,
|
|
59
|
+
scrollY: 0,
|
|
60
|
+
pointerX: 0,
|
|
61
|
+
pointerY: 0,
|
|
62
|
+
activityTime: 0,
|
|
63
|
+
scrollTime: 0,
|
|
64
|
+
pointerTime: undefined,
|
|
65
|
+
moveX: undefined,
|
|
66
|
+
moveY: undefined,
|
|
67
|
+
moveTime: undefined,
|
|
68
|
+
downX: undefined,
|
|
69
|
+
downY: undefined,
|
|
70
|
+
downTime: undefined,
|
|
71
|
+
upX: undefined,
|
|
72
|
+
upY: undefined,
|
|
73
|
+
upTime: undefined,
|
|
74
|
+
pointerPrevX: undefined,
|
|
75
|
+
pointerPrevY: undefined,
|
|
76
|
+
pointerPrevTime: undefined,
|
|
77
|
+
};
|
|
73
78
|
}
|
|
74
79
|
|
|
75
80
|
export function track(event: Event, x: number, y: number, time?: number): void {
|
package/src/data/consent.ts
CHANGED
|
@@ -4,7 +4,7 @@ import * as dimension from "@src/data/dimension";
|
|
|
4
4
|
const enum ConsentType {
|
|
5
5
|
None = 0,
|
|
6
6
|
Implicit = 1,
|
|
7
|
-
General = 2
|
|
7
|
+
General = 2,
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
export function config(track: boolean): void {
|
|
@@ -18,4 +18,4 @@ export function consent(): void {
|
|
|
18
18
|
|
|
19
19
|
function trackConsent(consent: ConsentType): void {
|
|
20
20
|
dimension.log(Dimension.Consent, consent.toString());
|
|
21
|
-
}
|
|
21
|
+
}
|
package/src/data/custom.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type CustomData, Event } from "@clarity-types/data";
|
|
2
2
|
import * as core from "@src/core";
|
|
3
3
|
import encode from "./encode";
|
|
4
4
|
|
|
@@ -7,17 +7,12 @@ export let data: CustomData = null;
|
|
|
7
7
|
// custom events allow 2 parameters or 1 parameter to be passed. If 2 are passed we
|
|
8
8
|
// consider it a key value pair. If only 1 is passed we only consider the event to have a value.
|
|
9
9
|
export function event(a: string, b: string): void {
|
|
10
|
-
if (core.active() &&
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} else {
|
|
18
|
-
data = { value: a }
|
|
19
|
-
}
|
|
20
|
-
encode(Event.Custom);
|
|
21
|
-
|
|
10
|
+
if (core.active() && a && typeof a === "string" && a.length < 255) {
|
|
11
|
+
if (b && typeof b === "string" && b.length < 255) {
|
|
12
|
+
data = { key: a, value: b };
|
|
13
|
+
} else {
|
|
14
|
+
data = { value: a };
|
|
15
|
+
}
|
|
16
|
+
encode(Event.Custom);
|
|
22
17
|
}
|
|
23
18
|
}
|
package/src/data/dimension.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Check,
|
|
1
|
+
import { Check, type Dimension, type DimensionData, Event, Setting } from "@clarity-types/data";
|
|
2
2
|
import * as limit from "@src/data/limit";
|
|
3
3
|
import encode from "./encode";
|
|
4
4
|
|
|
@@ -18,18 +18,20 @@ export function stop(): void {
|
|
|
18
18
|
limited = false;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export function log(dimension: Dimension,
|
|
21
|
+
export function log(dimension: Dimension, inputValue: string): void {
|
|
22
22
|
// Check valid value before moving ahead
|
|
23
|
-
if (
|
|
23
|
+
if (inputValue) {
|
|
24
24
|
// Ensure received value is casted into a string if it wasn't a string to begin with
|
|
25
|
-
value = `${
|
|
26
|
-
if (!(dimension in data)) {
|
|
25
|
+
const value = `${inputValue}`;
|
|
26
|
+
if (!(dimension in data)) {
|
|
27
|
+
data[dimension] = [];
|
|
28
|
+
}
|
|
27
29
|
if (data[dimension].indexOf(value) < 0) {
|
|
28
30
|
// Limit check to ensure we have a cap on number of dimensions we can collect
|
|
29
31
|
if (data[dimension].length > Setting.CollectionLimit) {
|
|
30
32
|
if (!limited) {
|
|
31
33
|
limited = true;
|
|
32
|
-
limit.trigger(Check.Collection);
|
|
34
|
+
limit.trigger(Check.Collection);
|
|
33
35
|
}
|
|
34
36
|
return;
|
|
35
37
|
}
|
|
@@ -37,7 +39,9 @@ export function log(dimension: Dimension, value: string): void {
|
|
|
37
39
|
data[dimension].push(value);
|
|
38
40
|
// If this is a new value, track it as part of updates object
|
|
39
41
|
// This allows us to only send back new values in subsequent payloads
|
|
40
|
-
if (!(dimension in updates)) {
|
|
42
|
+
if (!(dimension in updates)) {
|
|
43
|
+
updates[dimension] = [];
|
|
44
|
+
}
|
|
41
45
|
updates[dimension].push(value);
|
|
42
46
|
}
|
|
43
47
|
}
|
package/src/data/encode.ts
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { Event, Token } from "@clarity-types/data";
|
|
1
|
+
import { Event, type Token } from "@clarity-types/data";
|
|
2
2
|
import { time } from "@src/core/time";
|
|
3
3
|
import * as baseline from "@src/data/baseline";
|
|
4
4
|
import * as custom from "@src/data/custom";
|
|
5
5
|
import * as dimension from "@src/data/dimension";
|
|
6
|
+
import * as extract from "@src/data/extract";
|
|
6
7
|
import * as limit from "@src/data/limit";
|
|
7
8
|
import * as metric from "@src/data/metric";
|
|
8
9
|
import * as ping from "@src/data/ping";
|
|
9
10
|
import * as summary from "@src/data/summary";
|
|
10
11
|
import * as upgrade from "@src/data/upgrade";
|
|
11
12
|
import * as variable from "@src/data/variable";
|
|
12
|
-
import * as extract from "@src/data/extract";
|
|
13
13
|
import { queue, track } from "./upload";
|
|
14
14
|
|
|
15
|
-
export default function(event: Event): void {
|
|
16
|
-
|
|
17
|
-
let tokens: Token[] = [t, event];
|
|
15
|
+
export default function (event: Event): void {
|
|
16
|
+
const t = time();
|
|
17
|
+
let tokens: Token[] = [t, event];
|
|
18
18
|
switch (event) {
|
|
19
|
-
case Event.Baseline:
|
|
20
|
-
|
|
19
|
+
case Event.Baseline: {
|
|
20
|
+
const b = baseline.state;
|
|
21
21
|
if (b) {
|
|
22
22
|
tokens = [b.time, b.event];
|
|
23
23
|
tokens.push(b.data.visible);
|
|
@@ -48,6 +48,7 @@ export default function(event: Event): void {
|
|
|
48
48
|
}
|
|
49
49
|
baseline.reset();
|
|
50
50
|
break;
|
|
51
|
+
}
|
|
51
52
|
case Event.Ping:
|
|
52
53
|
tokens.push(ping.data.gap);
|
|
53
54
|
queue(tokens);
|
|
@@ -72,10 +73,10 @@ export default function(event: Event): void {
|
|
|
72
73
|
tokens.push(custom.data.value);
|
|
73
74
|
queue(tokens);
|
|
74
75
|
break;
|
|
75
|
-
case Event.Variable:
|
|
76
|
-
|
|
76
|
+
case Event.Variable: {
|
|
77
|
+
const variableKeys = Object.keys(variable.data);
|
|
77
78
|
if (variableKeys.length > 0) {
|
|
78
|
-
for (
|
|
79
|
+
for (const v of variableKeys) {
|
|
79
80
|
tokens.push(v);
|
|
80
81
|
tokens.push(variable.data[v]);
|
|
81
82
|
}
|
|
@@ -83,11 +84,12 @@ export default function(event: Event): void {
|
|
|
83
84
|
queue(tokens, false);
|
|
84
85
|
}
|
|
85
86
|
break;
|
|
86
|
-
|
|
87
|
-
|
|
87
|
+
}
|
|
88
|
+
case Event.Metric: {
|
|
89
|
+
const metricKeys = Object.keys(metric.updates);
|
|
88
90
|
if (metricKeys.length > 0) {
|
|
89
|
-
for (
|
|
90
|
-
|
|
91
|
+
for (const m of metricKeys) {
|
|
92
|
+
const key = Number.parseInt(m, 10);
|
|
91
93
|
tokens.push(key);
|
|
92
94
|
// For computation, we need microseconds precision that performance.now() API offers
|
|
93
95
|
// However, for data over the wire, we round it off to milliseconds precision.
|
|
@@ -97,11 +99,12 @@ export default function(event: Event): void {
|
|
|
97
99
|
queue(tokens, false);
|
|
98
100
|
}
|
|
99
101
|
break;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
+
}
|
|
103
|
+
case Event.Dimension: {
|
|
104
|
+
const dimensionKeys = Object.keys(dimension.updates);
|
|
102
105
|
if (dimensionKeys.length > 0) {
|
|
103
|
-
for (
|
|
104
|
-
|
|
106
|
+
for (const d of dimensionKeys) {
|
|
107
|
+
const key = Number.parseInt(d, 10);
|
|
105
108
|
tokens.push(key);
|
|
106
109
|
tokens.push(dimension.updates[d]);
|
|
107
110
|
}
|
|
@@ -109,11 +112,12 @@ export default function(event: Event): void {
|
|
|
109
112
|
queue(tokens, false);
|
|
110
113
|
}
|
|
111
114
|
break;
|
|
112
|
-
|
|
113
|
-
|
|
115
|
+
}
|
|
116
|
+
case Event.Summary: {
|
|
117
|
+
const eventKeys = Object.keys(summary.data);
|
|
114
118
|
if (eventKeys.length > 0) {
|
|
115
|
-
for (
|
|
116
|
-
|
|
119
|
+
for (const e of eventKeys) {
|
|
120
|
+
const key = Number.parseInt(e, 10);
|
|
117
121
|
tokens.push(key);
|
|
118
122
|
tokens.push([].concat(...summary.data[e]));
|
|
119
123
|
}
|
|
@@ -121,20 +125,22 @@ export default function(event: Event): void {
|
|
|
121
125
|
queue(tokens, false);
|
|
122
126
|
}
|
|
123
127
|
break;
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
extractKeys
|
|
128
|
+
}
|
|
129
|
+
case Event.Extract: {
|
|
130
|
+
const extractKeys = extract.keys;
|
|
131
|
+
for (const e of Array.from(extractKeys)) {
|
|
127
132
|
tokens.push(e);
|
|
128
|
-
|
|
129
|
-
for (
|
|
130
|
-
|
|
133
|
+
const token = [];
|
|
134
|
+
for (const d in extract.data[e]) {
|
|
135
|
+
const key = Number.parseInt(d, 10);
|
|
131
136
|
token.push(key);
|
|
132
137
|
token.push(extract.data[e][d]);
|
|
133
138
|
}
|
|
134
139
|
tokens.push(token);
|
|
135
|
-
}
|
|
136
|
-
|
|
140
|
+
}
|
|
141
|
+
|
|
137
142
|
extract.reset();
|
|
138
143
|
queue(tokens, false);
|
|
144
|
+
}
|
|
139
145
|
}
|
|
140
146
|
}
|
package/src/data/envelope.ts
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ApplicationPlatform, BooleanFlag, type Envelope, type Token, Upload } from "@clarity-types/data";
|
|
2
|
+
import * as scrub from "@src/core/scrub";
|
|
2
3
|
import { time } from "@src/core/time";
|
|
3
4
|
import version from "@src/core/version";
|
|
4
5
|
import * as metadata from "@src/data/metadata";
|
|
5
|
-
import * as scrub from "@src/core/scrub";
|
|
6
6
|
|
|
7
7
|
export let data: Envelope = null;
|
|
8
8
|
|
|
9
9
|
export function start(): void {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
10
|
+
const m = metadata.data;
|
|
11
|
+
data = {
|
|
12
|
+
version,
|
|
13
|
+
sequence: 0,
|
|
14
|
+
start: 0,
|
|
15
|
+
duration: 0,
|
|
16
|
+
projectId: m.projectId,
|
|
17
|
+
userId: m.userId,
|
|
18
|
+
sessionId: m.sessionId,
|
|
19
|
+
pageNum: m.pageNum,
|
|
20
|
+
upload: Upload.Async,
|
|
21
|
+
end: BooleanFlag.False,
|
|
22
|
+
applicationPlatform: ApplicationPlatform.WebApp,
|
|
23
|
+
url: "",
|
|
24
|
+
};
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
export function stop(): void {
|
|
@@ -29,25 +29,25 @@ export function stop(): void {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
export function envelope(last: boolean): Token[] {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
32
|
+
data.start = data.start + data.duration;
|
|
33
|
+
data.duration = time() - data.start;
|
|
34
|
+
data.sequence++;
|
|
35
|
+
data.upload = last && "sendBeacon" in navigator ? Upload.Beacon : Upload.Async;
|
|
36
|
+
data.end = last ? BooleanFlag.True : BooleanFlag.False;
|
|
37
|
+
data.applicationPlatform = ApplicationPlatform.WebApp;
|
|
38
|
+
data.url = scrub.url(location.href, false, true);
|
|
39
|
+
return [
|
|
40
|
+
data.version,
|
|
41
|
+
data.sequence,
|
|
42
|
+
data.start,
|
|
43
|
+
data.duration,
|
|
44
|
+
data.projectId,
|
|
45
|
+
data.userId,
|
|
46
|
+
data.sessionId,
|
|
47
|
+
data.pageNum,
|
|
48
|
+
data.upload,
|
|
49
|
+
data.end,
|
|
50
|
+
data.applicationPlatform,
|
|
51
|
+
data.url,
|
|
52
|
+
];
|
|
53
53
|
}
|