How to transition from BrowserFS to ZenFs

[chinonso098]

My apologies for the mis-use of the Issue system, but sadly, GitHub doesn't have DMs

I'm currently working on a project that uses BrowserFS, I came across your comment on the BrowserFS repo and thought I would give ZenFS a try. I'm currently stuck on the configuration step for ZenFS

in BrowserFs, I have this

`
import osDriveFileSystemIndex from '../../../osdrive.json';
import * as BrowserFS from 'browserfs';

     BrowserFS.configure({
            fs: "MountableFileSystem",
            options:{
                '/':{
                    fs: 'OverlayFS',
                    options:{
                        readable:{fs: 'XmlHttpRequest', options:{index: osDriveFileSystemIndex}},
                        writable:{fs:"IndexedDB", options: {storeName: "browser-fs-cache"}}
                    },
                },  
            }
        });

   const fileSys = BrowserFS.BFSRequire('fs');

`

code

osDriveFileSystem content is this
{"osdrive":{"Desktop":{"audioplayer.url":null,"fileexplorer.url":null,"heat.url":null,"hello.url":null,"taskmanager.url":null,"videoplayer.url":null},"Documents":{}, "simple.txt":null}}

How do I transition this to ZenFS ?

Thanks for the assistance

[james-pre]

@chinonso098,

You're all good! Please refer to the core docs and usage section in the readme, they have a lot of good information. For your use case, this config should replicate what you have:

import { configure, FS, Overlay, Fetch } from '@zenfs/core';
import { IndexedDB } from '@zenfs/dom';

await configure({
    backend: Overlay,
    readable: {
        backend: Fetch,
        index: indexPathOrObject,
    },
    writable: {
        backend: IndexedDB,
        storeName: 'fs-cache'
    }
});

You will also need to regenerate the index. Refer to the output of npx make-index --help. If NPM doesn't pick up the package for make-index as @zenfs/core, you can use npx -p=@zenfs/core make-index --help.

[chinonso098]

@sheepmaster
Thank you very much for the reply. I will give it a whirl and let you know

[chinonso098]

@james-pre

I get the error msg

No overload matches this call.
Overload 2 of 2, '(config: Partial<Configuration>): Promise', gave the following error.
Object literal may only specify known properties, and 'backend' does not exist in type 'Partial<Configuration>'.ts(2769)

Also, just to confirm, this is the core docs, right?

[james-pre]

The automatic type acquisition failed in this case. I'm not sure what causes it to fail. You can either add a type parameter (e.g. await configure<typeof Overlay>(...)) or use the second overload:

import { configure, FS, Overlay, Fetch } from '@zenfs/core';
import { IndexedDB } from '@zenfs/dom';

await configure({
    mounts: {
        '/': {
            backend: Overlay,
            readable: {
                backend: Fetch,
                index: indexPathOrObject,
            },
            writable: {
                backend: IndexedDB,
                storeName: 'fs-cache'
            }
        }
    }
});

[chinonso098]

@james-pre

I added a type parameter

`private async FSSetup(){

    await configure<typeof Overlay>({
        backend: Overlay,
        readable: {
            backend: Fetch,
            index: osDriveFileSystemIndex,
        },
        writable: {
            backend: IndexedDB,
            storeName: 'fs-cache'
        }
    });
}`

but I got the error msg

No overload matches this call.
Overload 2 of 2, '(config: Partial<Configuration<{ readonly name: "Overlay"; readonly options: { readonly writable: { readonly type: "object"; readonly required: true; readonly description: "The file system to write modified files to."; }; readonly readable: { ...; }; }; readonly isAvailable: () => boolean; readonly create: (options: OverlayOptions) => OverlayFS; }>>): Promise<...>', gave the following error.
Object literal may only specify known properties, and 'backend' does not exist in type 'Partial<Configuration<{ readonly name: "Overlay"; readonly options: { readonly writable: { readonly type: "object"; readonly required: true; readonly description: "The file system to write modified files to."; }; readonly readable: { ...; }; }; readonly isAvailable: () => boolean; readonly create: (options: OverlayO...'.ts(2769)

Then I tried the second option

but I got the error message

No overload matches this call.
Overload 1 of 2, '(config: MountConfiguration<Backend<FileSystem, object>>): Promise', gave the following error.
Object literal may only specify known properties, and 'mounts' does not exist in type 'MountConfiguration<Backend<FileSystem, object>>'.ts(2769)

But when I try the second option with type parameter, the error msg clear up.

[chinonso098]

Multiple error thrown when I try to execute the programs

........

any idea on what could be the cause

Solution
Targeting Node16 or NodeNext resolves these issues

[james-pre]

Yes, you will need to use a modern target. Is there any other issues I can help you with?

[james-pre]

Closing since I believe the issue has been resolved. Please reopen if you still need help.

[rhclayto]

