added pako compression for css themes

package-lock.json

@@ -8464,10 +8464,9 @@
       "dev": true
     },
     "pako": {
-      "version": "1.0.10",
+      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
-      "dev": true
     },
     "parallel-transform": {
       "version": "1.2.0",

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.4.3",
     "linkify-it": "^2.2.0",
     "match-sorter": "^4.0.2",
+    "pako": "^1.0.11",
     "simple-markdown": "^0.7.1",
     "socket.io-client": "^2.3.0",
     "twemoji": "^12.1.4",

src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue

@@ -49,6 +49,7 @@ import ThemeTemplate from "./MyThemeTemplate";
 import Editor from "./themesEditor";
 import MakePublic from "./MyThemesMakePublic";
 import Spinner from "@/components/Spinner";
+import { unzip, zip } from "@/utils/cssZip";
 
 import ThemeService from "@/services/ThemeService";
 export default {
@@ -103,23 +104,25 @@ export default {
       }
       this.saving = true;
       this.name = name;
+      const base64 = zip(css);
+
       if (typeof this.editing === "string") {
-        await ThemeService.update({ name, css }, this.editing);
+        await ThemeService.update({ name, css: base64 }, this.editing);
         this.applyButton(this.editing);
       } else {
-        const response = await ThemeService.save({ name, css });
+        const response = await ThemeService.save({ name, css: base64 });
         this.editing = response.result.data.id;
-        this.applyButton(response.result.data.id, css);
+        this.applyButton(response.result.data.id, base64);
       }
       this.saving = false;
     },
-    async applyButton(id, css) {
+    async applyButton(id, base64) {
-      if (css) {
+      if (base64) {
-        this.code = css;
+        this.code = unzip(base64);
       } else {
         const { ok, result } = await ThemeService.getTheme(id);
         if (ok) {
-          this.code = result.data.css;
+          this.code = unzip(result.data.css) || result.data.css;
         }
       }
       // save to local storage.
@@ -143,7 +146,7 @@ export default {
       if (ok) {
         const { name, css } = result.data;
         this.name = name;
-        this.code = css;
+        this.code = unzip(css) || css;
         this.editing = id;
       }
     },

src/components/app/Tabs/Explore/themesTemplate.vue

@@ -40,6 +40,9 @@
 <script>
 import config from "@/config.js";
 import exploreService from "@/services/exploreService";
+
+const cssZip = () => import("@/utils/cssZip");
+
 export default {
   props: ["theme"],
   data() {
@@ -62,15 +65,18 @@ export default {
         const styleEl = document.createElement("style");
         styleEl.classList.add("theme-" + id);
         styleEl.id = "theme";
-        styleEl.innerHTML = css;
+        cssZip().then(utils => {
+          styleEl.innerHTML = utils.unzip(css) || css;
+
+          const currentStyle = document.getElementById("theme");
+          if (currentStyle) {
+            currentStyle.outerHTML = styleEl.outerHTML;
+          } else {
+            document.head.innerHTML += styleEl.outerHTML;
+          }
+          this.appliedTheme = id;
+        });
 
-        const currentStyle = document.getElementById("theme");
-        if (currentStyle) {
-          currentStyle.outerHTML = styleEl.outerHTML;
-        } else {
-          document.head.innerHTML += styleEl.outerHTML;
-        }
-        this.appliedTheme = id;
       }
     },
     bannerImageClicked() {

src/utils/cssZip.js

@@ -0,0 +1,15 @@
+import pako from "pako";
+
+export function zip(string) {
+  const binaryString = pako.deflate(string, { to: "string" });
+  return btoa(binaryString);
+}
+
+export function unzip(base64) {
+  try {
+    const binaryString = atob(base64);
+    return pako.inflate(binaryString, { to: "string" });
+  } catch {
+    return null;
+  }
+}

src/views/App.vue

@@ -35,6 +35,8 @@ import MainNav from "./../components/app/MainNav.vue";
 import ThemeService from "../services/ThemeService";
 import ExploreService from "../services/exploreService";
 
+const cssZip = () => import("@/utils/cssZip");
+
 const ElectronFrameButtons = () =>
   import("@/components/ElectronJS/FrameButtons.vue");
 
@@ -155,11 +157,15 @@ export default {
       if (!id && !css) {
         return;
       }
-      const styleEl = document.createElement("style");
+      cssZip().then(utils => {
-      styleEl.id = "theme";
+        css = utils.unzip(css) || css;
-      styleEl.classList.add("theme-" + id);
+
-      styleEl.innerHTML = css;
+        const styleEl = document.createElement("style");
-      document.head.innerHTML += styleEl.outerHTML;
+        styleEl.id = "theme";
+        styleEl.classList.add("theme-" + id);
+        styleEl.innerHTML = css;
+        document.head.innerHTML += styleEl.outerHTML;
+      });
     }
   },
   watch: {