Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

A browser-compatible fs module inspired by the Deno fs and @std/fs APIs, based on OPFS implementation.

License

NotificationsYou must be signed in to change notification settings

JiangJie/happy-opfs

Repository files navigation

NPM versionNPM downloadsJSR VersionJSR Score



This is a browser-compatible fs module based on OPFS, which references theDeno Runtime File_System andDeno @std/fs APIs.

Installation

# via pnpmpnpm add happy-opfs# or via yarnyarn add happy-opfs# or just from npmnpm install --save happy-opfs# via JSRjsr add @happy-js/happy-opfs

What is OPFS

OPFS stands forOrigin private file system, which aims to provide a file system API for manipulating local files in the browser environment.

Why happy-opfs

There are significant differences between the standard OPFS API and familiar file system APIs based on path operations, such as Node.js and Deno. The purpose of this project is to implement an API similar to Deno's in the browser, allowing for convenient file operations.

The return values of asynchronous APIs are of theResult type, similar to Rust'sResult enum type, providing a more user-friendly error handling approach.

Why Reference Deno Instead of Node.js

  • The early versions of the Node.js fs API were based on callback syntax, although newer versions support Promise syntax. On the other hand, the Deno fs API was designed from the beginning with Promise syntax. Therefore, Deno has less historical baggage, making it a more suitable choice for implementing a native-compatible API.
  • Deno natively supports TypeScript, while Node.js currently does not without the use of additional tools.

Synchronous support

Note

However, it is more recommended to use the asynchronous interface because the main thread does not provide a synchronous interface. In order to force the implementation of synchronous syntax, the I/O operation needs to be moved to theWorker, and the main thread needs to be blocked until theWorker completes the I/O operation, which obviously causes performance loss.

And because theWorker needs to be started, the synchronous interface can only be used after theWorker is started, and any reading and writing before that will fail.

Please note that in order to share data between the main thread and theWorker,SharedArrayBuffer needs to be used, so two additionalHTTP Response Headers are required for this:'Cross-Origin-Opener-Policy': 'same-origin''Cross-Origin-Embedder-Policy': 'require-corp'.Otherwise, an errorReferenceError: SharedArrayBuffer is not defined will be thrown.

Examples

