Expose mechanism to monitor render events (#2655)

* Allow custom clientBootstrap entrypoint

This allows for customization of the client global bootstrap.

* Expose render event emitter to client

* Include client entry point in npm package

client.js

@@ -0,0 +1 @@
+module.exports = require('./dist/client/index')

client/index.js

@@ -56,6 +56,8 @@ let ErrorDebugComponent
 let Component
 let stripAnsi = (s) => s
 
+export const emitter = new EventEmitter()
+
 export default async ({ ErrorDebugComponent: passedDebugComponent, stripAnsi: passedStripAnsi } = {}) => {
   // Wait for all the dynamic chunks to get loaded
   for (const chunkName of chunks) {
@@ -80,8 +82,6 @@ export default async ({ ErrorDebugComponent: passedDebugComponent, stripAnsi: pa
     err
   })
 
-  const emitter = new EventEmitter()
-
   router.subscribe(({ Component, props, hash, err }) => {
     render({ Component, props, err, hash, emitter })
   })
@@ -132,7 +132,7 @@ export async function renderError (error) {
   }
 }
 
-async function doRender ({ Component, props, hash, err, emitter }) {
+async function doRender ({ Component, props, hash, err, emitter: emitterProp = emitter }) {
   if (!props && Component &&
     Component !== ErrorComponent &&
     lastAppProps.Component === ErrorComponent) {
@@ -141,10 +141,6 @@ async function doRender ({ Component, props, hash, err, emitter }) {
     props = await loadGetInitialProps(Component, { err, pathname, query, asPath })
   }
 
-  if (emitter) {
-    emitter.emit('before-reactdom-render', { Component, ErrorComponent })
-  }
-
   Component = Component || lastAppProps.Component
   props = props || lastAppProps.props
 
@@ -152,13 +148,13 @@ async function doRender ({ Component, props, hash, err, emitter }) {
   // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
   lastAppProps = appProps
 
+  emitterProp.emit('before-reactdom-render', { Component, ErrorComponent, appProps })
+
   // We need to clear any existing runtime error messages
   ReactDOM.unmountComponentAtNode(errorContainer)
   renderReactElement(createElement(App, appProps), appContainer)
 
-  if (emitter) {
+  emitterProp.emit('after-reactdom-render', { Component, ErrorComponent, appProps })
-    emitter.emit('after-reactdom-render', { Component, ErrorComponent })
-  }
 }
 
 let isInitialRender = true

package.json

@@ -10,6 +10,7 @@
   "files": [
     "dist",
     "babel.js",
+    "client.js",
     "link.js",
     "css.js",
     "head.js",

server/build/webpack.js

@@ -43,6 +43,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet
     const entries = {
       'main.js': [
         ...defaultEntries,
+        ...config.clientBootstrap || [],
         mainJS
       ]
     }