fix: compress data

package.json

@@ -46,6 +46,7 @@
     "@types/lodash": "^4.14.98",
     "@types/memoize-one": "^4.1.1",
     "@types/node": "^9.3.0",
+    "@types/pako": "^1.0.0",
     "@types/qrcode.react": "^0.8.1",
     "@types/react": "^16.3.14",
     "@types/react-dom": "^16.0.5",
@@ -62,6 +63,7 @@
     "md5": "^2.2.1",
     "memoize-one": "^5.0.0",
     "normalize-scss": "^7.0.1",
+    "pako": "^1.0.10",
     "qrcode.react": "^0.9.2",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",

src/_helpers/config-manager.ts

@@ -1,3 +1,4 @@
+import pako from 'pako'
 import { getDefaultConfig, AppConfig } from '@/app-config'
 import { mergeConfig } from '@/app-config/merge-config'
 import { storage } from './browser-api'
@@ -18,10 +19,33 @@ export interface AppConfigChanged {
   oldConfig?: AppConfig,
 }
 
+/** Compressed config data */
+interface AppConfigCompressed {
+  /** version */
+  v: 1
+  /** data */
+  d: string
+}
+
+function deflate (config: AppConfig): AppConfigCompressed {
+  return {
+    v: 1,
+    d: pako.deflate(JSON.stringify(config), { to: 'string' })
+  }
+}
+
+function inflate (config: AppConfig | AppConfigCompressed): AppConfig
+function inflate (config: undefined): undefined
+function inflate (config?: AppConfig | AppConfigCompressed): AppConfig | undefined
+function inflate (config?: AppConfig | AppConfigCompressed): AppConfig | undefined {
+  if (config && config['v'] === 1) {
+    return JSON.parse(pako.inflate((config as AppConfigCompressed).d, { to: 'string' }))
+  }
+  return config as AppConfig
+}
+
 export async function initConfig (): Promise<AppConfig> {
-  let { baseconfig } = await storage.sync.get<{
-    baseconfig: AppConfig
-  }>('baseconfig')
+  let baseconfig = await getConfig()
 
   baseconfig = baseconfig && baseconfig.version
     ? mergeConfig(baseconfig)
@@ -41,11 +65,11 @@ export async function getConfig (): Promise<AppConfig> {
   const { baseconfig } = await storage.sync.get<{
     baseconfig: AppConfig
   }>('baseconfig')
-  return baseconfig || getDefaultConfig()
+  return inflate(baseconfig || getDefaultConfig())
 }
 
 export function updateConfig (baseconfig: AppConfig): Promise<void> {
-  return storage.sync.set({ baseconfig })
+  return storage.sync.set({ baseconfig: deflate(baseconfig) })
 }
 
 /**
@@ -59,9 +83,9 @@ export async function addConfigListener (
       const {
         newValue,
         oldValue,
-      } = (changes as { baseconfig: StorageChanged<AppConfig> }).baseconfig
+      } = (changes as { baseconfig: StorageChanged<AppConfigCompressed> }).baseconfig
       if (newValue) {
-        cb({ newConfig: newValue, oldConfig: oldValue })
+        cb({ newConfig: inflate(newValue), oldConfig: inflate(oldValue) })
       }
     }
   })

src/_helpers/profile-manager.ts

@@ -1,6 +1,7 @@
 /**
  * Profiles are switchable profiles
  */
+import pako from 'pako'
 import {
   getDefaultProfile,
   Profile,
@@ -28,6 +29,31 @@ export interface ProfileChanged {
   oldProfile?: Profile,
 }
 
+/** Compressed profile data */
+interface ProfileCompressed {
+  /** version */
+  v: 1
+  /** data */
+  d: string
+}
+
+function deflate (profile: Profile): ProfileCompressed {
+  return {
+    v: 1,
+    d: pako.deflate(JSON.stringify(profile), { to: 'string' })
+  }
+}
+
+function inflate (profile: Profile | ProfileCompressed): Profile
+function inflate (profile: undefined): undefined
+function inflate (profile?: Profile | ProfileCompressed): Profile | undefined
+function inflate (profile?: Profile | ProfileCompressed): Profile | undefined {
+  if (profile && profile['v'] === 1) {
+    return JSON.parse(pako.inflate((profile as ProfileCompressed).d, { to: 'string' }))
+  }
+  return profile as Profile | undefined
+}
+
 export function getProfileName (name: string, t: TranslationFunction): string {
   // default names
   const match = /^%%_(\S+)_%%$/.exec(name)
@@ -60,7 +86,7 @@ export async function initProfiles (): Promise<Profile> {
   if (profileIDList.length > 0) {
     // quota bytes limit
     for (const { id } of profileIDList) {
-      const profile = (await storage.sync.get(id))[id]
+      const profile = await getProfile(id)
       profiles.push(profile ? mergeProfile(profile) : getDefaultProfile(id))
     }
   } else {
@@ -82,7 +108,7 @@ export async function initProfiles (): Promise<Profile> {
 
   // quota bytes per item limit
   for (const profile of profiles) {
-    await storage.sync.set({ [profile.id]: profile })
+    await updateProfile(profile)
   }
 
   return activeProfile
@@ -107,7 +133,7 @@ export async function resetAllProfiles () {
 }
 
 export async function getProfile (id: string): Promise<Profile | undefined> {
-  return (await storage.sync.get(id))[id]
+  return inflate((await storage.sync.get(id))[id])
 }
 
 /**
@@ -120,23 +146,23 @@ export async function updateProfile (profile: Profile): Promise<void> {
       console.error(`Update Profile: profile ${profile.id} does not exist`)
     }
   }
-  return storage.sync.set({ [profile.id]: profile })
+  return storage.sync.set({ [profile.id]: deflate(profile) })
 }
 
 export async function addProfile (profileID: ProfileID): Promise<void> {
   const id = profileID.id
   const profileIDList = await getProfileIDList()
   if (process.env.DEV_BUILD) {
     if (profileIDList.find(item => item.id === id) ||
-      (await storage.sync.get(id))[id]
+      (await getProfile(id))
     ) {
       console.warn(`Add profile: profile ${id} exists`)
     }
   }
 
   return storage.sync.set({
     profileIDList: [...profileIDList, profileID],
-    [id]: getDefaultProfile(id),
+    [id]: deflate(getDefaultProfile(id)),
   })
 }
 
@@ -145,7 +171,7 @@ export async function removeProfile (id: string): Promise<void> {
   let profileIDList = await getProfileIDList()
   if (process.env.DEV_BUILD) {
     if (!profileIDList.find(item => item.id === id) ||
-       !(await storage.sync.get(id))[id]
+       !(await getProfile(id))
     ) {
       console.warn(`Remove profile: profile ${id} does not exists`)
     }
@@ -223,6 +249,7 @@ export async function addActiveProfileListener (
   let activeID: string | undefined = await getActiveProfileID()
 
   storage.sync.addListener(changes => {
+    // this id changed
     if (changes.activeProfileID) {
       const {
         newValue: newID,
@@ -233,13 +260,12 @@ export async function addActiveProfileListener (
         if (oldID) {
           storage.sync.get([oldID, newID]).then(obj => {
             if (obj[newID]) {
-              cb({ newProfile: obj[newID], oldProfile: obj[oldID] })
+              cb({ newProfile: inflate(obj[newID]), oldProfile: inflate(obj[oldID]) })
               return
             }
           })
         } else {
-          storage.sync.get(newID).then(response => {
-            const newProfile = response[newID]
+          getProfile(newID).then(newProfile => {
             if (newProfile) {
               cb({ newProfile })
               return
@@ -249,10 +275,11 @@ export async function addActiveProfileListener (
       }
     }
 
+    // the active profile itself updated
     if (activeID && changes[activeID]) {
-      const { newValue, oldValue } = changes[activeID]
+      const { newValue, oldValue } = changes[activeID] as StorageChanged<ProfileCompressed>
       if (newValue) {
-        cb({ newProfile: newValue, oldProfile: oldValue })
+        cb({ newProfile: inflate(newValue), oldProfile: inflate(oldValue) })
         return
       }
     }

yarn.lock

@@ -215,6 +215,11 @@
   version "9.6.18"
   resolved "http://registry.npm.taobao.org/@types/node/download/@types/node-9.6.18.tgz#092e13ef64c47e986802c9c45a61c1454813b31d"
 
+"@types/pako@^1.0.0":
+  version "1.0.0"
+  resolved "http://registry.npm.taobao.org/@types/pako/download/@types/pako-1.0.0.tgz#eaae8364d1b7f752e263bc3fd68dfec98e6136c5"
+  integrity sha1-6q6DZNG391LiY7w/1o3+yY5hNsU=
+
 "@types/qrcode.react@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@types/qrcode.react/-/qrcode.react-0.8.1.tgz#7efeb1d01d8e6dddcdf07fbec0724aaf0fa5c984"
@@ -6790,6 +6795,11 @@ pad-right@^0.2.2:
   dependencies:
     repeat-string "^1.5.2"
 
+pako@^1.0.10:
+  version "1.0.10"
+  resolved "http://registry.npm.taobao.org/pako/download/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
+  integrity sha1-Qyi621CGpCaqkPVBl31JVdpclzI=
+
 pako@~1.0.5:
   version "1.0.6"
   resolved "http://registry.npm.taobao.org/pako/download/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"