@microsoft/load-themed-styles
Version:
Loads themed styles.
1 lines • 21.5 kB
Source Map (JSON)
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.\n// See LICENSE in the project root for license information.\n\n/**\n * An IThemingInstruction can specify a rawString to be preserved or a theme slot and a default value\n * to use if that slot is not specified by the theme.\n */\n\n/* eslint-disable @typescript-eslint/no-use-before-define */\n\n// Declaring a global here in case that the execution environment is Node.js (without importing the\n// entire node.js d.ts for now)\ndeclare let global: any; // eslint-disable-line @typescript-eslint/no-explicit-any\n\nexport interface IThemingInstruction {\n theme?: string;\n defaultValue?: string;\n rawString?: string;\n}\n\nexport type ThemableArray = IThemingInstruction[];\n\nexport interface ITheme {\n [key: string]: string;\n}\n\ninterface IStyleSheet {\n cssText: string;\n}\n\ninterface IExtendedHtmlStyleElement extends HTMLStyleElement {\n styleSheet: IStyleSheet;\n}\n\n/**\n * Performance Measurement of loading styles\n */\ninterface IMeasurement {\n /**\n * Count of style element injected, which is the slow operation in IE\n */\n count: number;\n /**\n * Total duration of all loadStyles exections\n */\n duration: number;\n}\n\ninterface IRunState {\n mode: Mode;\n buffer: ThemableArray[];\n flushTimer: number;\n}\n\ninterface IThemeState {\n theme: ITheme | undefined;\n lastStyleElement: IExtendedHtmlStyleElement;\n registeredStyles: IStyleRecord[]; // records of already registered non-themable styles\n registeredThemableStyles: IStyleRecord[]; // records of already registered themable styles\n loadStyles: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined;\n perf: IMeasurement;\n runState: IRunState;\n}\n\ninterface IStyleRecord {\n styleElement: Element;\n themableStyle: ThemableArray;\n}\n\ninterface ICustomEvent<T> extends Event {\n args?: T;\n}\n\n/**\n * object returned from resolveThemableArray function\n */\ninterface IThemableArrayResolveResult {\n /** this string is the processed styles in string */\n styleString: string;\n\n /** this boolean indicates if this style array is themable */\n themable: boolean;\n}\n\n/**\n * In sync mode, styles are registered as style elements synchronously with loadStyles() call.\n * In async mode, styles are buffered and registered as batch in async timer for performance purpose.\n */\nexport const enum Mode {\n sync,\n async\n}\n\n/**\n * Themable styles and non-themable styles are tracked separately\n * Specify ClearStyleOptions when calling clearStyles API to specify which group of registered styles should be cleared.\n */\nexport const enum ClearStyleOptions {\n /** only themable styles will be cleared */\n onlyThemable = 1,\n /** only non-themable styles will be cleared */\n onlyNonThemable = 2,\n /** both themable and non-themable styles will be cleared */\n all = 3\n}\n\n// Store the theming state in __themeState__ global scope for reuse in the case of duplicate\n// load-themed-styles hosted on the page.\nconst _root: any = typeof window === 'undefined' ? global : window; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n// Nonce string to inject into script tag if one provided. This is used in CSP (Content Security Policy).\nconst _styleNonce: string = _root && _root.CSPSettings && _root.CSPSettings.nonce;\n\nconst _themeState: IThemeState = initializeThemeState();\n\n/**\n * Matches theming tokens. For example, \"[theme: themeSlotName, default: #FFF]\" (including the quotes).\n */\nconst _themeTokenRegex: RegExp =\n /[\\'\\\"]\\[theme:\\s*(\\w+)\\s*(?:\\,\\s*default:\\s*([\\\\\"\\']?[\\.\\,\\(\\)\\#\\-\\s\\w]*[\\.\\,\\(\\)\\#\\-\\w][\\\"\\']?))?\\s*\\][\\'\\\"]/g;\n\nconst now: () => number = () =>\n typeof performance !== 'undefined' && !!performance.now ? performance.now() : Date.now();\n\nfunction measure(func: () => void): void {\n const start: number = now();\n func();\n const end: number = now();\n _themeState.perf.duration += end - start;\n}\n\n/**\n * initialize global state object\n */\nfunction initializeThemeState(): IThemeState {\n let state: IThemeState = _root.__themeState__ || {\n theme: undefined,\n lastStyleElement: undefined,\n registeredStyles: []\n };\n\n if (!state.runState) {\n state = {\n ...state,\n perf: {\n count: 0,\n duration: 0\n },\n runState: {\n flushTimer: 0,\n mode: Mode.sync,\n buffer: []\n }\n };\n }\n if (!state.registeredThemableStyles) {\n state = {\n ...state,\n registeredThemableStyles: []\n };\n }\n _root.__themeState__ = state;\n return state;\n}\n\n/**\n * Loads a set of style text. If it is registered too early, we will register it when the window.load\n * event is fired.\n * @param {string | ThemableArray} styles Themable style text to register.\n * @param {boolean} loadAsync When true, always load styles in async mode, irrespective of current sync mode.\n */\nexport function loadStyles(styles: string | ThemableArray, loadAsync: boolean = false): void {\n measure(() => {\n const styleParts: ThemableArray = Array.isArray(styles) ? styles : splitStyles(styles);\n const { mode, buffer, flushTimer } = _themeState.runState;\n if (loadAsync || mode === Mode.async) {\n buffer.push(styleParts);\n if (!flushTimer) {\n _themeState.runState.flushTimer = asyncLoadStyles();\n }\n } else {\n applyThemableStyles(styleParts);\n }\n });\n}\n\n/**\n * Allows for customizable loadStyles logic. e.g. for server side rendering application\n * @param {(processedStyles: string, rawStyles?: string | ThemableArray) => void}\n * a loadStyles callback that gets called when styles are loaded or reloaded\n */\nexport function configureLoadStyles(\n loadStylesFn: ((processedStyles: string, rawStyles?: string | ThemableArray) => void) | undefined\n): void {\n _themeState.loadStyles = loadStylesFn;\n}\n\n/**\n * Configure run mode of load-themable-styles\n * @param mode load-themable-styles run mode, async or sync\n */\nexport function configureRunMode(mode: Mode): void {\n _themeState.runState.mode = mode;\n}\n\n/**\n * external code can call flush to synchronously force processing of currently buffered styles\n */\nexport function flush(): void {\n measure(() => {\n const styleArrays: ThemableArray[] = _themeState.runState.buffer.slice();\n _themeState.runState.buffer = [];\n const mergedStyleArray: ThemableArray = ([] as ThemableArray).concat.apply([], styleArrays);\n if (mergedStyleArray.length > 0) {\n applyThemableStyles(mergedStyleArray);\n }\n });\n}\n\n/**\n * register async loadStyles\n */\nfunction asyncLoadStyles(): number {\n // Use \"self\" to distinguish conflicting global typings for setTimeout() from lib.dom.d.ts vs Jest's @types/node\n // https://github.com/jestjs/jest/issues/14418\n return self.setTimeout(() => {\n _themeState.runState.flushTimer = 0;\n flush();\n }, 0);\n}\n\n/**\n * Loads a set of style text. If it is registered too early, we will register it when the window.load event\n * is fired.\n * @param {string} styleText Style to register.\n * @param {IStyleRecord} styleRecord Existing style record to re-apply.\n */\nfunction applyThemableStyles(stylesArray: ThemableArray, styleRecord?: IStyleRecord): void {\n if (_themeState.loadStyles) {\n _themeState.loadStyles(resolveThemableArray(stylesArray).styleString, stylesArray);\n } else {\n registerStyles(stylesArray);\n }\n}\n\n/**\n * Registers a set theme tokens to find and replace. If styles were already registered, they will be\n * replaced.\n * @param {theme} theme JSON object of theme tokens to values.\n */\nexport function loadTheme(theme: ITheme | undefined): void {\n _themeState.theme = theme;\n\n // reload styles.\n reloadStyles();\n}\n\n/**\n * Clear already registered style elements and style records in theme_State object\n * @param option - specify which group of registered styles should be cleared.\n * Default to be both themable and non-themable styles will be cleared\n */\nexport function clearStyles(option: ClearStyleOptions = ClearStyleOptions.all): void {\n if (option === ClearStyleOptions.all || option === ClearStyleOptions.onlyNonThemable) {\n clearStylesInternal(_themeState.registeredStyles);\n _themeState.registeredStyles = [];\n }\n if (option === ClearStyleOptions.all || option === ClearStyleOptions.onlyThemable) {\n clearStylesInternal(_themeState.registeredThemableStyles);\n _themeState.registeredThemableStyles = [];\n }\n}\n\nfunction clearStylesInternal(records: IStyleRecord[]): void {\n records.forEach((styleRecord: IStyleRecord) => {\n const styleElement: HTMLStyleElement = styleRecord && (styleRecord.styleElement as HTMLStyleElement);\n if (styleElement && styleElement.parentElement) {\n styleElement.parentElement.removeChild(styleElement);\n }\n });\n}\n\n/**\n * Reloads styles.\n */\nfunction reloadStyles(): void {\n if (_themeState.theme) {\n const themableStyles: ThemableArray[] = [];\n for (const styleRecord of _themeState.registeredThemableStyles) {\n themableStyles.push(styleRecord.themableStyle);\n }\n if (themableStyles.length > 0) {\n clearStyles(ClearStyleOptions.onlyThemable);\n applyThemableStyles(([] as ThemableArray).concat.apply([], themableStyles));\n }\n }\n}\n\n/**\n * Find theme tokens and replaces them with provided theme values.\n * @param {string} styles Tokenized styles to fix.\n */\nexport function detokenize(styles: string | undefined): string | undefined {\n if (styles) {\n styles = resolveThemableArray(splitStyles(styles)).styleString;\n }\n\n return styles;\n}\n\n/**\n * Resolves ThemingInstruction objects in an array and joins the result into a string.\n * @param {ThemableArray} splitStyleArray ThemableArray to resolve and join.\n */\nfunction resolveThemableArray(splitStyleArray: ThemableArray): IThemableArrayResolveResult {\n const { theme }: IThemeState = _themeState;\n let themable: boolean = false;\n // Resolve the array of theming instructions to an array of strings.\n // Then join the array to produce the final CSS string.\n const resolvedArray: (string | undefined)[] = (splitStyleArray || []).map(\n (currentValue: IThemingInstruction) => {\n const themeSlot: string | undefined = currentValue.theme;\n if (themeSlot) {\n themable = true;\n // A theming annotation. Resolve it.\n const themedValue: string | undefined = theme ? theme[themeSlot] : undefined;\n const defaultValue: string = currentValue.defaultValue || 'inherit';\n\n // Warn to console if we hit an unthemed value even when themes are provided, but only if \"DEBUG\" is true.\n // Allow the themedValue to be undefined to explicitly request the default value.\n if (\n theme &&\n !themedValue &&\n console &&\n !(themeSlot in theme) &&\n typeof DEBUG !== 'undefined' &&\n DEBUG\n ) {\n // eslint-disable-next-line no-console\n console.warn(`Theming value not provided for \"${themeSlot}\". Falling back to \"${defaultValue}\".`);\n }\n\n return themedValue || defaultValue;\n } else {\n // A non-themable string. Preserve it.\n return currentValue.rawString;\n }\n }\n );\n\n return {\n styleString: resolvedArray.join(''),\n themable: themable\n };\n}\n\n/**\n * Split tokenized CSS into an array of strings and theme specification objects\n * @param {string} styles Tokenized styles to split.\n */\nexport function splitStyles(styles: string): ThemableArray {\n const result: ThemableArray = [];\n if (styles) {\n let pos: number = 0; // Current position in styles.\n let tokenMatch: RegExpExecArray | null;\n while ((tokenMatch = _themeTokenRegex.exec(styles))) {\n const matchIndex: number = tokenMatch.index;\n if (matchIndex > pos) {\n result.push({\n rawString: styles.substring(pos, matchIndex)\n });\n }\n\n result.push({\n theme: tokenMatch[1],\n defaultValue: tokenMatch[2] // May be undefined\n });\n\n // index of the first character after the current match\n pos = _themeTokenRegex.lastIndex;\n }\n\n // Push the rest of the string after the last match.\n result.push({\n rawString: styles.substring(pos)\n });\n }\n\n return result;\n}\n\n/**\n * Registers a set of style text. If it is registered too early, we will register it when the\n * window.load event is fired.\n * @param {ThemableArray} styleArray Array of IThemingInstruction objects to register.\n * @param {IStyleRecord} styleRecord May specify a style Element to update.\n */\nfunction registerStyles(styleArray: ThemableArray): void {\n if (typeof document === 'undefined') {\n return;\n }\n const head: HTMLHeadElement = document.getElementsByTagName('head')[0];\n const styleElement: HTMLStyleElement = document.createElement('style');\n const { styleString, themable } = resolveThemableArray(styleArray);\n\n styleElement.setAttribute('data-load-themed-styles', 'true');\n if (_styleNonce) {\n styleElement.setAttribute('nonce', _styleNonce);\n }\n styleElement.appendChild(document.createTextNode(styleString));\n _themeState.perf.count++;\n head.appendChild(styleElement);\n\n const ev: ICustomEvent<{ newStyle: HTMLStyleElement }> = document.createEvent('HTMLEvents');\n ev.initEvent('styleinsert', true /* bubbleEvent */, false /* cancelable */);\n ev.args = {\n newStyle: styleElement\n };\n document.dispatchEvent(ev);\n\n const record: IStyleRecord = {\n styleElement: styleElement,\n themableStyle: styleArray\n };\n\n if (themable) {\n _themeState.registeredThemableStyles.push(record);\n } else {\n _themeState.registeredStyles.push(record);\n }\n}\n"]}