Obsidian v3

.nvmrc

@@ -1 +1 @@
-18.12.0
+20.16.0

.vscode/settings.json

@@ -1,11 +1,15 @@
 {
   "cSpell.words": [
     "Descriminator",
+    "esmodules",
     "estree",
+    "memoizer",
     "Middlewares",
     "MVVM",
+    "plusplus",
     "preconfigured",
     "TSES",
+    "tseslint",
     "unimported",
     "unmagler",
     "unplugin",

packages/documentation/docs/documentation/documentation.mdx

@@ -21,7 +21,7 @@ Define a singleton graph that is instantiated once and is retained throughout th
 import {Singleton, Graph, ObjectGraph, Provides} from 'react-obsidian';
 
 
-@Singleton() @Graph()
+@singleton() @graph()
 export class ApplicationGraph extends ObjectGraph {
 
  // fooService requires a barManager so it receives one as a parameter.
@@ -108,15 +108,15 @@ const SomeComponent = () => {
   </TabItem>  
   <TabItem value="classComponent" label="Class component injection">
 
-To inject a class, annotate it with the `@Injectable` decorator. The `@Injectable` decorator takes a single parameter - the graph that should be used to resolve the dependencies. Declare the dependencies as class members and annotate them with the `@Inject` decorator.
+To inject a class, annotate it with the `@injectable` decorator. The `@injectable` decorator takes a single parameter - the graph that should be used to resolve the dependencies. Declare the dependencies as class members and annotate them with the `@inject` decorator.
 
 ```ts title="MyComponent.tsx"
 import {Injectable, Inject} from 'react-obsidian';
 import {ApplicationGraph} from './ApplicationGraph';
 
-@Injectable(ApplicationGraph)
+@injectable(ApplicationGraph)
 export MyClassComponent extends React.Component {
-  @Inject() private fooService!: FooService;
+  @inject() private fooService!: FooService;
 
 }
 ```
@@ -134,17 +134,17 @@ const SomeComponent = () => {
   </TabItem>
   <TabItem value="class" label="Class constructor injection">
 
-To inject a class, annotate it with the `@Injectable` decorator. The `@Injectable` decorator takes a single parameter - the graph that should be used to resolve the dependencies.
-Declare the dependencies as constructor parameters and annotate them with the `@Inject` decorator.
+To inject a class, annotate it with the `@injectable` decorator. The `@injectable` decorator takes a single parameter - the graph that should be used to resolve the dependencies.
+Declare the dependencies as constructor parameters and annotate them with the `@inject` decorator.
 
 ```ts title="MyClass.tsx"
 import {Injectable, Inject} from 'react-obsidian';
 import {ApplicationGraph} from './ApplicationGraph';
 
-@Injectable(ApplicationGraph)
+@injectable(ApplicationGraph)
 export MyClass {
   constructor (fooService?: FooService);
-  constructor(@Inject() private fooService: FooService) { }
+  constructor(@inject() private fooService: FooService) { }
 }
 ```
 

packages/documentation/docs/documentation/installation.mdx

@@ -29,47 +29,7 @@ Install the package using your preferred package manager:
 
 </Tabs>
 
-## 2. Install Reflect-metadata
-First, install the `reflect-metadata` package:
-
-<Tabs>
-  <TabItem value="yarn" label="Yarn" default>
-
-  ```shell
-  yarn add reflect-metadata
-  ```
-
-  </TabItem>
-  <TabItem value="npm" label="NPM" default>
-
-  ```shell
-  npm install reflect-metadata
-  ```
-  </TabItem>
-
-</Tabs>
-
-Then, enable the `reflect-metadata` polyfill by adding the following line to the top of your application's entry point (usually index.js or index.ts):
-
-```js
-import 'reflect-metadata';
-```
-
-## 3. Enable experimental decorators
-Obsidian uses the Decorators feature whose proposal is at stage 3.
-
-Add the following options to your tsconfig.json file.
-
-```js
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
-  }
-}
-```
-
-## 4. Add Obsidian's transformer
+## 2. Add Obsidian's transformer
 Like most Dependency Injection frameworks, Obsidian uses automatic code generation to create the bindings necessary for resolving dependencies. This approach helps reduce the amount of boilerplate code required by developers.
 
 You'll need to add either the Babel or SWC plugins depending on your project's configuration.
@@ -82,26 +42,25 @@ You'll need to add either the Babel or SWC plugins depending on your project's c
 
 ### Install the required Babel plugins
 
-You will need to install these plugins if you don't have them already:
+You will need to install the `plugin-proposal-decorators` plugin if it's not installed already:
 <Tabs>
   <TabItem value="yarn" label="Yarn" default>
 
   ```shell
-  yarn add @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties babel-plugin-parameter-decorator @babel/core @babel/preset-env @babel/preset-typescript
+  yarn add @babel/plugin-proposal-decorators
   ```
 
   </TabItem>
   <TabItem value="npm" label="NPM" default>
 
   ```shell
-  npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties babel-plugin-parameter-decorator @babel/core @babel/preset-env
+  npm install @babel/plugin-proposal-decorators
   ```
 
   </TabItem>
 </Tabs>
 
 If this is your first time using Babel, you will also need to install Babel's core packages:
-
 <Tabs>
   <TabItem value="yarn" label="Yarn" default>
 
@@ -119,19 +78,19 @@ If this is your first time using Babel, you will also need to install Babel's co
 
 ### Update your Babel configuration
 
-Add the transformer and the required plugins to the list of plugins in your `babel.config.js` file or `.babelrc` file:
+Add the transformer and the required plugin to the list of plugins in your `babel.config.js` file or `.babelrc` file:
 
-```diff
+```js title="babel.config.js"
 module.exports = {
   presets: [
-    'module:metro-react-native-babel-preset',
-+    ['@babel/preset-typescript', {'onlyRemoveTypeImports': true}]
+      // Add this line
+    '@babel/preset-typescript'
   ],
   plugins: [
-+    react-obsidian/dist/transformers/babel-plugin-obsidian,
-+    ['@babel/plugin-proposal-decorators', {legacy: true}],
-+    '@babel/plugin-transform-class-properties',
-+    'babel-plugin-parameter-decorator'
+    // Added lines start
+    'react-obsidian/dist/transformers/babel-plugin-obsidian',
+    ['@babel/plugin-proposal-decorators', {version: '2023-11'}],
+    // Added lines end
   ]
 };
 ```
@@ -140,7 +99,7 @@ module.exports = {
   <TabItem value="swc" label="SWC (Vite + SWC)">
 
 ### Install the required dependencies
-Currently, Obsidian can be used via [unplugin-swc](https://github.com/unplugin/unplugin-swc) and [vite-plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc/) is not yet supported.
+Currently, Obsidian can be used via [unplugin-swc](https://github.com/unplugin/unplugin-swc). [vite-plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc/) is not yet supported.
 
 <Tabs>
   <TabItem value="yarn" label="Yarn" default>
@@ -187,6 +146,19 @@ export default defineConfig({
   </TabItem>
 </Tabs>
 
-## 5. Optional - Add Obsidian's ESLint plugin
-Obsidian provides an ESLint plugin that can help you find errors in your code related to dependency injection. See the [ESLint plugin](/docs/documentation/meta/eslint) documentation for more information.
+## 3. Configure TypeScript (Optional)
+Obsidian supports the latest version of the decorators proposal available in TypeScript 5.0 and later. You might need to disable the legacy decorators in your tsconfig.json file. To do this, remove both `experimentalDecorators` and `emitDecoratorMetadata` from the `compilerOptions` section.
+
+```js title="tsconfig.json"
+{
+  "compilerOptions": {
+    // Removed lines start
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+    // Removed lines end
+  }
+}
+```
 
+## 4. Add Obsidian's ESLint plugin (Recommended)
+Obsidian provides an ESLint plugin that can help you find errors in your code related to dependency injection. See the [ESLint plugin](/docs/documentation/meta/eslint) documentation for more information.

packages/documentation/docs/documentation/meta/eslint.mdx

@@ -29,7 +29,7 @@ Ensure dependencies requested by providers can be resolved.
 When a provider requests a dependency that is not provided by the graph or its subgraphs, this rule will trigger a lint error.
 
 ```ts
-@Graph()
+@graph()
 class SomeGraph extends ObjectGraph {
   @Provides()
   someService(someDependency: SomeDependency) {
@@ -45,7 +45,7 @@ Prevent circular dependencies between providers.
 When two providers depend on each other, this rule will trigger a lint error.
 
 ```ts
-@Graph()
+@graph()
 class SomeGraph extends ObjectGraph {
   @Provides()
   foo(bar: Bar) {

packages/documentation/docs/documentation/meta/migratingToV3.mdx

@@ -0,0 +1,39 @@
+---
+sidebar_position: 4
+title: "Migrate to v3.x"
+---
+
+Migrating from v2.x to v3.x is a straightforward process. This guide will help you migrate your existing codebase to the latest version of Obsidian.
+
+## Breaking changes
+1. **Minimum supported version of TypeScript is now v5.0.0.** If you are using an older version of TypeScript, you will need to upgrade to v5.0.0 or later.
+2. **Legacy decorators are no longer supported.** Starting from v3.x, Obsidian uses the stage 3 decorators proposal which is enabled by default in TypeScript v5.0.0. To use the new decorators proposal, you will need to remove the `experimentalDecorators` and `emitDecoratorMetadata` options from your `tsconfig.json` file:
+
+```js title="tsconfig.json"
+{
+  "compilerOptions": {
+    // Removed lines start
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+    // Removed lines end
+  }
+}
+```
+
+Additionally, update your Babel configurations file to use the new decorators proposal:
+
+```js title="babel.config.js"
+module.exports = {
+  plugins: [
+// Add this line
+    ['@babel/plugin-proposal-decorators', {version: '2023-11'}], 
+    // Remove this line
+    ['@babel/plugin-proposal-decorators', {legacy: true}],
+  ]
+};
+```
+
+## Deprecations
+With the release of v3.x, we're aligning our API with the community standards. All decorators that were previously capitalized are now camel-cased. For example, the `@Graph` decorator is now `@graph` and the `@LifecycleBound` decorator is now `@lifecycleBound`.
+
+The capitalized decorators will continue to work in v3.x, but they will be removed in the next major release. We recommend updating your codebase to use the camel-cased decorators to avoid any breaking changes in the future.

packages/documentation/docs/documentation/usage/ClassComponents.mdx

@@ -4,15 +4,15 @@ title: "Class components"
 ---
 
 ## Injecting class components
-Injecting class components is a two step process. First, annotate the class with the `@Injectable` annotation and pass the graph from which dependencies should be resolve. Then, declare the dependencies as class members and annotate them with the `@Inject` annotation.
+Injecting class components is a two step process. First, annotate the class with the `@injectable` annotation and pass the graph from which dependencies should be resolve. Then, declare the dependencies as class members and annotate them with the `@inject` annotation.
 
 ```ts
 import {Injectable, Inject} from 'react-obsidian';
 import {ApplicationGraph} from './ApplicationGraph';
 
-@Injectable(ApplicationGraph)
+@injectable(ApplicationGraph)
 export class ClassComponent extends React.Component {
-  @Inject() private httpClient!: HttpClient;
+  @inject() private httpClient!: HttpClient;
 
 }
 ```

packages/documentation/docs/documentation/usage/Classes.mdx

@@ -4,15 +4,15 @@ title: "Classes"
 ---
 
 ## Injecting classes
-Injecting classes is a two step process. First, annotate the class with the `@Injectable` annotation and pass the graph from which dependencies should be resolve. Then, declare the dependencies as class members and annotate them with the `@Inject` annotation.
+Injecting classes is a two step process. First, annotate the class with the `@Injectable` annotation and pass the graph from which dependencies should be resolve. Then, declare the dependencies as class members and annotate them with the `@inject` annotation.
 
 ```ts
 import {Injectable, Inject} from 'react-obsidian';
 import {ApplicationGraph} from './ApplicationGraph';
 
 @Injectable(ApplicationGraph)
 export class MyClass {
-  @Inject() private httpClient!: HttpClient;
+  @inject() private httpClient!: HttpClient;
 
 }
 ```
@@ -22,15 +22,15 @@ Constructor injection is the preferred way to inject dependencies. It is more ex
 :::
 
 ## Delayed injection
-Dependencies annotated with the `@Inject` annotation are resolved immediately **after** the constructor is called. If you want to inject a class at a later point in time, you can use the `@LateInject` annotation instead, and inject the dependencies by manually with the `Obsidian.inject()` function.
+Dependencies annotated with the `@inject` annotation are resolved immediately **after** the constructor is called. If you want to inject a class at a later point in time, you can use the `@lateInject` annotation instead, and inject the dependencies by manually with the `Obsidian.inject()` function.
 
 ```ts
 import {Injectable, LateInject} from 'react-obsidian';
 import {ApplicationGraph} from './ApplicationGraph';
 
 @Injectable(ApplicationGraph)
 export class MyClass {
-  @LateInject() private httpClient!: HttpClient;
+  @lateInject() private httpClient!: HttpClient;
 
   public init() {
     console.log(this.httpClient === undefined); // true