diff --git a/package.json b/package.json index 403a2b23..fa08593f 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "hash-sum": "^2.0.0", "js-cookie": "3.0.5", "localforage": "1.10.0", + "pako": "^2.1.0", "parse-link-header": "2.0.0", "phoenix": "1.7.7", "punycode.js": "2.3.0", diff --git a/src/modules/interface.js b/src/modules/interface.js index 57621b20..f559bd88 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -312,7 +312,7 @@ const interfaceMod = { }, async applyTheme ( { dispatch, commit, rootState, state }, - { recompile = true } = {} + { recompile = false } = {} ) { // If we're not not forced to recompile try using // cache (tryLoadCache return true if load successful) @@ -350,15 +350,15 @@ const interfaceMod = { let majorVersionUsed - console.log( - `USER V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}` + console.debug( + `User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}` ) - console.log( - `USER V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}` + console.debug( + `User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}` ) - console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`) - console.log('INST V2 theme: ' + instanceThemeV2Name) + console.debug(`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`) + console.debug('Instance V2 theme: ' + instanceThemeV2Name) if (userPaletteName || userPaletteCustomData || userStyleName || userStyleCustomData || @@ -446,7 +446,7 @@ const interfaceMod = { return result } - console.log('VERSION', majorVersionUsed) + console.debug('Version used', majorVersionUsed) if (majorVersionUsed === 'v3') { const palette = await getData( @@ -471,7 +471,7 @@ const interfaceMod = { ] = paletteDataUsed paletteDataUsed = { name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange } } - console.log(paletteDataUsed) + console.debug('Palette data used', paletteDataUsed) const style = await getData( 'style', @@ -506,7 +506,6 @@ const interfaceMod = { directives: {} } - console.log('PALETTE', paletteDataUsed) Object .entries(paletteDataUsed) .filter(([k]) => k !== 'name') diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index d773a353..3ccba9da 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -2,6 +2,8 @@ import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js' import { getCssRules } from '../theme_data/css_utils.js' import { defaultState } from '../../modules/config.js' import { chunk } from 'lodash' +import pako from 'pako' +import localforage from 'localforage' // On platforms where this is not supported, it will return undefined // Otherwise it will return an array @@ -87,12 +89,15 @@ export const generateTheme = (inputRuleset, callbacks, debug) => { return { lazyProcessFunc: processChunk } } -export const tryLoadCache = () => { - const json = localStorage.getItem('pleroma-fe-theme-cache') - if (!json) return null +export const tryLoadCache = async () => { + console.info('Trying to load compiled theme data from cache') + const data = await localforage.getItem('pleromafe-theme-cache') + if (!data) return null let cache try { - cache = JSON.parse(json) + const decoded = new TextDecoder().decode(pako.inflate(data)) + cache = JSON.parse(decoded) + console.info(`Loaded theme from cache, size=${cache}`) } catch (e) { console.error('Failed to decode theme cache:', e) return false @@ -136,16 +141,10 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => { adoptStyleSheets([eagerStyles, lazyStyles]) const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] } onFinish(cache) - try { - localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache)) - } catch (e) { - localStorage.removeItem('pleroma-fe-theme-cache') - try { - localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache)) - } catch (e) { - console.warn('cannot save cache!', e) - } + const compress = (js) => { + return pako.deflate(JSON.stringify(js)) } + localforage.setItem('pleromafe-theme-cache', compress(cache)) } }, debug diff --git a/yarn.lock b/yarn.lock index 231e35d9..955cd1a3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7201,6 +7201,11 @@ p-try@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1" +pako@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86" + integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug== + pako@~1.0.2: version "1.0.11" resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"