diff --git a/examples/with-mobx-state-tree-typescript/.babelrc b/examples/with-mobx-state-tree-typescript/.babelrc deleted file mode 100644 index 1bbd4ca8f2cd9..0000000000000 --- a/examples/with-mobx-state-tree-typescript/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] -} diff --git a/examples/with-mobx-state-tree-typescript/.gitignore b/examples/with-mobx-state-tree-typescript/.gitignore deleted file mode 100644 index c87c9b392c020..0000000000000 --- a/examples/with-mobx-state-tree-typescript/.gitignore +++ /dev/null @@ -1,36 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts diff --git a/examples/with-mobx-state-tree-typescript/README.md b/examples/with-mobx-state-tree-typescript/README.md index 5c169956f27c4..ee22d04900168 100644 --- a/examples/with-mobx-state-tree-typescript/README.md +++ b/examples/with-mobx-state-tree-typescript/README.md @@ -1,35 +1,3 @@ # MobX State Tree with TypeScript 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. - -In this example we are going to display a digital clock that updates every second. The first render is happening in the server and the date will be `00:00:00`, then the browser will take over and it will start updating the date. - -To illustrate SSG and SSR, go to `/ssg` and `/ssr`, those pages are using Next.js data fetching methods to get the date in the server and return it as props to the page, and then the browser will hydrate the store and continue updating the date. - -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. - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript) - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript&project-name=with-mobx-state-tree-typescript&repository-name=with-mobx-state-tree-typescript) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: - -```bash -npx create-next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app -``` - -```bash -yarn create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app -``` - -```bash -pnpm create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app -``` - -Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). +**Note:** This example has been moved to [examples/with-mobx-state-tree](../with-mobx-state-tree/) diff --git a/examples/with-mobx-state-tree-typescript/next-env.d.ts b/examples/with-mobx-state-tree-typescript/next-env.d.ts deleted file mode 100644 index 4f11a03dc6cc3..0000000000000 --- a/examples/with-mobx-state-tree-typescript/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-mobx-state-tree-typescript/package.json b/examples/with-mobx-state-tree-typescript/package.json deleted file mode 100644 index 7e05b342b5063..0000000000000 --- a/examples/with-mobx-state-tree-typescript/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "private": true, - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "mobx": "^5.9.0", - "mobx-react": "^5.4.3", - "mobx-react-lite": "^2.0.7", - "mobx-state-tree": "^3.11.0", - "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "typescript": "^3.0.1" - }, - "devDependencies": { - "@babel/core": "7.14.3", - "@babel/plugin-proposal-decorators": "^7.3.0", - "@types/node": "^14.0.23", - "@types/react": "^16.4.12" - } -} diff --git a/examples/with-mobx-state-tree/.babelrc b/examples/with-mobx-state-tree/.babelrc deleted file mode 100644 index 1bbd4ca8f2cd9..0000000000000 --- a/examples/with-mobx-state-tree/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] -} diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md index af8e00e1306e6..5c169956f27c4 100644 --- a/examples/with-mobx-state-tree/README.md +++ b/examples/with-mobx-state-tree/README.md @@ -1,4 +1,4 @@ -# MobX State Tree example +# MobX State Tree with TypeScript 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. @@ -12,24 +12,24 @@ The clock, under `components/Clock.js`, has access to the state using the `injec ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree) +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree&project-name=with-mobx-state-tree&repository-name=with-mobx-state-tree) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript&project-name=with-mobx-state-tree-typescript&repository-name=with-mobx-state-tree-typescript) ## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash -npx create-next-app --example with-mobx-state-tree with-mobx-state-tree-app +npx create-next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app ``` ```bash -yarn create next-app --example with-mobx-state-tree with-mobx-state-tree-app +yarn create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app ``` ```bash -pnpm create next-app --example with-mobx-state-tree with-mobx-state-tree-app +pnpm create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app ``` Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-mobx-state-tree/components/Clock.js b/examples/with-mobx-state-tree/components/Clock.js deleted file mode 100644 index cfbddeae67ab1..0000000000000 --- a/examples/with-mobx-state-tree/components/Clock.js +++ /dev/null @@ -1,25 +0,0 @@ -export default function Clock(props) { - return ( -
- {format(new Date(props.lastUpdate))} - -
- ) -} - -const format = (t) => - `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}` - -const pad = (n) => (n < 10 ? `0${n}` : n) diff --git a/examples/with-mobx-state-tree-typescript/components/Clock.tsx b/examples/with-mobx-state-tree/components/Clock.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/components/Clock.tsx rename to examples/with-mobx-state-tree/components/Clock.tsx diff --git a/examples/with-mobx-state-tree/components/SampleComponent.js b/examples/with-mobx-state-tree/components/SampleComponent.js deleted file mode 100644 index 6478d9319aba8..0000000000000 --- a/examples/with-mobx-state-tree/components/SampleComponent.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import Link from 'next/link' -import { inject, observer } from 'mobx-react' -import Clock from './Clock' - -@inject('store') -@observer -class SampleComponent extends React.Component { - componentDidMount() { - this.props.store.start() - } - - componentWillUnmount() { - this.props.store.stop() - } - - render() { - return ( -
-

{this.props.title}

- - -
- ) - } -} - -export default SampleComponent diff --git a/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx b/examples/with-mobx-state-tree/components/SampleComponent.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx rename to examples/with-mobx-state-tree/components/SampleComponent.tsx diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json index 819eed5e194c8..0a2de828056cb 100644 --- a/examples/with-mobx-state-tree/package.json +++ b/examples/with-mobx-state-tree/package.json @@ -6,15 +6,17 @@ "start": "next start" }, "dependencies": { - "mobx": "3.3.1", - "mobx-react": "^4.0.4", - "mobx-state-tree": "1.0.1", + "mobx": "^6.6.1", + "mobx-react": "^7.5.2", + "mobx-react-lite": "^3.4.0", + "mobx-state-tree": "^5.1.6", "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { - "@babel/core": "7.14.5", - "@babel/plugin-proposal-decorators": "^7.1.2" + "@types/node": "^18.7.15", + "@types/react": "^18.0.18", + "typescript": "^4.8.2" } } diff --git a/examples/with-mobx-state-tree/pages/_app.js b/examples/with-mobx-state-tree/pages/_app.js deleted file mode 100644 index e75b81d85556a..0000000000000 --- a/examples/with-mobx-state-tree/pages/_app.js +++ /dev/null @@ -1,12 +0,0 @@ -import { Provider } from 'mobx-react' -import { useStore } from '../store' - -export default function App({ Component, pageProps }) { - const store = useStore(pageProps.initialState) - - return ( - - - - ) -} diff --git a/examples/with-mobx-state-tree-typescript/pages/_app.tsx b/examples/with-mobx-state-tree/pages/_app.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/_app.tsx rename to examples/with-mobx-state-tree/pages/_app.tsx diff --git a/examples/with-mobx-state-tree/pages/index.js b/examples/with-mobx-state-tree/pages/index.js deleted file mode 100644 index 00b3a426d77df..0000000000000 --- a/examples/with-mobx-state-tree/pages/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import SampleComponent from '../components/SampleComponent' - -export default function Home() { - return -} diff --git a/examples/with-mobx-state-tree-typescript/pages/index.tsx b/examples/with-mobx-state-tree/pages/index.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/index.tsx rename to examples/with-mobx-state-tree/pages/index.tsx diff --git a/examples/with-mobx-state-tree/pages/other.js b/examples/with-mobx-state-tree/pages/other.js deleted file mode 100644 index 64baaaeeddfba..0000000000000 --- a/examples/with-mobx-state-tree/pages/other.js +++ /dev/null @@ -1,5 +0,0 @@ -import SampleComponent from '../components/SampleComponent' - -export default function Other() { - return -} diff --git a/examples/with-mobx-state-tree-typescript/pages/other.tsx b/examples/with-mobx-state-tree/pages/other.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/other.tsx rename to examples/with-mobx-state-tree/pages/other.tsx diff --git a/examples/with-mobx-state-tree/pages/ssg.js b/examples/with-mobx-state-tree/pages/ssg.js deleted file mode 100644 index 4191006042e60..0000000000000 --- a/examples/with-mobx-state-tree/pages/ssg.js +++ /dev/null @@ -1,17 +0,0 @@ -import { getSnapshot } from 'mobx-state-tree' -import SampleComponent from '../components/SampleComponent' -import { initializeStore } from '../store' - -export default function Ssg() { - return -} - -// If you build and start the app, the date returned here will have the same -// value for all requests, as this method gets executed at build time. -export function getStaticProps() { - const store = initializeStore() - - store.update() - - return { props: { initialState: getSnapshot(store) } } -} diff --git a/examples/with-mobx-state-tree-typescript/pages/ssg.tsx b/examples/with-mobx-state-tree/pages/ssg.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/ssg.tsx rename to examples/with-mobx-state-tree/pages/ssg.tsx diff --git a/examples/with-mobx-state-tree/pages/ssr.js b/examples/with-mobx-state-tree/pages/ssr.js deleted file mode 100644 index 8bdb3f3e50ad1..0000000000000 --- a/examples/with-mobx-state-tree/pages/ssr.js +++ /dev/null @@ -1,18 +0,0 @@ -import { getSnapshot } from 'mobx-state-tree' -import SampleComponent from '../components/SampleComponent' -import { initializeStore } from '../store' - -export default function Ssr() { - return -} - -// The date returned here will be different for every request that hits the page, -// that is because the page becomes a serverless function instead of being statically -// exported when you use `getServerSideProps` or `getInitialProps` -export function getServerSideProps() { - const store = initializeStore() - - store.update() - - return { props: { initialState: getSnapshot(store) } } -} diff --git a/examples/with-mobx-state-tree-typescript/pages/ssr.tsx b/examples/with-mobx-state-tree/pages/ssr.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/ssr.tsx rename to examples/with-mobx-state-tree/pages/ssr.tsx diff --git a/examples/with-mobx-state-tree/store.js b/examples/with-mobx-state-tree/store.js deleted file mode 100644 index 879feca16f04e..0000000000000 --- a/examples/with-mobx-state-tree/store.js +++ /dev/null @@ -1,52 +0,0 @@ -import { useMemo } from 'react' -import { types, applySnapshot } from 'mobx-state-tree' - -let store - -const Store = types - .model({ - lastUpdate: types.Date, - light: false, - }) - .actions((self) => { - let timer - function start() { - timer = setInterval(() => { - // mobx-state-tree doesn't allow anonymous callbacks changing data - // pass off to another action instead - self.update() - }, 1000) - } - - function update() { - self.lastUpdate = Date.now() - self.light = true - } - - function stop() { - clearInterval(timer) - } - - return { start, stop, update } - }) - -export function initializeStore(snapshot = null) { - const _store = store ?? Store.create({ lastUpdate: 0 }) - - // If your page has Next.js data fetching methods that use a Mobx store, it will - // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details - if (snapshot) { - applySnapshot(_store, snapshot) - } - // For SSG and SSR always create a new store - if (typeof window === 'undefined') return _store - // Create the store once in the client - if (!store) store = _store - - return store -} - -export function useStore(initialState) { - const store = useMemo(() => initializeStore(initialState), [initialState]) - return store -} diff --git a/examples/with-mobx-state-tree-typescript/store.ts b/examples/with-mobx-state-tree/store.ts similarity index 100% rename from examples/with-mobx-state-tree-typescript/store.ts rename to examples/with-mobx-state-tree/store.ts diff --git a/examples/with-mobx-state-tree-typescript/tsconfig.json b/examples/with-mobx-state-tree/tsconfig.json similarity index 93% rename from examples/with-mobx-state-tree-typescript/tsconfig.json rename to examples/with-mobx-state-tree/tsconfig.json index b5d1e2f17bbe8..e1e1e26feec7c 100644 --- a/examples/with-mobx-state-tree-typescript/tsconfig.json +++ b/examples/with-mobx-state-tree/tsconfig.json @@ -13,7 +13,7 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "experimentalDecorators": true + "incremental": true }, "exclude": ["node_modules"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]