@atlaskit/editor-plugin-interactivity 1.1.0 → 1.2.0

package/dist/types/collector/interactivity-collector.d.ts

@@ -26,6 +26,7 @@ export declare class InteractivityCollector {
     private readonly getObjectId;
     private readonly getSessionMode;
     private readonly interactionObserver;
+    private readonly longAnimationFrameObserver;
     private readonly editorEvents;
     private readonly snapshotScheduler;
     private readonly lifecycleObserver;
@@ -85,6 +86,8 @@ export declare class InteractivityCollector {
      * they were faster than its threshold — which is why a count alone moves the session on.
      */
     private recordEditorEvent;
+    /** Long Animation Frames say where the latency of a slow interaction went. */
+    private recordFrames;
     private recordEntries;
     private takeSnapshot;
 }

package/dist/types/collector/long-animation-frame-observer.d.ts

@@ -0,0 +1,28 @@
+export type LongAnimationFrame = PerformanceEntry & {
+    scripts?: LongAnimationFrameScript[];
+    styleAndLayoutStart?: number;
+};
+export type LongAnimationFrameScript = {
+    duration: number;
+    forcedStyleAndLayoutDuration?: number;
+    invokerType?: string;
+    sourceFunctionName?: string;
+    sourceURL?: string;
+    startTime: number;
+};
+/**
+ * Reports the frames the browser took longer than 50 ms to render to `onFrames`. They are what says
+ * where the time of a slow interaction went — which script ran the longest while the user waited,
+ * and how much of the wait was style and layout — which Event Timing cannot answer.
+ *
+ * What they say about an interaction is `SlowInteractionList`'s to work out; this only observes.
+ */
+export declare class LongAnimationFrameObserver {
+    private readonly onFrames;
+    static isSupported(): boolean;
+    private observer;
+    constructor(onFrames: (frames: LongAnimationFrame[]) => void);
+    start(): void;
+    drain(): void;
+    stop(): void;
+}

package/dist/types/collector/slow-interaction-list.d.ts

@@ -1,32 +1,59 @@
-import type { SlowInteraction, SlowInteractionGroup } from '../analytics/interactivity-snapshot';
-import type { InteractionEntry } from './interaction-tracker';
-/** An interaction as the collector's two observers saw it. */
-type ObservedInteraction = {
-    entry: InteractionEntry;
-    group: SlowInteractionGroup;
-    interactionId: number;
-    /** The duration of the entry measuring the interaction at its slowest. */
-    latencyMs: number;
-};
+import type { SlowInteraction } from '../analytics/interactivity-snapshot';
+import type { InteractionEntry, InteractionUpdate } from './interaction-tracker';
+import type { LongAnimationFrame } from './long-animation-frame-observer';
 /**
  * The slowest interactions of one session, which is what the event's `slowest` records are.
  *
+ * Interactions arrive from the tracker and frames from the Long Animation Frame observer, and this
+ * is where the two meet: a record says both how long the user waited and where that time went.
+ *
  * A record is built from the entry that measured the interaction, as that entry arrives:
  * `entry.target` is `null` once the element has left the document.
  */
 export declare class SlowInteractionList {
     /** Slowest first. */
     private readonly records;
-    track(interaction: ObservedInteraction): void;
-    /** @returns the records, slowest first, or nothing when no interaction was slow enough. */
-    snapshot(): SlowInteraction[] | undefined;
+    private readonly frames;
+    /**
+     * Takes in what the tracker now says about an interaction, keeping it when it is one of the
+     * slowest of the session.
+     *
+     * @returns whether that changed what a snapshot would carry.
+     */
+    trackInteractionUpdate(entry: InteractionEntry, update: InteractionUpdate): boolean;
     /**
-     * The phases are reported together or not at all: a browser that reports one reports all three,
-     * and zeroes standing in for values we never had would read as an interaction that spent no time
-     * anywhere. Each is clamped, because they come from timestamps the browser coarsens
-     * independently, so a phase can come out just below zero.
+     * Takes in the frames the browser has just reported and works out again what the frames say about
+     * every record — again, because the frames of one interaction can be reported in several batches
+     * and the first of them may hold neither its longest script nor all of its style and layout.
+     *
+     * @returns whether that changed what a snapshot would carry.
      */
+    trackLongAnimationFrames(frames: LongAnimationFrame[]): boolean;
+    snapshot(): SlowInteraction[] | undefined;
     private toRecord;
+    private attribute;
+    /**
+     * What the frames say about an interaction, attributed the way `web-vitals` attributes INP: every
+     * frame overlapping the interaction counts, the script that counts is the one with the longest
+     * part inside it, and style and layout is summed across those frames.
+     *
+     * @returns nothing when no frame overlaps the interaction — the browser reports frames above
+     * 50 ms only.
+     */
+    private attributionFor;
+    /**
+     * Style, layout and paint of the frame, which the browser reports as starting at 0 when the
+     * frame did none.
+     */
+    private styleAndLayoutOf;
+    /** Which phase of the interaction the script ran in, by where it started. */
+    private subpartOf;
+    private truncated;
+    /**
+     * The file as the browser named it, content hash and all: that is what identifies the artefact
+     * and its source map, and a query can be grouped away downstream.
+     */
+    private fileName;
     /**
      * Names the element an interaction happened on — `div[data-vc="x"] > p > span`, outermost first.
      * The path climbs until an element carries an allow-listed attribute, because that is what says
@@ -35,4 +62,3 @@ export declare class SlowInteractionList {
     private describeTarget;
     private identifyingAttribute;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-interactivity",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "Interactivity plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -20,7 +20,7 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@atlaskit/browser-apis": "^1.2.0",
-		"@atlaskit/editor-plugin-analytics": "^16.0.0",
+		"@atlaskit/editor-plugin-analytics": "^16.1.0",
 		"@atlaskit/editor-plugin-context-identifier": "^16.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^18.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
@@ -28,7 +28,7 @@
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.1.0",
+		"@atlaskit/editor-common": "^120.10.0",
 		"react": "^18.2.0 || ^19.2.0"
 	},
 	"devDependencies": {