Skip to content

Commit 6409f65

Browse files
Merge pull request #103 from uniocjs/dev-groupguanfang
docs: update english version
2 parents d77718e + d918815 commit 6409f65

File tree

12 files changed

+581
-24
lines changed

12 files changed

+581
-24
lines changed

docs/.vitepress/config.ts

+59-24
Original file line numberDiff line numberDiff line change
@@ -121,30 +121,27 @@ export default withMermaid({
121121
{ text: 'Nest.js 集成', link: '/nestjs' },
122122
{ text: 'Midway 集成', link: '/midway' },
123123
{ text: 'Cell.js 集成', link: '/cell' },
124-
{
125-
text: 'Web',
126-
collapsed: true,
127-
items: [
128-
{ text: '介绍', link: '/web' },
129-
],
130-
},
131-
{
132-
text: '核心与依赖注入',
133-
collapsed: true,
134-
items: [
135-
{ text: '装饰器工厂', link: '/core/decorator-factory' },
136-
{ text: '插件开发', link: '/core/plugin' },
137-
],
138-
},
139-
{
140-
text: '数据库',
141-
collapsed: true,
142-
items: [
143-
{ text: 'Drizzle', link: '/database/drizzle' },
144-
{ text: 'Prisma', link: '/database/prisma' },
145-
{ text: 'TypeORM', link: '/database/typeorm' },
146-
],
147-
},
124+
],
125+
},
126+
{
127+
text: 'Web',
128+
items: [
129+
{ text: '介绍', link: '/web' },
130+
],
131+
},
132+
{
133+
text: '核心与依赖注入',
134+
items: [
135+
{ text: '装饰器工厂', link: '/core/decorator-factory' },
136+
{ text: '插件开发', link: '/core/plugin' },
137+
],
138+
},
139+
{
140+
text: '数据库',
141+
items: [
142+
{ text: 'Drizzle', link: '/database/drizzle' },
143+
{ text: 'Prisma', link: '/database/prisma' },
144+
{ text: 'TypeORM', link: '/database/typeorm' },
148145
],
149146
},
150147
],
@@ -181,5 +178,43 @@ export default withMermaid({
181178
},
182179
} as DefaultTheme.Config,
183180
},
181+
en: {
182+
label: 'English',
183+
lang: 'en-US',
184+
themeConfig: {
185+
sidebar: [
186+
{
187+
text: 'Guide',
188+
items: [
189+
{ text: 'Getting Started', link: '/en/start' },
190+
{ text: 'Nest.js Integration', link: '/en/nestjs' },
191+
{ text: 'Midway Integration', link: '/en/midway' },
192+
{ text: 'Cell.js Integration', link: '/en/cell' },
193+
],
194+
},
195+
{
196+
text: 'Web',
197+
items: [
198+
{ text: 'Introduction', link: '/en/web' },
199+
],
200+
},
201+
{
202+
text: 'Core',
203+
items: [
204+
{ text: 'Decorator Factory', link: '/en/core/decorator-factory' },
205+
{ text: 'Plugin Development', link: '/en/core/plugin' },
206+
],
207+
},
208+
{
209+
text: 'Database',
210+
items: [
211+
{ text: 'Drizzle', link: '/en/database/drizzle' },
212+
{ text: 'Prisma', link: '/en/database/prisma' },
213+
{ text: 'TypeORM', link: '/en/database/typeorm' },
214+
],
215+
},
216+
],
217+
} as DefaultTheme.Config,
218+
},
184219
},
185220
})

docs/content/en/cell.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Cell.js Integration
+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Decorator Factory
2+
3+
unioc internally provides some decorator factories to create decorators that are compatible with both `legacy` and `stage3` environments.
4+
5+
## Differences Between the Two Environments
6+
7+
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).
8+
9+
> [!NOTE]
10+
> 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 🎉
11+
>
12+
> This may be very useful for some decorator library developers, such as libraries that use decorators for data validation, etc.
13+
14+
## defineClassDecorator
15+
16+
Used to define a unified class decorator.
17+
18+
```ts twoslash
19+
import { defineClassDecorator } from 'unioc/decorator'
20+
21+
function MyClassDecorator() {
22+
return defineClassDecorator({
23+
onClassDecorate(target) {
24+
// some your logic 🪄
25+
}
26+
})
27+
}
28+
29+
@MyClassDecorator()
30+
class MyClass {}
31+
```

