Switch from browserfs to OPFS

[robertjndw]

What it does

This PR builds on top of the work that was done in PR #12853.
As browserfs was deprecated in March 24 (see original repo), it is beneficial to switch to an alternative.
As discussed in #14125, the direct successor of browserfs is zenfs. However, during the research I also stumbled across OPFS which is a new native Browser API which covers a lot of the features necessary for this use case.

How to test

Build and run the 'browser-only' Theia example.

Similarly to the previously mentioned PR #12853.

For debugging purposes of the OPFS, I can really recommend this extension for the Chrome DevTools: https://github.com/tomayac/opfs-explorer

Follow-ups

The watch functionality is currently missing. Since OPFS does not provide a native API for this, it has to be manually tracked and implemented

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[sdirix]

Thanks for the work ❤️ ! For me it mostly works ;)

Please have a look at my comments and make sure that all automated CI checks go through.

[sdirix]

We are now exclusively using OPFS, therefore the whole initialization could be adapted, for example like this

Suggested change

	createMountableFileSystem(): Promise<FileSystemDirectoryHandle>
	initializeFS: (fs: FileSystemDirectoryHandle, provider: OPFSFileSystemProvider) => Promise<void>;
	getRootDirectory(): Promise<FileSystemDirectoryHandle>

The initialization can then just be implemented in this one method. What do you think?

[robertjndw]

I see your point about simplifying the initialization into one method now that we're exclusively using OPFS. However, I think keeping the two methods still makes sense in this context.
One focuses on returning the root directory, while the other is responsible for preparing the file system, which is especially useful when we want to create files and folders in advance for the example. What are your thoughts on this approach?

[james-pre]

Could a maintainer please link this to #13520 so #13520 will be auto-closed on merge? Thanks!

[robertjndw]

@sdirix Can you maybe take a look at the CI/CD error? It seems that with the addition of dom.asynciterable to the tsconfig something broke 🤔

[sdirix]

@sdirix Can you maybe take a look at the CI/CD error? It seems that with the addition of dom.asynciterable to the tsconfig something broke 🤔

---

@theia/ffmpeg: $ eslint --cache=true --no-error-on-unmatched-pattern=true "{src,test}/**/*.{ts,tsx}"
@theia/re-exports:
@theia/re-exports: /home/runner/work/theia/theia/dev-packages/private-re-exports/src/bin-package-re-exports-from-package.ts
@theia/re-exports: 0:0 error Parsing error: Invalid value for lib provided: dom.asynciterable

---

Seems like the Typescript Eslint integration does not like the dom.asynciterable lib. I'm not sure why this is the case as the Typescript we are using is definitely compatible to it.

Anyway, you can override the lib settings in configs/base.eslintrc.json and there specify the parserOptions.lib to the previous values, i.e.

    "lib": [
      "ES2019",
      "ES2020.Promise",
      "DOM"
    ]

That should fix the issue

[james-pre]

LGTM! @robertjndw any updates on this?

[sdirix]

I updated to latest master.

I have some more comments before we can merge.