From 5505a89e8aad717a0b4a7665b23a317110d38cb5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 22 Apr 2024 23:40:39 +0300 Subject: implement a simple caching system for themes 3 --- src/services/style_setter/style_setter.js | 37 +++++++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) (limited to 'src/services/style_setter/style_setter.js') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 95198ec7..17682bd4 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,6 +1,6 @@ import { hex2rgb } from '../color_convert/color_convert.js' import { generatePreset } from '../theme_data/theme_data.service.js' -import { init } from '../theme_data/theme_data_3.service.js' +import { init, getChecksum } from '../theme_data/theme_data_3.service.js' import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js' import { getCssRules } from '../theme_data/css_utils.js' import { defaultState } from '../../modules/config.js' @@ -87,9 +87,37 @@ export const generateTheme = async (input, callbacks) => { return { lazyProcessFunc: processChunk } } -export const applyTheme = async (input) => { +export const tryLoadCache = () => { + const json = localStorage.getItem('pleroma-fe-theme-cache') + if (!json) return null + let cache + try { + cache = JSON.parse(json) + } catch (e) { + console.error('Failed to decode theme cache:', e) + return false + } + if (cache.checksum === getChecksum()) { + const styleSheet = new CSSStyleSheet() + const lazyStyleSheet = new CSSStyleSheet() + + cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max')) + cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max')) + + document.adoptedStyleSheets = [styleSheet, lazyStyleSheet] + + return true + } else { + console.warn('Checksum doesn\'t match, cache not usable, clearing') + localStorage.removeItem('pleroma-fe-theme-cache') + } +} + +export const applyTheme = async (input, onFinish = (data) => {}) => { const styleSheet = new CSSStyleSheet() + const styleArray = [] const lazyStyleSheet = new CSSStyleSheet() + const lazyStyleArray = [] const { lazyProcessFunc } = await generateTheme( input, @@ -97,8 +125,10 @@ export const applyTheme = async (input) => { onNewRule (rule, isLazy) { if (isLazy) { lazyStyleSheet.insertRule(rule, 'index-max') + lazyStyleArray.push(rule) } else { styleSheet.insertRule(rule, 'index-max') + styleArray.push(rule) } }, onEagerFinished () { @@ -106,6 +136,9 @@ export const applyTheme = async (input) => { }, onLazyFinished () { document.adoptedStyleSheets = [styleSheet, lazyStyleSheet] + const cache = { checksum: getChecksum(), data: [styleArray, lazyStyleArray] } + onFinish(cache) + localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache)) } } ) -- cgit v1.2.3-70-g09d2 From 6ea69eb51a480e3ab81a69b99f92165fc97f8177 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 24 Apr 2024 15:09:52 +0300 Subject: checksum -> engineChecksum for clarity --- src/services/style_setter/style_setter.js | 8 ++++---- src/services/theme_data/theme_data_3.service.js | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'src/services/style_setter/style_setter.js') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 17682bd4..369d2c9f 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,6 +1,6 @@ import { hex2rgb } from '../color_convert/color_convert.js' import { generatePreset } from '../theme_data/theme_data.service.js' -import { init, getChecksum } from '../theme_data/theme_data_3.service.js' +import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js' import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js' import { getCssRules } from '../theme_data/css_utils.js' import { defaultState } from '../../modules/config.js' @@ -97,7 +97,7 @@ export const tryLoadCache = () => { console.error('Failed to decode theme cache:', e) return false } - if (cache.checksum === getChecksum()) { + if (cache.engineChecksum === getEngineChecksum()) { const styleSheet = new CSSStyleSheet() const lazyStyleSheet = new CSSStyleSheet() @@ -108,7 +108,7 @@ export const tryLoadCache = () => { return true } else { - console.warn('Checksum doesn\'t match, cache not usable, clearing') + console.warn('Engine checksum doesn\'t match, cache not usable, clearing') localStorage.removeItem('pleroma-fe-theme-cache') } } @@ -136,7 +136,7 @@ export const applyTheme = async (input, onFinish = (data) => {}) => { }, onLazyFinished () { document.adoptedStyleSheets = [styleSheet, lazyStyleSheet] - const cache = { checksum: getChecksum(), data: [styleArray, lazyStyleArray] } + const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] } onFinish(cache) localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache)) } diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 844e951a..15b4493e 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -143,11 +143,11 @@ componentsContext.keys().forEach(key => { components[component.name] = component }) -const checksum = sum(components) +const engineChecksum = sum(components) const ruleToSelector = genericRuleToSelector(components) -export const getChecksum = () => checksum +export const getEngineChecksum = () => engineChecksum export const init = (extraRuleset, ultimateBackgroundColor) => { const staticVars = {} @@ -469,6 +469,6 @@ export const init = (extraRuleset, ultimateBackgroundColor) => { lazy: result.filter(x => typeof x === 'function'), eager: result.filter(x => typeof x !== 'function'), staticVars, - checksum + engineChecksum } } -- cgit v1.2.3-70-g09d2