docs: update english version

docs/.vitepress/config.ts

@@ -121,30 +121,27 @@ export default withMermaid({
           { text: 'Nest.js 集成', link: '/nestjs' },
           { text: 'Midway 集成', link: '/midway' },
           { text: 'Cell.js 集成', link: '/cell' },
-          {
-            text: 'Web',
-            collapsed: true,
-            items: [
-              { text: '介绍', link: '/web' },
-            ],
-          },
-          {
-            text: '核心与依赖注入',
-            collapsed: true,
-            items: [
-              { text: '装饰器工厂', link: '/core/decorator-factory' },
-              { text: '插件开发', link: '/core/plugin' },
-            ],
-          },
-          {
-            text: '数据库',
-            collapsed: true,
-            items: [
-              { text: 'Drizzle', link: '/database/drizzle' },
-              { text: 'Prisma', link: '/database/prisma' },
-              { text: 'TypeORM', link: '/database/typeorm' },
-            ],
-          },
+        ],
+      },
+      {
+        text: 'Web',
+        items: [
+          { text: '介绍', link: '/web' },
+        ],
+      },
+      {
+        text: '核心与依赖注入',
+        items: [
+          { text: '装饰器工厂', link: '/core/decorator-factory' },
+          { text: '插件开发', link: '/core/plugin' },
+        ],
+      },
+      {
+        text: '数据库',
+        items: [
+          { text: 'Drizzle', link: '/database/drizzle' },
+          { text: 'Prisma', link: '/database/prisma' },
+          { text: 'TypeORM', link: '/database/typeorm' },
         ],
       },
     ],
@@ -181,5 +178,43 @@ export default withMermaid({
         },
       } as DefaultTheme.Config,
     },
+    en: {
+      label: 'English',
+      lang: 'en-US',
+      themeConfig: {
+        sidebar: [
+          {
+            text: 'Guide',
+            items: [
+              { text: 'Getting Started', link: '/en/start' },
+              { text: 'Nest.js Integration', link: '/en/nestjs' },
+              { text: 'Midway Integration', link: '/en/midway' },
+              { text: 'Cell.js Integration', link: '/en/cell' },
+            ],
+          },
+          {
+            text: 'Web',
+            items: [
+              { text: 'Introduction', link: '/en/web' },
+            ],
+          },
+          {
+            text: 'Core',
+            items: [
+              { text: 'Decorator Factory', link: '/en/core/decorator-factory' },
+              { text: 'Plugin Development', link: '/en/core/plugin' },
+            ],
+          },
+          {
+            text: 'Database',
+            items: [
+              { text: 'Drizzle', link: '/en/database/drizzle' },
+              { text: 'Prisma', link: '/en/database/prisma' },
+              { text: 'TypeORM', link: '/en/database/typeorm' },
+            ],
+          },
+        ],
+      } as DefaultTheme.Config,
+    },
   },
 })

docs/content/en/cell.md

@@ -0,0 +1 @@
+# Cell.js Integration

docs/content/en/core/decorator-factory.md

@@ -0,0 +1,31 @@
+# Decorator Factory
+
+unioc internally provides some decorator factories to create decorators that are compatible with both `legacy` and `stage3` environments.
+
+## Differences Between the Two Environments
+
+In January 2023, TypeScript 4.9 was officially released, introducing `TC39 stage 3` decorators to TypeScript for the first time. However, most `IoC` frameworks are still at the `legacy` stage and are not yet compatible with `stage3` decorators. At this point in time, to promote the development of the `TS` community, unioc internally provides decorator factory functions for creating decorators that are compatible with both `legacy` and `stage3`, as well as a series of `metadata` scanners for setting/scanning metadata and a series of APIs compatible with `emitDecoratorMetadata` (i.e., the `reflect-metadata` package).
+
+> [!NOTE]
+> The related APIs are stored in `unioc/meta` and `unioc/decorator` and support `tree-shaking`. Even if you don't use the core container API of `unioc`, you can use these APIs to create decorators, making your decorators more compatible and allowing them to be used in both `legacy` and `stage3` environments 🎉
+>
+> This may be very useful for some decorator library developers, such as libraries that use decorators for data validation, etc.
+
+## defineClassDecorator
+
+Used to define a unified class decorator.
+
+```ts twoslash
+import { defineClassDecorator } from 'unioc/decorator'
+
+function MyClassDecorator() {
+  return defineClassDecorator({
+    onClassDecorate(target) {
+      // some your logic 🪄
+    }
+  })
+}
+
+@MyClassDecorator()
+class MyClass {}
+```

docs/content/en/core/plugin.md

