feat: change inject & observer, perfect types

src/@types/index.d.ts

@@ -1,2 +1,15 @@
-type ComponentOptions = WechatMiniprogram.Component.Options<AnyObject, AnyObject, AnyObject>
-type PageOptions = WechatMiniprogram.Page.Options<AnyObject, AnyObject>
+type DataOption = Record<string, any>
+type CustomOption = Record<string, any>
+type PropertyOption = Record<string, AllProperty>
+type MethodOption = Record<string, (...args: any[]) => any>
+
+type PageOptions<
+  TData extends DataOption,
+  TCustom extends CustomOption
+> = WechatMiniprogram.Page.Options<TData, TCustom>
+
+type ComponentOptions<
+  TData extends DataOption,
+  TProperty extends PropertyOption,
+  TMethod extends MethodOption
+> = WechatMiniprogram.Component.Options<TData, TProperty, TMethod>

src/inject.ts

@@ -1,28 +1,22 @@
-import create from './create'
-import { toData } from './utils'
+const mapStores = <TStores extends AnyObject>(names: (keyof TStores)[]) => (source: TStores) => {
+  const target: TStores = {} as TStores
 
-const mapStores = (names: string[]) => (source: AnyObject) => {
-  const target: AnyObject = {}
-
-  names.forEach((key) => {
+  names.forEach(key => {
     if (source && source[key]) {
-      target[key] = toData(source[key])
+      target[key] = source[key]
     }
   })
 
   return target
 }
 
-const inject = {
-  page: (...storeNames: string[]) => (
-    createOptions: (stores: AnyObject) => PageOptions
-  ) =>
-    create.page(getApp().stores, mapStores(storeNames), createOptions(getApp().stores)),
+const inject = <TStores extends AnyObject>(...storeNames: (keyof TStores)[]) => (
+  createObserver: (stores: TStores) => (observedStores: AnyObject) => void | string
+) => {
+  const stores = getApp().stores ?? {}
+  const observedStores = mapStores(storeNames)(stores)
 
-  component: (...storeNames: string[]) => (
-    createOptions: (stores: AnyObject) => ComponentOptions
-  ) =>
-    create.component(getApp().stores, mapStores(storeNames), createOptions(getApp().stores)),
+  return createObserver(stores)(observedStores)
 }
 
 export default inject

src/observer.ts

@@ -1,12 +1,75 @@
-import create from './create'
-import { toData } from './utils'
+import { autorun, IReactionDisposer } from 'mobx'
+import { is, toData } from './utils'
+import diff from './diff'
 
 const observer = {
-  page: (stores: AnyObject) => (options: PageOptions) =>
-    create.page(stores, toData, options),
+  page: <TData extends DataOption, TCustom extends CustomOption>(
+    options: PageOptions<TData, TCustom>
+  ) => {
+    let dispose: IReactionDisposer
 
-  component: (stores: AnyObject) => (options: ComponentOptions) =>
-    create.component(stores, toData, options),
+    const { data = {}, onLoad, onUnload } = options
+
+    return (observedStores: AnyObject = {}) =>
+      Page({
+        ...options,
+        data: { ...data, ...toData(observedStores) },
+
+        onLoad(query) {
+          dispose = autorun(() => {
+            if (this.data) {
+              const diffs: AnyObject = diff({ ...this.data, ...toData(observedStores) }, this.data)
+
+              this.setData(diffs)
+            }
+          })
+
+          if (is.fun(onLoad)) onLoad.call(this, query)
+        },
+
+        onUnload() {
+          if (dispose) dispose()
+
+          if (is.fun(onUnload)) onUnload.call(this)
+        },
+      })
+  },
+
+  component: <
+    TData extends DataOption,
+    TProperty extends PropertyOption,
+    TMethod extends MethodOption
+  >(
+    options: ComponentOptions<TData, TProperty, TMethod>
+  ) => {
+    let dispose: IReactionDisposer
+
+    const { data = {}, attached, detached } = options
+
+    return (observedStores: AnyObject = {}) =>
+      Component({
+        ...options,
+        data: { ...data, ...toData(observedStores) },
+
+        attached() {
+          dispose = autorun(() => {
+            if (this.data) {
+              const diffs: AnyObject = diff({ ...this.data, ...toData(observedStores) }, this.data)
+
+              this.setData(diffs)
+            }
+          })
+
+          if (is.fun(attached)) attached.call(this)
+        },
+
+        detached() {
+          if (dispose) dispose()
+
+          if (is.fun(detached)) detached.call(this)
+        },
+      })
+  },
 }
 
 export default observer

src/provider.ts

@@ -1,6 +1,7 @@
-type AppOptions = WechatMiniprogram.App.Options<AnyObject>
+type AppOptions<T> = WechatMiniprogram.App.Options<T>
 
-const provider = <T extends AnyObject>(stores: T) => (options: AppOptions) =>
-  App({ ...options, stores })
+const provider = <TStores extends AnyObject>(stores: TStores) => <TAppOptions extends AnyObject>(
+  options: AppOptions<TAppOptions>
+) => App({ ...options, stores })
 
 export default provider