Merge v3-beta into master (#2809)

* Add examples/with-redux-code-splitting. (#2721)

* #1757 Relay Modern Example (#2696)

* Add ReasonML example (#2640)

* Add ReasonML example

* Add a gitignore specifically for the reasonml example

* Allow custom className for <Main /> (#2802)

* 3.0.2

* Remove beta information from the README.

* 3.0.3

* Remove unnecessary lookup in example with emotion (#2731)

* Document SCSS/Less (#2742)

* Document SCSS/Less

* Add missing word

* Add docs for examples dir

* Add extra example

* uppercase J

* Add with pkg example (#2751)

* Add custom server micro example (#2750)

* Ease running multiple examples at the same time with process.env.PORT (#2753)

* Add line-height rule for error page h2 (#2761)

* Add support for fetching multiple translation files (#2743)

* Add support for fetching multiple translation files

* Cleanup

* Clear missed interval (#2611)

* clear missed interval

* remove trailing whitespace

* Relay Modern Example (#1757) (#2773)

* Simplification of Relay Modern Example (#1757) (#2776)

* Use deterministic names for dynamic import (#2788)

* Always use the same name for the same dynamic import.

* Add unit tests for the modulePath generation.

* Allow tests to run correctly on Windows.

* Make the chunk name a bit pretty.

* Fix tests to run on Windows.

* 3.0.4

* Revert "Make the chunk name a bit pretty." (#2792)

This reverts commit 0c9e8cf.

* 3.0.5

* Use _ as the divider for dynamic import name splitter. (#2793)

Using - gives us some weird webpack errors.

* 3.0.6

* next/dynamic Error Message Tweaks (#2798)

* Fixed issue (#2804)

#2800

* docs(material-ui): move the source code to Material-UI repository (#2808)

examples/with-reasonml/.gitignore

@@ -0,0 +1,2 @@
+bs
+.merlin

examples/with-reasonml/README.md

@@ -0,0 +1,32 @@
+[![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-reasonml)
+# Example app using ReasonML & ReasonReact components
+
+## 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-reasonml
+cd with-reasonml
+```
+
+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 features:
+
+* An app that mixes together JavaScript and ReasonML components and functions
+* An app with two pages which has a common Counter component
+* That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime

examples/with-reasonml/bsconfig.json

@@ -0,0 +1,7 @@
+{
+  "name": "with-reasonml",
+  "sources": ["components", "pages"],
+  "bs-dependencies": ["reason-react"],
+  "reason": { "react-jsx": 2 },
+  "package-specs": ["commonjs"]
+}

examples/with-reasonml/components/Counter.re

@@ -0,0 +1,14 @@
+let component = ReasonReact.statefulComponent "Counter";
+let make _children => {
+  ...component,
+  initialState: fun () => 0,
+  render: fun self => {
+    let countMsg = "Count: " ^ (string_of_int self.state);
+    let onClick _evt {ReasonReact.state} => ReasonReact.Update (state + 1);
+
+    <div>
+      <p> (ReasonReact.stringToElement countMsg) </p>
+      <button onClick=(self.update onClick)> (ReasonReact.stringToElement "Add") </button>
+    </div>
+  }
+};

examples/with-reasonml/components/Header.re

@@ -0,0 +1,13 @@
+let component = ReasonReact.statelessComponent "Header";
+let styles = ReactDOMRe.Style.make
+  marginRight::"10px"
+  ();
+let make _children => {
+  ...component,
+  render: fun _self => {
+    <div>
+      <a href="/" style=styles> (ReasonReact.stringToElement "Home") </a>
+      <a href="/about" style=styles> (ReasonReact.stringToElement "About") </a>
+    </div>
+  }
+};

examples/with-reasonml/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "with-reasonml",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next -w",
+    "build": "next build",
+    "start": "next start -w"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "babel-plugin-bucklescript": "^0.2.3-1",
+    "bs-platform": "^1.8.1",
+    "next": "^2.4.7",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "reason-react": "^0.2.3"
+  },
+  "babel": {
+    "presets": [
+      "next/babel"
+    ],
+    "plugins": [
+      "babel-plugin-bucklescript"
+    ]
+  }
+}

examples/with-reasonml/pages/About.re

@@ -0,0 +1,15 @@
+let component = ReasonReact.statelessComponent "About";
+let make _children => {
+  ...component,
+  render: fun _self => {
+    <div>
+      <Header />
+      <p>(ReasonReact.stringToElement "This is the about page.")</p>
+      <Counter />
+    </div>
+  }
+};
+let jsComponent =
+  ReasonReact.wrapReasonForJs
+    ::component
+    (fun _jsProps => make [||])

examples/with-reasonml/pages/Index.re

@@ -0,0 +1,15 @@
+let component = ReasonReact.statelessComponent "Index";
+let make _children => {
+  ...component,
+  render: fun _self => {
+    <div>
+      <Header />
+      <p>(ReasonReact.stringToElement "HOME PAGE is here!")</p>
+      <Counter />
+    </div>
+  }
+};
+let jsComponent =
+  ReasonReact.wrapReasonForJs
+    ::component
+    (fun _jsProps => make [||])

examples/with-reasonml/pages/about.js

@@ -0,0 +1,4 @@
+import { jsComponent as About } from './about.re'
+import React from 'react'
+
+export default () => <About />

examples/with-reasonml/pages/index.js

@@ -0,0 +1,3 @@
+import { jsComponent as Index } from './index.re'
+
+export default () => <Index />

examples/with-redux-code-splitting/README.md

@@ -0,0 +1,32 @@
+
+[![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-redux-code-splitting)
+
+# Redux with code splitting example
+
+## 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-redux-code-splitting
+cd with-redux-code-splitting
+```
+
+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
+
+Redux uses single store per application and usually it causes problems for code splitting when you want to load actions and reducers used on the current page only.
+
+This example utilizes [fast-redux](https://github.com/dogada/fast-redux) to split Redux's actions and reducers across pages. In result each page's javascript bundle contains only code that is used on the page. When user navigates to a new page, its actions and reducers are connected to the single shared application store.

examples/with-redux-code-splitting/config/redux.js

@@ -0,0 +1,12 @@
+import { createStore, applyMiddleware } from 'redux'
+import { composeWithDevTools } from 'redux-devtools-extension'
+import thunkMiddleware from 'redux-thunk'
+import withRedux from 'next-redux-wrapper'
+import { rootReducer } from 'fast-redux'
+
+export const initStore = (initialState = {}) => {
+  return createStore(rootReducer, initialState,
+    composeWithDevTools(applyMiddleware(thunkMiddleware)))
+}
+
+export const reduxPage = (comp) => withRedux(initStore)(comp)

examples/with-redux-code-splitting/containers/about.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import {namespaceConfig} from 'fast-redux'
+import Link from 'next/link'
+
+const DEFAULT_STATE = {version: 1}
+
+const {actionCreator, getState: getAboutState} = namespaceConfig('about', DEFAULT_STATE)
+
+const bumpVersion = actionCreator(function bumpVersion (state, increment) {
+  return {...state, version: state.version + increment}
+})
+
+const About = ({ version, bumpVersion }) => (
+  <div>
+    <h1>About us</h1>
+    <h3>Current version: {version}</h3>
+    <p><button onClick={(e) => bumpVersion(1)}>Bump version!</button></p>
+    <Link href='/'><a>Homepage</a></Link>
+  </div>
+)
+
+function mapStateToProps (state) {
+  return getAboutState(state, 'version')
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ bumpVersion }, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(About)

examples/with-redux-code-splitting/containers/homepage.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import {namespaceConfig} from 'fast-redux'
+import Link from 'next/link'
+
+const DEFAULT_STATE = {build: 1}
+
+const {actionCreator, getState: getHomepageState} = namespaceConfig('homepage', DEFAULT_STATE)
+
+const bumpBuild = actionCreator(function bumpBuild (state, increment) {
+  return {...state, build: state.build + increment}
+})
+
+const Homepage = ({ build, bumpBuild }) => (
+  <div>
+    <h1>Homepage</h1>
+    <h3>Current build: {build}</h3>
+    <p><button onClick={(e) => bumpBuild(1)}>Bump build!</button></p>
+    <Link href='/about'><a>About Us</a></Link>
+  </div>
+)
+
+function mapStateToProps (state) {
+  return getHomepageState(state)
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ bumpBuild }, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Homepage)