switch to localforage

Author: YousefED

package-lock.json

@@ -12,6 +12,7 @@
     "@tiptap/react": "^2.0.4",
     "@floating-ui/react": "^0.25.1",
     "@syncedstore/yjs-reactive-bindings": "^0.5.1",
+    "localforage":"^1.10.0",
     "lz-string": "^1.4.4",
     "markdown-it": "^12.0.2",
     "monaco-editor": "^0.35.0",

packages/frame/package.json

@@ -1,55 +1,63 @@
+import * as localForage from "localforage";
 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);
+    const cached = await localForage.getItem<{
+      date: string;
+      format: string;
+      data: string | ArrayBuffer
+    }>(key);
     if (!cached) {
       return undefined;
     }
 
-    const [dateString, format, text] = cached.split("-=-^-=-");
-    const cachedDate = new Date(dateString);
+    // const [dateString, format, text] = cached.split("-=-^-=-");
+    const cachedDate = new Date(cached.date);
     const now = new Date();
 
     if (now.getTime() - cachedDate.getTime() > this.cacheTimeout) {
       // timed out
       return undefined;
     }
-    if (format === "lz") {
-      return lzstring.decompressFromUTF16(text);
+    if (cached.format === "lz") {
+      return lzstring.decompressFromUTF16(cached.data as string);
     }
 
-    if (format === "csgzip" && SUPPORTS_COMPRESSIONSTREAM) {
-      return (
-        await decompress(new Blob([text], { type: "text/plain" }))
-      ).text();
+    if (cached.format === "csgzip" && SUPPORTS_COMPRESSIONSTREAM) {
+      const dc = await decompress(cached.data as ArrayBuffer)
+      return dc;
     }
     return undefined;
   }
 
   async setItem(key: string, value: string) {
     const now = new Date();
 
-    let compressed: string;
+    let compressed: string | ArrayBuffer;
     let format: string;
 
     if (SUPPORTS_COMPRESSIONSTREAM) {
       format = "csgzip";
-      compressed = await (
-        await compress(new Blob([value], { type: "text/plain" }))
-      ).text();
+      compressed = 
+        await compress(value)
+      
     } else {
       format = "lz";
       compressed = lzstring.compressToUTF16(value);
     }
 
-    const cacheContent = `${now.toISOString()}${SEPARATOR}${format}${SEPARATOR}${compressed}`;
-    localStorage.setItem(key, cacheContent);
+    const cacheContent = {
+      date: now.toISOString(),
+      format,
+      data: compressed
+    }
+
+    localForage.setItem(key, cacheContent);
   }
 }

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

@@ -3,7 +3,7 @@ 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();
+  const compressed = await compress(str);
+  const decompressed = await (await decompress(compressed));
   expect(decompressed).to.eq(str);
 });

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

@@ -1,15 +1,19 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-export function compress(blob: Blob) {
-  const compressedReadableStream = blob
-    .stream()
-    // @ts-ignore
-    .pipeThrough(new CompressionStream("deflate"));
-  return new Response(compressedReadableStream).blob();
+export async function compress(text: string) {
+  const byteArray = new TextEncoder().encode(text)
+  const cs = new CompressionStream("deflate")
+  const writer = cs.writable.getWriter()
+  writer.write(byteArray)
+  writer.close()
+  const ret = await new Response(cs.readable).arrayBuffer()
+  return ret;
 }
 
-export async function decompress(blob: Blob) {
-  // @ts-ignore
-  const ds = new DecompressionStream("deflate");
-  const decompressedStream = blob.stream().pipeThrough(ds);
-  return new Response(decompressedStream).blob();
+export async function decompress(bytes: ArrayBuffer) {
+  const cs = new DecompressionStream("deflate")
+  const writer = cs.writable.getWriter()
+  writer.write(bytes)
+  writer.close()
+  const arrayBuffer = await new Response(cs.readable).arrayBuffer()
+  return new TextDecoder().decode(arrayBuffer)
 }

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

@@ -410,11 +410,12 @@ const getModuleAndRootDefTypePath = async (
 };
 
 const getCachedDTSString = async (config: ATAConfig, url: string) => {
+
   const cached = await cache.getItem(url);
   if (cached) {
     return cached;
   }
-
+ 
   const response = await config.fetcher(url);
 
   if (!response.ok) {