@atlaskit/react-ufo 3.14.6 → 3.14.8

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 (55) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/create-experimental-interaction-metrics-payload/index.js +14 -12
  3. package/dist/cjs/create-payload/utils/get-vc-metrics.js +17 -13
  4. package/dist/cjs/interaction-metrics/index.js +35 -15
  5. package/dist/cjs/interaction-metrics-init/index.js +5 -3
  6. package/dist/cjs/vc/index.js +46 -6
  7. package/dist/cjs/vc/vc-observer/index.js +10 -2
  8. package/dist/cjs/vc/vc-observer/observers/index.js +12 -7
  9. package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +76 -40
  10. package/dist/cjs/vc/vc-observer-new/index.js +84 -0
  11. package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +214 -71
  12. package/dist/cjs/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +97 -59
  13. package/dist/es2019/create-experimental-interaction-metrics-payload/index.js +4 -2
  14. package/dist/es2019/create-payload/utils/get-vc-metrics.js +10 -4
  15. package/dist/es2019/interaction-metrics/index.js +36 -16
  16. package/dist/es2019/interaction-metrics-init/index.js +5 -3
  17. package/dist/es2019/vc/index.js +42 -5
  18. package/dist/es2019/vc/vc-observer/index.js +8 -2
  19. package/dist/es2019/vc/vc-observer/observers/index.js +11 -5
  20. package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +57 -26
  21. package/dist/es2019/vc/vc-observer-new/index.js +67 -1
  22. package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +87 -22
  23. package/dist/es2019/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +50 -34
  24. package/dist/esm/create-experimental-interaction-metrics-payload/index.js +14 -12
  25. package/dist/esm/create-payload/utils/get-vc-metrics.js +17 -13
  26. package/dist/esm/interaction-metrics/index.js +36 -16
  27. package/dist/esm/interaction-metrics-init/index.js +5 -3
  28. package/dist/esm/vc/index.js +45 -6
  29. package/dist/esm/vc/vc-observer/index.js +10 -2
  30. package/dist/esm/vc/vc-observer/observers/index.js +12 -7
  31. package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +76 -40
  32. package/dist/esm/vc/vc-observer-new/index.js +84 -0
  33. package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +214 -71
  34. package/dist/esm/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +97 -59
  35. package/dist/types/common/common/types.d.ts +4 -1
  36. package/dist/types/vc/index.d.ts +3 -0
  37. package/dist/types/vc/types.d.ts +2 -0
  38. package/dist/types/vc/vc-observer/index.d.ts +1 -0
  39. package/dist/types/vc/vc-observer/observers/index.d.ts +2 -0
  40. package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts +6 -0
  41. package/dist/types/vc/vc-observer-new/index.d.ts +30 -0
  42. package/dist/types/vc/vc-observer-new/types.d.ts +1 -1
  43. package/dist/types/vc/vc-observer-new/viewport-observer/index.d.ts +5 -1
  44. package/dist/types/vc/vc-observer-new/viewport-observer/mutation-observer/index.d.ts +2 -0
  45. package/dist/types-ts4.5/common/common/types.d.ts +4 -1
  46. package/dist/types-ts4.5/vc/index.d.ts +3 -0
  47. package/dist/types-ts4.5/vc/types.d.ts +2 -0
  48. package/dist/types-ts4.5/vc/vc-observer/index.d.ts +1 -0
  49. package/dist/types-ts4.5/vc/vc-observer/observers/index.d.ts +2 -0
  50. package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts +6 -0
  51. package/dist/types-ts4.5/vc/vc-observer-new/index.d.ts +30 -0
  52. package/dist/types-ts4.5/vc/vc-observer-new/types.d.ts +1 -1
  53. package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/index.d.ts +5 -1
  54. package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/mutation-observer/index.d.ts +2 -0
  55. package/package.json +11 -6
