theme sync attempt

This commit is contained in:
Henry Jameson 2026-03-11 23:48:23 +02:00
commit d4f8f60475
2 changed files with 14 additions and 4 deletions

View file

@ -8,6 +8,7 @@ export const staticOrApiConfigDefault = {
theme: 'pleroma-dark', theme: 'pleroma-dark',
palette: null, palette: null,
style: null, style: null,
themeChecksum: undefined,
defaultAvatar: '/images/avi.png', defaultAvatar: '/images/avi.png',
defaultBanner: '/images/banner.png', defaultBanner: '/images/banner.png',
background: '/static/aurora_borealis.jpg', background: '/static/aurora_borealis.jpg',

View file

@ -3,8 +3,10 @@ import { chunk, throttle } from 'lodash'
import { getCssRules } from '../theme_data/css_utils.js' import { getCssRules } from '../theme_data/css_utils.js'
import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js' import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'
import sum from 'hash-sum'
import { defaultState } from 'src/modules/default_config_state.js' import { defaultState } from 'src/modules/default_config_state.js'
import { useSyncConfigStore } from 'src/stores/sync_config.js'
// On platforms where this is not supported, it will return undefined // On platforms where this is not supported, it will return undefined
// Otherwise it will return an array // Otherwise it will return an array
@ -77,7 +79,7 @@ export const adoptStyleSheets = throttle(() => {
const EAGER_STYLE_ID = 'pleroma-eager-styles' const EAGER_STYLE_ID = 'pleroma-eager-styles'
const LAZY_STYLE_ID = 'pleroma-lazy-styles' const LAZY_STYLE_ID = 'pleroma-lazy-styles'
export const generateTheme = (inputRuleset, callbacks, debug) => { const generateTheme = (inputRuleset, callbacks, debug) => {
const { const {
onNewRule = () => { onNewRule = () => {
/* no-op */ /* no-op */
@ -134,9 +136,12 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
export const tryLoadCache = async () => { export const tryLoadCache = async () => {
console.info('Trying to load compiled theme data from cache') console.info('Trying to load compiled theme data from cache')
const cache = await localforage.getItem('pleromafe-theme-cache') const cache = await localforage.getItem('pleromafe-theme-cache')
console.log(cache.checksum)
if (!cache) return null if (!cache) return null
try { try {
if (cache.engineChecksum === getEngineChecksum()) { if (cache.engineChecksum === getEngineChecksum() &&
cache.checksum !== undefined &&
cache.checksum === useSyncConfigStore().mergedConfig.themeChecksum) {
const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10) const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20) const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
@ -149,7 +154,7 @@ export const tryLoadCache = async () => {
console.info(`Loaded theme from cache`) console.info(`Loaded theme from cache`)
return true return true
} else { } else {
console.warn("Engine checksum doesn't match, cache not usable, clearing") console.warn("Checksums don't match, cache not usable, clearing")
localStorage.removeItem('pleroma-fe-theme-cache') localStorage.removeItem('pleroma-fe-theme-cache')
} }
} catch (e) { } catch (e) {
@ -195,10 +200,14 @@ export const applyTheme = (
onLazyFinished() { onLazyFinished() {
lazyStyles.ready = true lazyStyles.ready = true
adoptStyleSheets() adoptStyleSheets()
const data = [eagerStyles.rules, lazyStyles.rules]
const checksum = sum(data)
const cache = { const cache = {
checksum,
engineChecksum: getEngineChecksum(), engineChecksum: getEngineChecksum(),
data: [eagerStyles.rules, lazyStyles.rules], data,
} }
useSyncConfigStore().setSimplePrefAndSave({ path: 'themeChecksum', value: checksum })
onFinish(cache) onFinish(cache)
localforage.setItem('pleromafe-theme-cache', cache) localforage.setItem('pleromafe-theme-cache', cache)
console.info('Theme cache stored') console.info('Theme cache stored')