@@ -0,0 +1,47 @@
+# Plugin Development
+
+> [!WARNING]
+> Note that for plugin development, we assume you already have sufficient intermediate to advanced knowledge of TypeScript, as this involves more advanced content related to IoC core.
+
+<div align="center">
+
+<img w-full max-w-60 my="10" src="/design/relation-ship.zh.svg" />
+
+</div>
+
+The core of unioc consists of three parts:
+
+- `Container`: There is an internal container that stores all registered classes;
+- `Bootstrap`: An abstract class that defines the startup process of an App;
+- `Plugin`: Freely modify the bootstrap and container, controlling each stage of a class's initialization, execution, destruction, etc.
+
+Plugins have the same level of authority as the bootstrap, giving them extreme flexibility. Below, we will explain in detail how to write a unioc plugin.
+
+unioc provides a plugin system similar to the [Rollup plugin](https://rollupjs.org/plugin-development) system. However, compared to Rollup's hooks, unioc's hooks use `simple yet powerful` `single` English words corresponding to each processing stage. Since this is a runtime framework, unlike Rollup which operates at compile time, it doesn't have the complex hook execution logic that Rollup has. Below is a simple diagram describing when each plugin hook will be executed.
+
+<div align="center" my="10">
+
+```mermaid
+flowchart TB
+  install("install()") --> |"installed, when try to resolve a class"| resolve
+  resolve("resolve()") e2@--> |"resolve constructor deps"| construct
+  construct("construct()") e3@--> constructWithDeps
+  constructWithDeps(["construct with deps"]) e4@--> |"when all constructor deps resolved"| apply
+  constructWithDeps e5@--> |"re-resolve constructor deps"| resolve
+  apply("apply()") e6@--> |"apply all property deps"| transform
+  transform("transform()") e7@--> ready
+  ready("ready()")  --- |"when invoke a method, it will call👇"| invoke
+  invoke("invoke()") e8@--> |"...invoking..."| handle
+  handle("handle()") --- |"when before app destroy ❌"| uninstall
+  uninstall("uninstall()") --- |"when after app destroy ❌"| destroy
+  destroy("destroy()")
+  e2@{ animation: slow }
+  e3@{ animation: slow }
+  e4@{ animation: slow }
+  e5@{ animation: slow }
+  e6@{ animation: slow }
+  e7@{ animation: slow }
+  e8@{ animation: slow }
+```
+
+</div>

docs/content/en/database/drizzle.md

@@ -0,0 +1 @@
+# Drizzle

docs/content/en/database/prisma.md

@@ -0,0 +1 @@
+# Prisma

docs/content/en/database/typeorm.md

@@ -0,0 +1 @@
+# TypeORM

docs/content/en/index.md

@@ -0,0 +1,40 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+gitChangelog: false
+
+hero:
+  name: unioc
+  text: Pluggable, Extensible Unified IoC Framework
+  tagline: Based on TypeScript, aiming to be compatible with all TS IoC frameworks
+  image:
+    src: /design/logo.svg
+    alt: unioc logo
+  actions:
+    - theme: brand
+      text: Get Started 🎉
+      link: /en/start
+    - theme: alt
+      text: Plugin Development 🧩
+      link: /en/plugin
+
+features:
+  - title: IoC Ecosystem Unifier
+    icon: 🪣
+    details: unioc achieves unification of the TS ecosystem IoC frameworks. You can use almost any ecosystem from nest.js and midway simultaneously.
+  - title: Decorator Unifier
+    icon: 🎨
+    details: Using factory functions provided by unioc, easily create decorators that are compatible with both legacy and stage3 environments.
+  - title: Pluggable
+    icon: 🧩
+    details: unioc provides a rollup-like plugin system, offering complete control over application startup, runtime, and destruction processes.
+  - title: Extensible
+    icon: 🔧
+    details: Supports various environments like Node/Electron/Browser/Bun/Deno/... with a core that is independent of any runtime.
+  - title: UML Class Diagram (🚧)
+    icon: 📊
+    details: Generate UML class relationship diagrams at runtime for a comprehensive view of the entire application structure. (In development...)
+  - title: RuoYi Low-Code Platform (🚧)
+    icon: 🍰
+    details: A RuoYi-like low-code platform based on development specifications for quickly creating backend management systems. (In development...)
+---

docs/content/en/midway.md

@@ -0,0 +1 @@
+# Midway Integration

docs/content/en/nestjs.md

@@ -0,0 +1,41 @@
+# Nest.js Integration
+
+If you currently have a `nest.js` project, you can easily migrate from `nest.js` to `unioc`.
+
+> [!WARNING]
+>
+> Currently, the `nest.js` adapter for `unioc` is still in the experimental stage and only supports basic `Restful` API functionality. We will continue to improve other features in the coming time.
+
+## Installation
+
+```bash
+pnpm i unioc
+```
+
+## Usage
+
+Change your bootstrap code to the following:
+
+```ts twoslash
+// @noErrors
+import process from 'node:process'
+import { NestJS } from 'unioc/adapter-nestjs'
+import { ExpressApp } from 'unioc/web-express'
+import { AppModule } from './app.module'
+
+async function bootstrap() {
+  // Create an Express application
+  const app = await new ExpressApp()
+
+  // Use NestJS adapter and import your main module
+  app.use(NestJS, {
+    imports: [AppModule],
+  } satisfies NestJS.Options)
+
+  // Run the application
+  await app.run(process.env.PORT || 3616)
+}
+bootstrap()
+```
+
+Currently, `nest.js` has not adapted plugins like `@nestjs/swagger` that are directly adapted by modifying the `bootstrap`. A unified `swagger` plugin will be planned in the future.

docs/content/en/start.md

@@ -0,0 +1,34 @@
+# Getting Started
+
+Currently, `unioc` is still under active development. Below is the architecture diagram of the `core` and `backend` components of `unioc`:
+
+<div align="center" my10>
+
+```mermaid
+flowchart TD
+  meta("@unioc/meta") --> decorator("@unioc/decorator")
+  decorator --> core("@unioc/core")
+  meta --> core
+  core --> web("@unioc/web")
+```
+
+</div>
+
+Below is the architecture diagram of the `backend` components of `unioc`:
+
+<div align="center" my10>
+
+```mermaid
+flowchart LR
+  core("@unioc/core") --> web("@unioc/web")
+  web --> express("@unioc/web-express")
+  web --> fastify("@unioc/web-bun")
+  web --> koa("@unioc/web-koa")
+  web --> etc("and more...")
+  core --> adapterNest("@unioc/adapter-nestjs")
+  core --> adapterMidway("@unioc/adapter-midway")
+  core --> adapterCell("@unioc/adapter-cell")
+  core --> adapterEtc("and more...")
+```
+
+</div>