clarity-js 0.8.11-beta → 0.8.12

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.
Files changed (91) hide show
  1. package/.lintstagedrc.yml +3 -0
  2. package/biome.json +43 -0
  3. package/build/clarity.extended.js +1 -1
  4. package/build/clarity.insight.js +1 -1
  5. package/build/clarity.js +4591 -4362
  6. package/build/clarity.min.js +1 -1
  7. package/build/clarity.module.js +4591 -4362
  8. package/build/clarity.performance.js +1 -1
  9. package/package.json +76 -69
  10. package/rollup.config.ts +84 -88
  11. package/src/clarity.ts +34 -28
  12. package/src/core/api.ts +8 -1
  13. package/src/core/config.ts +2 -2
  14. package/src/core/event.ts +36 -32
  15. package/src/core/hash.ts +5 -6
  16. package/src/core/history.ts +10 -11
  17. package/src/core/index.ts +21 -11
  18. package/src/core/measure.ts +9 -5
  19. package/src/core/report.ts +9 -5
  20. package/src/core/scrub.ts +29 -20
  21. package/src/core/task.ts +73 -45
  22. package/src/core/time.ts +3 -3
  23. package/src/core/timeout.ts +2 -2
  24. package/src/core/version.ts +1 -1
  25. package/src/data/baseline.ts +60 -55
  26. package/src/data/consent.ts +2 -2
  27. package/src/data/custom.ts +8 -13
  28. package/src/data/dimension.ts +11 -7
  29. package/src/data/encode.ts +36 -30
  30. package/src/data/envelope.ts +38 -38
  31. package/src/data/extract.ts +86 -77
  32. package/src/data/index.ts +10 -6
  33. package/src/data/limit.ts +1 -1
  34. package/src/data/metadata.ts +305 -266
  35. package/src/data/metric.ts +18 -8
  36. package/src/data/ping.ts +8 -4
  37. package/src/data/signal.ts +18 -18
  38. package/src/data/summary.ts +6 -4
  39. package/src/data/token.ts +10 -8
  40. package/src/data/upgrade.ts +7 -3
  41. package/src/data/upload.ts +100 -49
  42. package/src/data/variable.ts +27 -20
  43. package/src/diagnostic/encode.ts +2 -2
  44. package/src/diagnostic/fraud.ts +3 -4
  45. package/src/diagnostic/internal.ts +11 -5
  46. package/src/diagnostic/script.ts +12 -8
  47. package/src/global.ts +1 -1
  48. package/src/insight/blank.ts +4 -4
  49. package/src/insight/encode.ts +23 -17
  50. package/src/insight/snapshot.ts +57 -37
  51. package/src/interaction/change.ts +9 -6
  52. package/src/interaction/click.ts +34 -28
  53. package/src/interaction/clipboard.ts +2 -2
  54. package/src/interaction/encode.ts +35 -31
  55. package/src/interaction/input.ts +11 -9
  56. package/src/interaction/pointer.ts +42 -31
  57. package/src/interaction/resize.ts +5 -5
  58. package/src/interaction/scroll.ts +21 -18
  59. package/src/interaction/selection.ts +12 -8
  60. package/src/interaction/submit.ts +2 -2
  61. package/src/interaction/timeline.ts +13 -9
  62. package/src/interaction/unload.ts +1 -1
  63. package/src/interaction/visibility.ts +2 -2
  64. package/src/layout/animation.ts +47 -41
  65. package/src/layout/discover.ts +5 -5
  66. package/src/layout/document.ts +31 -19
  67. package/src/layout/dom.ts +141 -91
  68. package/src/layout/encode.ts +52 -37
  69. package/src/layout/mutation.ts +321 -318
  70. package/src/layout/node.ts +104 -81
  71. package/src/layout/offset.ts +7 -6
  72. package/src/layout/region.ts +67 -44
  73. package/src/layout/schema.ts +15 -8
  74. package/src/layout/selector.ts +47 -25
  75. package/src/layout/style.ts +44 -36
  76. package/src/layout/target.ts +14 -10
  77. package/src/layout/traverse.ts +17 -11
  78. package/src/performance/blank.ts +1 -1
  79. package/src/performance/encode.ts +4 -4
  80. package/src/performance/interaction.ts +58 -70
  81. package/src/performance/navigation.ts +2 -2
  82. package/src/performance/observer.ts +59 -26
  83. package/src/queue.ts +16 -9
  84. package/tsconfig.json +1 -1
  85. package/tslint.json +25 -32
  86. package/types/core.d.ts +13 -13
  87. package/types/data.d.ts +33 -29
  88. package/types/diagnostic.d.ts +1 -1
  89. package/types/interaction.d.ts +7 -5
  90. package/types/layout.d.ts +36 -21
  91. package/types/performance.d.ts +6 -5
