|
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