feat: add AutoObserver decorator

vgerbot-libraries · Dec 11, 2023 · 5c77bf7 · 5c77bf7
1 parent 65edc74
commit 5c77bf7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@vgerbot/use-service-react",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "description": "",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
@@ -76,11 +76,13 @@
         "@types/react": "^18.2.8",
         "@vgerbot/ioc": "^1.0.0-alpha.1",
         "mobx": "^6.9.0",
+        "mobx-react-lite": "^4.0.5",
         "react": "^18.2.0"
     },
     "peerDependencies": {
         "@types/react": "^18.2.8",
         "mobx": "^6.9.0",
+        "mobx-react-lite": "^4.0.5",
         "react": "^18.2.0"
     }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -2,16 +2,23 @@ import { ApplicationContext, Mark } from '@vgerbot/ioc';
 import React, { useContext, useRef } from 'react';
 import { Newable } from '@vgerbot/ioc/dist/types/Newable';
 import { PartialInstAwareProcessor } from '@vgerbot/ioc/dist/types/InstantiationAwareProcessor';
-import { makeObservable } from 'mobx';
+import { makeAutoObservable, makeObservable } from 'mobx';
+import { Observer } from 'mobx-react-lite';
 
 const IoCContext = React.createContext<ApplicationContext | undefined>(undefined);
 
 const MARK_AS_MOBX_OBSERVABLE = 'mark-as-mobx-observable';
 
+const MARK_AS_MOBX_AUTO_OBSERVABLE = 'mark-as-mobx-auto-observerable';
+
 export function Observable() {
     return Mark(MARK_AS_MOBX_OBSERVABLE, true);
 }
 
+export function AutoObservable() {
+    return Mark(MARK_AS_MOBX_AUTO_OBSERVABLE, true);
+}
+
 export type IoCProps = React.PropsWithChildren<{
     callback?: (appctx: ApplicationContext) => void;
 }>;
@@ -30,6 +37,9 @@ export function IoC(props: IoCProps) {
                     if (markInfo[MARK_AS_MOBX_OBSERVABLE]) {
                         makeObservable(instance);
                     }
+                    if(markInfo[MARK_AS_MOBX_AUTO_OBSERVABLE]) {
+                        makeAutoObservable(instance);
+                    }
                     return instance;
                 }
             }
@@ -53,4 +63,14 @@ export function useService<T>(ctor: Newable<T>): T {
     return ctx.getInstance(ctor);
 }
 
+export function renderObserver(render: () => React.ReactElement) {
+    return React.createElement(
+        Observer,
+        {
+            render: render
+        },
+        []
+    ) as React.ReactElement
+}
+
 export * from '@vgerbot/ioc';
diff --git a/yarn.lock b/yarn.lock
@@ -4558,6 +4558,13 @@ mkdirp@^1.0.3:
   resolved "https://registry.nlark.com/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
 
+mobx-react-lite@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.npmmirror.com/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz#e2cb98f813e118917bcc463638f5bf6ea053a67b"
+  integrity sha512-StfB2wxE8imKj1f6T8WWPf4lVMx3cYH9Iy60bbKXEs21+HQ4tvvfIBZfSmMXgQAefi8xYEwQIz4GN9s0d2h7dg==
+  dependencies:
+    use-sync-external-store "^1.2.0"
+
 mobx@^6.9.0:
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.9.0.tgz#8a894c26417c05bed2cf7499322e589ee9787397"
@@ -5854,6 +5861,11 @@ urlgrey@1.0.0:
   dependencies:
     fast-url-parser "^1.1.3"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Futil-deprecate%2Fdownload%2Futil-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"