@@ -1,11 +1,11 @@
1
- import { Event, BooleanFlag } from "@clarity-types/data";
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: boolean = false;
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 = { time: time(), event: Event.Baseline, data: {
20
- visible: buffer.visible,
21
- docWidth: buffer.docWidth,
22
- docHeight: buffer.docHeight,
23
- screenWidth: buffer.screenWidth,
24
- screenHeight: buffer.screenHeight,
25
- scrollX: buffer.scrollX,
26
- scrollY: buffer.scrollY,
27
- pointerX: buffer.pointerX,
28
- pointerY: buffer.pointerY,
29
- activityTime: buffer.activityTime,
30
- scrollTime: buffer.scrollTime,
31
- pointerTime: buffer.pointerTime,
32
- moveX: buffer.moveX,
33
- moveY: buffer.moveY,
34
- moveTime: buffer.moveTime,
35
- downX: buffer.downX,
36
- downY: buffer.downY,
37
- downTime: buffer.downTime,
38
- upX: buffer.upX,
39
- upY: buffer.upY,
40
- upTime: buffer.upTime,
41
- pointerPrevX: buffer.pointerPrevX,
42
- pointerPrevY: buffer.pointerPrevY,
43
- pointerPrevTime: buffer.pointerPrevTime,
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 ? buffer : {
48
- visible: BooleanFlag.True,
49
- docWidth: 0,
50
- docHeight: 0,
51
- screenWidth: 0,
52
- screenHeight: 0,
53
- scrollX: 0,
54
- scrollY: 0,
55
- pointerX: 0,
56
- pointerY: 0,
57
- activityTime: 0,
58
- scrollTime: 0,
59
- pointerTime: undefined,
60
- moveX: undefined,
61
- moveY: undefined,
62
- moveTime: undefined,
63
- downX: undefined,
64
- downY: undefined,
65
- downTime: undefined,
66
- upX: undefined,
67
- upY: undefined,
68
- upTime: undefined,
69
- pointerPrevX: undefined,
70
- pointerPrevY: undefined,
71
- pointerPrevTime: undefined,
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 {
@@ -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
+ }
@@ -1,4 +1,4 @@
1
- import { Constant, CustomData, Event } from "@clarity-types/data";
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
- a &&
12
- typeof a === Constant.String &&
13
- a.length < 255
14
- ) {
15
- if (b && typeof b === Constant.String && b.length < 255) {
16
- data = { key: a, value: b};
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
  }
@@ -1,4 +1,4 @@
1
- import { Check, Event, Dimension, DimensionData, Setting } from "@clarity-types/data";
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, value: string): void {
21
+ export function log(dimension: Dimension, inputValue: string): void {
22
22
  // Check valid value before moving ahead
23
- if (value) {
23
+ if (inputValue) {
24
24
  // Ensure received value is casted into a string if it wasn't a string to begin with
25
- value = `${value}`;
26
- if (!(dimension in data)) { data[dimension] = []; }
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)) { updates[dimension] = []; }
42
+ if (!(dimension in updates)) {
43
+ updates[dimension] = [];
44
+ }
41
45
  updates[dimension].push(value);
42
46
  }
43
47
  }
@@ -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
- let t = time();
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
- let b = baseline.state;
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
- let variableKeys = Object.keys(variable.data);
76
+ case Event.Variable: {
77
+ const variableKeys = Object.keys(variable.data);
77
78
  if (variableKeys.length > 0) {
78
- for (let v of variableKeys) {
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
- case Event.Metric:
87
- let metricKeys = Object.keys(metric.updates);
87
+ }
88
+ case Event.Metric: {
89
+ const metricKeys = Object.keys(metric.updates);
88
90
  if (metricKeys.length > 0) {
89
- for (let m of metricKeys) {
90
- let key = parseInt(m, 10);
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
- case Event.Dimension:
101
- let dimensionKeys = Object.keys(dimension.updates);
102
+ }
103
+ case Event.Dimension: {
104
+ const dimensionKeys = Object.keys(dimension.updates);
102
105
  if (dimensionKeys.length > 0) {
103
- for (let d of dimensionKeys) {
104
- let key = parseInt(d, 10);
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
- case Event.Summary:
113
- let eventKeys = Object.keys(summary.data);
115
+ }
116
+ case Event.Summary: {
117
+ const eventKeys = Object.keys(summary.data);
114
118
  if (eventKeys.length > 0) {
115
- for (let e of eventKeys) {
116
- let key = parseInt(e, 10);
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
- case Event.Extract:
125
- let extractKeys = extract.keys;
126
- extractKeys.forEach((e => {
128
+ }
129
+ case Event.Extract: {
130
+ const extractKeys = extract.keys;
131
+ for (const e of Array.from(extractKeys)) {
127
132
  tokens.push(e);
128
- let token = []
129
- for (let d in extract.data[e]) {
130
- let key = parseInt(d, 10);
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
  }
@@ -1,27 +1,27 @@
1
- import { BooleanFlag, Token, Upload, Envelope, ApplicationPlatform } from "@clarity-types/data";
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
- 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
- };
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
- 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
- ];
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
  }