From 5c77bf74d42ed08c76bc0d6f47d799c4b8f66d43 Mon Sep 17 00:00:00 2001 From: y1j2x34 Date: Mon, 11 Dec 2023 16:59:00 +0800 Subject: [PATCH] feat: add AutoObserver decorator --- package.json | 4 +++- src/index.ts | 22 +++++++++++++++++++++- yarn.lock | 12 ++++++++++++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index db26a3f..fe022d4 100644 --- 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 index 5d7a3d4..7d5d0e1 100644 --- 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(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(ctor: Newable): 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 index 9ae6b52..0af52c9 100644 --- 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"