mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
![Don Alvarez](/assets/img/avatar_default.png)
I think I accidentally deleted the branch my prior PR was based on before you had a chance to merge or decide whether to merge. In case I borked things with that delete, I'm resubmitting the PR and figuring you can close one or the other or both as desired. Original notes: Based on with-mobx-state-tree, but typescript instead of javascript Aside from a few bits of typing and renaming .js files to .ts and .tsx, most of the the edits are to avoid warnings and errors when running the code through tslint (which can be done via the `npm run tslint` command in the example if desired). To keep this example simple, the `<styled>` component (which is used by the javascript-based with-redux and with-mobx-state-tree examples for the clock component) is not used in this example. The `<styled>` library can of course be used with typescript but (I think) it requires a more complicated set of typescript and babel .configs than is needed for most other components and libraries, so I'm just directly styling the one formerly `<styled>` div to keep things simple and broadly applicable.
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { applySnapshot, Instance, IStateTreeNode, SnapshotIn, SnapshotOut, types } from "mobx-state-tree";
|
|
|
|
let store:IStateTreeNode = null as any;
|
|
|
|
const Store = types
|
|
.model({
|
|
lastUpdate: types.Date,
|
|
light: false,
|
|
})
|
|
.actions((self) => {
|
|
let timer;
|
|
const start = () => {
|
|
timer = setInterval(() => {
|
|
// mobx-state-tree doesn't allow anonymous callbacks changing data
|
|
// pass off to another action instead (need to cast self as any
|
|
// because typescript doesn't yet know about the actions we're
|
|
// adding to self here)
|
|
(self as any).update();
|
|
}, 1000);
|
|
};
|
|
const update = () => {
|
|
self.lastUpdate = new Date(Date.now());
|
|
self.light = true;
|
|
};
|
|
const stop = () => {
|
|
clearInterval(timer);
|
|
};
|
|
return { start, stop, update };
|
|
});
|
|
|
|
type IStore = Instance<typeof Store>;
|
|
type IStoreSnapshotIn = SnapshotIn<typeof Store>;
|
|
type IStoreSnapshotOut = SnapshotOut<typeof Store>;
|
|
|
|
const initStore = (isServer, snapshot = null) => {
|
|
if (isServer) {
|
|
store = Store.create({ lastUpdate: Date.now() });
|
|
}
|
|
if (store as any === null) {
|
|
store = Store.create({ lastUpdate: Date.now() });
|
|
}
|
|
if (snapshot) {
|
|
applySnapshot(store, snapshot);
|
|
}
|
|
return store;
|
|
};
|
|
|
|
export { initStore, IStore, IStoreSnapshotIn, IStoreSnapshotOut };
|