@@ -1,9 +1,30 @@
1
1
  import { type RevisionPayloadEntry } from '../../common/vc/types';
2
+ import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
2
3
  import { type SelectorConfig } from './get-element-name';
3
4
  import type { VCObserverGetVCResultParam } from './types';
4
5
  export type VCObserverNewConfig = {
5
6
  selectorConfig?: SelectorConfig;
6
7
  isPostInteraction?: boolean;
8
+ SSRConfig?: {
9
+ enablePageLayoutPlaceholder?: boolean;
10
+ disableSizeAndPositionCheck?: {
11
+ v: boolean;
12
+ h: boolean;
13
+ };
14
+ };
15
+ ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
16
+ };
17
+ declare const SSRState: {
18
+ readonly normal: 1;
19
+ readonly waitingForFirstRender: 2;
20
+ readonly ignoring: 3;
21
+ };
22
+ type SSRStateType = (typeof SSRState)[keyof typeof SSRState];
23
+ type SSRInclusiveState = {
24
+ state: SSRStateType;
25
+ reactRootElement: HTMLElement | null;
26
+ renderStop: number;
27
+ renderStart: number;
7
28
  };
8
29
  export default class VCObserverNew {
9
30
  private selectorConfig;
@@ -11,13 +32,22 @@ export default class VCObserverNew {
11
32
  private windowEventObserver;
12
33
  private entriesTimeline;
13
34
  private isPostInteraction;
35
+ private ssrPlaceholderHandler;
36
+ private ssr;
14
37
  constructor(config: VCObserverNewConfig);
15
38
  start({ startTime }: {
16
39
  startTime: DOMHighResTimeStamp;
17
40
  }): void;
18
41
  stop(): void;
42
+ setReactRootElement(element: HTMLElement): void;
43
+ setReactRootRenderStart(startTime?: number): void;
44
+ setReactRootRenderStop(stopTime?: number): void;
45
+ collectSSRPlaceholders(): void;
46
+ getSSRState(): SSRInclusiveState;
47
+ getSSRPlaceholderHandler(): SSRPlaceholderHandlers | null;
19
48
  addSSR(ssr: number): void;
20
49
  getVCResult(param: VCObserverGetVCResultParam): Promise<RevisionPayloadEntry[]>;
21
50
  private addStartEntry;
22
51
  private getElementName;
23
52
  }
53
+ export {};
@@ -1,5 +1,5 @@
1
1
  import type { ObservedWindowEvent } from './window-event-observer';
2
- export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'layout-shift' | 'window:event' | 'unknown';
2
+ export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:ssr-placeholder' | 'layout-shift' | 'window:event' | 'ssr-hydration' | 'unknown';
3
3
  export type ViewportEntryData = {
4
4
  readonly type: VCObserverEntryType;
5
5
  readonly elementName: string;
@@ -10,6 +10,8 @@ export type ViewPortObserverConstructorArgs = {
10
10
  readonly previousRect: DOMRectReadOnly | undefined;
11
11
  readonly mutationData?: MutationData | undefined | null;
12
12
  }): void;
13
+ getSSRState?: () => any;
14
+ getSSRPlaceholderHandler?: () => any;
13
15
  };
14
16
  export default class ViewportObserver {
15
17
  private intersectionObserver;
@@ -18,7 +20,9 @@ export default class ViewportObserver {
18
20
  private mapVisibleNodeRects;
19
21
  private onChange;
20
22
  private isStarted;
21
- constructor({ onChange }: ViewPortObserverConstructorArgs);
23
+ private getSSRState?;
24
+ private getSSRPlaceholderHandler?;
25
+ constructor({ onChange, getSSRState, getSSRPlaceholderHandler, }: ViewPortObserverConstructorArgs);
22
26
  private handleIntersectionEntry;
23
27
  private handleChildListMutation;
24
28
  private handleAttributeMutation;
@@ -9,8 +9,10 @@ export type CreateMutationObserverProps = {
9
9
  targets: Array<HTMLElement>;
10
10
  }) => void;
11
11
  onChildListMutation: (props: {
12
+ target: WeakRef<HTMLElement>;
12
13
  addedNodes: ReadonlyArray<WeakRef<HTMLElement>>;
13
14
  removedNodes: ReadonlyArray<WeakRef<HTMLElement>>;
15
+ timestamp: DOMHighResTimeStamp;
14
16
  }) => void;
15
17
  };
