@atlaskit/app-provider/dist/cjs/theme-provider/utils/load-and-mount-themes.js

A top level provider for the Design System.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.loadAndMountThemes = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _browserApis = require("@atlaskit/browser-apis");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _themeImportMap = require("@atlaskit/tokens/artifacts/theme-import-map");
var _getThemeOverridePreferences = require("@atlaskit/tokens/get-theme-override-preferences");
var _getThemePreferences = require("@atlaskit/tokens/get-theme-preferences");
var _isThemeMounted = require("./is-theme-mounted");
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) { (0, _defineProperty2.default)(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; }
var loadThemeCss = /*#__PURE__*/function () {
  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(themeId) {
    var _yield$themeImportMap, themeCss;
    return _regenerator.default.wrap(function (_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
          if (!(0, _isThemeMounted.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.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 = (0, _browserApis.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 ((0, _isThemeMounted.isThemeMounted)(themeId)) {
    return;
  }
  doc.head.appendChild(style);
};
var loadAndMountThemeCss = /*#__PURE__*/function () {
  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(themeId) {
    var themeCss;
    return _regenerator.default.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);
  };
}();
var loadAndMountThemes = exports.loadAndMountThemes = /*#__PURE__*/function () {
  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(theme) {
    var themeState, themeIds, themes, themesToLoad;
    return _regenerator.default.wrap(function (_context4) {
      while (1) switch (_context4.prev = _context4.next) {
        case 0:
          if (!(0, _fg.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 = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)((0, _getThemePreferences.getThemePreferences)(themeState)), (0, _toConsumableArray2.default)((0, _getThemeOverridePreferences.getThemeOverridePreferences)(themeState)))));
          _context4.next = 1;
          return Promise.allSettled(themeIds.map( /*#__PURE__*/function () {
            var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(id) {
              var _t, _t2;
              return _regenerator.default.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);
  };
}();