docs/content/en/core/plugin.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Plugin Development
2+
3+
> [!WARNING]
4+
> 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.
5+
6+
<div align="center">
7+
8+
<img w-full max-w-60 my="10" src="/design/relation-ship.zh.svg" />
9+
10+
</div>
11+
12+
The core of unioc consists of three parts:
13+
14+
- `Container`: There is an internal container that stores all registered classes;
15+
- `Bootstrap`: An abstract class that defines the startup process of an App;
16+
- `Plugin`: Freely modify the bootstrap and container, controlling each stage of a class's initialization, execution, destruction, etc.
17+
18+
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.
19+
20+
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.
21+
22+
<div align="center" my="10">
23+
24+
```mermaid
25+
flowchart TB
26+
install("install()") --> |"installed, when try to resolve a class"| resolve
27+
resolve("resolve()") e2@--> |"resolve constructor deps"| construct
28+
construct("construct()") e3@--> constructWithDeps
29+
constructWithDeps(["construct with deps"]) e4@--> |"when all constructor deps resolved"| apply
30+
constructWithDeps e5@--> |"re-resolve constructor deps"| resolve
31+
apply("apply()") e6@--> |"apply all property deps"| transform
32+
transform("transform()") e7@--> ready
33+
ready("ready()") --- |"when invoke a method, it will call👇"| invoke
34+
invoke("invoke()") e8@--> |"...invoking..."| handle
35+
handle("handle()") --- |"when before app destroy ❌"| uninstall
36+
uninstall("uninstall()") --- |"when after app destroy ❌"| destroy
37+
destroy("destroy()")
38+
e2@{ animation: slow }
39+
e3@{ animation: slow }
40+
e4@{ animation: slow }
41+
e5@{ animation: slow }
42+
e6@{ animation: slow }
43+
e7@{ animation: slow }
44+
e8@{ animation: slow }
45+
```
46+
47+
</div>

docs/content/en/database/drizzle.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Drizzle

docs/content/en/database/prisma.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Prisma

docs/content/en/database/typeorm.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# TypeORM

docs/content/en/index.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
# https://vitepress.dev/reference/default-theme-home-page
3+
layout: home
4+
gitChangelog: false
5+
6+
hero:
7+
name: unioc
8+
text: Pluggable, Extensible Unified IoC Framework
9+
tagline: Based on TypeScript, aiming to be compatible with all TS IoC frameworks
10+
image:
11+
src: /design/logo.svg
12+
alt: unioc logo
13+
actions:
14+
- theme: brand
15+
text: Get Started 🎉
16+
link: /en/start
17+
- theme: alt
18+
text: Plugin Development 🧩
19+
link: /en/plugin
20+
21+
features:
22+
- title: IoC Ecosystem Unifier
23+
icon: 🪣
24+
details: unioc achieves unification of the TS ecosystem IoC frameworks. You can use almost any ecosystem from nest.js and midway simultaneously.
25+
- title: Decorator Unifier
26+
icon: 🎨
27+
details: Using factory functions provided by unioc, easily create decorators that are compatible with both legacy and stage3 environments.
28+
- title: Pluggable
29+
icon: 🧩
30+
details: unioc provides a rollup-like plugin system, offering complete control over application startup, runtime, and destruction processes.
31+
- title: Extensible
32+
icon: 🔧
33+
details: Supports various environments like Node/Electron/Browser/Bun/Deno/... with a core that is independent of any runtime.
34+
- title: UML Class Diagram (🚧)
35+
icon: 📊
36+
details: Generate UML class relationship diagrams at runtime for a comprehensive view of the entire application structure. (In development...)
37+
- title: RuoYi Low-Code Platform (🚧)
38+
icon: 🍰
39+
details: A RuoYi-like low-code platform based on development specifications for quickly creating backend management systems. (In development...)
40+
---

docs/content/en/midway.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Midway Integration

docs/content/en/nestjs.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Nest.js Integration
2+
3+
If you currently have a `nest.js` project, you can easily migrate from `nest.js` to `unioc`.
4+
5+
> [!WARNING]
6+
>
7+
> 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.
8+
9+
## Installation
10+
11+
```bash
12+
pnpm i unioc
13+
```
14+
15+
## Usage
16+
17+
Change your bootstrap code to the following:
18+
19+
```ts twoslash
20+
// @noErrors
21+
import process from 'node:process'
22+
import { NestJS } from 'unioc/adapter-nestjs'
23+
import { ExpressApp } from 'unioc/web-express'
24+
import { AppModule } from './app.module'
25+
26+
async function bootstrap() {
27+
// Create an Express application
28+
const app = await new ExpressApp()
29+
30+
// Use NestJS adapter and import your main module
31+
app.use(NestJS, {
32+
imports: [AppModule],
33+
} satisfies NestJS.Options)
34+
35+
// Run the application
36+
await app.run(process.env.PORT || 3616)
37+
}
38+
bootstrap()
39+
```
40+
41+
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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Getting Started
2+
3+
Currently, `unioc` is still under active development. Below is the architecture diagram of the `core` and `backend` components of `unioc`:
4+
5+
<div align="center" my10>
6+
7+
```mermaid
8+
flowchart TD
9+
meta("@unioc/meta") --> decorator("@unioc/decorator")
10+
decorator --> core("@unioc/core")
11+
meta --> core
12+
core --> web("@unioc/web")
13+
```
14+
15+
</div>
16+
17+
Below is the architecture diagram of the `backend` components of `unioc`:
18+
19+
<div align="center" my10>
20+
21+
```mermaid
22+
flowchart LR
23+
core("@unioc/core") --> web("@unioc/web")
24+
web --> express("@unioc/web-express")
25+
web --> fastify("@unioc/web-bun")
26+
web --> koa("@unioc/web-koa")
27+
web --> etc("and more...")
28+
core --> adapterNest("@unioc/adapter-nestjs")
29+
core --> adapterMidway("@unioc/adapter-midway")
30+
core --> adapterCell("@unioc/adapter-cell")
31+
core --> adapterEtc("and more...")
32+
```
33+
34+
</div>

0 commit comments

Comments
 (0)