diff --git a/tracker/tracker/CHANGELOG.md b/tracker/tracker/CHANGELOG.md index 19585a062..407fac937 100644 --- a/tracker/tracker/CHANGELOG.md +++ b/tracker/tracker/CHANGELOG.md @@ -1,3 +1,30 @@ +## 16.3.0 + +- optional dynamic css scanning for better emotionjs support + +``` +new Tracker({ +...css: cssScanOptions +}) + +interface cssScanOptions { + /** turn this on if you have issues with emotionjs created styles */ + scanInMemoryCSS?: boolean + /** how often to scan tracked stylesheets (with "empty" rules) */ + checkCssInterval?: number + /** + Useful for cases where you expect limited amount of mutations + + i.e when sheets are hydrated on client after initial render. + + if you want to observe for x seconds, do (x*1000)/checkCssInterval = checkLimit + + applied to each stylesheet individually. + */ + checkLimit?: number +} +``` + ## 16.2.1 - easier inliner options: diff --git a/tracker/tracker/package.json b/tracker/tracker/package.json index 67ce1aaa2..4fa3fc019 100644 --- a/tracker/tracker/package.json +++ b/tracker/tracker/package.json @@ -1,7 +1,7 @@ { "name": "@openreplay/tracker", "description": "The OpenReplay tracker main package", - "version": "16.3.0", + "version": "16.3.0-beta.0", "keywords": [ "logging", "replay" diff --git a/tracker/tracker/src/main/modules/cssrules.ts b/tracker/tracker/src/main/modules/cssrules.ts index 9a72ac53c..5de35bb27 100644 --- a/tracker/tracker/src/main/modules/cssrules.ts +++ b/tracker/tracker/src/main/modules/cssrules.ts @@ -9,8 +9,10 @@ import { hasTag } from '../app/guards.js' import { nextID, styleSheetIDMap } from './constructedStyleSheets.js' export interface CssRulesOptions { - checkCssInterval?: number + /** turn this on if you have issues with emotionjs created styles */ scanInMemoryCSS?: boolean + /** how often to scan tracked stylesheets (with "empty" rules) */ + checkCssInterval?: number /** Useful for cases where you expect limited amount of mutations @@ -23,34 +25,41 @@ export interface CssRulesOptions { checkLimit?: number } +const defaults: CssRulesOptions = { + checkCssInterval: 200, + scanInMemoryCSS: false, + checkLimit: undefined, +} + export default function (app: App, opts: CssRulesOptions) { if (app === null) return if (!window.CSSStyleSheet) { app.send(TechnicalInfo('no_stylesheet_prototype_in_window', '')) return } + const options = { ...defaults, ...opts } // sheetID:index -> ruleText const ruleSnapshots = new Map() let checkInterval: number | null = null const trackedSheets: Set = new Set(); - const checkIntervalMs = opts.checkCssInterval || 200 + const checkIntervalMs = options.checkCssInterval || 200 let checkIterations: Record = {} function checkRuleChanges() { - if (!opts.scanInMemoryCSS) return + if (!options.scanInMemoryCSS) return const allSheets = trackedSheets.values() for (const sheet of allSheets) { try { const sheetID = styleSheetIDMap.get(sheet) if (!sheetID) continue - if (opts.checkLimit) { + if (options.checkLimit) { if (!checkIterations[sheetID]) { checkIterations[sheetID] = 0 } else { checkIterations[sheetID]++ } - if (checkIterations[sheetID] > opts.checkLimit) { + if (checkIterations[sheetID] > options.checkLimit) { trackedSheets.delete(sheet) return } @@ -199,7 +208,7 @@ export default function (app: App, opts: CssRulesOptions) { }) function startChecking() { - if (checkInterval || !opts.scanInMemoryCSS) return + if (checkInterval || !options.scanInMemoryCSS) return checkInterval = window.setInterval(checkRuleChanges, checkIntervalMs) }