diff --git a/client/next-dev.js b/client/next-dev.js index 454365e3d276b..f46e885524f2f 100644 --- a/client/next-dev.js +++ b/client/next-dev.js @@ -1,6 +1,6 @@ import 'react-hot-loader/patch' import * as next from './next' - -module.exports = next +import { requireModule } from '../lib/eval-script' window.next = next +module.exports = requireModule diff --git a/client/next.js b/client/next.js index 7b224536d46f8..00333dd1b5236 100644 --- a/client/next.js +++ b/client/next.js @@ -4,24 +4,33 @@ import HeadManager from './head-manager' import { rehydrate } from '../lib/css' import Router from '../lib/router' import App from '../lib/app' -import evalScript from '../lib/eval-script' +import evalScript, { requireModule } from '../lib/eval-script' const { __NEXT_DATA__: { component, errorComponent, props, ids, err } } = window -const Component = evalScript(component).default -const ErrorComponent = evalScript(errorComponent).default +document.addEventListener('DOMContentLoaded', () => { + const Component = evalScript(component).default + const ErrorComponent = evalScript(errorComponent).default -export const router = new Router(window.location.href, { - Component, - ErrorComponent, - ctx: { err } -}) + const router = new Router(window.location.href, { + Component, + ErrorComponent, + ctx: { err } + }) + + // This it to support error handling in the dev time with hot code reload. + if (window.next) { + window.next.router = router + } -const headManager = new HeadManager() -const container = document.getElementById('__next') -const appProps = { Component, props, router, headManager } + const headManager = new HeadManager() + const container = document.getElementById('__next') + const appProps = { Component, props, router, headManager } + + rehydrate(ids) + render(createElement(App, appProps), container) +}) -rehydrate(ids) -render(createElement(App, appProps), container) +module.exports = requireModule diff --git a/examples/shared-modules/README.md b/examples/shared-modules/README.md new file mode 100644 index 0000000000000..1e629fd9b8107 --- /dev/null +++ b/examples/shared-modules/README.md @@ -0,0 +1,13 @@ +# Example app using shared modules + +This example features: + +* An app with two pages which has a common Counter component +* That Counter component maintain the counter inside its module. + +## How to run it + +```sh +npm install +npm run dev +``` diff --git a/examples/shared-modules/components/Counter.js b/examples/shared-modules/components/Counter.js new file mode 100644 index 0000000000000..959d8ae96f22d --- /dev/null +++ b/examples/shared-modules/components/Counter.js @@ -0,0 +1,19 @@ +import React from 'react' + +let count = 0 + +export default class Counter extends React.Component { + add () { + count += 1 + this.forceUpdate() + } + + render () { + return ( +
Count is: {count}
+ +This is the about page.
+HOME PAGE is here!
+