Skip to content

Commit 2ab3074

Browse files
committed
chore: update API.md for @utoo/web
1 parent cd9ada0 commit 2ab3074

File tree

2 files changed

+49
-9
lines changed

2 files changed

+49
-9
lines changed

packages/utoo-web/API.md

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
# `@utoo/web` API Documentation
1+
# [`@utoo/web`]## Quick Start Guide
22

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.
46

57
## Core Concepts
68

79
Before diving into the API, it's important to understand the four main components that make `@utoo/web` work:
810

911
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.
1012
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.
1214
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.
1315

1416
---
1517

1618
## Quick Start Guide
1719

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).
1921

2022
### 1. Instantiate the Project
2123

@@ -152,6 +154,20 @@ Creates a new directory.
152154

153155
* `path` (string): The path to the directory to be created.
154156

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+
155171
### Preview Functionality
156172

157173
#### `project.installServiceWorker()`
@@ -283,3 +299,8 @@ import "@utoo/web/esm/serviceWorker";
283299
```
284300

285301
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.

packages/utoo-web/API_zh-CN.md

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
# `@utoo/web` API 文档
1+
# [`@utoo/web`](https://www.npmjs.com/package/@utoo/web) API 文档
22

3-
`@utoo/web` 是一个功能强大的库,它允许您在浏览器中完整地运行一套 Web 开发环境,包括虚拟文件系统、依赖管理和构建流程。它深度整合了基于 Rust 和 Turbopack 的全新构建器 `utoopack`,并利用 Web Workers、Service Workers 和源私有文件系统(OPFS)等现代 Web 技术,提供无缝且快速的开发体验,无需后端服务器。
3+
`@utoo/web` 是一个功能强大的库,它允许您在浏览器中完整地运行一套 Web 开发环境,包括虚拟文件系统、依赖管理和构建流程。它深度整合了基于 [`Rust`](https://www.rust-lang.org/)[`turbopack`](https://nextjs.org/docs/app/api-reference/turbopack) 的全新构建器 [`utoopack`](https://github.com/utooland/utoo),并利用 Web Workers、Service Workers 和源私有文件系统(OPFS)等现代 Web 技术,提供无缝且快速的开发体验,无需后端服务器。
44

55
## 核心概念
66

77
在深入了解 API 之前,理解构成 `@utoo/web` 的四个主要组件非常重要:
88

9-
1. **虚拟文件系统 (Virtual File System)**:整个项目,包括源代码和 `node_modules`,都存在于浏览器的源私有文件系统(OPFS)中。`Project` 类提供了一个类似 Node.js `fs` 的接口来与其交互。
9+
1. **Virtual File System**:整个项目,包括源代码和 `node_modules`,都存在于浏览器的源私有文件系统(OPFS)中。`Project` 类提供了一个类似 Node.js `fs` 的接口来与其交互。
1010
2. **Project Main Worker**`Project` 实例的核心逻辑运行在它自己的 Web Worker 中。您在主线程中与之交互的 `Project` 对象实际上是一个代理,它将所有核心任务(如文件系统操作)委托给此 Worker。这种架构是保持 UI 响应流畅的关键。
11-
3. **Thread Worker**:像打包和编译这样的重度任务被卸载到一个专用的 Web Worker 中。这确保了即使在构建过程中,主 UI 线程也能保持响应。
11+
3. **Thread Worker**:像打包和编译这样的重度任务被卸载到一个专用的 Web Worker 中。这确保了即使在构建过程中,主 UI 线程也能保持响应。我们将 [`tokio`](https://github.com/utooland/tokio) 移植到了浏览器上,以充分利用多核 CPU 提升性能。**Thread Worker** 将完全被 tokio runtime 接管。
1212
4. **Service Worker**:Service Worker 充当本地服务器。它拦截来自预览 `iframe` 的请求,从 OPFS 中读取相应的文件,并将其提供回去,从而允许您预览构建好的应用程序。
1313

1414
---
1515

1616
## 快速上手指南
1717

18-
启动一个项目主要涉及四个步骤,如 `examples/utooweb-demo` 中所示。
18+
启动一个项目主要涉及四个步骤,如 `examples/utooweb-demo` 中所示。你也可以在 [`utoo-repl`](https://utoo-repl.vercel.app) 在线体验演示效果。
1919

2020
### 1. 实例化项目
2121

@@ -152,6 +152,20 @@ await project.writeFile('utoopack.json', JSON.stringify(utoopackConfig, null, 2)
152152

153153
* `path` (string): 要创建的目录的路径。
154154

155+
#### `project.rm(path, options)`
156+
157+
删除一个文件或目录。
158+
159+
* `path` (string): 要删除的文件或目录的路径。
160+
* `options` (object, 可选):
161+
* `recursive` (boolean): 如果为 `true`,则执行递归目录删除。默认为 `false`
162+
163+
#### `project.rmdir(path)`
164+
165+
删除一个目录。
166+
167+
* `path` (string): 要删除的目录的路径。
168+
155169
### 预览功能
156170

157171
#### `project.installServiceWorker()`
@@ -283,3 +297,8 @@ import "@utoo/web/esm/serviceWorker";
283297
```
284298

285299
您的构建设置应配置为将这些文件输出到主应用程序可以访问的位置,以便您可以将其 URL 提供给 `UtooProject` 构造函数。
300+
301+
## 注意
302+
* 由于当前 Rust 上默认的内存分配器 [`dlmalloc`](https://github.com/alexcrichton/dlmalloc-rs) 在多线程 `wasm` 上性能不够理想,我们目前正在尝试参考 [`emscripten`](https://emscripten.org/docs/tools_reference/settings_reference.html#malloc) 的方案支持 [`mimalloc`](https://github.com/microsoft/mimalloc),一旦成功,构建速度将会有大幅提升;
303+
* 未来我们也会在浏览器中支持 [`HMR`](https://webpack.js.org/concepts/hot-module-replacement/) 功能;
304+
* turbopack 的部分高级功能如[`webpack loaders`](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#configuring-webpack-loaders), [`持久化缓存`](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackPersistentCaching),目前也在计划之中,未来会在浏览器内直接支持。

0 commit comments

Comments
 (0)