a real world example

test/lazy.ts

@@ -1,4 +1,4 @@
-import { types, getRoot } from "../src"
+import { types, getRoot, getSnapshot, IType } from "../src"
 import { test } from "ava"
 import { when } from "mobx"
 
@@ -52,3 +52,79 @@ test("it should load the correct type", t =>
         // fail afer 1 second
         delay(() => reject(), 1000)
     }))
+
+test.only(
+    "lazy real world example",
+    t =>
+        new Promise((resolve, reject) => {
+            const LoginPage = types.model({
+                username: types.string,
+                password: types.string,
+                get isLoaded() {
+                    return true
+                },
+                get isValid() {
+                    return this.username.length > 0 && this.password.length > 0
+                }
+            })
+
+            const HomePage = types.model({
+                get isLoaded() {
+                    return true
+                }
+            })
+
+            const setPageTypeLoaded: any = {}
+            const createPageType = (type: string) =>
+                types.model({
+                    type: types.literal(type),
+                    data: types.lazy(
+                        store => getRoot(store).pages.some(page => page.type === type),
+                        () =>
+                            new Promise<IType<any, any>>(
+                                (res, rej) => (setPageTypeLoaded[type] = res)
+                            )
+                    )
+                })
+
+            const RouterPage = types.union(...["home", "login"].map(createPageType))
+
+            const RootStore = types.model(
+                "RootStore",
+                { pages: types.optional(types.array(RouterPage), []) },
+                {
+                    addPage(type: string, data: any = {}) {
+                        this.pages.push({
+                            type,
+                            data
+                        })
+                    }
+                }
+            )
+
+            const store = RootStore.create()
+
+            t.deepEqual(getSnapshot(store.pages), [])
+            t.is(setPageTypeLoaded["login"], undefined)
+            store.addPage("login", {
+                username: "",
+                password: ""
+            })
+            t.is(typeof setPageTypeLoaded["login"], "function")
+            t.is(store.pages[0].type, "login")
+            t.is(store.pages[0].isLoaded, undefined)
+            setPageTypeLoaded["login"](LoginPage)
+
+            // after some seconds...
+            when(
+                () =>
+                    store.pages &&
+                    store.pages[0] &&
+                    store.pages[0].data &&
+                    store.pages[0].data.isLoaded,
+                () => resolve()
+            )
+            // fail afer 1 second
+            delay(() => reject(), 1000)
+        })
+)