Updates related to new framework

Author: allpro

.gitattributes

@@ -1,6 +1,8 @@
 # Autodetect text files
 * text=auto
 
+core.eol = lf
+
 # Ensure those won't be messed up with
 *.jpg binary
 *.data binary

.size-snapshot.json

@@ -0,0 +1,50 @@
+{
+  "cjs/react-router-pause.js": {
+    "bundled": 114119,
+    "minified": 36218,
+    "gzipped": 11236
+  },
+  "cjs/react-router-pause.min.js": {
+    "bundled": 114119,
+    "minified": 36218,
+    "gzipped": 11236
+  },
+  "umd/react-router-pause.js": {
+    "bundled": 121897,
+    "minified": 20779,
+    "gzipped": 7866
+  },
+  "umd/react-router-pause.min.js": {
+    "bundled": 20779,
+    "minified": 19768,
+    "gzipped": 7391
+  },
+  "esm/react-router-pause.js": {
+    "bundled": 113928,
+    "minified": 36070,
+    "gzipped": 11191,
+    "treeshaked": {
+      "rollup": {
+        "code": 19289,
+        "import_statements": 93
+      },
+      "webpack": {
+        "code": 21498
+      }
+    }
+  },
+  "esm/index.js": {
+    "bundled": 113928,
+    "minified": 36070,
+    "gzipped": 11191,
+    "treeshaked": {
+      "rollup": {
+        "code": 19289,
+        "import_statements": 93
+      },
+      "webpack": {
+        "code": 21498
+      }
+    }
+  }
+}

README.md

@@ -56,8 +56,8 @@ However this is clumsy and allows only a single, global configuration.
 -   NPM: `npm install @allpro/react-router-pause`
 -   Yarn: `yarn add @allpro/react-router-pause`
 -   CDN: Exposed global is `ReactRouterPause`
-    -   Unpkg: `<script src="https://unpkg.com/@allpro/react-router-pause/dist/umd/@allpro/react-router-pause.min.js"></script>`
-    -   JSDelivr: `<script src="https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/dist/umd/@allpro/react-router-pause.min.js"></script>`
+    -   Unpkg: `<script src="https://unpkg.com/@allpro/react-router-pause/umd/react-router-pause.min.js"></script>`
+    -   JSDelivr: `<script src="https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/umd/react-router-pause.min.js"></script>`
 
 
 ## Usage
@@ -364,9 +364,10 @@ see the tags on this repository.
 
 ## License
 
