update with-flow example (#4835)

Changes: * updated packages * moved the content of `layout` to `_app.js` and created simple `Page` component * replaced `import * as React` because it is not necessary to import everything * moved `next.js.flow` to `flow-typed` as it is default directory for library definitions * updated the gif

update with-flow example (#4835)
Changes: * updated packages * moved the content of `layout` to `_app.js` and created simple `Page` component * replaced `import * as React` because it is not necessary to import everything * moved `next.js.flow` to `flow-typed` as it is default directory for library definitions * updated the gif
c090a57e · Tomek · Tim Neutkens · d1fbcfe5 · c090a57e · c090a57e
10 changed file
--- a/examples/with-flow/.flowconfig
+++ b/examples/with-flow/.flowconfig
@@ -4,6 +4,5 @@
 [include]

 [libs]
-types/

 [options]
--- a/examples/with-flow/components/Page.js
+++ b/examples/with-flow/components/Page.js
+// @flow
+import React, { type Node } from 'react'
+import Head from 'next/head'
+
+type Props = {
+  children: Node,
+  title?: string
+}
+
+export default ({ children, title = 'This is the default title' }: Props) => (
+  <section>
+    <Head>
+      <title>{title}</title>
+    </Head>
+    {children}
+  </section>
+)
--- a/examples/with-flow/components/layout.js
+++ b/examples/with-flow/components/layout.js
-// @flow
-
-import * as React from 'react'
-import Link from 'next/link'
-import Head from 'next/head'
-
-type Props = {
-  children?: React.Node,
-  title?: string
-}
-
-export default ({children, title = 'This is the default title'}: Props) => (
-  <div>
-    <Head>
-      <title>{title}</title>
-      <meta charSet='utf-8' />
-      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
-    </Head>
-    <header>
-      <nav>
-        <Link href='/'><a>Home</a></Link>|
-        <Link href='/about'><a>About</a></Link>|
-        <Link href='/contact'><a>Contact</a></Link>
-      </nav>
-    </header>
-    {children}
-    <footer>
-      I`m here to stay
-    </footer>
-  </div>
-)
--- a/examples/with-flow/types/next.js.flow
+++ b/examples/with-flow/types/next.js.flow
-/* @flow */
+// @flow

 declare module "next" {
  declare type NextApp = {

--- a/examples/with-flow/package.json
+++ b/examples/with-flow/package.json
@@ -15,8 +15,8 @@
    "react-dom": "^16.0.0"
  },
  "devDependencies": {
-    "babel-eslint": "8.2.1",
+    "babel-eslint": "8.2.6",
    "babel-plugin-transform-flow-strip-types": "6.22.0",
-    "flow-bin": "0.64.0"
+    "flow-bin": "0.77.0"
  }
 }
--- a/examples/with-flow/pages/_app.js
+++ b/examples/with-flow/pages/_app.js
+import App, {Container} from 'next/app'
+import Link from 'next/link'
+import React from 'react'
+
+export default class MyApp extends App {
+  static async getInitialProps ({ Component, router, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return {pageProps}
+  }
+
+  render () {
+    const {Component, pageProps} = this.props
+    return (
+      <Container>
+        <header>
+          <nav>
+            <Link href='/'><a>Home</a></Link>|
+            <Link href='/about'><a>About</a></Link>|
+            <Link href='/contact'><a>Contact</a></Link>
+          </nav>
+        </header>
+
+        <Component {...pageProps} />
+
+        <footer>
+          I`m here to stay
+        </footer>
+      </Container>
+    )
+  }
+}
--- a/examples/with-flow/pages/about.js
+++ b/examples/with-flow/pages/about.js
 // @flow
-import * as React from 'react'
-import Layout from '../components/layout'
+import React from 'react'
+import Page from '../components/Page'

 export default () => (
-  <Layout title='About us'>
+  <Page title='About us'>
    <div>About us</div>
-  </Layout>
+  </Page>
 )
--- a/examples/with-flow/pages/contact.js
+++ b/examples/with-flow/pages/contact.js
 // @flow
-import * as React from 'react'
-import Layout from '../components/layout'
+import React from 'react'
+import Page from '../components/Page'

 export default () => (
-  <Layout title='Contact us'>
+  <Page title='Contact us'>
    <div>Contact</div>
-  </Layout>
+  </Page>
 )
--- a/examples/with-flow/pages/index.js
+++ b/examples/with-flow/pages/index.js
 // @flow
-import * as React from 'react'
-import Layout from '../components/layout'
+import React from 'react'
+import Page from '../components/Page'

 export default () => (
-  <Layout>
-    <div>Hello World.</div>
-  </Layout>
+  <Page>
+    <div>Hello World</div>
+  </Page>
 )
--- a/examples/with-flow/with-flow.gif
+++ b/examples/with-flow/with-flow.gif