@atlaskit/renderer 133.13.0 → 133.14.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/renderer
 
+## 133.14.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 133.14.0
+
+### Minor Changes
+
+- [`4537addf8cc7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4537addf8cc7a) -
+  Add an `onRendered` callback to the Renderer that fires on every render pass (after paint),
+  exposing render info (duration, distortedDuration, node counts, ttfb). Unlike the
+  `renderer rendered` analytics event — which may be sampled via the
+  `platform_renderer_sample_high_volume_events` feature gate and therefore only fires for a fraction
+  of renders — this callback always fires, so it can be used as a reliable render-complete signal
+  (for example, releasing a UFO load hold).
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 133.13.0
 
 ### Minor Changes

package/dist/cjs/ui/Renderer/index.js

@@ -72,7 +72,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "133.12.0";
+var packageVersion = "133.14.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -364,6 +364,25 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
           var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
           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;
           var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
+
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          var distortedDuration = renderedMeasurementDistortedDurationMonitor.distortedDuration;
+          var ttfb = (0, _navigation.getResponseEndTime)();
+          var nodes = (0, _countNodes.countNodes)(props.document);
+
+          // Always signal that the renderer has finished rendering, regardless of analytics
+          // sampling or TTR tracking config. This is a reliable, unsampled lifecycle hook
+          // (e.g. used to release a UFO load hold) and must not be coupled to the sampled
+          // `rendered` analytics event below, which only fires for a fraction of renders.
+          if (props.onRendered) {
+            props.onRendered({
+              duration: duration,
+              distortedDuration: distortedDuration,
+              nodes: nodes,
+              ttfb: ttfb
+            });
+          }
           if (!isTTRTrackingExplicitlyDisabled) {
             var event = {
               action: _analytics.ACTION.RENDERED,
@@ -371,11 +390,9 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
               attributes: {
                 platform: _events.PLATFORM.WEB,
                 duration: duration,
-                // Ignored via go/ees005
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
-                ttfb: (0, _navigation.getResponseEndTime)(),
-                nodes: (0, _countNodes.countNodes)(props.document),
+                distortedDuration: distortedDuration,
+                ttfb: ttfb,
+                nodes: nodes,
                 nestedRendererType: (0, _experiments.editorExperiment)('platform_synced_block', true) ? nestedRendererType : undefined,
                 severity: severity,
                 sampleRate: (0, _platformFeatureFlags.fg)('platform_renderer_sample_high_volume_events') ? RENDER_EVENT_SAMPLE_RATE : 1

package/dist/es2019/ui/Renderer/index.js

@@ -58,7 +58,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "133.12.0";
+const packageVersion = "133.14.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -354,6 +354,25 @@ export const RendererFunctionalComponent = props => {
           const forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
           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;
           const isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
+
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          const distortedDuration = renderedMeasurementDistortedDurationMonitor.distortedDuration;
+          const ttfb = getResponseEndTime();
+          const nodes = countNodes(props.document);
+
+          // Always signal that the renderer has finished rendering, regardless of analytics
+          // sampling or TTR tracking config. This is a reliable, unsampled lifecycle hook
+          // (e.g. used to release a UFO load hold) and must not be coupled to the sampled
+          // `rendered` analytics event below, which only fires for a fraction of renders.
+          if (props.onRendered) {
+            props.onRendered({
+              duration,
+              distortedDuration,
+              nodes,
+              ttfb
+            });
+          }
           if (!isTTRTrackingExplicitlyDisabled) {
             const event = {
               action: ACTION.RENDERED,
@@ -361,11 +380,9 @@ export const RendererFunctionalComponent = props => {
               attributes: {
                 platform: PLATFORM.WEB,
                 duration,
-                // Ignored via go/ees005
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
-                ttfb: getResponseEndTime(),
-                nodes: countNodes(props.document),
+                distortedDuration,
+                ttfb,
+                nodes,
                 nestedRendererType: editorExperiment('platform_synced_block', true) ? nestedRendererType : undefined,
                 severity,
                 sampleRate: fg('platform_renderer_sample_high_volume_events') ? RENDER_EVENT_SAMPLE_RATE : 1

package/dist/esm/ui/Renderer/index.js

@@ -63,7 +63,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "133.12.0";
+var packageVersion = "133.14.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -355,6 +355,25 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
           var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && shouldForceTracking();
           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;
           var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
+
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          var distortedDuration = renderedMeasurementDistortedDurationMonitor.distortedDuration;
+          var ttfb = getResponseEndTime();
+          var nodes = countNodes(props.document);
+
+          // Always signal that the renderer has finished rendering, regardless of analytics
+          // sampling or TTR tracking config. This is a reliable, unsampled lifecycle hook
+          // (e.g. used to release a UFO load hold) and must not be coupled to the sampled
+          // `rendered` analytics event below, which only fires for a fraction of renders.
+          if (props.onRendered) {
+            props.onRendered({
+              duration: duration,
+              distortedDuration: distortedDuration,
+              nodes: nodes,
+              ttfb: ttfb
+            });
+          }
           if (!isTTRTrackingExplicitlyDisabled) {
             var event = {
               action: ACTION.RENDERED,
@@ -362,11 +381,9 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
               attributes: {
                 platform: PLATFORM.WEB,
                 duration: duration,
-                // Ignored via go/ees005
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
-                ttfb: getResponseEndTime(),
-                nodes: countNodes(props.document),
+                distortedDuration: distortedDuration,
+                ttfb: ttfb,
+                nodes: nodes,
                 nestedRendererType: editorExperiment('platform_synced_block', true) ? nestedRendererType : undefined,
                 severity: severity,
                 sampleRate: fg('platform_renderer_sample_high_volume_events') ? RENDER_EVENT_SAMPLE_RATE : 1

package/dist/types/entry-points/renderer-props.d.ts

@@ -1 +1 @@
-export type { RendererProps } from '../ui/renderer-props';
+export type { RendererProps, RendererRenderedInfo } from '../ui/renderer-props';

package/dist/types/ui/renderer-props.d.ts

@@ -18,6 +18,19 @@ import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance,
 interface RawObjectFeatureFlags {
     ['renderer-render-tracking']: string;
 }
+/**
+ * Information about a completed renderer render pass, provided to the `onRendered` callback.
+ */
+export type RendererRenderedInfo = {
+    /** Whether the render duration measurement may be distorted (e.g. tab not visible). */
+    distortedDuration: boolean;
+    /** Time taken for the render pass, in milliseconds (as measured by the renderer). */
+    duration: number;
+    /** Count of rendered nodes, keyed by node type. */
+    nodes: Record<string, number>;
+    /** Time to first byte for the document response, when available. */
+    ttfb?: number;
+};
 export interface RendererProps {
     /**
      * When enabled a trailing telepointer will be added to the rendered document
@@ -137,8 +150,31 @@ export interface RendererProps {
     media?: MediaOptions;
     nodeComponents?: NodeComponentsProps;
     noOpSSRInlineScript?: boolean;
+    /**
+     * Called synchronously during the render phase (before paint) each time the document is
+     * successfully rendered, with statistics about the rendered output. Not called when the
+     * render throws (see `onError`).
+     *
+     * Because it fires during render rather than after paint, prefer `onRendered` for
+     * post-paint lifecycle signals (e.g. releasing a UFO load hold).
+     *
+     * @param stat - Statistics about the rendered output (e.g. node counts).
+     */
     onComplete?: (stat: RenderOutputStat) => void;
     onError?: (error: any) => void;
+    /**
+     * Called when the renderer completes a render pass — on the animation frame following
+     * mount (i.e. after paint), exposing basic information about the render.
+     *
+     * Unlike the `renderer` `rendered` analytics event, which may be sampled (see the
+     * `platform_renderer_sample_high_volume_events` feature gate) and therefore only fires
+     * for a fraction of renders, this callback ALWAYS fires on every render pass regardless
+     * of analytics sampling. Use it for reliable lifecycle signals — for example releasing a
+     * UFO load hold — rather than depending on the sampled analytics event.
+     *
+     * @param info - Basic information about the completed render.
+     */
+    onRendered?: (info: RendererRenderedInfo) => void;
     /**
      * Optional callback to programatically determine the link target for rendered links. Controls whether a link should render as external or not.
      * Return _blank if the url should render as an external link.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "133.13.0",
+	"version": "133.14.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -67,12 +67,12 @@
 		"@atlaskit/status": "^5.6.0",
 		"@atlaskit/task-decision": "^21.6.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^130.2.0",
+		"@atlaskit/tmp-editor-statsig": "^132.0.0",
 		"@atlaskit/tokens": "^16.2.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.22.2",
+		"@compiled/react": "^1.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
 		"lodash": "^4.17.21",