feat: add InjectSelf decorator

update documentation

Author: wzhudev

docs/app/globals.css

@@ -0,0 +1,18 @@
+/* Custom styles for redi docs */
+
+/* Code block font */
+code,
+pre,
+pre code,
+.nextra-code,
+[data-rehype-pretty-code-figure] code,
+[data-rehype-pretty-code-figure] pre {
+  font-family: 'Ioskeley Mono', 'Fira Code', 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  font-feature-settings: 'liga' 1, 'calt' 1; /* Enable ligatures */
+}
+
+/* Inline code */
+:not(pre) > code {
+  font-family: 'Ioskeley Mono','Fira Code', 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.875em;
+}

docs/app/layout.tsx

@@ -3,6 +3,7 @@ import { Footer, Layout, Navbar } from 'nextra-theme-docs';
 import { Head } from 'nextra/components';
 import { getPageMap } from 'nextra/page-map';
 import 'nextra-theme-docs/style.css';
+import './globals.css';
 
 export const metadata = {
   title: {

docs/content/docs/_meta.ts

@@ -1,14 +1,36 @@
 export default {
   introduction: 'Introduction',
   concepts: 'Concepts',
+
+  '---Core': {
+    type: 'separator',
+    title: 'Core',
+  },
   identifier: 'Identifier',
-  item: 'Dependency item',
+  item: 'Dependency Item',
   binding: 'Binding',
   'declare-dependency': 'Declare Dependency',
-  react: 'Using in React',
-  hierarchy: 'Hierarchy Injection System',
+
+  '---Decorators': {
+    type: 'separator',
+    title: 'Decorators',
+  },
+  decorators: 'Overview',
+  'with-new': '@WithNew',
+  'inject-self': '@InjectSelf',
   forwardref: 'forwardRef',
-  'with-new': '@WithNew Decorator',
+
+  '---Advanced': {
+    type: 'separator',
+    title: 'Advanced',
+  },
+  hierarchy: 'Hierarchy Injection',
+  react: 'React Integration',
+
+  '---Other': {
+    type: 'separator',
+    title: 'Other',
+  },
   env: 'Setup Dev Environment',
   faq: 'FAQ',
 };

docs/content/docs/binding.mdx

@@ -1,36 +1,53 @@
-# Binding
+import { Callout } from "nextra/components";
 
-After declaring identifiers and dependencies, it is necessary to establish a binding relationship between the identifiers and dependencies, and register these bindings in the injector. The injector can only return dependencies based on identifiers when it knows a set of bindings.
+# Binding
 
-There are two ways to register bindings on the injector:
+A binding connects an identifier to a dependency item. The injector uses bindings to know what to provide when a dependency is requested.
 
-- As parameters of the injector constructor
-- By calling the `add` method of the injector
+## Registering Bindings
 
-## As parameters of the injector constructor
+### In the Constructor
 
-The first parameter of the `Injector` constructor is a set of bindings. You have seen a lot of code like this in the previous section:
+The most common way is to pass bindings when creating the injector:
 
 ```ts
 const injector = new Injector([
-  [SomeClass],
-  [IdentifierA, { useClass: SomeClass }],
-  [IdentifierB, { useValue: SomeValue }],
-  [IdentifierC, { useFactory: SomeFactory }],
-  [IdentifierD, { useAsync: SomeAsyncFunction }],
+  [AuthService],                              // Class as both identifier and item
+  [ILogger, { useClass: ConsoleLogger }],     // Interface → Class
+  [IConfig, { useValue: { debug: true } }],   // Interface → Value
+  [IFactory, { useFactory: () => create() }], // Interface → Factory
 ]);
 ```
 
-## By calling the `add` method of the injector
+### Using the `add` Method
+
+You can also add bindings later:
+
+```ts
+const injector = new Injector();
+
+injector.add([AuthService]);
+injector.add([ILogger, { useClass: ConsoleLogger }]);
+```
+
+<Callout>
+  Be careful with `add` — make sure bindings are registered before they are requested, or you'll get an error.
+</Callout>
+
+## Modifying Bindings
+
+### Replace a Binding
 
 ```ts
-injector.add([SomeClass]);
-injector.add([IdentifierA, { useClass: SomeClass }]);
-injector.add([IdentifierB, { useValue: SomeValue }]);
+injector.replace([ILogger, { useClass: FileLogger }]);
 ```
 
-This approach is more flexible because it does not restrict when you can register bindings. However, this type of binding can be a double-edged sword as it may not have been registered by the time you retrieve dependencies through the injector. Therefore, we recommend using the first method as a priority unless you can ensure the correct order of registration and retrieval.
+### Delete a Binding
 
-## Replacing or deleting bindings
+```ts
+injector.delete(ILogger);
+```
 
-Before an identifier is resolved, it is possible to replace or delete the binding of the identifier. This can be done by calling the `replace` or `delete` methods of the injector.
+<Callout type="warning">
+  You can only replace or delete bindings **before** they are resolved. Once a dependency has been created, changes won't take effect.
+</Callout>

docs/content/docs/concepts.mdx

@@ -1,19 +1,81 @@
-# Conecpts
+import { Callout } from "nextra/components";
 
-A [**binding**](./binding) maps an [**identifier**](./identifier) to a [**dependency item**](./item).
+# Concepts
 
-An identifier distinguish a dependency item from others. It could be:
+Understanding three core concepts is key to using redi effectively.
 
-- a value returned from `createIdentifier`
-- a class
+## Overview
 
-A dependency item is an implementation matching an identifier. It could be:
+```
+┌─────────────┐      binds to       ┌─────────────────┐
+│  Identifier │ ──────────────────▶│ Dependency Item │
+└─────────────┘                     └─────────────────┘
+       │                                   │
+       └───────────── Binding ─────────────┘
+                         │
+                         ▼
+                  ┌─────────────┐
+                  │   Injector  │
+                  └─────────────┘
+```
 
-- a class
-- a class dependency item
-- a js primitive type value or object
-- a factory function
+## Identifier
 
-An **injector** holds a set of bindings and resolve an identifier by constructing a dependency item.
+An **identifier** is a unique token that distinguishes one dependency from another. It answers the question: "What do I want to inject?"
 
-A dependency item can [declare what dependencies it needs](./relationship).
+There are two types of identifiers:
+
+| Type | When to Use | Example |
+|------|-------------|---------|
+| **Class** | Simple cases where the class is the implementation | `AuthService` |
+| **IdentifierDecorator** | When you want to program to an interface | `createIdentifier<IAuthService>('auth')` |
+
+👉 Learn more: [Identifier](/docs/identifier)
+
+## Dependency Item
+
+A **dependency item** is the actual implementation that will be injected. It answers the question: "What should be provided?"
+
+| Type | Description | Example |
+|------|-------------|---------|
+| **Class** | A class to be instantiated | `{ useClass: AuthService }` |
+| **Value** | A constant value | `{ useValue: { apiUrl: '...' } }` |
+| **Factory** | A function that creates the dependency | `{ useFactory: () => new Service() }` |
+
+👉 Learn more: [Dependency Item](/docs/item)
+
+## Binding
+
+A **binding** connects an identifier to a dependency item. It tells the injector: "When someone asks for X, provide Y."
+
+```ts
+const injector = new Injector([
+  [AuthService],                                    // Class as both identifier and item
+  [ILogger, { useClass: ConsoleLogger }],           // Interface → Class
+  [IConfig, { useValue: { debug: true } }],         // Interface → Value
+]);
+```
+
+👉 Learn more: [Binding](/docs/binding)
+
+## Injector
+
+The **injector** holds all bindings and resolves dependencies. When you call `injector.get(SomeService)`, it:
+
+1. Finds the binding for the identifier
+2. Creates the dependency item (if not already created)
+3. Recursively resolves any nested dependencies
+4. Returns the instance
+
+<Callout>
+  By default, dependencies are **singletons** within an injector. The same instance is returned for subsequent requests.
+</Callout>
+
+## What's Next?
+
+Now that you understand the concepts, dive deeper into each topic:
+
+1. **[Identifier](/docs/identifier)** - Learn different ways to create identifiers
+2. **[Dependency Item](/docs/item)** - Explore class, value, and factory items
+3. **[Binding](/docs/binding)** - Understand how to register bindings
+4. **[Declare Dependency](/docs/declare-dependency)** - Learn to declare dependencies between classes

docs/content/docs/declare-dependency.mdx

@@ -2,90 +2,75 @@ import { Callout } from "nextra/components";
 
 # Declare Dependency
 
-After creating identifiers and dependency items, you need to declare dependency relationship among dependencies. There are two types of dependency items that could dependent on others: class items and factory function items.
+Once you have identifiers and dependency items, you need to declare the relationships between them.
 
-## On a class
+## On a Class
 
-To declare dependencies of a class, you could use the `Injector` decorator:
+Use the `@Inject` decorator on constructor parameters:
 
-```ts highlight=3
+```ts
 class MapService {
   constructor(
-    @Inject(SatelliteService) private readonly satellite: SatelliteService,
+    @Inject(SatelliteService) private readonly satellite: SatelliteService
   ) {}
 }
 ```
 
-or an `IdentifierDecorator`:
+You can also use an `IdentifierDecorator` directly:
 
-```ts highlight=7
+```ts
 interface IPlatformService {}
-
 const IPlatformService = createIdentifier<IPlatformService>("platform");
 
 class DialogService {
   constructor(
-    @IPlatformService private readonly platformSrc: IPlatformService,
+    @IPlatformService private readonly platform: IPlatformService
   ) {}
 }
 ```
 
-## On a factory
+## On a Factory
 
-You should list all its dependencies in the `deps` property:
+List dependencies in the `deps` array:
 
-```ts highlight=9
-const item = [
-  I18NNumberTranspiler,
-  {
-    useFactory: (i18nService: I18NService) => {
-      return i18nService.isChinese()
-        ? new ChineseNumberTranspiler()
-        : new EnglishNumberTranspiler();
+```ts
+const injector = new Injector([
+  [I18NService],
+  [
+    IFormatter,
+    {
+      useFactory: (i18n: I18NService) => {
+        return i18n.isChinese() ? new ChineseFormatter() : new EnglishFormatter();
+      },
+      deps: [I18NService],
     },
-    deps: [I18NService],
-  },
-];
+  ],
+]);
 ```
 
-## Optional
+## Optional Dependencies
 
-When a dependency is not held by an injector, the injector would throw an error when you want to get that dependency.
+By default, missing dependencies throw an error. Use `@Optional` to allow `null`:
 
-```ts highlight=3,8
+```ts
 class MapService {
   constructor(
-    @Inject(SatelliteService) private readonly satellite: SatelliteService,
+    @Optional(SatelliteService) private readonly satellite?: SatelliteService
   ) {}
 }
 
 const injector = new Injector([[MapService]]);
-injector.get(MapService); // ERROR!
+injector.get(MapService); // Works! satellite is undefined
 ```
 
-You could use `Optional` instead `Inject`, to mark `SatelliteService` as an optional dependency not a required one.
+## Multiple Instances
 
-```ts highlight=3,8
-class MapService {
-  constructor(
-    @Optional(SatelliteService) private readonly satellite?: SatelliteService,
-  ) {}
-}
+Use `@Many` to inject all registered instances as an array:
 
-const injector = new Injector([MapService]);
-injector.get(MapService);
-```
-
-In this case, `MapService` could construct, but its property `satellite` would be undefined.
-
-## Multiple
-
-Similarly, you could use `Many` to mark the dependency could be injected with multiple instances:
-
-```ts highlight=3,9-10
+```ts
 class MapService {
   constructor(
-    @Many(ISatelliteService) private readonly satellites: ISatelliteService[],
+    @Many(ISatelliteService) private readonly satellites: ISatelliteService[]
   ) {}
 }
 
@@ -94,5 +79,6 @@ const injector = new Injector([
   [ISatelliteService, { useClass: GPSSatellite }],
   [ISatelliteService, { useClass: BeidouSatellite }],
 ]);
-injector.get(MapService);
+
+// satellites array contains both GPS and Beidou instances
 ```