@atlaskit/editor-common 111.16.2 → 111.16.4
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 +17 -0
- package/afm-cc/tsconfig.json +0 -1
- package/afm-jira/tsconfig.json +0 -1
- package/afm-products/tsconfig.json +0 -1
- package/dist/cjs/messages/syncBlock.js +10 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/performance-ssr-measures/RenderMarker.js +16 -0
- package/dist/cjs/performance-ssr-measures/SSRRenderMeasure.js +90 -0
- package/dist/cjs/performance-ssr-measures/index.js +19 -0
- package/dist/cjs/performance-ssr-measures/profileSSROperation.js +65 -0
- package/dist/cjs/provider-helpers/combine-providers.js +10 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/utils/index.js +6 -0
- package/dist/cjs/utils/performance/navigation.js +11 -0
- package/dist/es2019/messages/syncBlock.js +10 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/performance-ssr-measures/RenderMarker.js +11 -0
- package/dist/es2019/performance-ssr-measures/SSRRenderMeasure.js +85 -0
- package/dist/es2019/performance-ssr-measures/index.js +5 -0
- package/dist/es2019/performance-ssr-measures/profileSSROperation.js +59 -0
- package/dist/es2019/provider-helpers/combine-providers.js +6 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/utils/index.js +1 -1
- package/dist/es2019/utils/performance/navigation.js +10 -0
- package/dist/esm/messages/syncBlock.js +10 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/performance-ssr-measures/RenderMarker.js +10 -0
- package/dist/esm/performance-ssr-measures/SSRRenderMeasure.js +83 -0
- package/dist/esm/performance-ssr-measures/index.js +5 -0
- package/dist/esm/performance-ssr-measures/profileSSROperation.js +59 -0
- package/dist/esm/provider-helpers/combine-providers.js +10 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/utils/index.js +1 -1
- package/dist/esm/utils/performance/navigation.js +10 -0
- package/dist/types/analytics/types/block-menu-events.d.ts +1 -2
- package/dist/types/messages/syncBlock.d.ts +10 -0
- package/dist/types/performance-ssr-measures/RenderMarker.d.ts +5 -0
- package/dist/types/performance-ssr-measures/SSRRenderMeasure.d.ts +114 -0
- package/dist/types/performance-ssr-measures/index.d.ts +2 -0
- package/dist/types/performance-ssr-measures/profileSSROperation.d.ts +43 -0
- package/dist/types/utils/index.d.ts +1 -1
- package/dist/types/utils/performance/navigation.d.ts +1 -0
- package/dist/types-ts4.5/analytics/types/block-menu-events.d.ts +1 -2
- package/dist/types-ts4.5/messages/syncBlock.d.ts +10 -0
- package/dist/types-ts4.5/performance-ssr-measures/RenderMarker.d.ts +5 -0
- package/dist/types-ts4.5/performance-ssr-measures/SSRRenderMeasure.d.ts +114 -0
- package/dist/types-ts4.5/performance-ssr-measures/index.d.ts +2 -0
- package/dist/types-ts4.5/performance-ssr-measures/profileSSROperation.d.ts +43 -0
- package/dist/types-ts4.5/utils/index.d.ts +1 -1
- package/dist/types-ts4.5/utils/performance/navigation.d.ts +1 -0
- package/package.json +6 -3
- package/performance/ssr-measures/package.json +17 -0
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React, { useCallback, memo, useRef } from 'react';
|
|
2
|
+
import { isSSR } from '../core-utils/is-ssr';
|
|
3
|
+
import { RenderMarker } from './RenderMarker';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Props for SSRRenderMeasure component
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
function SSRRenderMeasureImpl(_ref) {
|
|
10
|
+
var onSSRMeasure = _ref.onSSRMeasure,
|
|
11
|
+
segmentName = _ref.segmentName,
|
|
12
|
+
startTimestampRef = _ref.startTimestampRef,
|
|
13
|
+
children = _ref.children;
|
|
14
|
+
var wasMeasured = useRef(false);
|
|
15
|
+
var handleOnRender = useCallback(function () {
|
|
16
|
+
if (wasMeasured.current) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
onSSRMeasure === null || onSSRMeasure === void 0 || onSSRMeasure({
|
|
20
|
+
segmentName: segmentName,
|
|
21
|
+
startTimestamp: startTimestampRef.current,
|
|
22
|
+
endTimestamp: performance.now()
|
|
23
|
+
});
|
|
24
|
+
wasMeasured.current = true;
|
|
25
|
+
}, [onSSRMeasure, segmentName, startTimestampRef]);
|
|
26
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(RenderMarker, {
|
|
27
|
+
onRender: handleOnRender
|
|
28
|
+
}));
|
|
29
|
+
}
|
|
30
|
+
var SSRRenderMeasureNoOp = /*#__PURE__*/memo(function (_ref2) {
|
|
31
|
+
var children = _ref2.children;
|
|
32
|
+
return children;
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* Component for measuring render performance during Server-Side Rendering (SSR).
|
|
37
|
+
*
|
|
38
|
+
* This component wraps content to measure its render duration in SSR mode.
|
|
39
|
+
* On client builds, it's optimized to a no-op component with zero performance overhead.
|
|
40
|
+
* On SSR builds, it captures timing data and reports it via the `onSSRMeasure` callback.
|
|
41
|
+
*
|
|
42
|
+
* **How it works:**
|
|
43
|
+
* - Measures from `startTimestampRef.current` (component start) to when `RenderMarker` is rendered
|
|
44
|
+
* - Uses `RenderMarker` to detect when the render completes successfully
|
|
45
|
+
* - Only reports the measurement once (protected by `wasMeasured` ref)
|
|
46
|
+
* - If child components throw errors during render, the measurement will not be reported
|
|
47
|
+
*
|
|
48
|
+
* **Usage pattern:**
|
|
49
|
+
* 1. Create `startTimestampRef` as the **first line** in your component using `useRef(performance.now())`
|
|
50
|
+
* 2. Wrap your content with `SSRRenderMeasure` at the end of your component
|
|
51
|
+
* 3. Provide the `onSSRMeasure` callback to receive timing data
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```tsx
|
|
55
|
+
* function FullPageEditor({ onSSRMeasure }) {
|
|
56
|
+
* // CRITICAL: Must be the first line for accurate timing
|
|
57
|
+
* const startTimestampRef = useRef(performance.now());
|
|
58
|
+
*
|
|
59
|
+
* // ...component logic, hooks, etc.
|
|
60
|
+
*
|
|
61
|
+
* return (
|
|
62
|
+
* <SSRRenderMeasure
|
|
63
|
+
* segmentName="ssr-app/render/fullPageEditor"
|
|
64
|
+
* startTimestampRef={startTimestampRef}
|
|
65
|
+
* onSSRMeasure={onSSRMeasure}
|
|
66
|
+
* >
|
|
67
|
+
* <EditorContent />
|
|
68
|
+
* </SSRRenderMeasure>
|
|
69
|
+
* );
|
|
70
|
+
* }
|
|
71
|
+
* ```
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```tsx
|
|
75
|
+
* // Handling the measurement callback
|
|
76
|
+
* const handleSSRMeasure = (measure) => {
|
|
77
|
+
* const duration = measure.endTimestamp - measure.startTimestamp;
|
|
78
|
+
* console.log(`${measure.segmentName} rendered in ${duration}ms`);
|
|
79
|
+
* // Send to analytics, logging, etc.
|
|
80
|
+
* };
|
|
81
|
+
* ```
|
|
82
|
+
*/
|
|
83
|
+
export var SSRRenderMeasure = isSSR() ? SSRRenderMeasureImpl : SSRRenderMeasureNoOp;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { isSSR } from '../core-utils/is-ssr';
|
|
2
|
+
var profileSSROperationImpl = function profileSSROperationImpl(segmentName, fn, onSSRMeasure) {
|
|
3
|
+
if (!onSSRMeasure) {
|
|
4
|
+
return fn();
|
|
5
|
+
}
|
|
6
|
+
var startTimestamp = performance.now();
|
|
7
|
+
try {
|
|
8
|
+
return fn();
|
|
9
|
+
} finally {
|
|
10
|
+
onSSRMeasure({
|
|
11
|
+
segmentName: segmentName,
|
|
12
|
+
startTimestamp: startTimestamp,
|
|
13
|
+
endTimestamp: performance.now()
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var profileSSROperationNoOp = function profileSSROperationNoOp(_segmentName, fn, _onSSRMeasure) {
|
|
18
|
+
return fn();
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Profiles a synchronous operation during Server-Side Rendering (SSR).
|
|
23
|
+
*
|
|
24
|
+
* This function wraps an operation to measure its execution time in SSR mode.
|
|
25
|
+
* On client builds, the profiling is optimized away and the function executes normally.
|
|
26
|
+
* On SSR builds, it captures timing data using `performance.now()` and reports it via the callback.
|
|
27
|
+
*
|
|
28
|
+
* **Important notes:**
|
|
29
|
+
* - Profiling only occurs in SSR mode when `onSSRMeasure` is provided
|
|
30
|
+
* - Both `startTimestamp` and `endTimestamp` are absolute values from `performance.now()`, not relative times
|
|
31
|
+
* - Calculate duration as: `endTimestamp - startTimestamp`
|
|
32
|
+
* - The measurement is guaranteed to be reported even if the function throws an error (via `finally` block)
|
|
33
|
+
* - On client builds, this function has zero performance overhead
|
|
34
|
+
*
|
|
35
|
+
* @param segmentName - Identifier for the operation being measured (e.g., 'ssr-app/render/editor/createSchema')
|
|
36
|
+
* @param fn - The synchronous function to execute and profile
|
|
37
|
+
* @param onSSRMeasure - Optional callback to receive performance measurements
|
|
38
|
+
* @param onSSRMeasure.segmentName - Name of the measured segment
|
|
39
|
+
* @param onSSRMeasure.startTimestamp - Absolute timestamp when the operation started (from `performance.now()`)
|
|
40
|
+
* @param onSSRMeasure.endTimestamp - Absolute timestamp when the operation completed (from `performance.now()`)
|
|
41
|
+
*
|
|
42
|
+
* @returns The result of the executed function
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* // Profile schema creation during SSR
|
|
46
|
+
* const schema = profileSSROperation(
|
|
47
|
+
* 'ssr-app/render/editor/createSchema',
|
|
48
|
+
* () => createSchema(config),
|
|
49
|
+
* (measure) => {
|
|
50
|
+
* const duration = measure.endTimestamp - measure.startTimestamp;
|
|
51
|
+
* console.log(`${measure.segmentName}: ${duration}ms`);
|
|
52
|
+
* }
|
|
53
|
+
* );
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* // Without callback, executes normally
|
|
57
|
+
* const result = profileSSROperation('operation', () => expensiveCalculation());
|
|
58
|
+
*/
|
|
59
|
+
export var profileSSROperation = isSSR() ? profileSSROperationImpl : profileSSROperationNoOp;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
5
|
import { getOnlyFulfilled, waitForAllPromises, waitForFirstFulfilledPromise } from './promise-helpers';
|
|
5
6
|
var flatten = function flatten(arr) {
|
|
6
7
|
var _ref;
|
|
@@ -27,8 +28,16 @@ export default (function (providers) {
|
|
|
27
28
|
}));
|
|
28
29
|
case 2:
|
|
29
30
|
results = _context.sent;
|
|
31
|
+
if (fg('platform_editor_fix_getautoconverter_null_error')) {
|
|
32
|
+
_context.next = 5;
|
|
33
|
+
break;
|
|
34
|
+
}
|
|
30
35
|
return _context.abrupt("return", getOnlyFulfilled(results));
|
|
31
|
-
case
|
|
36
|
+
case 5:
|
|
37
|
+
return _context.abrupt("return", getOnlyFulfilled(results).filter(function (provider) {
|
|
38
|
+
return provider != null;
|
|
39
|
+
}));
|
|
40
|
+
case 6:
|
|
32
41
|
case "end":
|
|
33
42
|
return _context.stop();
|
|
34
43
|
}
|
|
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
21
21
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
22
|
import Layer from '../Layer';
|
|
23
23
|
var packageName = "@atlaskit/editor-common";
|
|
24
|
-
var packageVersion = "
|
|
24
|
+
var packageVersion = "111.16.4";
|
|
25
25
|
var halfFocusRing = 1;
|
|
26
26
|
var dropOffset = '0, 8';
|
|
27
27
|
var fadeIn = keyframes({
|
package/dist/esm/utils/index.js
CHANGED
|
@@ -120,7 +120,7 @@ export { isPerformanceAPIAvailable, isPerformanceObserverAvailable } from './per
|
|
|
120
120
|
*
|
|
121
121
|
* Private API - should not be used. Use `@atlaskit/editor-common/performance/navigation` if required.
|
|
122
122
|
*/
|
|
123
|
-
export { getResponseEndTime } from './performance/navigation';
|
|
123
|
+
export { getRequestToResponseTime, getResponseEndTime } from './performance/navigation';
|
|
124
124
|
export { getExtensionRenderer } from './extension-handler';
|
|
125
125
|
export { hasMergedCell, getColumnWidths, calcTableColumnWidths, convertProsemirrorTableNodeToArrayOfRows, isPositionNearTableRow } from './table';
|
|
126
126
|
export { createCompareNodes } from './compareNodes';
|
|
@@ -8,4 +8,14 @@ export function getResponseEndTime() {
|
|
|
8
8
|
return nav.responseEnd;
|
|
9
9
|
}
|
|
10
10
|
return;
|
|
11
|
+
}
|
|
12
|
+
export function getRequestToResponseTime() {
|
|
13
|
+
if (!isPerformanceAPIAvailable()) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
var nav = performance.getEntriesByType('navigation')[0];
|
|
17
|
+
if (nav) {
|
|
18
|
+
return nav.responseEnd - nav.requestStart;
|
|
19
|
+
}
|
|
20
|
+
return;
|
|
11
21
|
}
|
|
@@ -27,10 +27,9 @@ interface ElementTransformErrorAttr {
|
|
|
27
27
|
errorStack?: string;
|
|
28
28
|
from: string;
|
|
29
29
|
inputMethod: INPUT_METHOD.BLOCK_MENU;
|
|
30
|
-
position: number;
|
|
31
30
|
selection: SelectionJson;
|
|
32
31
|
to: string;
|
|
33
|
-
triggeredFrom
|
|
32
|
+
triggeredFrom?: INPUT_METHOD.MOUSE | INPUT_METHOD.KEYBOARD;
|
|
34
33
|
}
|
|
35
34
|
export type ElementTransformErrorAEP = OperationalAEP<ACTION.ERRORED, ACTION_SUBJECT.ELEMENT, ACTION_SUBJECT_ID.TRANSFORM, ElementTransformErrorAttr>;
|
|
36
35
|
interface ElementTransformAttr {
|
|
@@ -384,4 +384,14 @@ export declare const syncBlockMessages: {
|
|
|
384
384
|
defaultMessage: string;
|
|
385
385
|
description: string;
|
|
386
386
|
};
|
|
387
|
+
inlineExtensionInSyncBlockTitle: {
|
|
388
|
+
id: string;
|
|
389
|
+
defaultMessage: string;
|
|
390
|
+
description: string;
|
|
391
|
+
};
|
|
392
|
+
inlineExtensionInSyncBlockDescription: {
|
|
393
|
+
id: string;
|
|
394
|
+
defaultMessage: string;
|
|
395
|
+
description: string;
|
|
396
|
+
};
|
|
387
397
|
};
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props for SSRRenderMeasure component
|
|
4
|
+
*/
|
|
5
|
+
interface SSRRenderMeasureProps {
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Callback invoked during Server-Side Rendering (SSR) to measure and track performance metrics.
|
|
9
|
+
* Provides timing information for the render duration of the measured component.
|
|
10
|
+
*
|
|
11
|
+
* @param measure.segmentName - Name identifier of the measured segment
|
|
12
|
+
* @param measure.startTimestamp - Absolute timestamp when rendering started (from `performance.now()`)
|
|
13
|
+
* @param measure.endTimestamp - Absolute timestamp when rendering completed (from `performance.now()`)
|
|
14
|
+
*
|
|
15
|
+
* **Note:** Both timestamps are absolute values from `performance.now()`, not relative times.
|
|
16
|
+
* Calculate duration as: `measure.endTimestamp - measure.startTimestamp`
|
|
17
|
+
*
|
|
18
|
+
* Optional - if not provided, the component renders without measurement.
|
|
19
|
+
*/
|
|
20
|
+
onSSRMeasure?: (measure: {
|
|
21
|
+
endTimestamp: number;
|
|
22
|
+
segmentName: string;
|
|
23
|
+
startTimestamp: number;
|
|
24
|
+
}) => void;
|
|
25
|
+
/**
|
|
26
|
+
* The name identifier of the component being measured for tracing.
|
|
27
|
+
*
|
|
28
|
+
* @example 'ssr-app/render/fullPageEditor'
|
|
29
|
+
*/
|
|
30
|
+
segmentName: string;
|
|
31
|
+
/**
|
|
32
|
+
* Reference to the start timestamp of the component render.
|
|
33
|
+
*
|
|
34
|
+
* **CRITICAL:** Must be created using `useRef(performance.now())` as the **first line**
|
|
35
|
+
* in the component being profiled to capture the most accurate start time.
|
|
36
|
+
*
|
|
37
|
+
* Using a ref (instead of state or regular variable) is essential to:
|
|
38
|
+
* - Avoid triggering re-renders
|
|
39
|
+
* - Preserve the initial timestamp across component lifecycle
|
|
40
|
+
* - Ensure measurement accuracy
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* function MyComponent() {
|
|
45
|
+
* const startTimestampRef = useRef(performance.now()); // MUST be first line
|
|
46
|
+
* // ...rest of component logic
|
|
47
|
+
*
|
|
48
|
+
* return (
|
|
49
|
+
* <SSRRenderMeasure
|
|
50
|
+
* segmentName="ssr-app/render/myComponent"
|
|
51
|
+
* startTimestampRef={startTimestampRef}
|
|
52
|
+
* onSSRMeasure={handleMeasure}
|
|
53
|
+
* >
|
|
54
|
+
* {content}
|
|
55
|
+
* </SSRRenderMeasure>
|
|
56
|
+
* );
|
|
57
|
+
* }
|
|
58
|
+
* ```
|
|
59
|
+
*/
|
|
60
|
+
startTimestampRef: {
|
|
61
|
+
current: number;
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
declare function SSRRenderMeasureImpl({ onSSRMeasure, segmentName, startTimestampRef, children, }: SSRRenderMeasureProps): React.JSX.Element;
|
|
65
|
+
/**
|
|
66
|
+
* Component for measuring render performance during Server-Side Rendering (SSR).
|
|
67
|
+
*
|
|
68
|
+
* This component wraps content to measure its render duration in SSR mode.
|
|
69
|
+
* On client builds, it's optimized to a no-op component with zero performance overhead.
|
|
70
|
+
* On SSR builds, it captures timing data and reports it via the `onSSRMeasure` callback.
|
|
71
|
+
*
|
|
72
|
+
* **How it works:**
|
|
73
|
+
* - Measures from `startTimestampRef.current` (component start) to when `RenderMarker` is rendered
|
|
74
|
+
* - Uses `RenderMarker` to detect when the render completes successfully
|
|
75
|
+
* - Only reports the measurement once (protected by `wasMeasured` ref)
|
|
76
|
+
* - If child components throw errors during render, the measurement will not be reported
|
|
77
|
+
*
|
|
78
|
+
* **Usage pattern:**
|
|
79
|
+
* 1. Create `startTimestampRef` as the **first line** in your component using `useRef(performance.now())`
|
|
80
|
+
* 2. Wrap your content with `SSRRenderMeasure` at the end of your component
|
|
81
|
+
* 3. Provide the `onSSRMeasure` callback to receive timing data
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* ```tsx
|
|
85
|
+
* function FullPageEditor({ onSSRMeasure }) {
|
|
86
|
+
* // CRITICAL: Must be the first line for accurate timing
|
|
87
|
+
* const startTimestampRef = useRef(performance.now());
|
|
88
|
+
*
|
|
89
|
+
* // ...component logic, hooks, etc.
|
|
90
|
+
*
|
|
91
|
+
* return (
|
|
92
|
+
* <SSRRenderMeasure
|
|
93
|
+
* segmentName="ssr-app/render/fullPageEditor"
|
|
94
|
+
* startTimestampRef={startTimestampRef}
|
|
95
|
+
* onSSRMeasure={onSSRMeasure}
|
|
96
|
+
* >
|
|
97
|
+
* <EditorContent />
|
|
98
|
+
* </SSRRenderMeasure>
|
|
99
|
+
* );
|
|
100
|
+
* }
|
|
101
|
+
* ```
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```tsx
|
|
105
|
+
* // Handling the measurement callback
|
|
106
|
+
* const handleSSRMeasure = (measure) => {
|
|
107
|
+
* const duration = measure.endTimestamp - measure.startTimestamp;
|
|
108
|
+
* console.log(`${measure.segmentName} rendered in ${duration}ms`);
|
|
109
|
+
* // Send to analytics, logging, etc.
|
|
110
|
+
* };
|
|
111
|
+
* ```
|
|
112
|
+
*/
|
|
113
|
+
export declare const SSRRenderMeasure: React.MemoExoticComponent<({ children }: SSRRenderMeasureProps) => React.ReactNode> | typeof SSRRenderMeasureImpl;
|
|
114
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Profiles a synchronous operation during Server-Side Rendering (SSR).
|
|
3
|
+
*
|
|
4
|
+
* This function wraps an operation to measure its execution time in SSR mode.
|
|
5
|
+
* On client builds, the profiling is optimized away and the function executes normally.
|
|
6
|
+
* On SSR builds, it captures timing data using `performance.now()` and reports it via the callback.
|
|
7
|
+
*
|
|
8
|
+
* **Important notes:**
|
|
9
|
+
* - Profiling only occurs in SSR mode when `onSSRMeasure` is provided
|
|
10
|
+
* - Both `startTimestamp` and `endTimestamp` are absolute values from `performance.now()`, not relative times
|
|
11
|
+
* - Calculate duration as: `endTimestamp - startTimestamp`
|
|
12
|
+
* - The measurement is guaranteed to be reported even if the function throws an error (via `finally` block)
|
|
13
|
+
* - On client builds, this function has zero performance overhead
|
|
14
|
+
*
|
|
15
|
+
* @param segmentName - Identifier for the operation being measured (e.g., 'ssr-app/render/editor/createSchema')
|
|
16
|
+
* @param fn - The synchronous function to execute and profile
|
|
17
|
+
* @param onSSRMeasure - Optional callback to receive performance measurements
|
|
18
|
+
* @param onSSRMeasure.segmentName - Name of the measured segment
|
|
19
|
+
* @param onSSRMeasure.startTimestamp - Absolute timestamp when the operation started (from `performance.now()`)
|
|
20
|
+
* @param onSSRMeasure.endTimestamp - Absolute timestamp when the operation completed (from `performance.now()`)
|
|
21
|
+
*
|
|
22
|
+
* @returns The result of the executed function
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* // Profile schema creation during SSR
|
|
26
|
+
* const schema = profileSSROperation(
|
|
27
|
+
* 'ssr-app/render/editor/createSchema',
|
|
28
|
+
* () => createSchema(config),
|
|
29
|
+
* (measure) => {
|
|
30
|
+
* const duration = measure.endTimestamp - measure.startTimestamp;
|
|
31
|
+
* console.log(`${measure.segmentName}: ${duration}ms`);
|
|
32
|
+
* }
|
|
33
|
+
* );
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* // Without callback, executes normally
|
|
37
|
+
* const result = profileSSROperation('operation', () => expensiveCalculation());
|
|
38
|
+
*/
|
|
39
|
+
export declare const profileSSROperation: <T>(segmentName: string, fn: () => T, onSSRMeasure?: (measure: {
|
|
40
|
+
endTimestamp: number;
|
|
41
|
+
segmentName: string;
|
|
42
|
+
startTimestamp: number;
|
|
43
|
+
}) => void) => T;
|
|
@@ -126,7 +126,7 @@ export { isPerformanceAPIAvailable, isPerformanceObserverAvailable, } from './pe
|
|
|
126
126
|
*
|
|
127
127
|
* Private API - should not be used. Use `@atlaskit/editor-common/performance/navigation` if required.
|
|
128
128
|
*/
|
|
129
|
-
export { getResponseEndTime } from './performance/navigation';
|
|
129
|
+
export { getRequestToResponseTime, getResponseEndTime } from './performance/navigation';
|
|
130
130
|
export { getExtensionRenderer } from './extension-handler';
|
|
131
131
|
export { hasMergedCell, getColumnWidths, calcTableColumnWidths, convertProsemirrorTableNodeToArrayOfRows, isPositionNearTableRow, } from './table';
|
|
132
132
|
export { createCompareNodes } from './compareNodes';
|
|
@@ -27,10 +27,9 @@ interface ElementTransformErrorAttr {
|
|
|
27
27
|
errorStack?: string;
|
|
28
28
|
from: string;
|
|
29
29
|
inputMethod: INPUT_METHOD.BLOCK_MENU;
|
|
30
|
-
position: number;
|
|
31
30
|
selection: SelectionJson;
|
|
32
31
|
to: string;
|
|
33
|
-
triggeredFrom
|
|
32
|
+
triggeredFrom?: INPUT_METHOD.MOUSE | INPUT_METHOD.KEYBOARD;
|
|
34
33
|
}
|
|
35
34
|
export type ElementTransformErrorAEP = OperationalAEP<ACTION.ERRORED, ACTION_SUBJECT.ELEMENT, ACTION_SUBJECT_ID.TRANSFORM, ElementTransformErrorAttr>;
|
|
36
35
|
interface ElementTransformAttr {
|
|
@@ -384,4 +384,14 @@ export declare const syncBlockMessages: {
|
|
|
384
384
|
defaultMessage: string;
|
|
385
385
|
description: string;
|
|
386
386
|
};
|
|
387
|
+
inlineExtensionInSyncBlockTitle: {
|
|
388
|
+
id: string;
|
|
389
|
+
defaultMessage: string;
|
|
390
|
+
description: string;
|
|
391
|
+
};
|
|
392
|
+
inlineExtensionInSyncBlockDescription: {
|
|
393
|
+
id: string;
|
|
394
|
+
defaultMessage: string;
|
|
395
|
+
description: string;
|
|
396
|
+
};
|
|
387
397
|
};
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props for SSRRenderMeasure component
|
|
4
|
+
*/
|
|
5
|
+
interface SSRRenderMeasureProps {
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Callback invoked during Server-Side Rendering (SSR) to measure and track performance metrics.
|
|
9
|
+
* Provides timing information for the render duration of the measured component.
|
|
10
|
+
*
|
|
11
|
+
* @param measure.segmentName - Name identifier of the measured segment
|
|
12
|
+
* @param measure.startTimestamp - Absolute timestamp when rendering started (from `performance.now()`)
|
|
13
|
+
* @param measure.endTimestamp - Absolute timestamp when rendering completed (from `performance.now()`)
|
|
14
|
+
*
|
|
15
|
+
* **Note:** Both timestamps are absolute values from `performance.now()`, not relative times.
|
|
16
|
+
* Calculate duration as: `measure.endTimestamp - measure.startTimestamp`
|
|
17
|
+
*
|
|
18
|
+
* Optional - if not provided, the component renders without measurement.
|
|
19
|
+
*/
|
|
20
|
+
onSSRMeasure?: (measure: {
|
|
21
|
+
endTimestamp: number;
|
|
22
|
+
segmentName: string;
|
|
23
|
+
startTimestamp: number;
|
|
24
|
+
}) => void;
|
|
25
|
+
/**
|
|
26
|
+
* The name identifier of the component being measured for tracing.
|
|
27
|
+
*
|
|
28
|
+
* @example 'ssr-app/render/fullPageEditor'
|
|
29
|
+
*/
|
|
30
|
+
segmentName: string;
|
|
31
|
+
/**
|
|
32
|
+
* Reference to the start timestamp of the component render.
|
|
33
|
+
*
|
|
34
|
+
* **CRITICAL:** Must be created using `useRef(performance.now())` as the **first line**
|
|
35
|
+
* in the component being profiled to capture the most accurate start time.
|
|
36
|
+
*
|
|
37
|
+
* Using a ref (instead of state or regular variable) is essential to:
|
|
38
|
+
* - Avoid triggering re-renders
|
|
39
|
+
* - Preserve the initial timestamp across component lifecycle
|
|
40
|
+
* - Ensure measurement accuracy
|
|
41
|
+
*
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* function MyComponent() {
|
|
45
|
+
* const startTimestampRef = useRef(performance.now()); // MUST be first line
|
|
46
|
+
* // ...rest of component logic
|
|
47
|
+
*
|
|
48
|
+
* return (
|
|
49
|
+
* <SSRRenderMeasure
|
|
50
|
+
* segmentName="ssr-app/render/myComponent"
|
|
51
|
+
* startTimestampRef={startTimestampRef}
|
|
52
|
+
* onSSRMeasure={handleMeasure}
|
|
53
|
+
* >
|
|
54
|
+
* {content}
|
|
55
|
+
* </SSRRenderMeasure>
|
|
56
|
+
* );
|
|
57
|
+
* }
|
|
58
|
+
* ```
|
|
59
|
+
*/
|
|
60
|
+
startTimestampRef: {
|
|
61
|
+
current: number;
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
declare function SSRRenderMeasureImpl({ onSSRMeasure, segmentName, startTimestampRef, children, }: SSRRenderMeasureProps): React.JSX.Element;
|
|
65
|
+
/**
|
|
66
|
+
* Component for measuring render performance during Server-Side Rendering (SSR).
|
|
67
|
+
*
|
|
68
|
+
* This component wraps content to measure its render duration in SSR mode.
|
|
69
|
+
* On client builds, it's optimized to a no-op component with zero performance overhead.
|
|
70
|
+
* On SSR builds, it captures timing data and reports it via the `onSSRMeasure` callback.
|
|
71
|
+
*
|
|
72
|
+
* **How it works:**
|
|
73
|
+
* - Measures from `startTimestampRef.current` (component start) to when `RenderMarker` is rendered
|
|
74
|
+
* - Uses `RenderMarker` to detect when the render completes successfully
|
|
75
|
+
* - Only reports the measurement once (protected by `wasMeasured` ref)
|
|
76
|
+
* - If child components throw errors during render, the measurement will not be reported
|
|
77
|
+
*
|
|
78
|
+
* **Usage pattern:**
|
|
79
|
+
* 1. Create `startTimestampRef` as the **first line** in your component using `useRef(performance.now())`
|
|
80
|
+
* 2. Wrap your content with `SSRRenderMeasure` at the end of your component
|
|
81
|
+
* 3. Provide the `onSSRMeasure` callback to receive timing data
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* ```tsx
|
|
85
|
+
* function FullPageEditor({ onSSRMeasure }) {
|
|
86
|
+
* // CRITICAL: Must be the first line for accurate timing
|
|
87
|
+
* const startTimestampRef = useRef(performance.now());
|
|
88
|
+
*
|
|
89
|
+
* // ...component logic, hooks, etc.
|
|
90
|
+
*
|
|
91
|
+
* return (
|
|
92
|
+
* <SSRRenderMeasure
|
|
93
|
+
* segmentName="ssr-app/render/fullPageEditor"
|
|
94
|
+
* startTimestampRef={startTimestampRef}
|
|
95
|
+
* onSSRMeasure={onSSRMeasure}
|
|
96
|
+
* >
|
|
97
|
+
* <EditorContent />
|
|
98
|
+
* </SSRRenderMeasure>
|
|
99
|
+
* );
|
|
100
|
+
* }
|
|
101
|
+
* ```
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* ```tsx
|
|
105
|
+
* // Handling the measurement callback
|
|
106
|
+
* const handleSSRMeasure = (measure) => {
|
|
107
|
+
* const duration = measure.endTimestamp - measure.startTimestamp;
|
|
108
|
+
* console.log(`${measure.segmentName} rendered in ${duration}ms`);
|
|
109
|
+
* // Send to analytics, logging, etc.
|
|
110
|
+
* };
|
|
111
|
+
* ```
|
|
112
|
+
*/
|
|
113
|
+
export declare const SSRRenderMeasure: React.MemoExoticComponent<({ children }: SSRRenderMeasureProps) => React.ReactNode> | typeof SSRRenderMeasureImpl;
|
|
114
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Profiles a synchronous operation during Server-Side Rendering (SSR).
|
|
3
|
+
*
|
|
4
|
+
* This function wraps an operation to measure its execution time in SSR mode.
|
|
5
|
+
* On client builds, the profiling is optimized away and the function executes normally.
|
|
6
|
+
* On SSR builds, it captures timing data using `performance.now()` and reports it via the callback.
|
|
7
|
+
*
|
|
8
|
+
* **Important notes:**
|
|
9
|
+
* - Profiling only occurs in SSR mode when `onSSRMeasure` is provided
|
|
10
|
+
* - Both `startTimestamp` and `endTimestamp` are absolute values from `performance.now()`, not relative times
|
|
11
|
+
* - Calculate duration as: `endTimestamp - startTimestamp`
|
|
12
|
+
* - The measurement is guaranteed to be reported even if the function throws an error (via `finally` block)
|
|
13
|
+
* - On client builds, this function has zero performance overhead
|
|
14
|
+
*
|
|
15
|
+
* @param segmentName - Identifier for the operation being measured (e.g., 'ssr-app/render/editor/createSchema')
|
|
16
|
+
* @param fn - The synchronous function to execute and profile
|
|
17
|
+
* @param onSSRMeasure - Optional callback to receive performance measurements
|
|
18
|
+
* @param onSSRMeasure.segmentName - Name of the measured segment
|
|
19
|
+
* @param onSSRMeasure.startTimestamp - Absolute timestamp when the operation started (from `performance.now()`)
|
|
20
|
+
* @param onSSRMeasure.endTimestamp - Absolute timestamp when the operation completed (from `performance.now()`)
|
|
21
|
+
*
|
|
22
|
+
* @returns The result of the executed function
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* // Profile schema creation during SSR
|
|
26
|
+
* const schema = profileSSROperation(
|
|
27
|
+
* 'ssr-app/render/editor/createSchema',
|
|
28
|
+
* () => createSchema(config),
|
|
29
|
+
* (measure) => {
|
|
30
|
+
* const duration = measure.endTimestamp - measure.startTimestamp;
|
|
31
|
+
* console.log(`${measure.segmentName}: ${duration}ms`);
|
|
32
|
+
* }
|
|
33
|
+
* );
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* // Without callback, executes normally
|
|
37
|
+
* const result = profileSSROperation('operation', () => expensiveCalculation());
|
|
38
|
+
*/
|
|
39
|
+
export declare const profileSSROperation: <T>(segmentName: string, fn: () => T, onSSRMeasure?: (measure: {
|
|
40
|
+
endTimestamp: number;
|
|
41
|
+
segmentName: string;
|
|
42
|
+
startTimestamp: number;
|
|
43
|
+
}) => void) => T;
|
|
@@ -126,7 +126,7 @@ export { isPerformanceAPIAvailable, isPerformanceObserverAvailable, } from './pe
|
|
|
126
126
|
*
|
|
127
127
|
* Private API - should not be used. Use `@atlaskit/editor-common/performance/navigation` if required.
|
|
128
128
|
*/
|
|
129
|
-
export { getResponseEndTime } from './performance/navigation';
|
|
129
|
+
export { getRequestToResponseTime, getResponseEndTime } from './performance/navigation';
|
|
130
130
|
export { getExtensionRenderer } from './extension-handler';
|
|
131
131
|
export { hasMergedCell, getColumnWidths, calcTableColumnWidths, convertProsemirrorTableNodeToArrayOfRows, isPositionNearTableRow, } from './table';
|
|
132
132
|
export { createCompareNodes } from './compareNodes';
|