File tree about sveltelab HOT 4 CLOSED

How do we sync the file tree with the file system inside webcontainer?

I already wrote a function to traverse the tree and reads all files, we can add a boolean to disable reading the files and just returning the files without contents and use it for this. The slow part is just reading the files (esp. with node deps)

Imho we can leverage the fact that we don't have access to the webcontainer directly but only through the custom store. We add a function to the custom store to create a file that write to the webcontainer filesystem and to the list of files (a POJO). This ensure that we always have access to the whole file system (minus node_modules but we don't care about those imho) and they don't go out of sync.

//we add a files field here
const { subscribe, update } = writable({
	current_file: files.src.directory.routes.directory['+page.svelte'].file.contents,
	current_path: './src/routes/+page.svelte',
	iframe_url: './loading',
	files,
});

//and a function like this in the webcontainer store
create_file(path: string, content?: string){
    webcontainer_instance.fs.writeFile(path, content);
    // we don't even need to save the content here, just the fact that there's a file. Also we can use the same structure the webcontainer file tree uses so that we can save it as POJO later on
    files[path];
}

For file icons we can use simple-icons because they have the most dev icons I think. How can we swap out the icons per name, just matching against a list of names and extensions or do we need something sophisticated / glob?

I was thinking of of having a map of regex -> icon so that we can match against specific files (for example . svelte or vite.config.json) for specific icons. And than have a default for file and folder.

from sveltelab.

For file icons we can use simple-icons because they have the most dev icons I think. How can we swap out the icons per name, just matching against a list of names and extensions or do we need something sophisticated / glob?

from sveltelab.

How do we sync the file tree with the file system inside webcontainer?

I already wrote a function to traverse the tree and reads all files, we can add a boolean to disable reading the files and just returning the files without contents and use it for this. The slow part is just reading the files (esp. with node deps)

from sveltelab.

Just joking...we need also the content so that we can later on store it.

I think performance wise is better to have a separated store for it tho otherwise the store we use for the tree would be "dirty" and every keystroke.

from sveltelab.