@atlaskit/react-ufo 3.14.6 → 3.14.7
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/CHANGELOG.md +8 -0
- package/dist/cjs/vc/index.js +39 -6
- package/dist/cjs/vc/vc-observer/index.js +10 -2
- package/dist/cjs/vc/vc-observer/observers/index.js +12 -7
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +76 -40
- package/dist/cjs/vc/vc-observer-new/index.js +84 -0
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +214 -71
- package/dist/cjs/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +97 -59
- package/dist/es2019/vc/index.js +37 -5
- package/dist/es2019/vc/vc-observer/index.js +8 -2
- package/dist/es2019/vc/vc-observer/observers/index.js +11 -5
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +57 -26
- package/dist/es2019/vc/vc-observer-new/index.js +67 -1
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +87 -22
- package/dist/es2019/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +50 -34
- package/dist/esm/vc/index.js +39 -6
- package/dist/esm/vc/vc-observer/index.js +10 -2
- package/dist/esm/vc/vc-observer/observers/index.js +12 -7
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +76 -40
- package/dist/esm/vc/vc-observer-new/index.js +84 -0
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +214 -71
- package/dist/esm/vc/vc-observer-new/viewport-observer/mutation-observer/index.js +97 -59
- package/dist/types/vc/index.d.ts +2 -0
- package/dist/types/vc/types.d.ts +2 -0
- package/dist/types/vc/vc-observer/index.d.ts +1 -0
- package/dist/types/vc/vc-observer/observers/index.d.ts +2 -0
- package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts +6 -0
- package/dist/types/vc/vc-observer-new/index.d.ts +30 -0
- package/dist/types/vc/vc-observer-new/types.d.ts +1 -1
- package/dist/types/vc/vc-observer-new/viewport-observer/index.d.ts +5 -1
- package/dist/types/vc/vc-observer-new/viewport-observer/mutation-observer/index.d.ts +2 -0
- package/dist/types-ts4.5/vc/index.d.ts +2 -0
- package/dist/types-ts4.5/vc/types.d.ts +2 -0
- package/dist/types-ts4.5/vc/vc-observer/index.d.ts +1 -0
- package/dist/types-ts4.5/vc/vc-observer/observers/index.d.ts +2 -0
- package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts +6 -0
- package/dist/types-ts4.5/vc/vc-observer-new/index.d.ts +30 -0
- package/dist/types-ts4.5/vc/vc-observer-new/types.d.ts +1 -1
- package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/index.d.ts +5 -1
- package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/mutation-observer/index.d.ts +2 -0
- package/package.json +5 -3
|
@@ -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
|
-
|
|
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;
|
|
@@ -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,7 @@ 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;
|
|
@@ -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
|
-
|
|
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.
|
|
3
|
+
"version": "3.14.7",
|
|
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",
|
|
@@ -208,6 +207,9 @@
|
|
|
208
207
|
},
|
|
209
208
|
"platform_vc_ignore_no_ls_mutation_marker": {
|
|
210
209
|
"type": "boolean"
|
|
210
|
+
},
|
|
211
|
+
"platform_ufo_vc_v3_ssr_placeholder": {
|
|
212
|
+
"type": "boolean"
|
|
211
213
|
}
|
|
212
214
|
}
|
|
213
215
|
}
|