moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

try to apply lazy part in one go while still having chunked processing

This commit is contained in:
Henry Jameson 2024-04-03 22:57:44 +03:00
parent 9806eea12e
commit 1c23a16bac
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/services/style_setter/style_setter.js
View File

@ -8,7 +8,7 @@ import { chunk } from 'lodash'
export const generateTheme = async (input, callbacks) => { export const generateTheme = async (input, callbacks) => {
const { const {
onNewRule = (rule) => {}, onNewRule = (rule, isLazy) => {},
onLazyFinished = () => {}, onLazyFinished = () => {},
onEagerFinished = () => {} onEagerFinished = () => {}
} = callbacks } = callbacks
@ -38,9 +38,9 @@ export const generateTheme = async (input, callbacks) => {
parts[1], parts[1],
'}' '}'
].join('') ].join('')
onNewRule(newRule) onNewRule(newRule, false)
} else { } else {
onNewRule(rule) onNewRule(rule, false)
} }
}) })
onEagerFinished() onEagerFinished()
@ -67,9 +67,9 @@ export const generateTheme = async (input, callbacks) => {
parts[1], parts[1],
'}' '}'
].join('') ].join('')
onNewRule(newRule) onNewRule(newRule, true)
} else { } else {
onNewRule(rule) onNewRule(rule, true)
} }
}) })
// const t1 = performance.now() // const t1 = performance.now()
@ -89,13 +89,23 @@ export const generateTheme = async (input, callbacks) => {
export const applyTheme = async (input) => { export const applyTheme = async (input) => {
const styleSheet = new CSSStyleSheet() const styleSheet = new CSSStyleSheet()
document.adoptedStyleSheets = [styleSheet] const lazyStyleSheet = new CSSStyleSheet()
const { lazyProcessFunc } = await generateTheme( const { lazyProcessFunc } = await generateTheme(
input, input,
{ {
onNewRule (rule) { onNewRule (rule, isLazy) {
styleSheet.insertRule(rule, 'index-max') if (isLazy) {
lazyStyleSheet.insertRule(rule, 'index-max')
} else {
styleSheet.insertRule(rule, 'index-max')
}
},
onEagerFinished () {
document.adoptedStyleSheets = [styleSheet]
},
onLazyFinished () {
document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
} }
} }
) )