@atlaskit/app-provider 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/app-provider
 
+## 1.5.0
+
+### Minor Changes
+
+- [#101755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101755)
+  [`07ee1368bd69d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/07ee1368bd69d) -
+  Fixes a race condition with setting the theme. This change is behind a feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.4.3
+
+### Patch Changes
+
+- [#168743](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168743)
+  [`90605435312ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/90605435312ea) -
+  Remove react-router-dom from devDependencies as it is incompatible with React 18.
+- Updated dependencies
+
 ## 1.4.2
 
 ### Patch Changes

package/dist/cjs/theme-provider.js

@@ -12,10 +12,13 @@ exports.useColorMode = useColorMode;
 exports.useSetColorMode = useSetColorMode;
 exports.useSetTheme = useSetTheme;
 exports.useTheme = useTheme;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokens = require("@atlaskit/tokens");
 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; }
@@ -153,10 +156,87 @@ function ThemeProvider(_ref) {
     });
   }, []);
   (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_dst_fix_set_theme_race')) {
+      return;
+    }
     (0, _tokens.setGlobalTheme)(_objectSpread(_objectSpread({}, theme), {}, {
       colorMode: reconciledColorMode
     }));
   }, [theme, reconciledColorMode]);
+  var lastSetGlobalThemePromiseRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_dst_fix_set_theme_race')) {
+      return;
+    }
+
+    /**
+     * We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
+     * This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
+     * `data-color-mode` attribute on the root element).
+     *
+     * Since we can't safely abort the `setGlobalTheme` execution, we need to wait for it to properly finish before
+     * applying the new theme.
+     *
+     * Without this, we can end up in the following scenario:
+     * 1. app loads with the default 'light' theme, kicking off `setGlobalTheme`
+     * 2. app switches to 'dark' theme after retrieving value persisted in local storage, calling `setGlobalTheme` again
+     * 3. `setGlobalTheme` function execution for `dark` finishes before the initial `light` execution
+     * 4. `setGlobalTheme` function execution for `light` then finishes, resulting in the 'light' theme being applied.
+     */
+    var cleanupLastFnCall = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var unbindFn;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!lastSetGlobalThemePromiseRef.current) {
+                _context.next = 6;
+                break;
+              }
+              _context.next = 3;
+              return lastSetGlobalThemePromiseRef.current;
+            case 3:
+              unbindFn = _context.sent;
+              unbindFn();
+              lastSetGlobalThemePromiseRef.current = null;
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function cleanupLastFnCall() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var safelySetGlobalTheme = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var promise;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return cleanupLastFnCall();
+            case 2:
+              promise = (0, _tokens.setGlobalTheme)(_objectSpread(_objectSpread({}, theme), {}, {
+                colorMode: reconciledColorMode
+              }));
+              lastSetGlobalThemePromiseRef.current = promise;
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function safelySetGlobalTheme() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    safelySetGlobalTheme();
+    return function cleanup() {
+      cleanupLastFnCall();
+    };
+  }, [theme, reconciledColorMode]);
   (0, _react.useEffect)(function () {
     if (!prefersDarkModeMql) {
       return;

package/dist/es2019/theme-provider.js

@@ -1,5 +1,6 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { setGlobalTheme } from '@atlaskit/tokens';
 const defaultThemeSettings = {
   dark: 'dark',
@@ -123,11 +124,54 @@ export function ThemeProvider({
     }));
   }, []);
   useEffect(() => {
+    if (fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
     setGlobalTheme({
       ...theme,
       colorMode: reconciledColorMode
     });
   }, [theme, reconciledColorMode]);
+  const lastSetGlobalThemePromiseRef = useRef(null);
+  useEffect(() => {
+    if (!fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
+
+    /**
+     * We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
+     * This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
+     * `data-color-mode` attribute on the root element).
+     *
+     * Since we can't safely abort the `setGlobalTheme` execution, we need to wait for it to properly finish before
+     * applying the new theme.
+     *
+     * Without this, we can end up in the following scenario:
+     * 1. app loads with the default 'light' theme, kicking off `setGlobalTheme`
+     * 2. app switches to 'dark' theme after retrieving value persisted in local storage, calling `setGlobalTheme` again
+     * 3. `setGlobalTheme` function execution for `dark` finishes before the initial `light` execution
+     * 4. `setGlobalTheme` function execution for `light` then finishes, resulting in the 'light' theme being applied.
+     */
+    const cleanupLastFnCall = async () => {
+      if (lastSetGlobalThemePromiseRef.current) {
+        const unbindFn = await lastSetGlobalThemePromiseRef.current;
+        unbindFn();
+        lastSetGlobalThemePromiseRef.current = null;
+      }
+    };
+    const safelySetGlobalTheme = async () => {
+      await cleanupLastFnCall();
+      const promise = setGlobalTheme({
+        ...theme,
+        colorMode: reconciledColorMode
+      });
+      lastSetGlobalThemePromiseRef.current = promise;
+    };
+    safelySetGlobalTheme();
+    return function cleanup() {
+      cleanupLastFnCall();
+    };
+  }, [theme, reconciledColorMode]);
   useEffect(() => {
     if (!prefersDarkModeMql) {
       return;

package/dist/esm/theme-provider.js

@@ -1,9 +1,12 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { setGlobalTheme } from '@atlaskit/tokens';
 var defaultThemeSettings = {
   dark: 'dark',
@@ -137,10 +140,87 @@ export function ThemeProvider(_ref) {
     });
   }, []);
   useEffect(function () {
+    if (fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
     setGlobalTheme(_objectSpread(_objectSpread({}, theme), {}, {
       colorMode: reconciledColorMode
     }));
   }, [theme, reconciledColorMode]);
+  var lastSetGlobalThemePromiseRef = useRef(null);
+  useEffect(function () {
+    if (!fg('platform_dst_fix_set_theme_race')) {
+      return;
+    }
+
+    /**
+     * We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
+     * This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
+     * `data-color-mode` attribute on the root element).
+     *
+     * Since we can't safely abort the `setGlobalTheme` execution, we need to wait for it to properly finish before
+     * applying the new theme.
+     *
+     * Without this, we can end up in the following scenario:
+     * 1. app loads with the default 'light' theme, kicking off `setGlobalTheme`
+     * 2. app switches to 'dark' theme after retrieving value persisted in local storage, calling `setGlobalTheme` again
+     * 3. `setGlobalTheme` function execution for `dark` finishes before the initial `light` execution
+     * 4. `setGlobalTheme` function execution for `light` then finishes, resulting in the 'light' theme being applied.
+     */
+    var cleanupLastFnCall = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var unbindFn;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!lastSetGlobalThemePromiseRef.current) {
+                _context.next = 6;
+                break;
+              }
+              _context.next = 3;
+              return lastSetGlobalThemePromiseRef.current;
+            case 3:
+              unbindFn = _context.sent;
+              unbindFn();
+              lastSetGlobalThemePromiseRef.current = null;
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function cleanupLastFnCall() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    var safelySetGlobalTheme = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var promise;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return cleanupLastFnCall();
+            case 2:
+              promise = setGlobalTheme(_objectSpread(_objectSpread({}, theme), {}, {
+                colorMode: reconciledColorMode
+              }));
+              lastSetGlobalThemePromiseRef.current = promise;
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function safelySetGlobalTheme() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    safelySetGlobalTheme();
+    return function cleanup() {
+      cleanupLastFnCall();
+    };
+  }, [theme, reconciledColorMode]);
   useEffect(function () {
     if (!prefersDarkModeMql) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/app-provider",
-	"version": "1.4.2",
+	"version": "1.5.0",
 	"description": "A top level provider for the Design System.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -11,7 +11,7 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "App provider",
-			"category": "Components",
+			"category": "Tooling",
 			"status": {
 				"type": "beta"
 			}
@@ -39,7 +39,8 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
 	},
@@ -48,7 +49,7 @@
 	},
 	"devDependencies": {
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
@@ -56,7 +57,6 @@
 		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^16.8.0",
 		"react-resource-router": "^0.20.0",
-		"react-router-dom": "^4.2.2",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
@@ -91,5 +91,10 @@
 			]
 		}
 	},
-	"homepage": "https://atlassian.design/components/app-provider"
+	"homepage": "https://atlassian.design/components/app-provider",
+	"platform-feature-flags": {
+		"platform_dst_fix_set_theme_race": {
+			"type": "boolean"
+		}
+	}
 }