Dev Server [beginner friendly]

[PaperPrototype]

In order to get this working you'll need to make a svelte service worker and override the fetch event allowing import syntax to get files from OPFS (Origin Private File System).

We'll use a prefix like /opfsfiles/myfile (this way we don't interrupt normal server requests):

import { readFileContents } from "$lib/OPFS/FileUtils/Or/Something"

self.addEventListener('fetch', (event) => {

  // if the user wants a file from OPFS
  if (event.request.url.pathname.includes("/opfsfiles")) {
    const path = event.request.url.pathname.splice(10);
    const response = new Response(readFileContents(path))
    event.respondWith(response);
    return;
  }
        
  // normal server request
  event.respondWith(fetch(event.request));
})

Here is the original diagram from the slides:

[PaperPrototype]

This is the final result of the service worker:

// convert typescript to javascript for running in the browser
import {transform} from "sucrase"

// This gives `self` the correct types
const serviceWorker = self as unknown as ServiceWorkerGlobalScope;

serviceWorker.addEventListener("fetch", async (event) => {
    async function respond(event: FetchEvent): Promise<Response> {
        const urlObj = new URL(event.request.url);

        if (!urlObj.pathname.startsWith("/files")) {
            // default behaviour: pass through
            return fetch(event.request);
        }

        // get the requested file
        const filepath = urlObj.pathname.slice(6);
        const fileHandle = (await findFileHandle(filepath)) as FileSystemFileHandle;
        if (fileHandle) {
            const file = await fileHandle.getFile()
            return new Response(file);
        } 
        
        // don't need to have .js at the end
        const fileHandleJs = (await findFileHandle(filepath + ".js")) as FileSystemFileHandle;
        if (fileHandleJs) {
            const file = await fileHandleJs.getFile()
            return new Response(file);
        }

        // Use sucrase to transform typescript into javascript
        const fileHandleTs = (await findFileHandle(filepath + ".ts")) as FileSystemFileHandle;
        if (fileHandleTs) {
            const file = await fileHandleTs.getFile()
            const jsOutput = transform(await file.text(), {filePath: filepath, transforms: ["typescript"]}).code
            return new Response(new Blob([jsOutput], {
                type: "text/javascript"
            }));
        }

        return new Response(undefined, {status: 404, statusText: "File not found"})
    }

    event.respondWith(respond(event))
})


export async function findFileHandleParent(filepath: string): Promise<FileSystemDirectoryHandle | undefined> {
    const opfsRoot = await navigator.storage.getDirectory();
    const parts = filepath.split('/');
    parts.pop(); // remove the filename from the path

    try {
        let currentDir: FileSystemDirectoryHandle = opfsRoot;
        for (const part of parts) {
            if (part) {
                currentDir = await currentDir.getDirectoryHandle(part, { create: false });
            }
        }
        return currentDir;
    } catch (error) {
        return undefined;
    }
}

export async function findFileHandle(filepath: string): Promise<FileSystemFileHandle | undefined> {
    const parts = filepath.split('/');
    const filename = parts.pop();

    if (!filename) return undefined;

    try {
        let currentDir = await findFileHandleParent(filepath);
        if (currentDir) {
            return await currentDir.getFileHandle(filename, { create: false });
        }
        return undefined;
    } catch (error) {
        return undefined;
    }
}