@atlaskit/emoji 72.3.9 → 72.3.11

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/emoji
 
+## 72.3.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 72.3.10
+
+### Patch Changes
+
+- [`590c70ad5d166`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/590c70ad5d166) -
+  Behind the `platform_emoji_fetch_in_effect` experiment, `ResourcedEmoji` resolves its emoji from a
+  layout effect instead of a `useMemo` that ran during render. A render React discards (for example
+  a pass that suspends) no longer creates a fetch whose promise callbacks set state and schedule
+  another render. With the experiment off the fetch still happens during render as before.
+
 ## 72.3.9
 
 ### Patch Changes

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
@@ -176,8 +177,19 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
       (0, _sampledUfoRenderedEmoji.sampledUfoRenderedEmoji)(emojiId).markFMP();
     }
   }, [emojiId]);
+
+  // Fetching from `useMemo` runs during render, so a render React later discards (for example a
+  // pass that suspends) still creates a promise whose callbacks set state and schedule yet another
+  // render. The layout effect only runs for committed renders, and being pre-paint it keeps the
+  // synchronous cache-hit path from flashing the placeholder.
   (0, _react.useMemo)(function () {
-    if (!resolvedEmojiProvider || !emojiId) {
+    if (!resolvedEmojiProvider || !emojiId || (0, _isExperimentEnabled.isExperimentEnabled)('platform_emoji_fetch_in_effect')) {
+      return;
+    }
+    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
+  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!resolvedEmojiProvider || !emojiId || !(0, _isExperimentEnabled.isExperimentEnabled)('platform_emoji_fetch_in_effect')) {
       return;
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);

package/dist/cjs/util/analytics/createEvent.js

@@ -19,7 +19,7 @@ var createEvent = exports.createEvent = function createEvent(eventType, action,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "72.3.8"
+      packageVersion: "72.3.10"
     }, attributes)
   };
 };

package/dist/es2019/components/common/ResourcedEmojiComponent.js

@@ -1,7 +1,8 @@
 /* ResourcedEmojiComponent.tsx generated by @compiled/babel-plugin v2.0.0 */
 import "./ResourcedEmojiComponent.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
@@ -125,8 +126,19 @@ export const ResourcedEmojiComponent = ({
       sampledUfoRenderedEmoji(emojiId).markFMP();
     }
   }, [emojiId]);
+
+  // Fetching from `useMemo` runs during render, so a render React later discards (for example a
+  // pass that suspends) still creates a promise whose callbacks set state and schedule yet another
+  // render. The layout effect only runs for committed renders, and being pre-paint it keeps the
+  // synchronous cache-hit path from flashing the placeholder.
   useMemo(() => {
-    if (!resolvedEmojiProvider || !emojiId) {
+    if (!resolvedEmojiProvider || !emojiId || isExperimentEnabled('platform_emoji_fetch_in_effect')) {
+      return;
+    }
+    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
+  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  useLayoutEffect(() => {
+    if (!resolvedEmojiProvider || !emojiId || !isExperimentEnabled('platform_emoji_fetch_in_effect')) {
       return;
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);

package/dist/es2019/util/analytics/createEvent.js

@@ -7,7 +7,7 @@ export const createEvent = (eventType, action, actionSubject, actionSubjectId, a
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "72.3.8",
+    packageVersion: "72.3.10",
     ...attributes
   }
 });

package/dist/esm/components/common/ResourcedEmojiComponent.js

@@ -7,7 +7,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
@@ -167,8 +168,19 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
       sampledUfoRenderedEmoji(emojiId).markFMP();
     }
   }, [emojiId]);
+
+  // Fetching from `useMemo` runs during render, so a render React later discards (for example a
+  // pass that suspends) still creates a promise whose callbacks set state and schedule yet another
+  // render. The layout effect only runs for committed renders, and being pre-paint it keeps the
+  // synchronous cache-hit path from flashing the placeholder.
   useMemo(function () {
-    if (!resolvedEmojiProvider || !emojiId) {
+    if (!resolvedEmojiProvider || !emojiId || isExperimentEnabled('platform_emoji_fetch_in_effect')) {
+      return;
+    }
+    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
+  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  useLayoutEffect(function () {
+    if (!resolvedEmojiProvider || !emojiId || !isExperimentEnabled('platform_emoji_fetch_in_effect')) {
       return;
     }
     fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);

package/dist/esm/util/analytics/createEvent.js

@@ -12,7 +12,7 @@ export var createEvent = function createEvent(eventType, action, actionSubject,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "72.3.8"
+      packageVersion: "72.3.10"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "72.3.9",
+	"version": "72.3.11",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 		"@atlaskit/icon-lab": "^7.8.0",
 		"@atlaskit/image": "^5.2.0",
 		"@atlaskit/logo": "^21.6.0",
-		"@atlaskit/media-client": "^38.0.0",
+		"@atlaskit/media-client": "^38.1.0",
 		"@atlaskit/media-client-react": "^6.4.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/textfield": "^10.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^182.0.0",
+		"@atlaskit/tmp-editor-statsig": "^183.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/ufo": "^1.2.0",
@@ -88,11 +88,9 @@
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
-		"@types/enzyme": "3.1.15",
 		"@types/js-search": "^1.4.0",
 		"@types/react-test-renderer": "^18.0.6",
 		"dotenv": "^12.0.4",
-		"enzyme": "^3.10.0",
 		"es6-promise": "^4.0.5",
 		"fetch-mock": "^8.0.0",
 		"jest-axe": "^10.0.0",