-This project is licensed under the MIT License - see the 
-[LICENSE.md](https://github.com/allpro/react-router-pause/blob/master/LICENSE)
- file for details
+MIT © [allpro](https://github.com/allpro)
+<br>See
+[LICENSE](https://github.com/allpro/react-router-pause/blob/master/LICENSE)
+file for details
 
 
 [gzip-size-badge]: http://img.badgesize.io/https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/umd/@allpro/react-router-pause.min.js?compression=gzip

_config.yml

@@ -56,8 +56,8 @@ However this is clumsy and allows only a single, global configuration.
 -   NPM: `npm install @allpro/react-router-pause`
 -   Yarn: `yarn add @allpro/react-router-pause`
 -   CDN: Exposed global is `ReactRouterPause`
-    -   Unpkg: `<script src="https://unpkg.com/@allpro/react-router-pause/dist/umd/@allpro/react-router-pause.min.js"></script>`
-    -   JSDelivr: `<script src="https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/dist/umd/@allpro/react-router-pause.min.js"></script>`
+    -   Unpkg: `<script src="https://unpkg.com/@allpro/react-router-pause/umd/react-router-pause.min.js"></script>`
+    -   JSDelivr: `<script src="https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/umd/react-router-pause.min.js"></script>`
 
 
 ## Usage
@@ -364,9 +364,10 @@ see the tags on this repository.
 
 ## License
 
-This project is licensed under the MIT License - see the 
-[LICENSE.md](https://github.com/allpro/react-router-pause/blob/master/LICENSE)
- file for details
+MIT © [allpro](https://github.com/allpro)
+<br>See
+[LICENSE](https://github.com/allpro/react-router-pause/blob/master/LICENSE)
+file for details
 
 
 [gzip-size-badge]: http://img.badgesize.io/https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/umd/@allpro/react-router-pause.min.js?compression=gzip

example/src/README.md example/README.md

@@ -1,20 +1,20 @@
 {
   "name": "react-router-pause-example",
   "homepage": "https://allpro.github.io/react-router-pause",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "license": "MIT",
   "private": true,
   "dependencies": {
     "@allpro/form-manager": "^0.4.2",
     "@material-ui/core": "^3.9.0",
     "@material-ui/icons": "^3.0.0",
     "classnames": "^2.2.6",
-    "lodash": "^4.0.0",
     "prop-types": "^15.6.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.5",
     "react-router-dom": "^5.0.0",
-    "react-scripts": "^2.0.0"
+    "react-scripts": "^1.1.4",
+    "react-router-pause": "file:.."
   },
   "scripts": {
     "start": "react-scripts start",

example/package.json

@@ -9,7 +9,8 @@ import TextField from '@material-ui/core/TextField'
 
 import { useFormManager } from '@allpro/form-manager'
 
-import Pause from './react-router-pause'
+import Pause from 'react-router-pause'
+
 import PromptDialog from './PromptDialog'
 import Notification from './Notification'
 

example/src/FormPage.js

@@ -1,25 +1,32 @@
 {
   "name": "react-router-pause",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Helper for React Router to provide customizable asynchronous navigation blocking",
   "author": "allpro",
   "repository": "allpro/react-router-pause",
   "license": "MIT",
-  "main": "dist/cjs/react-router-pause.js",
-  "module": "dist/esm/react-router-pause.js",
-  "jsnext:main": "dist/esm/react-router-pause.js",
-  "react-native": "dist/umd/react-router-pause.js",
-  "umd:main": "dist/umd/react-router-pause.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "jsnext:main": "esm/index.js",
+  "react-native": "umd/react-router-pause.js",
+  "umd:main": "umd/react-router-pause.js",
   "files": [
-    "src",
-    "dist"
+    "cjs",
+    "esm",
+    "umd"
   ],
   "engines": {
     "node": ">=8",
     "npm": ">=5"
   },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
   "scripts": {
-    "test": "cross-env CI=1 react-scripts test",
+    "test": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
     "build": "rollup -c",
     "start": "rollup -c -w",
@@ -28,25 +35,22 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.4",
+    "prop-types": ">=15.0.0",
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0",
     "react-router": "^4.0.0 || ^5.0.0",
     "react-router-dom": "^4.0.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@allpro/form-manager": "^0.4.2",
-    "@material-ui/core": "^3.9.0",
-    "@material-ui/icons": "^3.0.0",
-    "@svgr/rollup": "^4.2.0",
+    "@svgr/rollup": "^2.4.1",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^8.2.5",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "classnames": "^2.2.6",
     "cross-env": "^5.1.4",
+    "eslint": "^5.0.1",
     "eslint-plugin-import": "^2.13.0",
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-promise": "^4.0.0",
@@ -57,18 +61,19 @@
     "lodash": "^4.0.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-router-dom": "^5.0.0",
-    "react-scripts": "^2.1.8",
+    "react-scripts": "^1.1.4",
     "react-testing-library": "^6.1.2",
     "rollup": "^1.10.0",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-node-resolve": "^4.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-size-snapshot": "^0.8.0",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-url": "^2.2.1"
+  },
+  "dependencies": {
+    "react-router-dom": "^5.0.0"
   }
 }

example/src/react-router-pause.js

@@ -7,85 +7,89 @@ import url from 'rollup-plugin-url'
 import svgr from '@svgr/rollup'
 import { sizeSnapshot } from 'rollup-plugin-size-snapshot'
 import { terser } from 'rollup-plugin-terser'
-// import replace from 'rollup-plugin-replace'
 
 import pkg from './package.json'
 
-
 const globals = {
 	react: 'React',
 	'react-router-dom': 'ReactRouterDOM',
 	'prop-types': 'PropTypes'
 }
 
+const basePlugins = [
+	// List external libraries that should not be bundled
+	external(),
+	postcss({
+		modules: true
+	}),
+	url(),
+	svgr(),
+	babel({
+		exclude: 'node_modules/**',
+		plugins: ['external-helpers']
+	}),
 
-export default {
-	input: 'src/index.js',
-	output: [
-		{
-			file: `dist/cjs/${pkg.name}.js`,
-			format: 'cjs',
-			plugins: [
-				sizeSnapshot()
-			]
-		},
-		{
-			file: `dist/cjs/${pkg.name}.min.js`,
-			format: 'cjs',
-			sourcemap: true,
-			plugins: [
-				terser(),
-				sizeSnapshot()
-			]
+	// Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
+	commonjs(),
+
+	// Allow node_modules resolution, so you can use 'external' to control
+	// which external modules to include in the bundle
+	// https://github.com/rollup/rollup-plugin-node-resolve#usage
+	resolve()
+
+	// Output a file listing bundle sizes for easy review
+	// sizeSnapshot(),
 
+	// Enable minification
+	// terser()
+]
+
+
+export default [
+	{
+		input: 'src/index.js',
+		output: {
+			file: `cjs/index.js`,
+			format: 'cjs',
 		},
+		plugins: basePlugins
+	},
 
-		{
-			file: `dist/esm/${pkg.name}.js`,
+	{
+		input: 'src/index.js',
+		output: {
+			file: `esm/index.js`,
 			format: 'esm',
-			plugins: [
-				sizeSnapshot()
-			]
+			esModule: true,
 		},
+		plugins: [ sizeSnapshot() ].concat(basePlugins)
+	},
 
-		{
-			file: `dist/umd/${pkg.name}.js`,
+	{
+		input: 'src/index.js',
+		output: {
+			file: `umd/${pkg.name}.js`,
 			format: 'umd',
 			name: 'ReactRouterPause',
 			globals,
 			external: Object.keys(globals),
+			esModule: false,
 			sourcemap: true,
-			plugins: [
-				sizeSnapshot()
-			]
-
 		},
-		{
-			file: `dist/umd/${pkg.name}.min.js`,
+		plugins: basePlugins
+	},
+
+	{
+		input: 'src/index.js',
+		output: {
+			file: `umd/${pkg.name}.min.js`,
 			format: 'umd',
 			name: 'ReactRouterPause',
 			globals,
 			external: Object.keys(globals),
+			esModule: false,
 			sourcemap: true,
-			plugins: [
-				terser(),
-				sizeSnapshot()
-			]
-		}
-	],
-	plugins: [
-		external(),
-		postcss({
-			modules: true,
-			minimize: true
-		}),
-		url(),
-		svgr(),
-		babel({
-			exclude: 'node_modules/**',
-			plugins: [ 'external-helpers' ]
-		}),
-		resolve(),
-		commonjs()
-	]
-}
+		},
+		plugins: [ terser(), sizeSnapshot() ].concat(basePlugins)
+	}
+]

example/package-lock.json package-lock.json

@@ -1,17 +1,16 @@
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import { render } from 'react-testing-library'
-/* Methods
+import assign from 'lodash/assign'
+
+import 'jest-dom/extend-expect'
+import 'react-testing-library/cleanup-after-each'
 import {
-	render,
-	fireEvent,
-	cleanup,
-	wait,
-	waitForElement,
+	render
+	// fireEvent,
+	// cleanup,
+	// wait,
+	// waitForElement,
 } from 'react-testing-library'
-*/
-import assign from 'lodash/assign'
-// import clone from 'lodash/clone'
 
 import ReactRouterPause from '../'
 
@@ -35,10 +34,10 @@ const location = {
 }
 
 const Component = props => (
-	<MemoryRouter initialEntries={[ '/' ]}>
+	<MemoryRouter initialEntries={[ location.pathname ]}>
 		<ReactRouterPause
 			history={history}
-			location={assign({}, location, propt.pathname)}
+			location={assign({}, location)}
 			{...props}
 		/>
 	</MemoryRouter>
@@ -65,20 +64,21 @@ test('renders without crashing', () => {
 
 test('binds history.block handler onMount', () => {
 	render(<Component use={handler} />)
+	expect(history.block).toHaveBeenCalledTimes(1)
 })
 
 test('unbinds history.block handler onUnmount', () => {
 	const { unmount } = render(<Component use={handler} />)
 	unmount()
-	console.log({ history })
-	expect(unblockMock.toHaveBeenCalledTimes(1))
+	expect(unblockMock).toHaveBeenCalledTimes(1)
+	// console.warn({ history })
 })
 
 test('calls the navigation handler onRouteChange', () => {
 	const { debug, rerender } = render(<Component use={handler} />)
-	debug()
-	expect(handler.toBeCalledTimes(1))
-	// expect(handler.toBeCalledWith([]))
-	rerender(<Component use={handler} pathname={'/next'} />)
-	expect(handler.toHaveBeenCalledTimes(1))
+	debug() // Output DOM markup at END of test output
+	expect(handler).toBeCalledTimes(1)
+	// expect(handler).toBeCalledWith([])
+	// rerender(<Component use={handler} pathname={'/next'} />)
+	// expect(handler).toHaveBeenCalledTimes(1)
 })

package.json

@@ -1,5 +1,5 @@
 import React from 'react'
-import { withRouter } from 'react-router-dom'
+import { withRouter } from 'react-router-dom' // eslint-disable-line
 import PropTypes from 'prop-types'
 
 import bindAll from 'lodash/bindAll'
@@ -141,7 +141,7 @@ class ReactRouterPause extends React.Component {
 			history.goBack()
 		}
 		else { // (push|replace)
-			history[action](location)
+			history[action](location.pathname, location.state)
 		}
 	}
 
@@ -222,33 +222,31 @@ class ReactRouterPause extends React.Component {
 	 * @param {string} action        One of [PUSH|REPLACE|POP]
 	 */
 	beforeRouteChange(location, action) {
-		console.log({ location, action })
-
-		// Cache the new location data for comparison
-		const prevFingerprint = this.locationFingerprint
-		this.locationFingerprint = createFingerprint(location)
+		// Create new location fingerprint for comparison
+		const newFingerprint = createFingerprint(location)
 
 		if (this.props.when === false) {
-			return true // Allow - RRP is disabled!
+			// Allow this event - RRP is disabled!
 		}
-		else if (this.locationFingerprint === prevFingerprint) {
+		else if (newFingerprint === this.locationFingerprint) {
 			// Block navigation if this is SAME LOCATION we are already at!
 			// This prevents reloading a form component and losing its contents.
 			return false
 		}
 		else if (this.skipNext) {
 			this.setSkipNext(false) // Reset flag - only used ONCE
-			return true // Allow this event
+			// Allow this event - blocking was skipped!
 		}
 		else if (this.isBlocking()) {
 			// The askHandler method handles the pause/resume functionality.
 			// Call the handler to see if we should allow route change (true).
 			// Coerce response to a boolean because that's what RR expects.
 			return !!this.askHandler({ location, action })
 		}
-		else {
-			return true
-		}
+
+		// Cache the new location data for comparison
+		this.locationFingerprint = newFingerprint
+		return true
 	}