@atlaskit/emoji 72.4.12 → 72.4.14

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 72.4.14
+
+### Patch Changes
+
+- Updated dependencies
+
+## 72.4.13
+
+### Patch Changes
+
+- [`c03298c2e2f68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c03298c2e2f68) -
+  Cleanup `experiment` `platform_emoji_fetch_in_effect`. `ResourcedEmoji` now always fetches its
+  emoji from a layout effect instead of during render, so only committed renders fetch and discarded
+  renders (for example a pass that suspends) no longer trigger emoji provider lookups.
+
 ## 72.4.12
 
 ### Patch Changes

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

@@ -14,7 +14,6 @@ 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");
@@ -178,18 +177,12 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     }
   }, [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 || (0, _isExperimentEnabled.isExperimentEnabled)('platform_emoji_fetch_in_effect')) {
-      return;
-    }
-    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
-  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  // Fetching during render means a render React later discards (for example a pass that suspends)
+  // still creates a promise whose callbacks set state and schedule yet another render. This layout
+  // effect only runs for committed renders, and being pre-paint it keeps the synchronous cache-hit
+  // path from flashing the placeholder.
   (0, _react.useLayoutEffect)(function () {
-    if (!resolvedEmojiProvider || !emojiId || !(0, _isExperimentEnabled.isExperimentEnabled)('platform_emoji_fetch_in_effect')) {
+    if (!resolvedEmojiProvider || !emojiId) {
       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.4.11"
+      packageVersion: "72.4.13"
     }, attributes)
   };
 };

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

@@ -2,7 +2,6 @@
 import "./ResourcedEmojiComponent.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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';
@@ -127,18 +126,12 @@ export const ResourcedEmojiComponent = ({
     }
   }, [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 || isExperimentEnabled('platform_emoji_fetch_in_effect')) {
-      return;
-    }
-    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
-  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  // Fetching during render means a render React later discards (for example a pass that suspends)
+  // still creates a promise whose callbacks set state and schedule yet another render. This layout
+  // effect only runs for committed renders, and being pre-paint it keeps the synchronous cache-hit
+  // path from flashing the placeholder.
   useLayoutEffect(() => {
-    if (!resolvedEmojiProvider || !emojiId || !isExperimentEnabled('platform_emoji_fetch_in_effect')) {
+    if (!resolvedEmojiProvider || !emojiId) {
       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.4.11",
+    packageVersion: "72.4.13",
     ...attributes
   }
 });

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

@@ -8,7 +8,6 @@ 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, 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';
@@ -169,18 +168,12 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     }
   }, [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 || isExperimentEnabled('platform_emoji_fetch_in_effect')) {
-      return;
-    }
-    fetchOrGetEmoji(resolvedEmojiProvider, emojiId, optimistic);
-  }, [resolvedEmojiProvider, emojiId, optimistic, fetchOrGetEmoji]);
+  // Fetching during render means a render React later discards (for example a pass that suspends)
+  // still creates a promise whose callbacks set state and schedule yet another render. This layout
+  // effect only runs for committed renders, and being pre-paint it keeps the synchronous cache-hit
+  // path from flashing the placeholder.
   useLayoutEffect(function () {
-    if (!resolvedEmojiProvider || !emojiId || !isExperimentEnabled('platform_emoji_fetch_in_effect')) {
+    if (!resolvedEmojiProvider || !emojiId) {
       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.4.11"
+      packageVersion: "72.4.13"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "72.4.12",
+	"version": "72.4.14",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
 		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/textfield": "^10.2.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^201.0.0",
+		"@atlaskit/tmp-editor-statsig": "^202.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/ufo": "^1.2.0",