mohsen1 · July 31, 2017 21:20 · Jul 31, 2017
diff --git a/HydratableStore.tsx b/HydratableStore.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { computed } from 'mobx';
+import { inject, observer, Provider } from 'mobx-react';
+import { fromPromise } from 'mobx-utils';
+import {StaticRouter} from 'react-router-dom';
+import { Request, Response } from 'express';
+import * as ReactDOM from 'react-dom/server';
+
+interface Item {
+    weight: number;
+}
+
+class HydratableStore {
+    __hydration_promises: Promise<any>[] = [];
+    waitForHydration() {
+        return Promise.all(this.__hydration_promises);
+    }
+}
+
+class Store extends HydratableStore {
+    itemsPromise?: Promise<Item>;
+
+    @hydratable @computed get item() {
+        if (!this.itemsPromise) {
+            this.itemsPromise = fetch('/item').then(res => res.json());
+        }
+        return this.itemsPromise;
+    }
+
+    toString() {
+
+    }
+}
+
+
+@inject('store')
+@observer
+class ItemComp extends React.Component<{store?: Store}, {item: Item}> {
+    state = { item: null }
+    componentWillMount() {
+        this.props.store.item.then(item => {
+            this.setState({ item });
+        });
+    }
+    render() {
+        return <div>{this.state.item}</div>
+    }
+}
+
+const App = () => <ItemComp />
+
+
+// in server
+export async function render(req: Request, res: Response) {
+    const store = new Store();
+
+    const app = (
+        <Provider store={store}>
+            <StaticRouter location={req.url}>
+                <App />
+            </StaticRouter>
+        </Provider>
+    )
+
+    await store.waitForHydration();
+    res.send(`
+        <body>
+            <div id="root">${ReactDOM.renderToString(app)}</div>
+            <script>window.__store_state__ = ${serialize(store)}</script>
+        </body>
+    `);
+}
+
+
+
+function hydratable() {
+    return function() {
+        // grab the returned promise of the getter function and push it to __hydration_promises 
+        // of store instance. This requires store to inherit from HydratableStore
+        // TODO
+    }
+}
+
+function serialize(store: Store) {
+    return ''
+}