Skip to content

CokeCodes File System

Jump to bottom
Avdpro Pang edited this page Jan 27, 2022 · 5 revisions

To work like a OS, browser definitely need a file-system(FS).

Design

Features must have:

  • Dir/ file tree structure.
  • Access to dir/ file contents: new-dir, read dir/file, write file, delete item...
  • Cross tab/ window access

Features better have

  • Http access
  • Watch changes
  • Version information: base, changes, conflicts

Implement:

CokeCodes' file system is mainly implemented in JAXDisk.js. There is some special points:

Disk

CokeCodes utilizes IndexedDB API to store the file system contents. To reduce the complexity, besides dir and file, CokeCodes introduced a Disk item. All entries in "/" path are disks. Each disk item has a IndexedDB DB. In each DB, there is 3 storage

  • Files: all dir and files contents stored in here
  • Base: stores base version of modified files, so editor can launch changes compare session
  • Info: stores advanced information of the disk, like version-control information.

Async API

Browsers hates sync operations! Though there is a sync-accesss version, it's recommended that you use async-access all the time. JAXDisk in JAXDisk.js exposes the file system APIs, here is some key API and you can look at the source for details:

  • JAXDisk.newDir(path:string, ?allowDisk:boolean=false, ?recursive:boolean=true): make new dir
  • JAXDisk.del=async function(fullPath:string, ?allowDisk:boolean=false, ?recursive:boolean=true): delete a entry
  • JAXDisk.readFile=async function(path:string, ?encode:string): read file contents
  • JAXDisk.writeFile=async function(path:string, data:[string|stream|File|buffer],?encode:string): write a file
  • JAXDisk.getEntry=async function(path:string): get a entry info (dir or file, size, modify time, versionIdx...)
  • JAXDisk.getEntries=async function(path:string): get sub item entries of the path referred dir.

Example:

//Add a greeting text to MayApp's disk.json:
import {JAXDisk} from "/jaxweb/lib/JAXDisk.js";

let entry=await JAXDisk.getEntry("/MyApp/disk.json");
if(!entry||entry.dir){
    //File not exists or the path is a dir
    return;
}
let diskJSON=await JAXDisk.readFile("/MyApp/disk.json","utf8");
diskJSON=JSON.parse(diskJSON);
diskJSON["greeting"]="Hello JAXDisk!";
await JAXDisk.saveFile("/MyApp/disk.json",JSON.stringify(diskJSON, null, "\t"));

Sync API

As mentioned, Sync is not recommended but sometimes they are need, especially when execute node.js ported codes or using Clang to compile files. All async APIs have sync version, but to do sync-access, you need to declare you want to perform sync operations on certain disk:

...
await JAXDisk.syncDisk("MyApp");//init sync access for MyApp disk
text=JAXDisk.readFileSync("/MyApp/disk.json");//Sync read file contents
...

Http Access

When setup CokeCodes, a Service-Worker is installed. With this service-worker, browser can access files in CokeCodes file system via http. To convert a file path to url is very easy: add domain origin and a "/" to the head of your file full-file-system-path string. Example Say you have a file, it's full-file-system-path is "/MyApp/index.html", you were currently working on domain "www.cokecodes.com", so the full URL of the file will be: "http://www.cokecodes.com//MyApp/index.html". This mechanism makes the whole file system works like static http file server. So you can check your work result immediately after save editing code.

Issues

  • Modify dir contents (add new file, delete file, rename entry...) from different tab/window at same time may cause problem. The disk "write lock" is currently working only in single Javascript instance. Should consider move the write operation into Service-Worker to avoid synchronously operation conflicts.
  • Disk sync access need a Share with iFrame feature to speed up execute command in iframes.

Clone this wiki locally