Add with-mobx-keystone-typescript example (#9844)

* add with-mobx-keystone-typescript example

* Use latest Next.js and removed gitignore

* Fixed my suggestions

* Enabled strict mode and simplified _app

Co-authored-by: Luis Alvarez D. <luis@zeit.co>

examples/with-mobx-keystone-typescript/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
+}

examples/with-mobx-keystone-typescript/README.md

@@ -0,0 +1,114 @@
+# mobx-keystone example
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-mobx-keystone-typescript)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app
+# or
+yarn create next-app --example with-mobx-keystone-typescript with-mobx-keystone-typescript-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-mobx-keystone-typescript
+cd with-mobx-keystone-typescript
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## Notes
+
+This example is a typescript and mobx-keysone port of the [with-redux](https://github.com/zeit/next.js/tree/master/examples/with-redux) example. MobX support has been implemented using React Hooks. Decorator support is activated by adding a `.babelrc` file at the root of the project:
+
+```json
+{
+  "presets": ["next/babel"],
+  "plugins": ["transform-decorators-legacy"]
+}
+```
+
+## The idea behind the example
+
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. This is just a way you can do it but it's not the only one.
+
+In this example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color than the client one.
+
+![](http://i.imgur.com/JCxtWSj.gif)
+
+Our page is located at `pages/index.tsx` so it will map the route `/`. To get the initial data for rendering we are implementing the static method `getInitialProps`, initializing the `mobx-keystone` store and returning the initial timestamp to be rendered. The root component for the render method is a React context provider that allows us to send the store down to children components so they can access to the state when required.
+
+To pass the initial timestamp from the server to the client we pass it as a prop called `lastUpdate` so then it's available when the client takes over.
+
+## Implementation
+
+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.ts`
+
+After initializing the store (and possibly making changes such as fetching data), `getInitialProps` must stringify the store in order to pass it as props to the client. `mobx-keystone` comes out of the box with a handy method for doing this called `getSnapshot`. The snapshot is passed down to `StoreProvider` via `snapshot` prop where it's used to rehydrate `RootStore` and provide context with `StoreContext`
+
+```tsx
+export const StoreContext = createContext<RootStore | null>(null)
+
+export const StoreProvider: FC<{ snapshot?: SnapshotInOf<RootStore> }> = ({
+  children,
+  snapshot,
+}) => {
+  const [ctxStore] = useState(() => initStore(snapshot))
+  return (
+    <StoreContext.Provider value={ctxStore}>{children}</StoreContext.Provider>
+  )
+}
+```
+
+The store is accessible at any depth by using the StoreContext or `useStore` hook
+
+```tsx
+export function useStore() {
+  const store = useContext(StoreContext)
+
+  if (!store) {
+    // this is especially useful in TypeScript so you don't need to be checking for null all the time
+    throw new Error('useStore must be used within a StoreProvider.')
+  }
+
+  return store
+}
+```
+
+The clock, under `components/Clock.tsx`, reacts to changes in the observable `store` by means of the `useObserver` hook.
+
+```tsx
+<div>
+  //...
+  {useObserver(() => (
+    <Clock lastUpdate={store.lastUpdate} light={store.light} />
+  ))}
+  //...
+</div>
+```

examples/with-mobx-keystone-typescript/components/Clock.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react'
+
+import { RootStore } from '../store'
+
+const format = (t: Date) =>
+  `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}`
+const pad = (n: number) => (n < 10 ? `0${n}` : n)
+
+interface Props extends Pick<RootStore, 'lastUpdate' | 'light'> {}
+
+const Clock: FC<Props> = props => {
+  const divStyle = {
+    backgroundColor: props.light ? '#999' : '#000',
+    color: '#82FA58',
+    display: 'inline-block',
+    font: '50px menlo, monaco, monospace',
+    padding: '15px',
+  }
+  return (
+    <div style={divStyle}>{format(new Date(props.lastUpdate as number))}</div>
+  )
+}
+
+export { Clock }

examples/with-mobx-keystone-typescript/components/Sample.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, FC } from 'react'
+import Link from 'next/link'
+import { useObserver } from 'mobx-react-lite'
+
+import { useStore } from '../store'
+import { Clock } from './Clock'
+
+interface Props {
+  linkTo: string
+}
+
+export const Sample: FC<Props> = props => {
+  const store = useStore()
+
+  useEffect(() => {
+    store.start()
+    return () => store.stop()
+  }, [store])
+
+  return (
+    <div>
+      <h1>Clock</h1>
+
+      {useObserver(() => (
+        <Clock lastUpdate={store.lastUpdate} light={store.light} />
+      ))}
+      <nav>
+        <Link href={props.linkTo}>
+          <a>Navigate</a>
+        </Link>
+      </nav>
+    </div>
+  )
+}

examples/with-mobx-keystone-typescript/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/with-mobx-keystone-typescript/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "with-mobx-keystone-typescript",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "mobx": "^5.15.1",
+    "mobx-keystone": "^0.30.0",
+    "mobx-react-lite": "^1.5.2",
+    "next": "latest",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "typescript": "^3.7.4"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.3.0",
+    "@types/node": "^13.1.1",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4"
+  },
+  "license": "ISC"
+}

examples/with-mobx-keystone-typescript/pages/_app.tsx

@@ -0,0 +1,30 @@
+import { AppContext } from 'next/app'
+import { getSnapshot } from 'mobx-keystone'
+import { StoreProvider, initStore } from '../store'
+
+export default function App({ Component, pageProps, initialState }: any) {
+  return (
+    <StoreProvider snapshot={initialState}>
+      <Component {...pageProps} />
+    </StoreProvider>
+  )
+}
+
+App.getInitialProps = async ({ Component, ctx }: AppContext) => {
+  //
+  // Use getInitialProps as a step in the lifecycle when
+  // we can initialize our store
+  //
+  const store = initStore()
+
+  //
+  // 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), pageProps }
+}

examples/with-mobx-keystone-typescript/pages/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { NextPage } from 'next'
+
+import { Sample } from '../components/Sample'
+
+const IndexPage: NextPage = () => {
+  return <Sample linkTo="/other" />
+}
+
+export default IndexPage

examples/with-mobx-keystone-typescript/pages/other.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { NextPage } from 'next'
+
+import { Sample } from '../components/Sample'
+
+const OtherPage: NextPage = () => {
+  return <Sample linkTo="/" />
+}
+
+export default OtherPage

examples/with-mobx-keystone-typescript/store/index.tsx

@@ -0,0 +1,57 @@
+import { FC, createContext, useState, useContext } from 'react'
+import { useStaticRendering } from 'mobx-react-lite'
+import {
+  registerRootStore,
+  isRootStore,
+  SnapshotInOf,
+  fromSnapshot,
+} from 'mobx-keystone'
+
+import { RootStore } from './root'
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+useStaticRendering(typeof window === 'undefined')
+
+let store: RootStore | null = null
+
+export const initStore = (snapshot?: SnapshotInOf<RootStore>) => {
+  if (typeof window === 'undefined') {
+    store = new RootStore({})
+  }
+  if (!store) {
+    store = new RootStore({})
+  }
+
+  if (snapshot) {
+    store = fromSnapshot<RootStore>(snapshot)
+  }
+
+  if (!isRootStore(store)) registerRootStore(store)
+
+  return store
+}
+
+export const StoreContext = createContext<RootStore | null>(null)
+
+export const StoreProvider: FC<{ snapshot?: SnapshotInOf<RootStore> }> = ({
+  children,
+  snapshot,
+}) => {
+  const [ctxStore] = useState(() => initStore(snapshot))
+  return (
+    <StoreContext.Provider value={ctxStore}>{children}</StoreContext.Provider>
+  )
+}
+
+export function useStore() {
+  const store = useContext(StoreContext)
+
+  if (!store) {
+    // this is especially useful in TypeScript so you don't need to be checking for null all the time
+    throw new Error('useStore must be used within a StoreProvider.')
+  }
+
+  return store
+}
+
+export { RootStore }

examples/with-mobx-keystone-typescript/store/root.ts

@@ -0,0 +1,32 @@
+import { Model, model, prop, modelAction, timestampAsDate } from 'mobx-keystone'
+
+@model('store/root')
+class RootStore extends Model({
+  foo: prop<number | null>(0),
+  lastUpdate: prop<number | null>(new Date().getTime()),
+  light: prop(false),
+}) {
+  timer!: ReturnType<typeof setInterval>
+
+  @timestampAsDate('lastUpdate')
+  lastUpdateDate!: Date
+
+  @modelAction
+  start() {
+    this.timer = setInterval(() => {
+      this.update()
+    }, 1000)
+  }
+  @modelAction
+  update() {
+    this.lastUpdate = Date.now()
+    this.light = true
+  }
+
+  @modelAction
+  stop() {
+    clearInterval(this.timer)
+  }
+}
+
+export { RootStore }

examples/with-mobx-keystone-typescript/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "keyofStringsOnly": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "experimentalDecorators": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}