use CompressionStream for cache

Author: YousefED

package-lock.json

@@ -43,7 +43,8 @@
     "@vitest/coverage-v8": "^0.33.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@types/markdown-it": "^10.0.3",
-    "@types/prettier": "^2.6.4"
+    "@types/prettier": "^2.6.4",
+    "chai": "^4.3.7"
   },
   "type": "module",
   "source": "src/index.ts",

packages/frame/package.json

@@ -0,0 +1,55 @@
+import lzstring from "lz-string";
+import { compress, decompress } from "./compress";
+
+const SUPPORTS_COMPRESSIONSTREAM = "CompressionStream" in window;
+const SEPARATOR = "-=-^-=-";
+
+export class CompressedCache {
+  constructor(private readonly cacheTimeout: number = 604800000 /* 1 week*/) {}
+
+  async getItem(key: string): Promise<string | undefined> {
+    const cached = localStorage.getItem(key);
+    if (!cached) {
+      return undefined;
+    }
+
+    const [dateString, format, text] = cached.split("-=-^-=-");
+    const cachedDate = new Date(dateString);
+    const now = new Date();
+
+    if (now.getTime() - cachedDate.getTime() > this.cacheTimeout) {
+      // timed out
+      return undefined;
+    }
+    if (format === "lz") {
+      return lzstring.decompressFromUTF16(text);
+    }
+
+    if (format === "csgzip" && SUPPORTS_COMPRESSIONSTREAM) {
+      return (
+        await decompress(new Blob([text], { type: "text/plain" }))
+      ).text();
+    }
+    return undefined;
+  }
+
+  async setItem(key: string, value: string) {
+    const now = new Date();
+
+    let compressed: string;
+    let format: string;
+
+    if (SUPPORTS_COMPRESSIONSTREAM) {
+      format = "csgzip";
+      compressed = await (
+        await compress(new Blob([value], { type: "text/plain" }))
+      ).text();
+    } else {
+      format = "lz";
+      compressed = lzstring.compressToUTF16(value);
+    }
+
+    const cacheContent = `${now.toISOString()}${SEPARATOR}${format}${SEPARATOR}${compressed}`;
+    localStorage.setItem(key, cacheContent);
+  }
+}

packages/frame/src/runtime/editor/languages/typescript/CompressedCache.ts

@@ -0,0 +1,9 @@
+import { expect } from "chai";
+import { compress, decompress } from "./compress";
+
+it("compresses / decompressess", async () => {
+  const str = "hello world ấɖḯƥĭṩčįɳġ ḝłįʈ 🥳";
+  const compressed = await compress(new Blob([str], { type: "text/plain" }));
+  const decompressed = await (await decompress(compressed)).text();
+  expect(decompressed).to.eq(str);
+});

packages/frame/src/runtime/editor/languages/typescript/compress.browsertest.ts

@@ -0,0 +1,12 @@
+export function compress(blob: Blob) {
+  const compressedReadableStream = blob
+    .stream()
+    .pipeThrough(new CompressionStream("deflate"));
+  return new Response(compressedReadableStream).blob();
+}
+
+export async function decompress(blob: Blob) {
+  const ds = new DecompressionStream("deflate");
+  const decompressedStream = blob.stream().pipeThrough(ds);
+  return new Response(decompressedStream).blob();
+}

packages/frame/src/runtime/editor/languages/typescript/compress.ts

@@ -2,12 +2,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 // from https://github.com/microsoft/TypeScript-Website/blob/v2/packages/sandbox/src/typeAcquisition.ts
 
-import lzstring from "lz-string";
+import { CompressedCache } from "./CompressedCache";
 
 const globalishObj: any =
   typeof globalThis !== "undefined" ? globalThis : window || {};
 globalishObj.typeDefinitions = {};
 
+const cache = new CompressedCache();
+
 /**
  * Type Defs we've already got, and nulls when something has failed.
  * This is to make sure that it doesn't infinite loop.
@@ -408,20 +410,9 @@ const getModuleAndRootDefTypePath = async (
 };
 
 const getCachedDTSString = async (config: ATAConfig, url: string) => {
-  const cached = localStorage.getItem(url);
+  const cached = await cache.getItem(url);
   if (cached) {
-    const [dateString, text] = cached.split("-=-^-=-");
-    const cachedDate = new Date(dateString);
-    const now = new Date();
-
-    const cacheTimeout = 604800000; // 1 week
-    // const cacheTimeout = 60000 // 1 min
-
-    if (now.getTime() - cachedDate.getTime() < cacheTimeout) {
-      return lzstring.decompressFromUTF16(text);
-    } else {
-      config.logger.log("Skipping cache for ", url);
-    }
+    return cached;
   }
 
   const response = await config.fetcher(url);
@@ -448,11 +439,8 @@ const getCachedDTSString = async (config: ATAConfig, url: string) => {
     );
   }
 
-  const now = new Date();
-  const cacheContent = `${now.toISOString()}-=-^-=-${lzstring.compressToUTF16(
-    content
-  )}`;
-  localStorage.setItem(url, cacheContent);
+  cache.setItem(url, content);
+
   return content;
 };