react-obsidian 0.0.32 → 0.0.33

package/dist/test/fixtures/LifecycleBoundGraph.js

@@ -29,18 +29,30 @@ var src_1 = require("../../src");
 var LifecycleBound_1 = require("../../src/decorators/LifecycleBound");
 var LifecycleBoundGraph = /** @class */ (function (_super) {
     __extends(LifecycleBoundGraph, _super);
-    function LifecycleBoundGraph() {
-        var _this = _super.call(this) || this;
+    function LifecycleBoundGraph(props) {
+        var _this = _super.call(this, props) || this;
+        _this.props = props;
         LifecycleBoundGraph_1.timesCreated++;
         return _this;
     }
     LifecycleBoundGraph_1 = LifecycleBoundGraph;
+    LifecycleBoundGraph.prototype.computedFromProps = function () {
+        return this.props.stringFromProps
+            ? "A string passed via props: ".concat(this.props.stringFromProps)
+            : 'stringFromProps does not exist';
+    };
     var LifecycleBoundGraph_1;
     LifecycleBoundGraph.timesCreated = 0;
+    __decorate([
+        (0, src_1.Provides)(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", String)
+    ], LifecycleBoundGraph.prototype, "computedFromProps", null);
     LifecycleBoundGraph = LifecycleBoundGraph_1 = __decorate([
         (0, LifecycleBound_1.LifecycleBound)(),
         (0, src_1.Graph)(),
-        __metadata("design:paramtypes", [])
+        __metadata("design:paramtypes", [Object])
     ], LifecycleBoundGraph);
     return LifecycleBoundGraph;
 }(src_1.ObjectGraph));

package/dist/test/fixtures/LifecycleBoundGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"LifecycleBoundGraph.js","sourceRoot":"","sources":["../../../test/fixtures/LifecycleBoundGraph.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA+C;AAC/C,sEAAqE;AAGrE;IAAyC,uCAAW;IAGlD;QAAA,YACE,iBAAO,SAER;QADC,qBAAmB,CAAC,YAAY,EAAE,CAAC;;IACrC,CAAC;4BANU,mBAAmB;;IACvB,gCAAY,GAAG,CAAC,CAAC;IADb,mBAAmB;QAD/B,IAAA,+BAAc,GAAE;QAAE,IAAA,WAAK,GAAE;;OACb,mBAAmB,CAO/B;IAAD,0BAAC;CAAA,AARD,CACyC,iBAAW,GAOnD;AAPY,kDAAmB"}
+{"version":3,"file":"LifecycleBoundGraph.js","sourceRoot":"","sources":["../../../test/fixtures/LifecycleBoundGraph.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAyD;AACzD,sEAAqE;AAKrE;IAAiD,uCAAsB;IAIrE,6BAAY,KAAgB;QAA5B,YACE,kBAAM,KAAK,CAAC,SAGb;QAFC,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,qBAAmB,CAAC,YAAY,EAAE,CAAC;;IACrC,CAAC;4BARU,mBAAmB;IAW9B,+CAAiB,GADjB;QAEE,OAAO,IAAI,CAAC,KAAK,CAAC,eAAe;YAC/B,CAAC,CAAC,qCAA8B,IAAI,CAAC,KAAK,CAAC,eAAe,CAAE;YAC5D,CAAC,CAAC,gCAAgC,CAAC;IACvC,CAAC;;IAdM,gCAAY,GAAG,CAAC,CAAC;IASxB;QAAC,IAAA,cAAQ,GAAE;;;;gEAKV;IAfU,mBAAmB;QAD/B,IAAA,+BAAc,GAAE;QAAE,IAAA,WAAK,GAAE;;OACb,mBAAmB,CAgB/B;IAAD,0BAAC;CAAA,AAjBD,CACiD,iBAAW,GAgB3D;AAhBY,kDAAmB"}

package/dist/test/fixtures/MainGraph.d.ts

@@ -1,7 +1,7 @@
 import { ObjectGraph, DependenciesOf } from '../../src';
 import StringProvider from './StringProvider';
 import Subgraph from './Subgraph';
-export declare type Dependencies = DependenciesOf<[MainGraph, Subgraph]>;
+export type Dependencies = DependenciesOf<[MainGraph, Subgraph]>;
 export default class MainGraph extends ObjectGraph {
     someString(stringProvider: StringProvider): string;
     anotherString(): string;

package/dist/test/fixtures/MainGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainGraph.d.ts","sourceRoot":"","sources":["../../../test/fixtures/MainGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAEX,cAAc,EACf,MAAM,WAAW,CAAC;AAEnB,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,oBAAY,YAAY,GAAG,cAAc,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;AAGjE,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,WAAW;IAEhD,UAAU,CAAC,cAAc,EAAE,cAAc,GAAG,MAAM;IAKlD,aAAa,IAAI,MAAM;CAGxB"}
+{"version":3,"file":"MainGraph.d.ts","sourceRoot":"","sources":["../../../test/fixtures/MainGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EAEX,cAAc,EACf,MAAM,WAAW,CAAC;AAEnB,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;AAGjE,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,WAAW;IAEhD,UAAU,CAAC,cAAc,EAAE,cAAc,GAAG,MAAM;IAKlD,aAAa,IAAI,MAAM;CAGxB"}

package/dist/transformers/babel-plugin-obsidian/helpers/index.d.ts

@@ -1,5 +1,5 @@
 import { ClassMethod, ClassProperty, Decorator, Identifier, ObjectExpression, ObjectPattern, TSParameterProperty } from '@babel/types';
-export declare type AcceptedNodeType = Identifier | TSParameterProperty | ClassProperty;
+export type AcceptedNodeType = Identifier | TSParameterProperty | ClassProperty;
 export declare function providerIsNotNamed(decorator: Decorator): boolean;
 export declare function addNameToProviderArguments(node: ClassMethod, decorator: Decorator): void;
 export declare function getDecoratorArgument(decorator: Decorator): ObjectExpression | undefined;

package/dist/transformers/babel-plugin-obsidian/helpers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../transformers/babel-plugin-obsidian/helpers/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACpB,MAAM,cAAc,CAAC;AAKtB,oBAAY,gBAAgB,GAAG,UAAU,GAAG,mBAAmB,GAAG,aAAa,CAAC;AAEhF,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CAWhE;AAED,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,QAOjF;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAKvF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAGvD;AAED,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,GAAG,IAAI,EAC/C,aAAa,EAAE,MAAM,GACpB,SAAS,GAAG,SAAS,CAEvB;AAED,wBAAgB,gBAAgB,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAE1E;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,CAAC,UAAU,GAAG,GAAG,CAAC,EAAE,GAAG,aAAa,CAI3F;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,gBAAgB,EACtB,SAAS,EAAE,SAAS,QAOrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../transformers/babel-plugin-obsidian/helpers/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,EACX,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,mBAAmB,EACpB,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,mBAAmB,GAAG,aAAa,CAAC;AAEhF,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CAWhE;AAED,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,QAOjF;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAKvF;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAGvD;AAED,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,SAAS,GAAG,IAAI,EAC/C,aAAa,EAAE,MAAM,GACpB,SAAS,GAAG,SAAS,CAEvB;AAED,wBAAgB,gBAAgB,CAAC,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAE1E;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,CAAC,UAAU,GAAG,GAAG,CAAC,EAAE,GAAG,aAAa,CAI3F;AAED,wBAAgB,6BAA6B,CAC3C,IAAI,EAAE,gBAAgB,EACtB,SAAS,EAAE,SAAS,QAOrB"}

package/documentation/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/documentation/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

package/documentation/blog/2019-05-28-first-blog-post.md

@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/documentation/blog/2019-05-29-long-blog-post.md

@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/documentation/blog/2021-08-01-mdx-blog-post.mdx

@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::

package/documentation/blog/2021-08-26-welcome/index.md

@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

package/documentation/blog/authors.yml

@@ -0,0 +1,17 @@
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png

package/documentation/docs/documentation/documentation.mdx

@@ -0,0 +1,191 @@
+---
+sidebar_position: 1
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+
+# Introduction
+
+Obsidian is a dependency injection container with first-class support for React and React Native applications.
+
+Get started by **following the installation guide** bellow.
+<!-- Or **try Obsidian immediately** in the **[Online Playground](https://docusaurus.new)**. -->
+
+## The 2 steps tutorial for injecting dependencies with Obsidian
+
+### Step 1: Declare how dependencies should be created
+
+Define a singleton graph that is instantiated once and is retained throughout the lifespan of the application. All dependencies it provides are also singletons. The graph bellow provides two dependencies that can be injected: `fooService` and `barManager`.
+```ts title="A singleton graph that provides two dependencies"
+import {Singleton, Graph, ObjectGraph, Provides} from 'react-obsidian';
+
+
+@Singleton() @Graph()
+export class ApplicationGraph extends ObjectGraph {
+
+ // fooService requires a barManager so it receives one as a parameter.
+  @Provides()
+  fooService(barManager: BarManager): FooService {
+    return new FooService(barManager);
+  }
+
+
+  @Provides()
+  barManager(): BarManager {
+    return new BarManager();
+  }
+}
+```
+
+### Step 2: Inject the dependencies
+Obsidian can inject dependencies into components, hooks, and classes.
+
+
+
+<Tabs>
+  <TabItem value="functionalComponent" label="Functional component injection" default>
+
+Injecting React functional components essentially revolves around two things: declaring the required dependencies in the hook's prototype and exporting an injected hook using the `injectComponent` function.
+
+```ts title="MyComponent.tsx"
+import {DependenciesOf, injectComponent} from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+// 1. Declare which dependencies should be injected.
+type Props = DependenciesOf<ApplicationGraph, 'fooService'>; // {fooService: FooService}
+
+// 2. Implement the component.
+const myComponent = ({fooService}: Props) => {
+  // Do something useful with fooService
+}
+
+// 3. Export the injected component.
+export default injectComponent(myComponent, ApplicationGraph);
+```
+
+Now we can use the injected component without providing its dependencies manually:
+```tsx title="SomeComponent.tsx"
+import MyComponent from './MyComponent';
+
+const SomeComponent = () => {
+  // 4. Render the component - its dependencies are resolved automatically by Obsidian.
+  return <MyComponent />;
+}
+```
+  </TabItem>
+  <TabItem value="hook" label="Hook injection">
+
+Hooks are injected in a similar way to functional components. The only difference is that the `injectHook` function is used instead of `injectComponent`.
+
+```ts title="MyHook.ts"
+import {DependenciesOf, injectHook} from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+// 1. Declare which dependencies should be injected.
+type Props = DependenciesOf<ApplicationGraph, 'fooService'>; // {fooService: FooService}
+
+// 2. Implement the hook.
+const myHook = ({fooService}: Props) => {
+  // Do something useful with fooService
+}
+
+// 3. Export the injected hook.
+export default injectHook(myHook, ApplicationGraph);
+```
+
+The injected hook can be used without providing its dependencies manually:
+```tsx title="SomeComponent.tsx"
+import myHook from './MyHook';
+
+const SomeComponent = () => {
+  // 4. Use the hook without providing any dependencies manually - they are injected automatically.
+  myHook();
+
+  return <>Obsidian is awesome!</>;
+}
+```
+  </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.
+
+```ts title="MyComponent.tsx"
+import {Injectable, Inject} from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+@Injectable(ApplicationGraph)
+export MyClassComponent extends React.Component {
+  @Inject() private fooService!: FooService;
+
+}
+```
+
+Render the injected component. Obsidian resolves the required dependencies automatically.
+```tsx title="SomeComponent.tsx"
+import MyComponent from './MyComponent';
+
+const SomeComponent = () => {
+  // 4. Render the component - its dependencies are resolved automatically by Obsidian.
+  return <MyComponent />;
+}
+```
+
+  </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.
+
+```ts title="MyClass.tsx"
+import {Injectable, Inject} from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+@Injectable(ApplicationGraph)
+export MyClass {
+  constructor (fooService?: FooService);
+  constructor(@Inject() private fooService: FooService) { }
+}
+```
+
+Now we can use the injected class without providing its dependencies manually:
+```ts
+const myClass = new MyClass();
+```
+
+Of course, passing dependencies explicitly is still possible:
+```ts
+const myClass = new MyClass(new FooService());
+```
+
+  </TabItem>
+</Tabs>
+
+___
+
+## Features
+
+* ⚛️ Inject all React constructs
+  * Functional components
+  * Hooks
+  * Class components
+* 🛠 Improve code structure
+  * Easily write object-oriented code with Single Responsibility in mind
+  * Eliminate circular dependencies
+  * Avoid implicit dependencies to make your code easier to reason about
+* ❤️ Developer experience
+  * Seamlessly integrates into existing projects
+  * Easy to adopt gradually
+  * Scales well
+  * Idiomatic API that's easy to understand
+
+## Design principles
+
+React Obsidian is guided by the principles of the Dependency Injection pattern, but does not strictly follow them. We allowed ourselves a degree of freedom when designing the library in order to reduce boilerplate code and library footprint.
+
+* **Easy to start** - Obsidian requires very little code to get you started. Once you declare a graph, using it to inject dependencies requires as little as two lines of code.
+* **Intuitive API** - The API should be verbose and understandable even to new users without prior experience with Dependency Injection.
+* **Minimal boilerplate** - Require the bare minimum in order to construct dependencies and resolve them. 
+
+<!-- ## Comparison with other libraries -->

package/documentation/docs/documentation/installation.mdx

@@ -0,0 +1,65 @@
+---
+sidebar_position: 2
+---
+
+# Installation
+
+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. Obsidian relies on Babel for code generation, so you'll need to have Babel configured in your project.
+
+## 1. Install Obsidian
+
+```bash
+npm install react-obsidian
+```
+
+## 2. Install Reflect-metadata
+First, install and enable the reflect-metadata polyfill.
+```bash
+npm install reflect-metadata
+```
+
+Then, add 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 the required Babel plugins
+Add the transformer to the list of plugins in your `.babel` file.
+
+```diff
+module.exports = {
+  presets: [
+    'module:metro-react-native-babel-preset',
++    ['@babel/preset-typescript', {'onlyRemoveTypeImports': true}]
+  ],
+  plugins: [
++    react-obsidian/dist/transformers/babel-plugin-obsidian,
++    ['@babel/plugin-proposal-decorators', {legacy: true}],
++    ['@babel/plugin-proposal-class-properties', { legacy: true }],
++    'babel-plugin-parameter-decorator'
+  ]
+};
+```
+
+## 5. Jest
+If you're using Jest, you'll need to add react-obsidian to [transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring) so it's transpiled before tests are executed.
+
+## 6. Peer Dependencies
+Obsidian has a peer dependency on `lodash`.
+
+
+

package/documentation/docs/documentation/meta/clearingGraphs.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_position: 2
+title: "Clearing graphs"
+---
+
+Graphs can be cleared by invoking the `Obsidian.clearGraphs()` function. This is useful in tests or when you need to reset the system to it's original state, for example after a user logs out.
+
+#### Clearing graphs automatically during execution of Jest tests
+Create a `jest.setup.js` file and add it to [setupFilesAfterEnv](https://jestjs.io/docs/configuration#setupfilesafterenv-array). Then, import the following file when ensures graphs are cleared before each test.
+
+```js
+import 'react-obsidian/clearGraphs';
+```

package/documentation/docs/documentation/meta/middlewares.mdx

@@ -0,0 +1,27 @@
+---
+sidebar_position: 1
+title: "Graph middlewares"
+---
+
+Graph middlewares let you plug into the graph creation process and modify the graph in any way you want. This is useful when working on large scale applications where "observability" is a key concern. For example, you can use a middleware to swizzle providers, add logging, or even add a new provider to the graph.
+
+Middleware follow the Chain of Responsibility pattern and therefore must always return a graph, either by creating one explicitly or by returning the instance created by another member in the resolve chain.
+
+## Example: adding a logging middleware
+The following example demonstrates how to add a middleware that's used for logging purposes.
+
+```ts
+import { GraphMiddleware } from 'react-obsidian';
+
+const loggingMiddleware = new class extends GraphMiddleware {
+      resolve<Props>(resolveChain: GraphResolveChain, Graph: Constructable<T>, props?: Props) {
+        const t1 = Date.now();
+        const graph = resolveChain.proceed(Graph, props);
+        const t2 = Date.now();
+        console.log(`Graph created in ${t2 - t1} milliseconds`);
+        return graph;
+      }
+    }();
+
+Obsidian.addGraphMiddleware(loggingMiddleware);
+```

package/documentation/docs/documentation/usage/ClassComponents.mdx

@@ -0,0 +1,18 @@
+---
+sidebar_position: 4
+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.
+
+```ts
+import {Injectable, Inject} from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+@Injectable(ApplicationGraph)
+export class ClassComponent extends React.Component {
+  @Inject() private httpClient!: HttpClient;
+  
+}
+```

package/documentation/docs/documentation/usage/Classes.mdx

@@ -0,0 +1,41 @@
+---
+sidebar_position: 5
+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.
+
+```ts
+import {Injectable, Inject} from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+@Injectable(ApplicationGraph)
+export class MyClass {
+  @Inject() private httpClient!: HttpClient;
+  
+}
+```
+
+:::important Always prefer constructor injection over field injection
+Constructor injection is the preferred way to inject dependencies. It is more explicit and easier to test. **Field injection should only be used when a class is not instantiated by a graph.**
+:::
+
+## Lazy 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 `@LazyInject` annotation instead, and inject the dependencies by manually with the `Obsidian.inject()` function.
+
+```ts
+import {Injectable, LazyInject} from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+@Injectable(ApplicationGraph)
+export class MyClass {
+  @LazyInject() private httpClient!: HttpClient;
+
+  public init() {
+    console.log(this.httpClient === undefined); // true
+    Obsidian.inject(this);
+    console.log(this.httpClient === undefined); // false
+  }
+}
+```

package/documentation/docs/documentation/usage/FunctionalComponents.mdx

@@ -0,0 +1,57 @@
+---
+sidebar_position: 3
+title: "Functional components"
+---
+
+## Injecting functional components
+Component injection is identical in principle to how hooks are injected. The only difference is that instead of using the `injectHook` function, you use the `injectComponent` function. The `injectComponent` function takes the same arguments as the `injectHook` function, except that it takes a component as the second argument instead of a hook.
+
+```tsx title="Injecting a functional component"
+import { injectComponent, DependenciesOf } from 'react-obsidian';
+import { ApplicationGraph } from './ApplicationGraph';
+
+const MyComponent = ({httpService}: DependenciesOf<ApplicationGraph, 'httpClient'>) => {
+  return <div>My component</div>
+}
+
+export default injectComponent(MyComponent, ApplicationGraph);
+```
+
+:::tip Prefer injecting hooks over components
+Every entity (class, functional component etc.) in your application should have a single responsibility, and as such, there should be only one reason to change it. Components are responsible for rendering the UI, and therefor should change only when UI requirements change. 
+
+Prefer injecting hooks that will bridge between components and application logic. This allows components to emphasize "what" they need instead of "how", thus, preventing implementation details from leaking into them.
+:::
+
+## Strongly typed components
+The `injectComponent` function leverages *generics* to correctly type injected components.
+
+### Typing components that require props and injected dependencies
+In cases where a component requires both props and injected dependencies, we recommend typing them separately and declaring the component's props as the intersection of the two types. This way the component returned by the `injectComponent` function will require its `Own` props while all `Injected` dependencies will be marked as optional. `Injected` dependencies are marked as optional because they can either be injected manually or automatically by Obsidian.
+
+```tsx title="Separate declaration for passed (own) props and injected dependencies"
+import { injectComponent, DependenciesOf } from 'react-obsidian';
+import {ApplicationGraph} from './ApplicationGraph';
+
+type Injected = DependenciesOf<ApplicationGraph, 'httpClient'>;
+type Own = {name: string};
+
+const MyComponent = ({name, httpService}: Own & Injected) => {
+  return <div>Hey, my name is: {name} 👋</div>
+}
+
+// The result type is React.FunctionComponent<{name: string , httpClient?: HttpClient}>
+export default injectComponent<Own, Injected>(MyComponent, ApplicationGraph);
+```
+
+### Typing components that don't require Props
+If a component doesn't require any props from its parent component, simply use the `DependenciesOf` utility type provided by Obsidian to type the component's props. There's no need to use generics in this case as all props will are marked as optional.
+
+```tsx title="Typing components that don't require props"
+const MyComponent = ({httpService}: DependenciesOf<ApplicationGraph, 'httpClient'>) => {
+  return <div>Hello world 👋</div>
+}
+
+// The result type is React.FunctionComponent<{httpClient?: HttpClient}>
+export default injectComponent(MyComponent, ApplicationGraph);
+```