@atlaskit/app-provider
Version:
A top level provider for the Design System.
158 lines (157 loc) • 6.56 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 _regeneratorRuntime from "@babel/runtime/regenerator";
import { getDocument } from '@atlaskit/browser-apis';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { themeImportMap } from '@atlaskit/tokens/artifacts/theme-import-map';
import { getThemeOverridePreferences } from '@atlaskit/tokens/get-theme-override-preferences';
import { getThemePreferences } from '@atlaskit/tokens/get-theme-preferences';
import { isThemeMounted } from './is-theme-mounted';
var loadThemeCss = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(themeId) {
var _yield$themeImportMap, themeCss;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!isThemeMounted(themeId)) {
_context.next = 1;
break;
}
return _context.abrupt("return");
case 1:
if (themeId) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
_context.next = 3;
return themeImportMap[themeId]();
case 3:
_yield$themeImportMap = _context.sent;
themeCss = _yield$themeImportMap.default;
return _context.abrupt("return", themeCss);
case 4:
case "end":
return _context.stop();
}
}, _callee);
}));
return function loadThemeCss(_x) {
return _ref.apply(this, arguments);
};
}();
var mountThemeCss = function mountThemeCss(css, themeId) {
// SSR-safe: Only mount on client side
var doc = getDocument();
if (!doc) {
return;
}
var style = doc.createElement('style');
style.textContent = css;
style.dataset.theme = themeId;
// Prevent duplicate mounting of themes.
// It's possible the theme was already being loaded elsewhere.
if (isThemeMounted(themeId)) {
return;
}
doc.head.appendChild(style);
};
var loadAndMountThemeCss = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(themeId) {
var themeCss;
return _regeneratorRuntime.wrap(function (_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 1;
return loadThemeCss(themeId);
case 1:
themeCss = _context2.sent;
if (themeCss) {
_context2.next = 2;
break;
}
return _context2.abrupt("return");
case 2:
mountThemeCss(themeCss, themeId);
case 3:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function loadAndMountThemeCss(_x2) {
return _ref2.apply(this, arguments);
};
}();
export var loadAndMountThemes = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(theme) {
var themeState, themeIds, themes, themesToLoad;
return _regeneratorRuntime.wrap(function (_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
if (!fg('platform-dst-tokens-finesse')) {
_context4.next = 2;
break;
}
themeState = _objectSpread(_objectSpread({}, theme), {}, {
// Keep both configured color themes available for subtree color-mode changes.
colorMode: 'auto',
contrastMode: 'no-preference'
});
themeIds = _toConsumableArray(new Set([].concat(_toConsumableArray(getThemePreferences(themeState)), _toConsumableArray(getThemeOverridePreferences(themeState)))));
_context4.next = 1;
return Promise.allSettled(themeIds.map( /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
var _t, _t2;
return _regeneratorRuntime.wrap(function (_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_t = id;
_context3.next = 1;
return loadThemeCss(id);
case 1:
_t2 = _context3.sent;
return _context3.abrupt("return", {
id: _t,
css: _t2
});
case 2:
case "end":
return _context3.stop();
}
}, _callee3);
}));
return function (_x4) {
return _ref4.apply(this, arguments);
};
}()));
case 1:
themes = _context4.sent;
// Imports may resolve in any order. Mount bases before overrides, even when
// multiple providers are loading the same styles at the same time. A failed
// import must not prevent successfully loaded styles from mounting.
themes.forEach(function (result) {
if (result.status === 'fulfilled' && result.value.css) {
mountThemeCss(result.value.css, result.value.id);
}
});
return _context4.abrupt("return");
case 2:
themesToLoad = Object.values(theme).filter(function (themeId) {
return !!themeId;
});
themesToLoad.forEach(loadAndMountThemeCss);
case 3:
case "end":
return _context4.stop();
}
}, _callee4);
}));
return function loadAndMountThemes(_x3) {
return _ref3.apply(this, arguments);
};
}();