@atlaskit/renderer 133.12.0 → 133.14.0

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 CHANGED
@@ -1,5 +1,33 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 133.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`4537addf8cc7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4537addf8cc7a) -
8
+ Add an `onRendered` callback to the Renderer that fires on every render pass (after paint),
9
+ exposing render info (duration, distortedDuration, node counts, ttfb). Unlike the
10
+ `renderer rendered` analytics event — which may be sampled via the
11
+ `platform_renderer_sample_high_volume_events` feature gate and therefore only fires for a fraction
12
+ of renders — this callback always fires, so it can be used as a reliable render-complete signal
13
+ (for example, releasing a UFO load hold).
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
19
+ ## 133.13.0
20
+
21
+ ### Minor Changes
22
+
23
+ - [`30f196e640e18`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/30f196e640e18) -
24
+ Update i18n NPM package versions for editor,editor-extensions,activity-platform,media,elements
25
+ (Group 3)
26
+
27
+ ### Patch Changes
28
+
29
+ - Updated dependencies
30
+
3
31
  ## 133.12.0
4
32
 
5
33
  ### Minor Changes
@@ -72,7 +72,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
72
72
  var TABLE_INFO_TIMEOUT = 10000;
73
73
  var RENDER_EVENT_SAMPLE_RATE = 0.1;
74
74
  var packageName = "@atlaskit/renderer";
75
- var packageVersion = "133.11.7";
75
+ var packageVersion = "133.13.0";
76
76
  var setAsQueryContainerStyles = (0, _react2.css)({
77
77
  containerName: 'ak-renderer-wrapper',
78
78
  containerType: 'inline-size'
@@ -364,6 +364,25 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
364
364
  var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
365
365
  var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? (0, _utils.getAnalyticsEventSeverity)(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
366
366
  var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
367
+
368
+ // Ignored via go/ees005
369
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
370
+ var distortedDuration = renderedMeasurementDistortedDurationMonitor.distortedDuration;
371
+ var ttfb = (0, _navigation.getResponseEndTime)();
372
+ var nodes = (0, _countNodes.countNodes)(props.document);
373
+
374
+ // Always signal that the renderer has finished rendering, regardless of analytics
375
+ // sampling or TTR tracking config. This is a reliable, unsampled lifecycle hook
376
+ // (e.g. used to release a UFO load hold) and must not be coupled to the sampled
377
+ // `rendered` analytics event below, which only fires for a fraction of renders.
378
+ if (props.onRendered) {
379
+ props.onRendered({
380
+ duration: duration,
381
+ distortedDuration: distortedDuration,
382
+ nodes: nodes,
383
+ ttfb: ttfb
384
+ });
385
+ }
367
386
  if (!isTTRTrackingExplicitlyDisabled) {
368
387
  var event = {
369
388
  action: _analytics.ACTION.RENDERED,
@@ -371,11 +390,9 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
371
390
  attributes: {
372
391
  platform: _events.PLATFORM.WEB,
373
392
  duration: duration,
374
- // Ignored via go/ees005
375
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
376
- distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
377
- ttfb: (0, _navigation.getResponseEndTime)(),
378
- nodes: (0, _countNodes.countNodes)(props.document),
393
+ distortedDuration: distortedDuration,
394
+ ttfb: ttfb,
395
+ nodes: nodes,
379
396
  nestedRendererType: (0, _experiments.editorExperiment)('platform_synced_block', true) ? nestedRendererType : undefined,
380
397
  severity: severity,
381
398
  sampleRate: (0, _platformFeatureFlags.fg)('platform_renderer_sample_high_volume_events') ? RENDER_EVENT_SAMPLE_RATE : 1
@@ -58,7 +58,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
58
58
  const TABLE_INFO_TIMEOUT = 10000;
59
59
  const RENDER_EVENT_SAMPLE_RATE = 0.1;
60
60
  const packageName = "@atlaskit/renderer";
61
- const packageVersion = "133.11.7";
61
+ const packageVersion = "133.13.0";
62
62
  const setAsQueryContainerStyles = css({
63
63
  containerName: 'ak-renderer-wrapper',
64
64
  containerType: 'inline-size'
@@ -354,6 +354,25 @@ export const RendererFunctionalComponent = props => {
354
354
  const forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
355
355
  const severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? getAnalyticsEventSeverity(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
356
356
  const isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
357
+
358
+ // Ignored via go/ees005
359
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
360
+ const distortedDuration = renderedMeasurementDistortedDurationMonitor.distortedDuration;
361
+ const ttfb = getResponseEndTime();
362
+ const nodes = countNodes(props.document);
363
+
364
+ // Always signal that the renderer has finished rendering, regardless of analytics
365
+ // sampling or TTR tracking config. This is a reliable, unsampled lifecycle hook
366
+ // (e.g. used to release a UFO load hold) and must not be coupled to the sampled
367
+ // `rendered` analytics event below, which only fires for a fraction of renders.
368
+ if (props.onRendered) {
369
+ props.onRendered({
370
+ duration,
371
+ distortedDuration,
372
+ nodes,
373
+ ttfb
374
+ });
375
+ }
357
376
  if (!isTTRTrackingExplicitlyDisabled) {
358
377
  const event = {
359
378
  action: ACTION.RENDERED,
@@ -361,11 +380,9 @@ export const RendererFunctionalComponent = props => {
361
380
  attributes: {
362
381
  platform: PLATFORM.WEB,
363
382
  duration,
364
- // Ignored via go/ees005
365
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
366
- distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
367
- ttfb: getResponseEndTime(),
368
- nodes: countNodes(props.document),
383
+ distortedDuration,
384
+ ttfb,
385
+ nodes,
369
386
  nestedRendererType: editorExperiment('platform_synced_block', true) ? nestedRendererType : undefined,
370
387
  severity,
371
388
  sampleRate: fg('platform_renderer_sample_high_volume_events') ? RENDER_EVENT_SAMPLE_RATE : 1
@@ -63,7 +63,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
63
63
  var TABLE_INFO_TIMEOUT = 10000;
64
64
  var RENDER_EVENT_SAMPLE_RATE = 0.1;
65
65
  var packageName = "@atlaskit/renderer";
66
- var packageVersion = "133.11.7";
66
+ var packageVersion = "133.13.0";
67
67
  var setAsQueryContainerStyles = css({
68
68
  containerName: 'ak-renderer-wrapper',
69
69
  containerType: 'inline-size'
@@ -355,6 +355,25 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
355
355
  var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
356
356
  var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? getAnalyticsEventSeverity(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
357
357
  var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
358
+
359
+ // Ignored via go/ees005
360
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
361
+ var distortedDuration = renderedMeasurementDistortedDurationMonitor.distortedDuration;
362
+ var ttfb = getResponseEndTime();
363
+ var nodes = countNodes(props.document);
364
+
365
+ // Always signal that the renderer has finished rendering, regardless of analytics
366
+ // sampling or TTR tracking config. This is a reliable, unsampled lifecycle hook
367
+ // (e.g. used to release a UFO load hold) and must not be coupled to the sampled
368
+ // `rendered` analytics event below, which only fires for a fraction of renders.
369
+ if (props.onRendered) {
370
+ props.onRendered({
371
+ duration: duration,
372
+ distortedDuration: distortedDuration,
373
+ nodes: nodes,
374
+ ttfb: ttfb
375
+ });
376
+ }
358
377
  if (!isTTRTrackingExplicitlyDisabled) {
359
378
  var event = {
360
379
  action: ACTION.RENDERED,
@@ -362,11 +381,9 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
362
381
  attributes: {
363
382
  platform: PLATFORM.WEB,
364
383
  duration: duration,
365
- // Ignored via go/ees005
366
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
367
- distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
368
- ttfb: getResponseEndTime(),
369
- nodes: countNodes(props.document),
384
+ distortedDuration: distortedDuration,
385
+ ttfb: ttfb,
386
+ nodes: nodes,
370
387
  nestedRendererType: editorExperiment('platform_synced_block', true) ? nestedRendererType : undefined,
371
388
  severity: severity,
372
389
  sampleRate: fg('platform_renderer_sample_high_volume_events') ? RENDER_EVENT_SAMPLE_RATE : 1
@@ -1 +1 @@
1
- export type { RendererProps } from '../ui/renderer-props';
1
+ export type { RendererProps, RendererRenderedInfo } from '../ui/renderer-props';
@@ -18,6 +18,19 @@ import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance,
18
18
  interface RawObjectFeatureFlags {
19
19
  ['renderer-render-tracking']: string;
20
20
  }
21
+ /**
22
+ * Information about a completed renderer render pass, provided to the `onRendered` callback.
23
+ */
24
+ export type RendererRenderedInfo = {
25
+ /** Whether the render duration measurement may be distorted (e.g. tab not visible). */
26
+ distortedDuration: boolean;
27
+ /** Time taken for the render pass, in milliseconds (as measured by the renderer). */
28
+ duration: number;
29
+ /** Count of rendered nodes, keyed by node type. */
30
+ nodes: Record<string, number>;
31
+ /** Time to first byte for the document response, when available. */
32
+ ttfb?: number;
33
+ };
21
34
  export interface RendererProps {
22
35
  /**
23
36
  * When enabled a trailing telepointer will be added to the rendered document
@@ -137,8 +150,31 @@ export interface RendererProps {
137
150
  media?: MediaOptions;
138
151
  nodeComponents?: NodeComponentsProps;
139
152
  noOpSSRInlineScript?: boolean;
153
+ /**
154
+ * Called synchronously during the render phase (before paint) each time the document is
155
+ * successfully rendered, with statistics about the rendered output. Not called when the
156
+ * render throws (see `onError`).
157
+ *
158
+ * Because it fires during render rather than after paint, prefer `onRendered` for
159
+ * post-paint lifecycle signals (e.g. releasing a UFO load hold).
160
+ *
161
+ * @param stat - Statistics about the rendered output (e.g. node counts).
162
+ */
140
163
  onComplete?: (stat: RenderOutputStat) => void;
141
164
  onError?: (error: any) => void;
165
+ /**
166
+ * Called when the renderer completes a render pass — on the animation frame following
167
+ * mount (i.e. after paint), exposing basic information about the render.
168
+ *
169
+ * Unlike the `renderer` `rendered` analytics event, which may be sampled (see the
170
+ * `platform_renderer_sample_high_volume_events` feature gate) and therefore only fires
171
+ * for a fraction of renders, this callback ALWAYS fires on every render pass regardless
172
+ * of analytics sampling. Use it for reliable lifecycle signals — for example releasing a
173
+ * UFO load hold — rather than depending on the sampled analytics event.
174
+ *
175
+ * @param info - Basic information about the completed render.
176
+ */
177
+ onRendered?: (info: RendererRenderedInfo) => void;
142
178
  /**
143
179
  * Optional callback to programatically determine the link target for rendered links. Controls whether a link should render as external or not.
144
180
  * Return _blank if the url should render as an external link.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "133.12.0",
3
+ "version": "133.14.0",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,11 +32,11 @@
32
32
  "dependencies": {
33
33
  "@atlaskit/adf-schema": "^56.1.0",
34
34
  "@atlaskit/adf-utils": "^20.3.0",
35
- "@atlaskit/afm-i18n-platform-editor-renderer": "2.193.0",
35
+ "@atlaskit/afm-i18n-platform-editor-renderer": "2.194.0",
36
36
  "@atlaskit/analytics-listeners": "^11.1.0",
37
37
  "@atlaskit/analytics-namespaced-context": "^8.1.0",
38
38
  "@atlaskit/analytics-next": "^12.3.0",
39
- "@atlaskit/browser-apis": "^1.1.0",
39
+ "@atlaskit/browser-apis": "^1.2.0",
40
40
  "@atlaskit/button": "^24.3.0",
41
41
  "@atlaskit/code": "^18.2.0",
42
42
  "@atlaskit/editor-json-transformer": "^9.0.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/editor-prosemirror": "^8.0.0",
45
45
  "@atlaskit/editor-shared-styles": "^4.0.0",
46
46
  "@atlaskit/editor-smart-link-draggable": "^1.1.0",
47
- "@atlaskit/emoji": "^71.10.0",
47
+ "@atlaskit/emoji": "^71.11.0",
48
48
  "@atlaskit/feature-gate-js-client": "^6.0.0",
49
49
  "@atlaskit/icon": "^37.1.0",
50
50
  "@atlaskit/link": "^4.3.0",
@@ -56,23 +56,23 @@
56
56
  "@atlaskit/media-client-react": "^6.1.0",
57
57
  "@atlaskit/media-common": "^14.3.0",
58
58
  "@atlaskit/media-filmstrip": "^52.2.0",
59
- "@atlaskit/media-ui": "^30.8.0",
59
+ "@atlaskit/media-ui": "^30.9.0",
60
60
  "@atlaskit/media-viewer": "^54.5.0",
61
- "@atlaskit/platform-feature-flags": "^2.0.0",
61
+ "@atlaskit/platform-feature-flags": "^2.1.0",
62
62
  "@atlaskit/platform-feature-flags-react": "^1.1.0",
63
63
  "@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
64
64
  "@atlaskit/react-compiler-gating": "^0.2.0",
65
65
  "@atlaskit/react-ufo": "^7.3.0",
66
66
  "@atlaskit/smart-card": "^45.11.0",
67
- "@atlaskit/status": "^5.5.0",
68
- "@atlaskit/task-decision": "^21.5.0",
67
+ "@atlaskit/status": "^5.6.0",
68
+ "@atlaskit/task-decision": "^21.6.0",
69
69
  "@atlaskit/theme": "^26.1.0",
70
- "@atlaskit/tmp-editor-statsig": "^130.0.0",
71
- "@atlaskit/tokens": "^16.1.0",
70
+ "@atlaskit/tmp-editor-statsig": "^131.0.0",
71
+ "@atlaskit/tokens": "^16.2.0",
72
72
  "@atlaskit/tooltip": "^23.1.0",
73
73
  "@atlaskit/visually-hidden": "^4.2.0",
74
74
  "@babel/runtime": "^7.0.0",
75
- "@compiled/react": "^0.22.2",
75
+ "@compiled/react": "^1.0.0",
76
76
  "@emotion/react": "^11.7.1",
77
77
  "bind-event-listener": "^3.0.0",
78
78
  "lodash": "^4.17.21",
@@ -82,7 +82,7 @@
82
82
  "uuid": "^3.1.0"
83
83
  },
84
84
  "peerDependencies": {
85
- "@atlaskit/editor-common": "^116.34.0",
85
+ "@atlaskit/editor-common": "^116.35.0",
86
86
  "@atlaskit/link-provider": "^5.2.0",
87
87
  "@atlaskit/media-core": "^38.0.0",
88
88
  "react": "^18.2.0",
@@ -100,7 +100,7 @@
100
100
  "@atlaskit/media-core": "^38.0.0",
101
101
  "@atlaskit/media-integration-test-helpers": "workspace:^",
102
102
  "@atlaskit/media-test-helpers": "^42.2.0",
103
- "@atlaskit/mention": "^27.8.0",
103
+ "@atlaskit/mention": "^27.9.0",
104
104
  "@atlaskit/modal-dialog": "^16.1.0",
105
105
  "@atlaskit/navigation-system": "^10.7.0",
106
106
  "@atlaskit/profilecard": "^26.12.0",