diff --git a/examples/with-flow/.babelrc b/examples/with-flow/.babelrc new file mode 100644 index 0000000000000..53d70241c5c66 --- /dev/null +++ b/examples/with-flow/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + "transform-flow-strip-types" + ] +} \ No newline at end of file diff --git a/examples/with-flow/.flowconfig b/examples/with-flow/.flowconfig new file mode 100644 index 0000000000000..4a58bdcdef3eb --- /dev/null +++ b/examples/with-flow/.flowconfig @@ -0,0 +1,7 @@ +[ignore] + +[include] + +[libs] + +[options] diff --git a/examples/with-flow/README.md b/examples/with-flow/README.md new file mode 100644 index 0000000000000..1f62f1e8e6011 --- /dev/null +++ b/examples/with-flow/README.md @@ -0,0 +1,29 @@ +# Example app with [Flow](https://flowtype.org/) + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-components +cd with-flow +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows how you can use Flow, with the transform-flow-strip-types babel plugin stripping flow type annotations from your output code. + +![with-flow](with-flow.gif) \ No newline at end of file diff --git a/examples/with-flow/components/layout.js b/examples/with-flow/components/layout.js new file mode 100644 index 0000000000000..e3bbbbe87f9b8 --- /dev/null +++ b/examples/with-flow/components/layout.js @@ -0,0 +1,31 @@ +// @flow + +import type {Element} from 'React' +import Link from 'next/link' +import Head from 'next/head' + +type Props = { + children?: Element, + title?: string +} + +export default ({children, title = 'This is the default title'}: Props) => ( +
+ + {title} + + + +
+ +
+ {children} +
+ I`m here to stay +
+
+) diff --git a/examples/with-flow/package.json b/examples/with-flow/package.json new file mode 100644 index 0000000000000..0a2a19a0612d0 --- /dev/null +++ b/examples/with-flow/package.json @@ -0,0 +1,20 @@ +{ + "name": "with-flow", + "version": "1.0.0", + "license": "MIT", + "author": "Jag Reehal", + "scripts": { + "dev": "next", + "build": "next build", + "flow": "flow; test $? -eq 0 -o $? -eq 2", + "start": "next start" + }, + "dependencies": { + "next": "^2.0.0-beta" + }, + "devDependencies": { + "babel-eslint": "^7.1.1", + "babel-plugin-transform-flow-strip-types": "^6.21.0", + "flow-bin": "^0.37.4" + } +} \ No newline at end of file diff --git a/examples/with-flow/pages/about.js b/examples/with-flow/pages/about.js new file mode 100644 index 0000000000000..d522739b4f354 --- /dev/null +++ b/examples/with-flow/pages/about.js @@ -0,0 +1,9 @@ +// @flow + +import Layout from '../components/layout' + +export default () => ( + +
About us
+ +) diff --git a/examples/with-flow/pages/contact.js b/examples/with-flow/pages/contact.js new file mode 100644 index 0000000000000..332bbeed81ebe --- /dev/null +++ b/examples/with-flow/pages/contact.js @@ -0,0 +1,9 @@ +// @flow + +import Layout from '../components/layout' + +export default () => ( + +
Contact
+ +) diff --git a/examples/with-flow/pages/index.js b/examples/with-flow/pages/index.js new file mode 100644 index 0000000000000..f7b2a2f5baf74 --- /dev/null +++ b/examples/with-flow/pages/index.js @@ -0,0 +1,9 @@ +// @flow + +import Layout from '../components/layout' + +export default () => ( + +
Hello World.
+ +) diff --git a/examples/with-flow/with-flow.gif b/examples/with-flow/with-flow.gif new file mode 100644 index 0000000000000..6b8e6aef3181b Binary files /dev/null and b/examples/with-flow/with-flow.gif differ