More dynamic fs's

Author: DustinBrett

contexts/fileSystem/useFileSystemContextState.ts

@@ -29,11 +29,11 @@ import useAsyncFs from "contexts/fileSystem/useAsyncFs";
 import { useProcesses } from "contexts/process";
 import type { UpdateFiles } from "contexts/session/types";
 import { basename, dirname, isAbsolute, join } from "path";
-import * as BrowserFS from "public/System/BrowserFS/browserfs.min.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   CLIPBOARD_FILE_EXTENSIONS,
   DEFAULT_MAPPED_NAME,
+  DESKTOP_PATH,
   PROCESS_DELIMITER,
   TRANSITIONS_IN_MILLISECONDS,
 } from "utils/constants";
@@ -88,10 +88,6 @@ type FileSystemContextState = AsyncFS & {
 
 const SYSTEM_DIRECTORIES = new Set(["/OPFS"]);
 
-const {
-  FileSystem: { Emscripten, FileSystemAccess },
-} = BrowserFS as IFileSystemAccess & typeof IBrowserFS;
-
 const useFileSystemContextState = (): FileSystemContextState => {
   const asyncFs = useAsyncFs();
   const {
@@ -225,21 +221,28 @@ const useFileSystemContextState = (): FileSystemContextState => {
   const mountEmscriptenFs = useCallback(
     async (FS: EmscriptenFS, fsName?: string) =>
       new Promise<string>((resolve, reject) => {
-        Emscripten?.Create({ FS }, (error, newFs) => {
-          const emscriptenFS = newFs as unknown as ExtendedEmscriptenFileSystem;
+        import("public/System/BrowserFS/extrafs.min.js").then((ExtraFS) => {
+          const {
+            FileSystem: { Emscripten },
+          } = ExtraFS as typeof IBrowserFS;
 
-          if (error || !newFs || !emscriptenFS._FS?.DB_NAME) {
-            reject();
-            return;
-          }
+          Emscripten?.Create({ FS }, (error, newFs) => {
+            const emscriptenFS =
+              newFs as unknown as ExtendedEmscriptenFileSystem;
+
+            if (error || !newFs || !emscriptenFS._FS?.DB_NAME) {
+              reject();
+              return;
+            }
 
-          const dbName =
-            fsName ||
-            `${emscriptenFS._FS?.DB_NAME().replace(/\/+$/, "")}${emscriptenFS
-              ._FS?.DB_STORE_NAME}`;
+            const dbName =
+              fsName ||
+              `${emscriptenFS._FS?.DB_NAME().replace(/\/+$/, "")}${emscriptenFS
+                ._FS?.DB_STORE_NAME}`;
 
-          rootFs?.mount?.(join("/", dbName), newFs);
-          resolve(dbName);
+            rootFs?.mount?.(join("/", dbName), newFs);
+            resolve(dbName);
+          });
         });
       }),
     [rootFs]
@@ -265,24 +268,30 @@ const useFileSystemContextState = (): FileSystemContextState => {
 
       return new Promise((resolve, reject) => {
         if (handle instanceof FileSystemDirectoryHandle) {
-          FileSystemAccess?.Create({ handle }, (error, newFs) => {
-            if (error || !newFs) {
-              reject();
-              return;
-            }
+          import("public/System/BrowserFS/extrafs.min.js").then((ExtraFS) => {
+            const {
+              FileSystem: { FileSystemAccess },
+            } = ExtraFS as IFileSystemAccess;
+
+            FileSystemAccess?.Create({ handle }, (error, newFs) => {
+              if (error || !newFs) {
+                reject();
+                return;
+              }
 
-            const systemDirectory = SYSTEM_DIRECTORIES.has(directory);
-            const mappedName =
-              removeInvalidFilenameCharacters(handle.name).trim() ||
-              (systemDirectory ? "" : DEFAULT_MAPPED_NAME);
+              const systemDirectory = SYSTEM_DIRECTORIES.has(directory);
+              const mappedName =
+                removeInvalidFilenameCharacters(handle.name).trim() ||
+                (systemDirectory ? "" : DEFAULT_MAPPED_NAME);
 
-            rootFs?.mount?.(join(directory, mappedName), newFs);
-            resolve(systemDirectory ? directory : mappedName);
+              rootFs?.mount?.(join(directory, mappedName), newFs);
+              resolve(systemDirectory ? directory : mappedName);
 
-            import("contexts/fileSystem/functions").then(
-              ({ addFileSystemHandle }) =>
-                addFileSystemHandle(directory, handle, mappedName)
-            );
+              import("contexts/fileSystem/functions").then(
+                ({ addFileSystemHandle }) =>
+                  addFileSystemHandle(directory, handle, mappedName)
+              );
+            });
           });
         } else {
           reject();
@@ -304,10 +313,10 @@ const useFileSystemContextState = (): FileSystemContextState => {
           }
         };
 
-        import("public/System/BrowserFS/iso_zip_fs.min.js").then((IsoZipFS) => {
+        import("public/System/BrowserFS/extrafs.min.js").then((ExtraFS) => {
           const {
             FileSystem: { IsoFS, ZipFS },
-          } = IsoZipFS as typeof IBrowserFS;
+          } = ExtraFS as typeof IBrowserFS;
 
           if (getExtension(url) === ".iso") {
             IsoFS?.Create({ data: fileData }, createFs);
@@ -507,27 +516,34 @@ const useFileSystemContextState = (): FileSystemContextState => {
       const restoreFsHandles = async (): Promise<void> => {
         restoredFsHandles.current = true;
 
-        Object.entries(await getFileSystemHandles()).forEach(
-          async ([handleDirectory, handle]) => {
-            if (!(await exists(handleDirectory))) {
-              try {
-                mapFs(
-                  SYSTEM_DIRECTORIES.has(handleDirectory)
+        let mappedOntoDesktop = false;
+
+        await Promise.all(
+          Object.entries(await getFileSystemHandles()).map(
+            async ([handleDirectory, handle]) => {
+              if (!(await exists(handleDirectory))) {
+                try {
+                  const mapDirectory = SYSTEM_DIRECTORIES.has(handleDirectory)
                     ? handleDirectory
-                    : dirname(handleDirectory),
-                  handle
-                );
-              } catch {
-                // Ignore failure
+                    : dirname(handleDirectory);
+
+                  await mapFs(mapDirectory, handle);
+
+                  if (mapDirectory === DESKTOP_PATH) mappedOntoDesktop = true;
+                } catch {
+                  // Ignore failure
+                }
               }
             }
-          }
+          )
         );
+
+        if (mappedOntoDesktop) updateFolder(DESKTOP_PATH);
       };
 
       restoreFsHandles();
     }
-  }, [exists, mapFs, rootFs]);
+  }, [exists, mapFs, rootFs, updateFolder]);
 
   return {
     addFile,