|  | 
| 1 |  | -# `@utoo/web` API Documentation | 
|  | 1 | +# [`@utoo/web`]## Quick Start Guide | 
| 2 | 2 | 
 | 
| 3 |  | -`@utoo/web` is a powerful library that enables you to run a complete web development environment, including a virtual file system, dependency management, and a build process, entirely within the browser. It deeply integrates `utoopack`, a new builder based on Rust and Turbopack, and leverages modern web technologies like Web Workers, Service Workers, and the Origin Private File System (OPFS) to provide a seamless and fast development experience without a backend server. | 
|  | 3 | +Getting a project up and running involves four main steps, as demonstrated in `examples/utooweb-demo`. You can also experience the demo online at [`utoo-repl`](https://utoo-repl.vercel.app/).tps://www.npmjs.com/package/@utoo/web) API Documentation | 
|  | 4 | + | 
|  | 5 | +`@utoo/web` is a powerful library that enables you to run a complete web development environment, including a virtual file system, dependency management, and a build process, entirely within the browser. It deeply integrates [`utoopack`](https://github.com/utooland/utoo), a new builder based on [`Rust`](https://www.rust-lang.org/) and [`turbopack`](https://nextjs.org/docs/app/api-reference/turbopack), and leverages modern web technologies like Web Workers, Service Workers, and the Origin Private File System (OPFS) to provide a seamless and fast development experience without a backend server. | 
| 4 | 6 | 
 | 
| 5 | 7 | ## Core Concepts | 
| 6 | 8 | 
 | 
| 7 | 9 | Before diving into the API, it's important to understand the four main components that make `@utoo/web` work: | 
| 8 | 10 | 
 | 
| 9 | 11 | 1.  **Virtual File System**: The entire project, including source code and `node_modules`, lives in the browser's Origin Private File System (OPFS). The `Project` class provides a Node.js-like `fs` interface to interact with it. | 
| 10 | 12 | 2.  **Project Main Worker**: The core logic of the `Project` instance runs within its own Web Worker. The `Project` object you interact with in the main thread is a proxy that delegates all core tasks (like file system operations) to this worker. This architecture is key to keeping the UI responsive. | 
| 11 |  | -3.  **Thread Worker**: Heavy tasks like bundling and compilation are offloaded to a dedicated Web Worker. This ensures the main UI thread remains responsive, even during a build. | 
|  | 13 | +3.  **Thread Worker**: Heavy tasks like bundling and compilation are offloaded to a dedicated Web Worker. This ensures the main UI thread remains responsive, even during a build. We have ported [`tokio`](https://github.com/utooland/tokio) to the browser to take full advantage of multi-core CPUs for improved performance. The **Thread Worker** will be completely taken over by the tokio runtime. | 
| 12 | 14 | 4.  **Service Worker**: A Service Worker acts as a local server. It intercepts requests from the preview `iframe`, reads the corresponding files from the OPFS, and serves them back, allowing you to preview your built application. | 
| 13 | 15 | 
 | 
| 14 | 16 | --- | 
| 15 | 17 | 
 | 
| 16 | 18 | ## Quick Start Guide | 
| 17 | 19 | 
 | 
| 18 |  | -Getting a project up and running involves four main steps, as demonstrated in `examples/utooweb-demo`. | 
|  | 20 | +Getting a project up and running involves four main steps, as demonstrated in `examples/utooweb-demo`. You can also experience the demo online at [`utoo-repl`](https://utoo-repl.vercel.app). | 
| 19 | 21 | 
 | 
| 20 | 22 | ### 1. Instantiate the Project | 
| 21 | 23 | 
 | 
| @@ -152,6 +154,20 @@ Creates a new directory. | 
| 152 | 154 | 
 | 
| 153 | 155 | *   `path` (string): The path to the directory to be created. | 
| 154 | 156 | 
 | 
|  | 157 | +#### `project.rm(path, options)` | 
|  | 158 | + | 
|  | 159 | +Removes a file or directory. | 
|  | 160 | + | 
|  | 161 | +*   `path` (string): The path to the file or directory to be removed. | 
|  | 162 | +*   `options` (object, optional): | 
|  | 163 | +    *   `recursive` (boolean): If `true`, performs a recursive directory removal. Defaults to `false`. | 
|  | 164 | + | 
|  | 165 | +#### `project.rmdir(path)` | 
|  | 166 | + | 
|  | 167 | +Removes a directory. | 
|  | 168 | + | 
|  | 169 | +*   `path` (string): The path to the directory to be removed. | 
|  | 170 | + | 
| 155 | 171 | ### Preview Functionality | 
| 156 | 172 | 
 | 
| 157 | 173 | #### `project.installServiceWorker()` | 
| @@ -283,3 +299,8 @@ import "@utoo/web/esm/serviceWorker"; | 
| 283 | 299 | ``` | 
| 284 | 300 | 
 | 
| 285 | 301 | Your build setup should be configured to output these files to a location that your main application can access, so you can provide their URLs to the `UtooProject` constructor. | 
|  | 302 | + | 
|  | 303 | +## Notes | 
|  | 304 | +* Due to the current default memory allocator for Rust, [`dlmalloc`](https://github.com/alexcrichton/dlmalloc-rs), having less than ideal performance on multi-threaded `wasm`, we are currently trying to support [`mimalloc`](https://github.com/microsoft/mimalloc) with reference to [`emscripten`](https://emscripten.org/docs/tools_reference/settings_reference.html#malloc)'s solution. Once successful, the build speed will be greatly improved; | 
|  | 305 | +* In the future, we will also support the [`HMR`](https://webpack.js.org/concepts/hot-module-replacement/) feature in the browser; | 
|  | 306 | +* Advanced features of turbopack such as [`webpack loaders`](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders), [`persistent caching`](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackPersistentCaching), are also in the plan and will be supported directly in the browser in the future. | 
0 commit comments