| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- export const globalField = '__VITE_THEME__';
- export const styleTagId = '__VITE_PLUGIN_THEME__';
- export const darkStyleTagId = '__VITE_PLUGIN_DARK_THEME__';
- export const linkID = '__VITE_PLUGIN_THEME-ANTD_DARK_THEME_LINK__';
- const colorPluginOutputFileName = __COLOR_PLUGIN_OUTPUT_FILE_NAME__;
- const isProd = __PROD__;
- const colorPluginOptions = __COLOR_PLUGIN_OPTIONS__;
- const injectTo = colorPluginOptions.injectTo;
- const debounceThemeRender = debounce(200, renderTheme);
- export let darkCssIsReady = false;
- (() => {
- if (!window[globalField]) {
- window[globalField] = {
- styleIdMap: new Map(),
- styleRenderQueueMap: new Map(),
- };
- }
- setGlobalOptions('replaceStyleVariables', replaceStyleVariables);
- if (!getGlobalOptions('defaultOptions')) {
- // assign defines
- setGlobalOptions('defaultOptions', colorPluginOptions);
- }
- })();
- export function addCssToQueue(id, styleString) {
- const styleIdMap = getGlobalOptions('styleIdMap');
- if (!styleIdMap.get(id)) {
- window[globalField].styleRenderQueueMap.set(id, styleString);
- debounceThemeRender();
- }
- }
- function renderTheme() {
- const variables = getGlobalOptions('colorVariables');
- if (!variables) {
- return;
- }
- const styleRenderQueueMap = getGlobalOptions('styleRenderQueueMap');
- const styleDom = getStyleDom(styleTagId);
- let html = styleDom.innerHTML;
- for (const [id, css] of styleRenderQueueMap.entries()) {
- html += css;
- window[globalField].styleRenderQueueMap.delete(id);
- window[globalField].styleIdMap.set(id, css);
- }
- replaceCssColors(html, variables).then((processCss) => {
- appendCssToDom(styleDom, processCss, injectTo);
- });
- }
- export async function replaceStyleVariables({ colorVariables, customCssHandler, }) {
- setGlobalOptions('colorVariables', colorVariables);
- const styleIdMap = getGlobalOptions('styleIdMap');
- const styleRenderQueueMap = getGlobalOptions('styleRenderQueueMap');
- if (!isProd) {
- for (const [id, css] of styleIdMap.entries()) {
- styleRenderQueueMap.set(id, css);
- }
- renderTheme();
- }
- else {
- try {
- const cssText = await fetchCss(colorPluginOutputFileName);
- const styleDom = getStyleDom(styleTagId);
- const processCss = await replaceCssColors(cssText, colorVariables, customCssHandler);
- appendCssToDom(styleDom, processCss, injectTo);
- }
- catch (error) {
- throw new Error(error);
- }
- }
- }
- export async function loadDarkThemeCss() {
- const extractCss = __ANTD_DARK_PLUGIN_EXTRACT_CSS__;
- const isLoadLink = __ANTD_DARK_PLUGIN_LOAD_LINK__;
- if (darkCssIsReady || !extractCss) {
- return;
- }
- if (isLoadLink) {
- const linkTag = document.getElementById(linkID);
- if (linkTag) {
- linkTag.removeAttribute('disabled');
- linkTag.setAttribute('rel', 'stylesheet');
- }
- }
- else {
- const colorPluginOutputFileName = __ANTD_DARK_PLUGIN_OUTPUT_FILE_NAME__;
- const cssText = await fetchCss(colorPluginOutputFileName);
- const styleDom = getStyleDom(darkStyleTagId);
- appendCssToDom(styleDom, cssText, injectTo);
- }
- darkCssIsReady = true;
- }
- // Used to replace css color variables. Note that the order of the two arrays must be the same
- export async function replaceCssColors(css, colors, customCssHandler) {
- let retCss = css;
- const defaultOptions = getGlobalOptions('defaultOptions');
- const colorVariables = defaultOptions ? defaultOptions.colorVariables || [] : [];
- colorVariables.forEach(function (color, index) {
- const reg = new RegExp(color.replace(/,/g, ',\\s*').replace(/\s/g, '').replace('(', `\\(`).replace(')', `\\)`) +
- '([\\da-f]{2})?(\\b|\\)|,|\\s)?', 'ig');
- retCss = retCss.replace(reg, colors[index] + '$1$2').replace('$1$2', '');
- if (customCssHandler && typeof customCssHandler === 'function') {
- retCss = customCssHandler(retCss) || retCss;
- }
- });
- return retCss;
- }
- export function setGlobalOptions(key, value) {
- window[globalField][key] = value;
- }
- export function getGlobalOptions(key) {
- return window[globalField][key];
- }
- export function getStyleDom(id) {
- let style = document.getElementById(id);
- if (!style) {
- style = document.createElement('style');
- style.setAttribute('id', id);
- }
- return style;
- }
- export async function appendCssToDom(styleDom, cssText, appendTo = 'body') {
- styleDom.innerHTML = cssText;
- if (appendTo === 'head') {
- document.head.appendChild(styleDom);
- }
- else if (appendTo === 'body') {
- document.body.appendChild(styleDom);
- }
- else if (appendTo === 'body-prepend') {
- const firstChildren = document.body.firstChild;
- document.body.insertBefore(styleDom, firstChildren);
- }
- }
- function fetchCss(fileName) {
- return new Promise((resolve, reject) => {
- const append = getGlobalOptions('appended');
- if (append) {
- setGlobalOptions('appended', false);
- resolve('');
- return;
- }
- const xhr = new XMLHttpRequest();
- xhr.onload = function () {
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- resolve(xhr.responseText);
- }
- else {
- reject(xhr.status);
- }
- }
- };
- xhr.onerror = function (e) {
- reject(e);
- };
- xhr.ontimeout = function (e) {
- reject(e);
- };
- xhr.open('GET', fileName, true);
- xhr.send();
- });
- }
- function debounce(delay, fn) {
- let timer;
- return function (...args) {
- // @ts-ignore
- // eslint-disable-next-line @typescript-eslint/no-this-alias
- const ctx = this;
- clearTimeout(timer);
- timer = setTimeout(function () {
- fn.apply(ctx, args);
- }, delay);
- };
- }
|