@atlaskit/renderer 114.13.0 → 114.13.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 114.13.1
+
+### Patch Changes
+
+- [#148536](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148536)
+  [`da7c16d27cfcc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da7c16d27cfcc) -
+  Update fragment serializer logic
+- Updated dependencies
+
 ## 114.13.0
 
 ### Minor Changes

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

@@ -48,6 +48,7 @@ var _ValidationContext = require("./ValidationContext");
 var _RendererStyleContainer = require("./RendererStyleContainer");
 var _getBaseFontSize = require("./get-base-font-size");
 var _rendererHelper = require("./rendererHelper");
+var _useMemoFromPropsDerivative = require("./useMemoFromPropsDerivative");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -59,7 +60,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.13.0";
+var packageVersion = "114.13.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -207,13 +208,14 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
     exposure: true
   }) ? fireAnalyticsEventNew : fireAnalyticsEventOld;
   var deriveSerializerProps = (0, _react.useCallback)(function (props) {
+    var _props$startPos;
     var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
     var annotationProvider = props.annotationProvider;
     var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
     var _createRendererContex = createRendererContext(props.featureFlags, props.isTopLevelRenderer),
       featureFlags = _createRendererContex.featureFlags;
     return {
-      startPos: props.startPos,
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0,
       providers: providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
@@ -252,20 +254,11 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };
   }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
-  var serializer = (0, _react.useMemo)(function () {
-    var _props$startPos;
-    var init = deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
-      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
-    }));
-    if ((0, _platformFeatureFlags.fg)('cc_complexit_fe_progressive_adf_rendering')) {
-      var _props$createSerializ;
-      var newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
-      if (newSerializer) {
-        return newSerializer;
-      }
-    }
-    return new _.ReactSerializer(init);
-  }, [deriveSerializerProps, props]);
+
+  // Abstract out the logic into its own function
+  var serializer = (0, _useMemoFromPropsDerivative.useMemoFromPropsDerivative)(function (serializerProps) {
+    return new _.ReactSerializer(serializerProps);
+  }, deriveSerializerProps, props);
   var localRef = (0, _react.useRef)(null);
   var editorRef = props.innerRef || localRef;
   var id = (0, _react.useMemo)(function () {

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMemoFromPropsDerivative = useMemoFromPropsDerivative;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function useMemoFromPropsDerivative(factory, propsDerivator, props) {
+  // cache the last set of props
+  var prev = (0, _react.useRef)(props);
+  var prevFactory = (0, _react.useRef)(null);
+  return (0, _react.useMemo)(function () {
+    var init = propsDerivator(props);
+    if ((0, _platformFeatureFlags.fg)('cc_complexit_fe_reduce_fragment_serialization')) {
+      // check if the serializer is already created
+      var shouldCreate = !prevFactory.current;
+      // check each prop to see if value has changed and also check if the number of props has changed
+      if (prev.current !== props) {
+        // @ts-ignore - error TS2769: No overload matches this call.
+        var propsEntries = Object.entries(props);
+        // Break these into its own const to skip TS checks.
+        // @ts-ignore - error TS2769: No overload matches this call.
+        var isLengthDifferent = propsEntries.length !== Object.keys(prev.current).length;
+        // @ts-ignore
+        var isValueDifferent = propsEntries.some(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            key = _ref2[0],
+            prop = _ref2[1];
+          return prev.current[key] !== prop;
+        });
+        shouldCreate = isLengthDifferent || isValueDifferent;
+      }
+      prev.current = props;
+      // If first time or any prop value has changed, create a new serializer
+      if (shouldCreate) {
+        prevFactory.current = factory(init);
+      }
+    }
+
+    // If progressive rendering is enabled, create a new serializer
+    if ((0, _platformFeatureFlags.fg)('cc_complexit_fe_progressive_adf_rendering')) {
+      var _props$createSerializ;
+      // @ts-ignore - erorr TS2339 Property 'createSerializer' does not exist on type 'Props'.
+      var newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
+      if (newSerializer) {
+        return newSerializer;
+      }
+    }
+    return (0, _platformFeatureFlags.fg)('cc_complexit_fe_reduce_fragment_serialization') ? prevFactory.current : factory(init);
+  },
+  // To keep deps consistent, here disable the exhaustive-deps rule to drop factory from the deps array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [propsDerivator, props]);
+}

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

@@ -43,10 +43,11 @@ import { ValidationContext } from './ValidationContext';
 import { RendererStyleContainer } from './RendererStyleContainer';
 import { getBaseFontSize } from './get-base-font-size';
 import { removeEmptySpaceAroundContent } from './rendererHelper';
+import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.13.0";
+const packageVersion = "114.13.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -196,6 +197,7 @@ export const RendererFunctionalComponent = props => {
     exposure: true
   }) ? fireAnalyticsEventNew : fireAnalyticsEventOld;
   const deriveSerializerProps = useCallback(props => {
+    var _props$startPos;
     const stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
     const {
       annotationProvider
@@ -205,7 +207,7 @@ export const RendererFunctionalComponent = props => {
       featureFlags
     } = createRendererContext(props.featureFlags, props.isTopLevelRenderer);
     return {
-      startPos: props.startPos,
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0,
       providers: providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
@@ -245,21 +247,9 @@ export const RendererFunctionalComponent = props => {
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };
   }, [createRendererContext, providerFactory, fireAnalyticsEvent]);
-  const serializer = useMemo(() => {
-    var _props$startPos;
-    const init = deriveSerializerProps({
-      ...props,
-      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
-    });
-    if (fg('cc_complexit_fe_progressive_adf_rendering')) {
-      var _props$createSerializ;
-      const newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
-      if (newSerializer) {
-        return newSerializer;
-      }
-    }
-    return new ReactSerializer(init);
-  }, [deriveSerializerProps, props]);
+
+  // Abstract out the logic into its own function
+  const serializer = useMemoFromPropsDerivative(serializerProps => new ReactSerializer(serializerProps), deriveSerializerProps, props);
   const localRef = useRef(null);
   const editorRef = props.innerRef || localRef;
   const id = useMemo(() => uuid(), []);

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

@@ -0,0 +1,44 @@
+import { useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+export function useMemoFromPropsDerivative(factory, propsDerivator, props) {
+  // cache the last set of props
+  const prev = useRef(props);
+  const prevFactory = useRef(null);
+  return useMemo(() => {
+    const init = propsDerivator(props);
+    if (fg('cc_complexit_fe_reduce_fragment_serialization')) {
+      // check if the serializer is already created
+      let shouldCreate = !prevFactory.current;
+      // check each prop to see if value has changed and also check if the number of props has changed
+      if (prev.current !== props) {
+        // @ts-ignore - error TS2769: No overload matches this call.
+        const propsEntries = Object.entries(props);
+        // Break these into its own const to skip TS checks.
+        // @ts-ignore - error TS2769: No overload matches this call.
+        const isLengthDifferent = propsEntries.length !== Object.keys(prev.current).length;
+        // @ts-ignore
+        const isValueDifferent = propsEntries.some(([key, prop]) => prev.current[key] !== prop);
+        shouldCreate = isLengthDifferent || isValueDifferent;
+      }
+      prev.current = props;
+      // If first time or any prop value has changed, create a new serializer
+      if (shouldCreate) {
+        prevFactory.current = factory(init);
+      }
+    }
+
+    // If progressive rendering is enabled, create a new serializer
+    if (fg('cc_complexit_fe_progressive_adf_rendering')) {
+      var _props$createSerializ;
+      // @ts-ignore - erorr TS2339 Property 'createSerializer' does not exist on type 'Props'.
+      const newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
+      if (newSerializer) {
+        return newSerializer;
+      }
+    }
+    return fg('cc_complexit_fe_reduce_fragment_serialization') ? prevFactory.current : factory(init);
+  },
+  // To keep deps consistent, here disable the exhaustive-deps rule to drop factory from the deps array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [propsDerivator, props]);
+}

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

@@ -46,10 +46,11 @@ import { ValidationContext } from './ValidationContext';
 import { RendererStyleContainer } from './RendererStyleContainer';
 import { getBaseFontSize } from './get-base-font-size';
 import { removeEmptySpaceAroundContent } from './rendererHelper';
+import { useMemoFromPropsDerivative } from './useMemoFromPropsDerivative';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.13.0";
+var packageVersion = "114.13.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -197,13 +198,14 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
     exposure: true
   }) ? fireAnalyticsEventNew : fireAnalyticsEventOld;
   var deriveSerializerProps = useCallback(function (props) {
+    var _props$startPos;
     var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
     var annotationProvider = props.annotationProvider;
     var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
     var _createRendererContex = createRendererContext(props.featureFlags, props.isTopLevelRenderer),
       featureFlags = _createRendererContex.featureFlags;
     return {
-      startPos: props.startPos,
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0,
       providers: providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
@@ -242,20 +244,11 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };
   }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
-  var serializer = useMemo(function () {
-    var _props$startPos;
-    var init = deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
-      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
-    }));
-    if (fg('cc_complexit_fe_progressive_adf_rendering')) {
-      var _props$createSerializ;
-      var newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
-      if (newSerializer) {
-        return newSerializer;
-      }
-    }
-    return new ReactSerializer(init);
-  }, [deriveSerializerProps, props]);
+
+  // Abstract out the logic into its own function
+  var serializer = useMemoFromPropsDerivative(function (serializerProps) {
+    return new ReactSerializer(serializerProps);
+  }, deriveSerializerProps, props);
   var localRef = useRef(null);
   var editorRef = props.innerRef || localRef;
   var id = useMemo(function () {

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

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+export function useMemoFromPropsDerivative(factory, propsDerivator, props) {
+  // cache the last set of props
+  var prev = useRef(props);
+  var prevFactory = useRef(null);
+  return useMemo(function () {
+    var init = propsDerivator(props);
+    if (fg('cc_complexit_fe_reduce_fragment_serialization')) {
+      // check if the serializer is already created
+      var shouldCreate = !prevFactory.current;
+      // check each prop to see if value has changed and also check if the number of props has changed
+      if (prev.current !== props) {
+        // @ts-ignore - error TS2769: No overload matches this call.
+        var propsEntries = Object.entries(props);
+        // Break these into its own const to skip TS checks.
+        // @ts-ignore - error TS2769: No overload matches this call.
+        var isLengthDifferent = propsEntries.length !== Object.keys(prev.current).length;
+        // @ts-ignore
+        var isValueDifferent = propsEntries.some(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            key = _ref2[0],
+            prop = _ref2[1];
+          return prev.current[key] !== prop;
+        });
+        shouldCreate = isLengthDifferent || isValueDifferent;
+      }
+      prev.current = props;
+      // If first time or any prop value has changed, create a new serializer
+      if (shouldCreate) {
+        prevFactory.current = factory(init);
+      }
+    }
+
+    // If progressive rendering is enabled, create a new serializer
+    if (fg('cc_complexit_fe_progressive_adf_rendering')) {
+      var _props$createSerializ;
+      // @ts-ignore - erorr TS2339 Property 'createSerializer' does not exist on type 'Props'.
+      var newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
+      if (newSerializer) {
+        return newSerializer;
+      }
+    }
+    return fg('cc_complexit_fe_reduce_fragment_serialization') ? prevFactory.current : factory(init);
+  },
+  // To keep deps consistent, here disable the exhaustive-deps rule to drop factory from the deps array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [propsDerivator, props]);
+}

package/dist/types/ui/Renderer/useMemoFromPropsDerivative.d.ts

@@ -0,0 +1 @@
+export declare function useMemoFromPropsDerivative<Memo, PropsDerivative, Props>(factory: (propsDerivative: PropsDerivative) => Memo, propsDerivator: (props: Props) => PropsDerivative, props: Props): any;

package/dist/types-ts4.5/ui/Renderer/useMemoFromPropsDerivative.d.ts

@@ -0,0 +1 @@
+export declare function useMemoFromPropsDerivative<Memo, PropsDerivative, Props>(factory: (propsDerivative: PropsDerivative) => Memo, propsDerivator: (props: Props) => PropsDerivative, props: Props): any;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "114.13.0",
+	"version": "114.13.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/code": "^17.1.0",
-		"@atlaskit/editor-common": "^103.22.0",
+		"@atlaskit/editor-common": "^103.24.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.1.0",
 		"@atlaskit/react-ufo": "^3.9.0",
-		"@atlaskit/smart-card": "^36.13.0",
+		"@atlaskit/smart-card": "^36.14.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
@@ -130,6 +130,9 @@
 		"cc_perf_reduce_rerenders": {
 			"type": "boolean"
 		},
+		"cc_complexit_fe_reduce_fragment_serialization": {
+			"type": "boolean"
+		},
 		"platform_renderer_annotations_create_debug_logging": {
 			"type": "boolean"
 		},
@@ -198,10 +201,6 @@
 		"platform_editor_multi_body_extension_extensibility": {
 			"type": "boolean"
 		},
-		"platform-smart-card-icon-migration": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
 		"platform_editor_add_media_from_url_rollout": {
 			"type": "boolean"
 		},