Add support for browser File systems

[jcubic]

It should work with:

• [x] BrowserFS
• [x] Lightning-fs

It should work similar to express, maybe something like:

import FS from 'https://cdn.jsdelivr.net/npm/@isomorphic-git/lightning-fs';
const fs = new FS("<name>");

app.use(Wayne.serve(fs, { prefix: '__fs__' })

It will require adding middleware maybe I will steal the API and architecture from express.js.

ref: https://www.npmjs.com/package/mime

[butera-simone]

So currently Wayne doesn't allow this? I was looking for a simple way to do this, thought the git terminal webapp already did it

[jcubic]

Yes, the git web terminal does this, I only need to extract the logic and put it into this library. And also allow using both FS libraries.

[jcubic]

But if you want this feature you can easily do this yourself by hand, but it will take longer to write. I want to make this easier.

[butera-simone]

I see :( thanks for the answer. I think I will just extract the code from one of the projects that to that (if I start from your git terminal I'll credit you ofc), I just need that very specific functionality and it would take more time to analyze Wayne and find out how to integrate it with it (esp. considering that I don't think I would use anything else from Wayne in my project)

[jcubic]

Wayne is a very small library ~200LOC. It only adds a wrapper over service worker so if you would like to have a file system from indexedDB you will need to use a big part of the library.

I though that to create FS support you would just add a single get request:

app.get('/__fs__/{path}', function(req, res) {
   // read path if it's directory return list of links
   // if it's a file return a file with proper MIME type
});

But unfortunately '/__fs__/{path}' doesn't work right now, it only matches a single directory. So this is also something that I would need to work on. I'm not sure how Express.js does this.

[butera-simone]

By "only matches a single directory" you mean it does not work with subdirectories?

[jcubic]

Yes the parameter when using '/__fs__/{path}' works only for /__fs__/something or /__fs__/something/

I need to check how express.js is doing this and do the same.

And if it does the same, I need to come up with a syntax that will allow matching the whole path, when needed.

[butera-simone]

Interesting. And why can't you do it like you did with the git web terminal?

[jcubic]

I can, this is what this issue is for.

[butera-simone]

Oh I see, you were trying to find a simpler solution with the example you posted before 👍

[jcubic]

Yes, the task is to simplify what the git web terminal is doing, so users can do this with a single line if possible.

[jcubic]

It seems that express.js work the same:

const express = require("express");

const app = express();

app.get('/__fs__/:path', function(req, res) {
  res.send(req.params.path);
});

app.listen(8080, () => {
  console.log("listening on 8080...");
});

This return 404 for localhost:8080/__fs__/foo/bar.

[jcubic]

But you can use:

app.get('/__fs__/*', function(req, res) {
  res.send(req.params[0]);
});

So I need to add an asterisk as a glob.

[jcubic]

glob path was added in version 0.4.0

[jcubic]

Filesystem is ready, the code looks like this:

import { Wayne, FileSystem } from 'https://cdn.jsdelivr.net/npm/@jcubic/wayne';
import FS from "https://cdn.skypack.dev/@isomorphic-git/lightning-fs";
import mime from "https://cdn.skypack.dev/mime";
import path from "https://cdn.skypack.dev/path-browserify";

const { promises: fs } = new FS("__wayne__");

const app = new Wayne();

app.use(FileSystem({ path, fs, mime, prefix: '__fs__' }));

when using ES Modules and only promisified FS is supported.