Prep for initial stable release (#30)

* Fix to work correctly with hot module reloading

* Remove debug print; fix linter error

* Update all example dependencies

* Update all babel packages

* Fix lodash vulnerability

* Update eslint; fix linter errors

* Set version to 1.0.0-beta.1

* Fix linter and prettier errors

README.md

@@ -37,7 +37,7 @@ produce and consume CSS, it doesn't offer any built-in styles and has no
 particular opinion about how the styles end up on your page. The example below
 has a simple transition that fades pages in and out.
 
-```js
+```jsx
 import App, { Container } from 'next/app'
 import React from 'react'
 import { PageTransition } from 'next-page-transitions'
@@ -58,7 +58,7 @@ export default class MyApp extends App {
     return (
       <Container>
         <PageTransition timeout={300} classNames="page-transition">
-          <Component {...pageProps} />
+          <Component {...pageProps} key={router.route} />
         </PageTransition>
         <style jsx global>{`
           .page-transition-enter {
@@ -82,7 +82,7 @@ export default class MyApp extends App {
 }
 ```
 
-When you move to a new page, the `Component` will change, and the
+When you move to a new page, the `key` prop will change, and the
 `PageTransition` component will detect that. Instead of immediately unmounting
 the page, it will apply the `page-transition-exit` class to a wrapper around
 the page to initialize the "exit" transition, and will then apply the
@@ -94,18 +94,11 @@ the new page is mounted and a similar pair of `.page-transition-enter` and
 `page-transition-enter-active` classes will be applied. This process repeats
 every time a new page is navigated to.
 
-### Handling Context/Store changes that update props on the Component
-
-If you happen to have an architecture that allows for changes to flow into
-your page from the `_app.js` component, you may notice that transitions trigger
-on the page when the props change. To remedy this, provide a key prop on your
-Component. With Next.js there is a really great way to do this, using the router.
-
-```js
-<PageTransition classNames="page-transition" timeout={300}>
-  <Component key={this.props.router.route} {...pageProps} />
-</PageTransition>
-```
+**Note**: in previous versions of `next-page-transitions`, it wasn't necessary
+to specify the `key` prop on children of `PageTransition`. However, to make hot
+module reloading work correctly, it was necessary to make this prop required.
+Moving foward, children that don't specify a `key` prop will trigger a warning
+in the console. In the future, this may become a runtime error.
 
 ### Support for delayed enters
 
@@ -188,7 +181,7 @@ until showing the network indicator:
   }}
   loadingClassNames="loading-indicator"
 >
-  <Component {...pageProps} />
+  <Component {...pageProps} key={router.route} />
 </PageTransition>
 ```
 

examples/complex-animation/package.json

@@ -3,8 +3,9 @@
     "dev": "next dev"
   },
   "dependencies": {
-    "next": "^6.0.2",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "next": "^8.0.3",
+    "next-page-transitions": "*",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
   }
 }

examples/complex-animation/pages/_app.js

@@ -14,11 +14,11 @@ export default class MyApp extends App {
   }
 
   render() {
-    const { Component, pageProps } = this.props
+    const { Component, pageProps, router } = this.props
     return (
       <Container>
         <PageTransition timeout={500} classNames="page-transition">
-          <Component {...pageProps} />
+          <Component {...pageProps} key={router.route} />
         </PageTransition>
         <style jsx global>{`
           .page-transition-enter {

examples/delayed-enter/package.json

@@ -3,9 +3,10 @@
     "dev": "next dev"
   },
   "dependencies": {
-    "next": "^6.0.2",
+    "next": "^8.0.3",
+    "next-page-transitions": "*",
     "prop-types": "^15.6.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
   }
 }

examples/delayed-enter/pages/_app.js

@@ -16,7 +16,7 @@ export default class MyApp extends App {
   }
 
   render() {
-    const { Component, pageProps } = this.props
+    const { Component, pageProps, router } = this.props
     return (
       <Container>
         <PageTransition
@@ -30,7 +30,7 @@ export default class MyApp extends App {
           }}
           loadingClassNames="loading-indicator"
         >
-          <Component {...pageProps} />
+          <Component {...pageProps} key={router.route} />
         </PageTransition>
         <style jsx global>{`
           .page-transition-enter {

examples/delayed-enter/pages/about.js

@@ -14,7 +14,8 @@ class About extends React.Component {
 
   componentDidMount() {
     this.timeoutId = setTimeout(() => {
-      this.props.pageTransitionReadyToEnter()
+      const { pageTransitionReadyToEnter } = this.props
+      pageTransitionReadyToEnter()
       this.setState({ loaded: true })
     }, 2000)
   }
@@ -24,7 +25,8 @@ class About extends React.Component {
   }
 
   render() {
-    if (!this.state.loaded) return null
+    const { loaded } = this.state
+    if (!loaded) return null
     return (
       <div className="container-fluid bg-success page">
         <h1>About us</h1>