How to transition from BrowserFS to ZenFs

chinonso098 commented 3 months ago

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 commented 3 months ago

@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 commented 3 months ago

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

chinonso098 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

@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.