0.5

Author: 2A5F

README.md

@@ -111,6 +111,36 @@ document.addEventListener('DOMContentLoaded', () => {
 })
 ```
 
+#### Define A Global Store
+
+```tsx
+import { define } from 'mobz'
+
+
+const Counter = define(() => ({
+    count: 0,
+    inc() { this.count++ }
+}))
+
+const store = new Counter(1) // Use new to construct outside the component
+
+function Inc() {
+    const count = store(s => s.count)
+    const inc = store(s => s.inc)
+
+    return <div>
+        <div>{count}</div>
+        <button onClick={inc}>Inc</button>
+    </div>
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    render(<div id='app'>
+        <Inc></Inc>
+    </div>, document.querySelector('#app'))
+})
+```
+
 ## Hooks
 
 hook version of mobx basic api

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobz",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "zustand style mobx api",
   "main": "./dist/mobz.cjs.js",
   "module": "./dist/mobz.es.js",

src/mobz.ts

@@ -168,16 +168,22 @@ export function create<T extends object>(obj: NoFunc<T> | CreateFn<T>): T & UseS
     })
 }
 
-export function define<T extends object>(def: (self: () => T) => NoFunc<T>): () => T & UseStore<T>
-export function define<T extends object, A extends any[]>(def: (self: () => T) => (...args: A) => T): (...args: A) => T & UseStore<T>
+export function define<T extends object>(def: (self: () => T) => NoFunc<T>): (() => T & UseStore<T>) & (new () => T & UseStore<T>)
+export function define<T extends object, A extends any[]>(def: (self: () => T) => (...args: A) => T): ((...args: A) => T & UseStore<T>) & (new (...args: A) => T & UseStore<T>)
 export function define<T extends object, A extends any[]>(def: (self: () => T) => NoFunc<T> | ((...args: A) => T)): (...args: A) => T & UseStore<T> {
-    return (...args: any) => useState(() => create<T>(self => {
-        const r = def(self)
-        if (typeof r === 'function') {
-            return (r as any)(...args)
+    return function (...args: any) {
+        function build() {
+            return create<T>(self => {
+                const r = def(self)
+                if (typeof r === 'function') {
+                    return (r as any)(...args)
+                }
+                return r
+            })
         }
-        return r
-    }))[0]
+        if (!new.target) return useState(build)[0]
+        return build()
+    }
 }
 
 export default create;

src/tests/inc.tsx

@@ -22,6 +22,8 @@ const useCounter = define<{ count: number, inc: () => void }, [a: number]>(self
     inc() { self().count++ }
 }))
 
+//const store = new useCounter(-1)
+
 function Inc() {
     const store = useCounter(1)
     const count = store(s => s.count)