16
18
  declare function createMutationObserver({ onAttributeMutation, onChildListMutation, onMutationFinished, }: CreateMutationObserverProps): MutationObserver | null;
@@ -1,5 +1,6 @@
1
1
  import type { TraceIdContext } from '../../experience-trace-id-context';
2
2
  import type { LabelStack, UFOInteractionContextType } from '../../interaction-context';
3
+ import type { VCObserverInterface } from '../../vc/types';
3
4
  import { type VCRawDataType, type VCResult } from '../vc/types';
4
5
  export type LifecycleMarkType = 'render' | 'beforePaint' | 'afterPaint' | 'nextTick' | 'mount' | 'commit';
5
6
  export type MarkType = ('placeholder' | 'bm3_stop' | 'bundle_preload' | 'custom') | LifecycleMarkType;
@@ -113,8 +114,8 @@ export interface InteractionMetrics {
113
114
  holdInfo: HoldInfo[];
114
115
  holdExpInfo: HoldInfo[];
115
116
  holdActive: Map<string, HoldActive>;
116
- holdExpActive: Map<string, HoldActive>;
117
117
  reactProfilerTimings: ReactProfilerTiming[];
118
+ holdExpActive: Map<string, HoldActive>;
118
119
  measureStart: number;
119
120
  rate: number;
120
121
  cancelCallbacks: (() => void)[];
@@ -158,6 +159,8 @@ export interface InteractionMetrics {
158
159
  changeTimeout: (newTime: number) => void;
159
160
  trace: TraceIdContext | null;
160
161
  legacyMetrics?: BM3Event[];
162
+ vcObserver?: VCObserverInterface;
163
+ experimentalVCObserver?: VCObserverInterface;
161
164
  vc?: VCRawDataType | null;
162
165
  experimentalTTAI?: number;
163
166
  experimentalVC90?: number;
@@ -7,6 +7,7 @@ declare global {
7
7
  export declare class VCObserverWrapper implements VCObserverInterface {
8
8
  private oldVCObserver;
9
9
  private newVCObserver;
10
+ private ssrPlaceholderHandler;
10
11
  constructor(opts?: VCObserverOptions);
11
12
  private processSsrAbortListeners;
12
13
  start({ startTime, experienceKey }: {
@@ -19,6 +20,8 @@ export declare class VCObserverWrapper implements VCObserverInterface {
19
20
  setSSRElement(element: HTMLElement): void;
20
21
  setReactRootRenderStart(startTime: number): void;
21
22
  setReactRootRenderStop(stopTime: number): void;
23
+ collectSSRPlaceholders(): void;
22
24
  }
23
25
  export declare function isEnvironmentSupported(): boolean;
24
26
  export declare function getVCObserver(opts?: VCObserverOptions): VCObserverInterface;
27
+ export declare function newVCObserver(opts?: VCObserverOptions): VCObserverInterface;
@@ -30,6 +30,7 @@ export type VCObserverOptions = {
30
30
  v: boolean;
31
31
  h: boolean;
32
32
  };
33
+ ssrPlaceholderHandler?: any;
33
34
  };
34
35
  export interface VCObserverInterface {
35
36
  start(startArg: {
@@ -42,4 +43,5 @@ export interface VCObserverInterface {
42
43
  setSSRElement(element: HTMLElement): void;
43
44
  setReactRootRenderStart(startTime?: number): void;
44
45
  setReactRootRenderStop(stopTime?: number): void;
46
+ collectSSRPlaceholders?(): void;
45
47
  }
@@ -84,6 +84,7 @@ export declare class VCObserver implements VCObserverInterface {
84
84
  setSSRElement(element: HTMLElement): void;
85
85
  setReactRootRenderStart(startTime?: number): void;
86
86
  setReactRootRenderStop(stopTime?: number): void;
87
+ collectSSRPlaceholders(): void;
87
88
  private handleUpdate;
88
89
  private setAbortReason;
89
90
  private resetState;
@@ -1,3 +1,4 @@
1
+ import { SSRPlaceholderHandlers } from './ssr-placeholders';
1
2
  import type { BrowserObservers, Callback } from './types';
2
3
  export type { ObservedMutationType } from './types';
3
4
  export type SelectorConfig = {
@@ -16,6 +17,7 @@ type ConstructorOptions = {
16
17
  h: boolean;
17
18
  };
18
19
  };
20
+ ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
19
21
  };
20
22
  export declare class Observers implements BrowserObservers {
21
23
  private intersectionObserver;
@@ -25,6 +25,12 @@ export declare class SSRPlaceholderHandlers {
25
25
  private getPlaceholderId;
26
26
  private getPlaceholderReplacementId;
27
27
  clear(): void;
28
+ private collectPlaceholdersInternal;
29
+ /**
30
+ * Added this method to be utilised for testing purposes.
31
+ * In production it collection placeholder should only happens on constructor
32
+ */
33
+ collectExistingPlaceholders(): void;
28
34
  isPlaceholder(element: HTMLElement): boolean;
29
35
  isPlaceholderReplacement(element: HTMLElement): boolean;
30
36
  isPlaceholderIgnored(element: HTMLElement): boolean;
@@ -1,9 +1,30 @@
1
1
  import { type RevisionPayloadEntry } from '../../common/vc/types';
2
+ import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
2
3
  import { type SelectorConfig } from './get-element-name';
3
4
  import type { VCObserverGetVCResultParam } from './types';
4
5
  export type VCObserverNewConfig = {
5
6
  selectorConfig?: SelectorConfig;
6
7
  isPostInteraction?: boolean;
8
+ SSRConfig?: {
9
+ enablePageLayoutPlaceholder?: boolean;
10
+ disableSizeAndPositionCheck?: {
11
+ v: boolean;
12
+ h: boolean;
13
+ };
14
+ };
15
+ ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
16
+ };
17
+ declare const SSRState: {
18
+ readonly normal: 1;
19
+ readonly waitingForFirstRender: 2;
20
+ readonly ignoring: 3;
21
+ };
22
+ type SSRStateType = (typeof SSRState)[keyof typeof SSRState];
23
+ type SSRInclusiveState = {
24
+ state: SSRStateType;
25
+ reactRootElement: HTMLElement | null;
26
+ renderStop: number;
27
+ renderStart: number;
7
28
  };
8
29
  export default class VCObserverNew {
9
30
  private selectorConfig;
@@ -11,13 +32,22 @@ export default class VCObserverNew {
11
32
  private windowEventObserver;
12
33
  private entriesTimeline;
13
34
  private isPostInteraction;
35
+ private ssrPlaceholderHandler;
36
+ private ssr;
14
37
  constructor(config: VCObserverNewConfig);
15
38
  start({ startTime }: {
16
39
  startTime: DOMHighResTimeStamp;
17
40
  }): void;
18
41
  stop(): void;
42
+ setReactRootElement(element: HTMLElement): void;
43
+ setReactRootRenderStart(startTime?: number): void;
44
+ setReactRootRenderStop(stopTime?: number): void;
45
+ collectSSRPlaceholders(): void;
46
+ getSSRState(): SSRInclusiveState;
47
+ getSSRPlaceholderHandler(): SSRPlaceholderHandlers | null;
19
48
  addSSR(ssr: number): void;
20
49
  getVCResult(param: VCObserverGetVCResultParam): Promise<RevisionPayloadEntry[]>;
21
50
  private addStartEntry;
22
51
  private getElementName;
23
52
  }
53
+ export {};
@@ -1,5 +1,5 @@
1
1
  import type { ObservedWindowEvent } from './window-event-observer';
2
- export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'layout-shift' | 'window:event' | 'unknown';
2
+ export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:ssr-placeholder' | 'layout-shift' | 'window:event' | 'ssr-hydration' | 'unknown';
3
3
  export type ViewportEntryData = {
4
4
  readonly type: VCObserverEntryType;
5
5
  readonly elementName: string;
@@ -10,6 +10,8 @@ export type ViewPortObserverConstructorArgs = {
10
10
  readonly previousRect: DOMRectReadOnly | undefined;
11
11
  readonly mutationData?: MutationData | undefined | null;
12
12
  }): void;
13
+ getSSRState?: () => any;
14
+ getSSRPlaceholderHandler?: () => any;
13
15
  };
14
16
  export default class ViewportObserver {
15
17
  private intersectionObserver;
@@ -18,7 +20,9 @@ export default class ViewportObserver {
18
20
  private mapVisibleNodeRects;
19
21
  private onChange;
20
22
  private isStarted;
21
- constructor({ onChange }: ViewPortObserverConstructorArgs);
23
+ private getSSRState?;
24
+ private getSSRPlaceholderHandler?;
25
+ constructor({ onChange, getSSRState, getSSRPlaceholderHandler, }: ViewPortObserverConstructorArgs);
22
26
  private handleIntersectionEntry;
23
27
  private handleChildListMutation;
24
28
  private handleAttributeMutation;
@@ -9,8 +9,10 @@ export type CreateMutationObserverProps = {
9
9
  targets: Array<HTMLElement>;
10
10
  }) => void;
11
11
  onChildListMutation: (props: {
12
+ target: WeakRef<HTMLElement>;
12
13
  addedNodes: ReadonlyArray<WeakRef<HTMLElement>>;
13
14
  removedNodes: ReadonlyArray<WeakRef<HTMLElement>>;
15
+ timestamp: DOMHighResTimeStamp;
14
16
  }) => void;
15
17
  };
16
18
  declare function createMutationObserver({ onAttributeMutation, onChildListMutation, onMutationFinished, }: CreateMutationObserverProps): MutationObserver | null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-ufo",
3
- "version": "3.14.6",
3
+ "version": "3.14.8",
4
4
  "description": "Parts of React UFO that are publicly available",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -8,8 +8,7 @@
8
8
  "registry": "https://registry.npmjs.org/"
9
9
  },
10
10
  "atlassian": {
11
- "team": "UIP Frontend Observability",
12
- "runReact18": true
11
+ "team": "UIP Frontend Observability"
13
12
  },
14
13
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
15
14
  "main": "dist/cjs/index.js",
@@ -176,9 +175,6 @@
176
175
  "platform_ufo_timeout_simplification": {
177
176
  "type": "boolean"
178
177
  },
179
- "platform_ufo_enable_interactions_vc": {
180
- "type": "boolean"
181
- },
182
178
  "platform_ufo_enable_timeout_config": {
183
179
  "type": "boolean"
184
180
  },
@@ -208,6 +204,15 @@
208
204
  },
209
205
  "platform_vc_ignore_no_ls_mutation_marker": {
210
206
  "type": "boolean"
207
+ },
208
+ "platform_ufo_vc_v3_ssr_placeholder": {
209
+ "type": "boolean"
210
+ },
211
+ "platform_ufo_enable_vc_press_interactions": {
212
+ "type": "boolean"
213
+ },
214
+ "platform_ufo_enable_vc_observer_per_interaction": {
215
+ "type": "boolean"
211
216
  }
212
217
  }
213
218
  }