How does one do this now that there seems to be no OverlayFS anymore?

[james-pre]

Hey @rhclayto, it was just renamed to CopyOnWrite, it still exists.

[rhclayto]

Thank you!

I can't seem to get a configuration that doesn't give me a typescript error.

import { configure, CopyOnWrite, Fetch, InMemory } from '@zenfs/core';
import { IndexedDB } from '@zenfs/dom';
import { fs9pToBfs } from "contexts/fileSystem/core";

const index = fs9pToBfs();

const FileSystemConfig = async (writeToMemory = false): Promise<any> => (

  await configure({
    mounts: {
      '/': {
        backend: CopyOnWrite,

          readable: {
            backend: Fetch,
            index: index,
          },
          writable: writeToMemory
            ? { backend: InMemory }
            : { backend: IndexedDB, storeName: 'fs-cache' },
      }
    }
  })


);

export default FileSystemConfig;

That tells me: 'Object literal may only specify known properties, and 'index' does not exist in type 'MountConfiguration<Backend<FileSystem, object>>'.'

If i try it like this:

import { configure, CopyOnWrite, Fetch, InMemory } from '@zenfs/core';
import { IndexedDB } from '@zenfs/dom';
import { fs9pToBfs } from "contexts/fileSystem/core";

const index = fs9pToBfs();

const FileSystemConfig = async (writeToMemory = false): Promise<any> => (

  await configure({
    mounts: {
      '/': {
        backend: CopyOnWrite,
        options: {
          readable: {
            backend: Fetch,
            index: index,
          },
          writable: writeToMemory
            ? { backend: InMemory }
            : { backend: IndexedDB, storeName: 'fs-cache' },
          //journal: { backend: InMemory }
        }
      }
    }
  })


);

export default FileSystemConfig;

I get

  Types of property 'options' are incompatible.
    Property 'journal' is missing in type '{ readable: { backend: Fetch; index: BFSFS; }; writable: { backend: InMemory; } | { backend: IndexedDB; name: string; }; }' but required in type '{ readonly writable: { readonly type: "object"; readonly required: true; }; readonly readable: { readonly type: "object"; readonly required: true; }; readonly journal: { readonly type: "object"; readonly required: false; }; }'.

If I uncomment 'journal', I get:

Type '{ backend: CopyOnWrite; options: { readable: { backend: Fetch; index: BFSFS; }; writable: { backend: InMemory; } | { backend: IndexedDB; name: string; }; journal: { ...; }; }; }' is not assignable to type 'MountConfiguration<CopyOnWrite>'.
  The types of 'options.writable' are incompatible between these types.
    Type '{ backend: InMemory; } | { backend: IndexedDB; name: string; }' is not assignable to type '{ readonly type: "object"; readonly required: true; }'.
      Object literal may only specify known properties, and 'backend' does not exist in type '{ readonly type: "object"; readonly required: true; }'.

I've tried to figure out the configuration options available by browsing https://zenfs.dev/core/interfaces/index.CopyOnWrite.html & linked pages, but I'm too dense to figure out how to find what I need from it.

[rhclayto]

Simplifed:

import { fs, configure, CopyOnWrite, Fetch, InMemory } from '@zenfs/core';
import { IndexedDB } from '@zenfs/dom';

await configure({
    mounts: {
      '/': {
        backend: CopyOnWrite,
        readable: {
          backend: Fetch,
          baseUrl: 'https://example.com/',
          index: 'https://example.com/index.json',
        },
        writable: { backend: IndexedDB, storeName: 'fs-cache' }
      }
    }
  });

Gives both: Object literal may only specify known properties, and 'baseUrl' does not exist in type 'MountConfiguration<Backend<FileSystem, object>>'.

&

Object literal may only specify known properties, and 'storeName' does not exist in type 'MountConfiguration<Backend<FileSystem, object>>'.

For the life of me I can't make this work. Any clues, pointers, tips, insights?

Edit: It seems 'storeName' which I have seen in some examples is actually 'name', t least now. Still error on 'baseUrl' or, if I remove it, on 'index'.

[james-pre]

The error is because Typescript isn't correctly inferring the narrower type parameter for MountConfiguration. It should be MountConfiguration<Fetch> or MountConfiguration<IndexedDB>.

If strict mode isn't enabled, turning that on should help.

As a work around you can use as MountConfiguration<...> on the various objects to force the narrower type.

[rhclayto]

Lifesaver! Thanks for taking the time to help me. Working:

await configure({
    mounts: {
      '/': {
        backend: CopyOnWrite,
        readable: {
          backend: Fetch,
          index,
          baseUrl: '/',
        } as MountConfiguration<Fetch>,
        writable: writeToMemory
          ? { backend: InMemory }
          : { backend: IndexedDB, storeName: 'fs-cache' } as MountConfiguration<IndexedDB>,
      }
    }
  })