diff --git a/examples/with-mobx-state-tree-typescript/README.md b/examples/with-mobx-state-tree-typescript/README.md index 8894cb7b..840527eb 100644 --- a/examples/with-mobx-state-tree-typescript/README.md +++ b/examples/with-mobx-state-tree-typescript/README.md @@ -1,4 +1,4 @@ -[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-mobx-state-tree-typescript) +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-mobx-state-tree) # MobX State Tree example @@ -70,6 +70,4 @@ The trick here for supporting universal mobx is to separate the cases for the cl The clock, under `components/Clock.tsx`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. -As far as how this example differs from the `with-mobx` example, `mobx-state-tree` requires that any changes to the observable data are sent as actions, which are defined on the model in `server.ts`. The snapshot feature, while not very useful in this particular case, makes client-side rehydration of the state amazingly easy. Any changes that are made to the store in `getInitialProps` will be refreshed instantly when that page is loaded on the client. - The typescript in this `with-mobx-state-tree-typescript` repo differs only slightly from the javascript `with-mobx-state-tree`, with most of the the changes made to avoid warnings and errors when running the code through `tslint` (which can be done via the `npm run tslint` command if desired). To keep this repo simple, the `` 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 repo. The `` library can be used with typescript but it requires a more complicated interplay between the typescript and babel stages than is needed for most other components and libraries, so it's not included here to keep things simple and broadly applicable. diff --git a/examples/with-mobx-state-tree-typescript/components/Page.tsx b/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx similarity index 79% rename from examples/with-mobx-state-tree-typescript/components/Page.tsx rename to examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx index 985e8381..afbc8467 100644 --- a/examples/with-mobx-state-tree-typescript/components/Page.tsx +++ b/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx @@ -1,7 +1,7 @@ import { inject, observer } from "mobx-react"; import Link from "next/link"; import React from "react"; -import { IStore } from "../store"; +import { IStore } from "../stores/store"; import { Clock } from "./Clock"; interface IOwnProps { @@ -12,7 +12,7 @@ interface IOwnProps { @inject("store") @observer -class Page extends React.Component { +class SampleComponent extends React.Component { public componentDidMount () { if (!this.props.store) { return; @@ -29,7 +29,11 @@ class Page extends React.Component { public render () { if (!this.props.store) { - return; + return ( +
+ Store not defined +
+ ); } return (
@@ -43,4 +47,4 @@ class Page extends React.Component { } } -export { Page }; +export { SampleComponent }; diff --git a/examples/with-mobx-state-tree-typescript/package.json b/examples/with-mobx-state-tree-typescript/package.json index ab39b2cf..24131629 100644 --- a/examples/with-mobx-state-tree-typescript/package.json +++ b/examples/with-mobx-state-tree-typescript/package.json @@ -8,21 +8,21 @@ "tslint": "tslint -c tslint.json -p tsconfig.json" }, "dependencies": { - "@zeit/next-typescript": "1.1.1", - "mobx": "^5.1.2", - "mobx-react": "^5.2.8", - "mobx-state-tree": "^3.4.0", + "@zeit/next-typescript": "1.1.0", + "mobx": "5.0.5", + "mobx-react": "5.2.5", + "mobx-state-tree": "3.2.3", "next": "latest", - "react": "^16.5.2", - "react-dom": "^16.5.2", + "react": "16.4.2", + "react-dom": "16.4.2", "typescript": "^3.0.1" }, "devDependencies": { - "@babel/plugin-proposal-decorators": "^7.1.0", "@types/next": "^6.1.4", "@types/react": "^16.4.12", + "@babel/plugin-proposal-decorators": "^7.1.2", "tslint": "^5.9.1", - "tslint-config-standard": "^8.0.1", + "tslint-config-standard": "^7.0.0", "tslint-loader": "^3.5.3", "tslint-react": "^3.4.0" }, diff --git a/examples/with-mobx-state-tree-typescript/pages/_app.tsx b/examples/with-mobx-state-tree-typescript/pages/_app.tsx new file mode 100644 index 00000000..de36c675 --- /dev/null +++ b/examples/with-mobx-state-tree-typescript/pages/_app.tsx @@ -0,0 +1,55 @@ +import { Provider } from "mobx-react"; +import { getSnapshot } from "mobx-state-tree"; +import App, { Container } from "next/app"; +import React from "react"; +import { initializeStore, IStore } from "../stores/store"; + +interface IOwnProps { + isServer:boolean; + initialState:IStore; +} + +class MyApp extends App { + + public static async getInitialProps({ Component, router, ctx }) { + // + // Use getInitialProps as a step in the lifecycle when + // we can initialize our store + // + const isServer = (typeof window === "undefined"); + const store = initializeStore(isServer); + // + // Check whether the page being rendered by the App has a + // static getInitialProps method and if so call it + // + let pageProps = {}; + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx); + } + return { + initialState: getSnapshot(store), + isServer, + pageProps, + }; + } + + private store:IStore; + + constructor(props) { + super(props); + this.store = initializeStore(props.isServer, props.initialState) as IStore; + } + + public render() { + const { Component, pageProps } = this.props; + return ( + + + + + + ); + } +} + +export default MyApp; diff --git a/examples/with-mobx-state-tree-typescript/pages/index.tsx b/examples/with-mobx-state-tree-typescript/pages/index.tsx index 1b10ddd5..e8a79eb5 100644 --- a/examples/with-mobx-state-tree-typescript/pages/index.tsx +++ b/examples/with-mobx-state-tree-typescript/pages/index.tsx @@ -1,35 +1,12 @@ -import { Provider } from "mobx-react"; -import { getSnapshot } from "mobx-state-tree"; import React from "react"; -import { Page } from "../components/Page"; -import { initStore, IStore } from "../store"; +import { SampleComponent } from "../components/SampleComponent"; -interface IOwnProps { - isServer:boolean; - initialState:IStore; -} - -class Counter extends React.Component { - public static getInitialProps ({ req }) { - const isServer = !!req; - const store = initStore(isServer); - return { initialState: getSnapshot(store), isServer }; - } - - private store:IStore; - - constructor (props) { - super(props); - this.store = initStore(props.isServer, props.initialState) as IStore; - } - - public render () { +class IndexPage extends React.Component { + public render() { return ( - - - + ); } } -export default Counter; +export default IndexPage; diff --git a/examples/with-mobx-state-tree-typescript/pages/other.tsx b/examples/with-mobx-state-tree-typescript/pages/other.tsx index 2314d11b..ebaf0858 100644 --- a/examples/with-mobx-state-tree-typescript/pages/other.tsx +++ b/examples/with-mobx-state-tree-typescript/pages/other.tsx @@ -1,35 +1,12 @@ -import { Provider } from "mobx-react"; -import { getSnapshot } from "mobx-state-tree"; import React from "react"; -import { Page } from "../components/Page"; -import { initStore, IStore } from "../store"; - -interface IOwnProps { - isServer:boolean; - initialState:IStore; -} - -class Counter extends React.Component { - public static getInitialProps ({ req }) { - const isServer = !!req; - const store = initStore(isServer); - return { initialState: getSnapshot(store), isServer }; - } - - private store:IStore; - - constructor(props) { - super(props); - this.store = initStore(props.isServer, props.initialState) as IStore; - } +import { SampleComponent } from "../components/SampleComponent"; +class OtherPage extends React.Component { public render() { return ( - - - + ); } } -export default Counter; +export default OtherPage; diff --git a/examples/with-mobx-state-tree-typescript/server.ts b/examples/with-mobx-state-tree-typescript/server.ts deleted file mode 100644 index 66f73b3c..00000000 --- a/examples/with-mobx-state-tree-typescript/server.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { createServer } from "http"; -import mobxReact from "mobx-react"; -import next from "next"; -import { parse } from "url"; - -const envPort = parseInt(process.env.PORT as string, 10) || 3000; -const dev = process.env.NODE_ENV !== "production"; - -mobxReact.useStaticRendering(true); - -const app = next({ dev }); -const handle = app.getRequestHandler(); - -app.prepare().then(() => { - createServer((req, res) => { - const parsedUrl = parse(req.url as string, true); - handle(req, res, parsedUrl) - .catch((error) => { throw(error); }); - }).listen((port, err) => { - if (err) { - throw err; - } - console.log(`> Ready on http://localhost:${port}`); - }); -}).catch((error) => { throw(error); }); diff --git a/examples/with-mobx-state-tree-typescript/store.ts b/examples/with-mobx-state-tree-typescript/stores/store.ts similarity index 65% rename from examples/with-mobx-state-tree-typescript/store.ts rename to examples/with-mobx-state-tree-typescript/stores/store.ts index 388a3494..16915b87 100644 --- a/examples/with-mobx-state-tree-typescript/store.ts +++ b/examples/with-mobx-state-tree-typescript/stores/store.ts @@ -1,9 +1,10 @@ -import { applySnapshot, Instance, IStateTreeNode, SnapshotIn, SnapshotOut, types } from "mobx-state-tree"; +import { applySnapshot, Instance, SnapshotIn, SnapshotOut, types } from "mobx-state-tree"; -let store:IStateTreeNode = null as any; +let store:IStore = null as any; const Store = types .model({ + foo: types.number, lastUpdate: types.Date, light: false, }) @@ -11,8 +12,8 @@ const Store = types 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 + // 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(); @@ -32,12 +33,12 @@ type IStore = Instance; type IStoreSnapshotIn = SnapshotIn; type IStoreSnapshotOut = SnapshotOut; -const initStore = (isServer, snapshot = null) => { +const initializeStore = (isServer, snapshot = null) => { if (isServer) { - store = Store.create({ lastUpdate: Date.now() }); + store = Store.create({ foo:6, lastUpdate: Date.now() }); } if (store as any === null) { - store = Store.create({ lastUpdate: Date.now() }); + store = Store.create({ foo:6, lastUpdate: Date.now() }); } if (snapshot) { applySnapshot(store, snapshot); @@ -45,4 +46,4 @@ const initStore = (isServer, snapshot = null) => { return store; }; -export { initStore, IStore, IStoreSnapshotIn, IStoreSnapshotOut }; +export { initializeStore, IStore, IStoreSnapshotIn, IStoreSnapshotOut }; diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md index c240b50e..359c9a4d 100644 --- a/examples/with-mobx-state-tree/README.md +++ b/examples/with-mobx-state-tree/README.md @@ -68,6 +68,4 @@ To pass the initial timestamp from the server to the client we pass it as a prop The trick here for supporting universal mobx is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js` -The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. - -As far as how this example differs from the `with-mobx` example, `mobx-state-tree` requires that any changes to the observable data are sent as actions, which are defined on the model in `server.js`. The snapshot feature, while not very useful in this particular case, makes client-side rehydration of the state amazingly easy. Any changes that are made to the store in `getInitialProps` will be refreshed instantly when that page is loaded on the client. +The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. \ No newline at end of file diff --git a/examples/with-mobx-state-tree/components/Page.js b/examples/with-mobx-state-tree/components/SampleComponent.js similarity index 83% rename from examples/with-mobx-state-tree/components/Page.js rename to examples/with-mobx-state-tree/components/SampleComponent.js index d31fcf44..3ce342d2 100644 --- a/examples/with-mobx-state-tree/components/Page.js +++ b/examples/with-mobx-state-tree/components/SampleComponent.js @@ -3,8 +3,9 @@ import Link from 'next/link' import { inject, observer } from 'mobx-react' import Clock from './Clock' -@inject('store') @observer -class Page extends React.Component { +@inject('store') +@observer +class SampleComponent extends React.Component { componentDidMount () { this.props.store.start() } @@ -26,4 +27,4 @@ class Page extends React.Component { } } -export default Page +export default SampleComponent diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json index 495e28c1..207fb909 100644 --- a/examples/with-mobx-state-tree/package.json +++ b/examples/with-mobx-state-tree/package.json @@ -1,21 +1,21 @@ { - "name": "with-mobx", + "name": "with-mobx-state-tree", "version": "1.0.0", "scripts": { - "dev": "node server.js", + "dev": "next", "build": "next build", - "start": "NODE_ENV=production node server.js" + "start": "next start" }, "dependencies": { - "mobx": "^5.1.2", - "mobx-react": "^5.2.8", - "mobx-state-tree": "^3.4.0", + "mobx": "3.3.1", + "mobx-react": "^4.0.4", + "mobx-state-tree": "1.0.1", "next": "latest", "react": "^16.0.0", "react-dom": "^16.0.0" }, - "license": "ISC", "devDependencies": { - "@babel/plugin-proposal-decorators": "7.1.0" - } + "@babel/plugin-proposal-decorators": "^7.1.2" + }, + "license": "ISC" } diff --git a/examples/with-mobx-state-tree/pages/_app.js b/examples/with-mobx-state-tree/pages/_app.js new file mode 100644 index 00000000..829f9f15 --- /dev/null +++ b/examples/with-mobx-state-tree/pages/_app.js @@ -0,0 +1,45 @@ +import React from 'react' +import { Provider } from 'mobx-react' +import { getSnapshot } from 'mobx-state-tree' +import App, { Container } from 'next/app' +import { initializeStore } from '../stores/store' + +export default class MyApp extends App { + static async getInitialProps ({ Component, router, ctx }) { + // + // Use getInitialProps as a step in the lifecycle when + // we can initialize our store + // + const isServer = (typeof window === 'undefined') + const store = initializeStore(isServer) + // + // Check whether the page being rendered by the App has a + // static getInitialProps method and if so call it + // + let pageProps = {} + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx) + } + return { + initialState: getSnapshot(store), + isServer, + pageProps + } + } + + constructor (props) { + super(props) + this.store = initializeStore(props.isServer, props.initialState) + } + + render () { + const { Component, pageProps } = this.props + return ( + + + + + + ) + } +} diff --git a/examples/with-mobx-state-tree/pages/index.js b/examples/with-mobx-state-tree/pages/index.js index d2e24642..f16006af 100644 --- a/examples/with-mobx-state-tree/pages/index.js +++ b/examples/with-mobx-state-tree/pages/index.js @@ -1,26 +1,8 @@ import React from 'react' -import { Provider } from 'mobx-react' -import { getSnapshot } from 'mobx-state-tree' -import { initStore } from '../store' -import Page from '../components/Page' +import SampleComponent from '../components/SampleComponent' -export default class Counter extends React.Component { - static getInitialProps ({ req }) { - const isServer = !!req - const store = initStore(isServer) - return { initialState: getSnapshot(store), isServer } - } - - constructor (props) { - super(props) - this.store = initStore(props.isServer, props.initialState) - } - - render () { - return ( - - - - ) - } +export default () => { + return ( + + ) } diff --git a/examples/with-mobx-state-tree/pages/other.js b/examples/with-mobx-state-tree/pages/other.js index a94d8252..97715818 100644 --- a/examples/with-mobx-state-tree/pages/other.js +++ b/examples/with-mobx-state-tree/pages/other.js @@ -1,26 +1,8 @@ import React from 'react' -import { Provider } from 'mobx-react' -import { getSnapshot } from 'mobx-state-tree' -import { initStore } from '../store' -import Page from '../components/Page' +import SampleComponent from '../components/SampleComponent' -export default class Counter extends React.Component { - static getInitialProps ({ req }) { - const isServer = !!req - const store = initStore(isServer) - return { initialState: getSnapshot(store), isServer } - } - - constructor (props) { - super(props) - this.store = initStore(props.isServer, props.initialState) - } - - render () { - return ( - - - - ) - } +export default () => { + return ( + + ) } diff --git a/examples/with-mobx-state-tree/server.js b/examples/with-mobx-state-tree/server.js deleted file mode 100644 index bf641110..00000000 --- a/examples/with-mobx-state-tree/server.js +++ /dev/null @@ -1,21 +0,0 @@ -const port = parseInt(process.env.PORT, 10) || 3000 -const dev = process.env.NODE_ENV !== 'production' - -const { createServer } = require('http') -const { parse } = require('url') -const next = require('next') -const mobxReact = require('mobx-react') -const app = next({ dev }) -const handle = app.getRequestHandler() - -mobxReact.useStaticRendering(true) - -app.prepare().then(() => { - createServer((req, res) => { - const parsedUrl = parse(req.url, true) - handle(req, res, parsedUrl) - }).listen(port, err => { - if (err) throw err - console.log(`> Ready on http://localhost:${port}`) - }) -}) diff --git a/examples/with-mobx-state-tree/store.js b/examples/with-mobx-state-tree/stores/store.js similarity index 93% rename from examples/with-mobx-state-tree/store.js rename to examples/with-mobx-state-tree/stores/store.js index 798e5c89..b9cb25ee 100644 --- a/examples/with-mobx-state-tree/store.js +++ b/examples/with-mobx-state-tree/stores/store.js @@ -29,7 +29,7 @@ const Store = types return { start, stop, update } }) -export function initStore (isServer, snapshot = null) { +export function initializeStore (isServer, snapshot = null) { if (isServer) { store = Store.create({ lastUpdate: Date.now() }) }