From 1efc963946a1e76c770b70c09c7cc489d4949a65 Mon Sep 17 00:00:00 2001
From: "alex.kopachov" <alex.kopachov@gmail.com>
Date: Tue, 16 Apr 2024 11:23:22 +0200
Subject: [PATCH] feat(Core): inline small OPFS files without using `blob:....`
 URLs.

---
 apps/webextension/src/actions/opfs-src.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/webextension/src/actions/opfs-src.ts b/apps/webextension/src/actions/opfs-src.ts
index f078e42..238e652 100644
--- a/apps/webextension/src/actions/opfs-src.ts
+++ b/apps/webextension/src/actions/opfs-src.ts
@@ -5,6 +5,7 @@ import type { Action } from 'svelte/action';
 type HTMLElementWithRef = HTMLElement & ({ src: string | undefined } | { href: string | undefined });
 
 const log = logger.getSubLogger({ prefix: ['OPFS source loader:'] });
+const BLOB_STRATEGY_THRESHOLD = 32_768; // 32KiB
 
 export const opfsSrc: Action<HTMLElementWithRef, string | undefined> = function (
   node: HTMLElementWithRef,
@@ -32,7 +33,17 @@ export const opfsSrc: Action<HTMLElementWithRef, string | undefined> = function
     if (s.startsWith('opfs://')) {
       try {
         const file = await Opfs.get(s);
-        setRef(URL.createObjectURL(file));
+        if (file.size > BLOB_STRATEGY_THRESHOLD) {
+          // If file is too big, use blob URL
+          setRef(URL.createObjectURL(file));
+        } else {
+          // Otherwise, load it as data URL
+          const reader = new FileReader();
+          reader.onload = () => {
+            setRef(reader.result as string);
+          };
+          reader.readAsDataURL(file);
+        }
       } catch (e) {
         log.error('Error loading file from OPFS:', e);
         setRef('');