import*asfsfrom'happy-opfs';(async()=>{constmockServer='https://16a6dafa-2258-4a83-88fa-31a409e42b17.mock.pstmn.io';constmockTodos=`${mockServer}/todos`;constmockTodo1=`${mockTodos}/1`;// Check if OPFS is supportedconsole.log(`OPFS is${isOPFSSupported() ?'' :' not'} supported`);// Clear all files and foldersawaitfs.emptyDir(fs.ROOT_DIR);// Recursively create the /happy/opfs directoryawaitfs.mkdir('/happy/opfs');// Create and write file contentawaitfs.writeFile('/happy/opfs/a.txt','hello opfs');awaitfs.writeFile('/happy/op-fs/fs.txt','hello opfs');// Move the fileawaitfs.move('/happy/opfs/a.txt','/happy/b.txt');// Append content to the fileawaitfs.appendFile('/happy/b.txt',newTextEncoder().encode(' happy opfs'));// File no longer existsconststatRes=awaitfs.stat('/happy/opfs/a.txt');console.assert(statRes.isErr());console.assert((awaitfs.readFile('/happy/b.txt')).unwrap().byteLength===21);// Automatically normalize the pathconsole.assert((awaitfs.readTextFile('//happy///b.txt//')).unwrap()==='hello opfs happy opfs');console.assert((awaitfs.remove('/happy/not/exists')).isOk());console.assert((awaitfs.remove('/happy/opfs')).isOk());console.assert(!(awaitfs.exists('/happy/opfs')).unwrap());console.assert((awaitfs.exists('/happy/b.txt')).unwrap());console.assert(fs.isFileHandle((awaitfs.stat('/happy/b.txt')).unwrap()));// Download a fileconstdownloadTask=fs.downloadFile(mockSingle,'/todo.json',{timeout:1000,onProgress(progressResult):void{progressResult.inspect(progress=>{console.log(`Downloaded${progress.completedByteLength}/${progress.totalByteLength} bytes`);});},});constdownloadRes=awaitdownloadTask.response;if(downloadRes.isOk()){console.assert(downloadRes.unwrap()instanceofResponse);constpostData=(awaitfs.readTextFile('/todo.json')).unwrap();constpostJson:{id:number;title:string;}=JSON.parse(postData);console.assert(postJson.id===1);// Modify the filepostJson.title='happy-opfs';awaitfs.writeFile('/todo.json',JSON.stringify(postJson));// Upload a fileconsole.assert((awaitfs.uploadFile('/todo.json',mockAll).response).unwrap()instanceofResponse);}else{console.assert(downloadRes.unwrapErr()instanceofError);}{// Download a file to a temporary fileconstdownloadTask=fs.downloadFile(mockSingle);constdownloadRes=awaitdownloadTask.response;downloadRes.inspect(x=>{console.assert(fs.isTempPath(x.tempFilePath));console.assert(x.rawResponseinstanceofResponse);});if(downloadRes.isOk()){awaitfs.remove(downloadRes.unwrap().tempFilePath);}}// Will create directoryawaitfs.emptyDir('/not-exists');// Zip/Unzipconsole.assert((awaitfs.zip('/happy','/happy.zip')).isOk());console.assert((awaitfs.zip('/happy')).unwrap().byteLength===(awaitfs.readFile('/happy.zip')).unwrap().byteLength);console.assert((awaitfs.unzip('/happy.zip','/happy-2')).isOk());console.assert((awaitfs.unzipFromUrl(mockZipUrl,'/happy-3',{onProgress(progressResult){progressResult.inspect(progress=>{console.log(`Unzipped${progress.completedByteLength}/${progress.totalByteLength} bytes`);});},})).isOk());console.assert((awaitfs.zipFromUrl(mockZipUrl,'/test-zip.zip')).isOk());console.assert((awaitfs.zipFromUrl(mockZipUrl)).unwrap().byteLength===(awaitfs.readFile('/test-zip.zip')).unwrap().byteLength);// Tempconsole.log(`temp txt file:${fs.generateTempPath({basename:'opfs',extname:'.txt',})}`);console.log(`temp dir:${fs.generateTempPath({isDirectory:true,})}`);(awaitfs.mkTemp()).inspect(path=>{console.assert(path.startsWith('/tmp/tmp-'));});constexpired=newDate();(awaitfs.mkTemp({basename:'opfs',extname:'.txt',})).inspect(path=>{console.assert(path.startsWith('/tmp/opfs-'));console.assert(path.endsWith('.txt'));});(awaitfs.mkTemp({isDirectory:true,basename:'',})).inspect(path=>{console.assert(path.startsWith('/tmp/'));});console.assert((awaitArray.fromAsync((awaitfs.readDir(fs.TMP_DIR)).unwrap())).length===3);awaitfs.pruneTemp(expired);console.assert((awaitArray.fromAsync((awaitfs.readDir(fs.TMP_DIR)).unwrap())).length===2);// await fs.deleteTemp();// console.assert(!(await fs.exists(fs.TMP_DIR)).unwrap());// Copyawaitfs.mkdir('/happy/copy');console.assert((awaitfs.copy('/happy/b.txt','/happy-2')).isErr());console.assert((awaitfs.copy('/happy','/happy-copy')).isOk());awaitfs.appendFile('/happy-copy/b.txt',' copy');console.assert((awaitfs.readFile('/happy-copy/b.txt')).unwrap().byteLength===26);awaitfs.appendFile('/happy/op-fs/fs.txt',' copy');awaitfs.copy('/happy','/happy-copy',{overwrite:false,});console.assert((awaitfs.readFile('/happy-copy/b.txt')).unwrap().byteLength===26);// List all files and folders in the root directoryforawait(const{ path, handle}of(awaitfs.readDir(fs.ROOT_DIR,{recursive:true,})).unwrap()){consthandleLike=awaitfs.toFileSystemHandleLike(handle);if(fs.isFileHandleLike(handleLike)){console.log(`${path} is a${handleLike.kind}, name =${handleLike.name}, type =${handleLike.type}, size =${handleLike.size}, lastModified =${handleLike.lastModified}`);}else{console.log(`${path} is a${handleLike.kind}, name =${handleLike.name}`);}}// Comment this line to view using OPFS Explorerawaitfs.remove(fs.ROOT_DIR);})();

You can find the above example code in the filetests/async.ts, or you can view the runtime effect using the following steps.

git clone https://github.com/JiangJie/happy-opfs.gitcd happy-opfspnpm installpnpm start

Openhttps://localhost:8443/ in your browser and open the developer tools to observe the console output.

You can also install theOPFS Explorer browser extension to visually inspect the file system status.

Synchronization Example

worker.ts

import{startSyncAgent}from'happy-opfs';startSyncAgent();

index.ts

import{connectSyncAgent,mkdirSync}from'happy-opfs';awaitconnectSyncAgent({worker:newWorker(newURL('worker.ts',import.meta.url),{type:'module'}),// SharedArrayBuffer size between main thread and workerbufferLength:10*1024*1024,// max wait time at main thread per operationopTimeout:3000,});mkdirSync('/happy/opfs');// other sync operations

Seetests/sync.ts for details.

About

A browser-compatible fs module inspired by the Deno fs and @std/fs APIs, based on OPFS implementation.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp