Compress them data + store in IndexedDB instead

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",

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(
+      console.debug(
-        `USER V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
+        `User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
       )
-      console.log(
+      console.debug(
-        `USER V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
+        `User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
       )
 
-      console.log(`INST V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
+      console.debug(`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
-      console.log('INST V2 theme: ' + instanceThemeV2Name)
+      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')

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 = () => {
+export const tryLoadCache = async () => {
-  const json = localStorage.getItem('pleroma-fe-theme-cache')
+  console.info('Trying to load compiled theme data from cache')
-  if (!json) return null
+  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 {
+        const compress = (js) => {
-          localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+          return pako.deflate(JSON.stringify(js))
-        } 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)
-          }
         }
+        localforage.setItem('pleromafe-theme-cache', compress(cache))
       }
     },
     debug

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"