@trullock/page-manager 1.2.1 → 1.3.1

package/tests/dist/main.js

@@ -0,0 +1,1661 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./tests/loading.htm":
+/*!***************************!*\
+  !*** ./tests/loading.htm ***!
+  \***************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "loading.htm");
+
+/***/ }),
+
+/***/ "./tests/page1.htm":
+/*!*************************!*\
+  !*** ./tests/page1.htm ***!
+  \*************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "page1.htm");
+
+/***/ }),
+
+/***/ "./tests/page2.htm":
+/*!*************************!*\
+  !*** ./tests/page2.htm ***!
+  \*************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "page2.htm");
+
+/***/ }),
+
+/***/ "./tests/page3.htm":
+/*!*************************!*\
+  !*** ./tests/page3.htm ***!
+  \*************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "page3.htm");
+
+/***/ }),
+
+/***/ "./tests/page4.htm":
+/*!*************************!*\
+  !*** ./tests/page4.htm ***!
+  \*************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "page4.htm");
+
+/***/ }),
+
+/***/ "./tests/page404.htm":
+/*!***************************!*\
+  !*** ./tests/page404.htm ***!
+  \***************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "page404.htm");
+
+/***/ }),
+
+/***/ "./tests/pageX.htm":
+/*!*************************!*\
+  !*** ./tests/pageX.htm ***!
+  \*************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (__webpack_require__.p + "pageX.htm");
+
+/***/ }),
+
+/***/ "./node_modules/@trullock/router/src/index.js":
+/*!****************************************************!*\
+  !*** ./node_modules/@trullock/router/src/index.js ***!
+  \****************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _pattern_lexer_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pattern-lexer.js */ "./node_modules/@trullock/router/src/pattern-lexer.js");
+
+
+function isKind(val, kind)
+{
+	return '[object ' + kind + ']' === Object.prototype.toString.call(val);
+}
+
+function isRegExp(val)
+{
+	return isKind(val, 'RegExp');
+}
+
+function decodeQueryString(queryStr)
+{
+	let queryArr = (queryStr || '').replace('?', '').split('&'),
+		i = -1,
+		obj = {},
+		equalIndex, cur, pValue, pName;
+
+	while ((cur = queryArr[++i]))
+	{
+		equalIndex = cur.indexOf('=');
+		pName = cur.substring(0, equalIndex);
+		pValue = decodeURIComponent(cur.substring(equalIndex + 1));
+
+		if (pName in obj)
+		{
+			if(isArray(obj[pName]))
+				obj[pName].push(pValue);
+			else
+				obj[pName] = [obj[pName], pValue];
+			
+		}
+		else
+		{
+			obj[pName] = pValue;
+	   }
+	}
+	return obj;
+}
+
+function Route(name, pattern, data, priority, router) {
+	var isRegexPattern = isRegExp(pattern);
+	this._name = name;
+	this._router = router;
+	this._pattern = pattern;
+	this._paramsIds = isRegexPattern ? null : router.patternLexer.getParamIds(pattern);
+	this._optionalParamsIds = isRegexPattern ? null : router.patternLexer.getOptionalParamsIds(pattern);
+	this._matchRegexp = isRegexPattern ? pattern : router.patternLexer.compilePattern(pattern, router.ignoreCase);
+	this._data = data;
+	this._priority = priority || 0;
+}
+
+Route.prototype = {
+
+	match: function (request) {
+		return this._matchRegexp.test(request);
+	},
+
+	_isValidParam: function (request, prop, values) {
+		var validationRule = this.rules[prop],
+			val = values[prop],
+			isValid = false,
+			isQuery = (prop.indexOf('?') === 0);
+
+		if (val == null && this._optionalParamsIds && arrayIndexOf(this._optionalParamsIds, prop) !== -1) {
+			isValid = true;
+		}
+		else if (isRegExp(validationRule)) {
+			if (isQuery)
+				val = values[prop + '_']; //use raw string
+
+			isValid = validationRule.test(val);
+		}
+		else if (isArray(validationRule)) {
+			if (isQuery)
+				val = values[prop + '_']; //use raw string
+
+			isValid = this._isValidArrayRule(validationRule, val);
+		}
+		else if (isFunction(validationRule)) {
+			isValid = validationRule(val, request, values);
+		}
+
+		return isValid; //fail silently if validationRule is from an unsupported type
+	},
+
+	_isValidArrayRule: function (arr, val) {
+		if (!this._router.ignoreCase) {
+			return arrayIndexOf(arr, val) !== -1;
+		}
+
+		if (typeof val === 'string') {
+			val = val.toLowerCase();
+		}
+
+		var n = arr.length,
+			item,
+			compareVal;
+
+		while (n--) {
+			item = arr[n];
+			compareVal = (typeof item === 'string') ? item.toLowerCase() : item;
+			if (compareVal === val) {
+				return true;
+			}
+		}
+		return false;
+	},
+
+	_getParamsObject: function (request) {
+		var shouldTypecast = this._router.shouldTypecast,
+			values = this._router.patternLexer.getParamValues(request, this._matchRegexp, shouldTypecast),
+			o = {},
+			n = values.length,
+			param, val;
+		while (n--) {
+			val = values[n];
+			if (this._paramsIds) {
+				param = this._paramsIds[n];
+				if (param.indexOf('?') === 0 && val) {
+					val = decodeQueryString(val, shouldTypecast);
+					
+					for(var key in val){
+						if(!o[key])
+							o[key] = val[key];
+						else
+							o['?' + key] = val[key];
+					}
+					o[n] = val;
+				} 
+				else 
+					o[param] = val;
+			}
+		}
+
+		return o;
+	},
+
+	interpolate: function (replacements) {
+		try {
+			var str = this._router.patternLexer.interpolate(this._pattern, replacements);
+			return str;
+		}
+		catch(e) {
+			throw new Error(`Error interpolating route ${this._pattern} with values ${JSON.stringify(replacements)}\n` + e);
+		}
+	},
+
+	toString: function () {
+		return '[Route pattern:"' + this._pattern + '", numListeners:' + this.matched.getNumListeners() + ']';
+	}
+
+};
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (new class
+{
+	constructor()
+	{
+		this.routes = [];
+		this.routesByName = {};
+		this.patternLexer = (0,_pattern_lexer_js__WEBPACK_IMPORTED_MODULE_0__["default"])();
+	}
+
+	addRoute (name, pattern, data, priority)
+	{
+		pattern += pattern.endsWith('/') ? ':?query:' : '/:?query:';
+		var route = new Route(name, pattern, data, priority, this);
+
+		var n = this.routes.length;
+		do
+		{ 
+			--n; 
+		} while (this.routes[n] && route._priority <= this.routes[n]._priority);
+
+		this.routes.splice(n + 1, 0, route);
+
+		this.routesByName[name] = route;
+		Object.defineProperty(this, name, { get: () => pattern });
+
+		return route;
+	}
+
+	interpolate(name, data)
+	{
+		if(!this.routesByName[name])
+			throw new Error(`Cannot find route by name ${name}`);
+			
+		return this.routesByName[name].interpolate(data);
+	}
+
+	parse (request)
+	{
+		var n = this.routes.length;
+		var route, hash, path;
+
+		var index = request.indexOf('#');
+		if(index > -1)
+		{
+			hash = request.substr(index + 1);
+			request = request.substr(0, index);
+		}
+
+		index = request.indexOf('?');
+		if(index > -1)
+			path = request.substr(0, index)
+		else
+			path = request;	
+		
+		while (route = this.routes[--n])
+		{
+			if (route.match(request))
+			{
+				var params = route._getParamsObject(request);
+				params.hash = hash;
+
+				return {
+					path: path.toLowerCase(),
+					name: route._name,
+					pattern: route._pattern,
+					data: route._data,
+					params: params
+				};
+			}
+		}
+
+		return null;
+	}
+
+	toString ()
+	{
+		return '[Router numRoutes:' + this.getNumRoutes() + ']';
+	}
+}());
+
+/***/ }),
+
+/***/ "./node_modules/@trullock/router/src/pattern-lexer.js":
+/*!************************************************************!*\
+  !*** ./node_modules/@trullock/router/src/pattern-lexer.js ***!
+  \************************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__() {
+
+	var
+		//match chars that should be escaped on string regexp
+		ESCAPE_CHARS_REGEXP = /[\\.+*?\^$\[\](){}\/'#]/g,
+
+		//trailing slashes (begin/end of string)
+		LOOSE_SLASHES_REGEXP = /^\/|\/$/g,
+		LEGACY_SLASHES_REGEXP = /\/$/g,
+
+		//params - everything between `{ }` or `: :`
+		PARAMS_REGEXP = /(?:\{|:)([^}:]+)(?:\}|:)/g,
+
+		//used to save params during compile (avoid escaping things that
+		//shouldn't be escaped).
+		TOKENS = {
+			'OS': {
+				//optional slashes
+				//slash between `::` or `}:` or `\w:` or `:{?` or `}{?` or `\w{?`
+				rgx: /([:}]|\w(?=\/))\/?(:|(?:\{\?))/g,
+				save: '$1{{id}}$2',
+				res: '\\/?'
+			},
+			'RS': {
+				//required slashes
+				//used to insert slash between `:{` and `}{`
+				rgx: /([:}])\/?(\{)/g,
+				save: '$1{{id}}$2',
+				res: '\\/'
+			},
+			'RQ': {
+				//required query string - everything in between `{? }`
+				rgx: /\{\?([^}]+)\}/g,
+				//everything from `?` till `#` or end of string
+				res: '\\?([^#]+)'
+			},
+			'OQ': {
+				//optional query string - everything in between `:? :`
+				rgx: /:\?([^:]+):/g,
+				//everything from `?` till `#` or end of string
+				res: '(?:\\?([^#]*))?'
+			},
+			'OR': {
+				//optional rest - everything in between `: *:`
+				rgx: /:([^:]+)\*:/g,
+				res: '(.*)?' // optional group to avoid passing empty string as captured
+			},
+			'RR': {
+				//rest param - everything in between `{ *}`
+				rgx: /\{([^}]+)\*\}/g,
+				res: '(.+)'
+			},
+			// required/optional params should come after rest segments
+			'RP': {
+				//required params - everything between `{ }`
+				rgx: /\{([^}]+)\}/g,
+				res: '([^\\/?]+)'
+			},
+			'OP': {
+				//optional params - everything between `: :`
+				rgx: /:([^:]+):/g,
+				res: '([^\\/?]+)?\/?'
+			}
+		},
+
+		LOOSE_SLASH = 1,
+		STRICT_SLASH = 2,
+		LEGACY_SLASH = 3,
+
+		_slashMode = LOOSE_SLASH;
+
+
+	function precompileTokens() {
+		var key, cur;
+		for (key in TOKENS) {
+			if (TOKENS.hasOwnProperty(key)) {
+				cur = TOKENS[key];
+				cur.id = '__CR_' + key + '__';
+				cur.save = ('save' in cur) ? cur.save.replace('{{id}}', cur.id) : cur.id;
+				cur.rRestore = new RegExp(cur.id, 'g');
+			}
+		}
+	}
+	precompileTokens();
+
+
+	function captureVals(regex, pattern) {
+		var vals = [], match;
+		// very important to reset lastIndex since RegExp can have "g" flag
+		// and multiple runs might affect the result, specially if matching
+		// same string multiple times on IE 7-8
+		regex.lastIndex = 0;
+		while (match = regex.exec(pattern)) {
+			vals.push(match[1]);
+		}
+		return vals;
+	}
+
+	function getParamIds(pattern) {
+		return captureVals(PARAMS_REGEXP, pattern);
+	}
+
+	function getOptionalParamsIds(pattern) {
+		return captureVals(TOKENS.OP.rgx, pattern);
+	}
+
+	function compilePattern(pattern, ignoreCase) {
+		pattern = pattern || '';
+
+		if (pattern) {
+			if (_slashMode === LOOSE_SLASH) {
+				pattern = pattern.replace(LOOSE_SLASHES_REGEXP, '');
+			}
+			else if (_slashMode === LEGACY_SLASH) {
+				pattern = pattern.replace(LEGACY_SLASHES_REGEXP, '');
+			}
+
+			//save tokens
+			pattern = replaceTokens(pattern, 'rgx', 'save');
+			//regexp escape
+			pattern = pattern.replace(ESCAPE_CHARS_REGEXP, '\\$&');
+			//restore tokens
+			pattern = replaceTokens(pattern, 'rRestore', 'res');
+
+			if (_slashMode === LOOSE_SLASH) {
+				pattern = '\\/?' + pattern;
+			}
+		}
+
+		if (_slashMode !== STRICT_SLASH) {
+			//single slash is treated as empty and end slash is optional
+			pattern += '\\/?';
+		}
+		return new RegExp('^' + pattern + '$', ignoreCase ? 'i' : '');
+	}
+
+	function replaceTokens(pattern, regexpName, replaceName) {
+		var cur, key;
+		for (key in TOKENS) {
+			if (TOKENS.hasOwnProperty(key)) {
+				cur = TOKENS[key];
+				pattern = pattern.replace(cur[regexpName], cur[replaceName]);
+			}
+		}
+		return pattern;
+	}
+
+	function getParamValues(request, regexp, shouldTypecast) {
+		var vals = regexp.exec(request);
+		if (vals) {
+			vals.shift();
+			if (shouldTypecast) {
+				vals = typecastArrayValues(vals);
+			}
+		}
+		return vals;
+	}
+
+	function interpolate(pattern, replacements) {
+		// default to an empty object because pattern might have just
+		// optional arguments
+		replacements = replacements || {};
+		if (typeof pattern !== 'string') {
+			throw new Error('Route pattern should be a string.');
+		}
+		
+		var replaceFn = function (match, prop) {
+			var val;
+			prop = (prop.substr(0, 1) === '?') ? prop.substr(1) : prop;
+			if (replacements[prop] != null) {
+				if (typeof replacements[prop] === 'object') {
+					var queryParts = [], rep;
+					for (var key in replacements[prop]) {
+						rep = replacements[prop][key];
+						if (isArray(rep)) {
+							for (var k in rep) {
+								if (key.slice(-2) == '[]') {
+									queryParts.push(encodeURIComponent(key.slice(0, -2)) + '[]=' + encodeURIComponent(rep[k]));
+								} else {
+									queryParts.push(encodeURIComponent(key + '=' + rep[k]));
+								}
+							}
+						}
+						else {
+							queryParts.push(encodeURIComponent(key + '=' + rep));
+						}
+					}
+					val = '?' + queryParts.join('&');
+				} else {
+					// make sure value is a string see #gh-54
+					val = String(replacements[prop]);
+				}
+
+				if (match.indexOf('*') === -1 && val.indexOf('/') !== -1) {
+					throw new Error('Invalid value "' + val + '" for segment "' + match + '".');
+				}
+			}
+			else if (match.indexOf('{') !== -1) {
+				throw new Error('The segment ' + match + ' is required.');
+			}
+			else {
+				val = '';
+			}
+			return val;
+		};
+
+		if (!TOKENS.OS.trail) {
+			TOKENS.OS.trail = new RegExp('(?:' + TOKENS.OS.id + ')+$');
+		}
+
+		return pattern
+			.replace(TOKENS.OS.rgx, TOKENS.OS.save)
+			.replace(PARAMS_REGEXP, replaceFn)
+			.replace(TOKENS.OS.trail, '') // remove trailing
+			.replace(TOKENS.OS.rRestore, '/'); // add slash between segments
+	}
+
+	//API
+	return {
+		strict: function () {
+			_slashMode = STRICT_SLASH;
+		},
+		loose: function () {
+			_slashMode = LOOSE_SLASH;
+		},
+		legacy: function () {
+			_slashMode = LEGACY_SLASH;
+		},
+		getParamIds: getParamIds,
+		getOptionalParamsIds: getOptionalParamsIds,
+		getParamValues: getParamValues,
+		compilePattern: compilePattern,
+		interpolate: interpolate
+	};
+
+}
+
+/***/ }),
+
+/***/ "./src/index.js":
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "PageShowError": () => (/* binding */ PageShowError),
+/* harmony export */   "back": () => (/* binding */ back),
+/* harmony export */   "getPath": () => (/* binding */ getPath),
+/* harmony export */   "init": () => (/* binding */ init),
+/* harmony export */   "navigate": () => (/* binding */ navigate),
+/* harmony export */   "printStack": () => (/* binding */ printStack),
+/* harmony export */   "purgeCache": () => (/* binding */ purgeCache),
+/* harmony export */   "ready": () => (/* binding */ ready),
+/* harmony export */   "refresh": () => (/* binding */ refresh),
+/* harmony export */   "registerPage": () => (/* binding */ registerPage),
+/* harmony export */   "removeHistory": () => (/* binding */ removeHistory),
+/* harmony export */   "replace": () => (/* binding */ replace),
+/* harmony export */   "show": () => (/* binding */ show)
+/* harmony export */ });
+/* harmony import */ var _trullock_router__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @trullock/router */ "./node_modules/@trullock/router/src/index.js");
+
+var pageCache = {},
+  pageTemplateCache = {},
+  stack = [],
+  stackPointer = -1;
+var manuallyAdjustingHistory = false;
+var handlingBeforeHide = false;
+var beforeHideNavDirection = null;
+var goal = null;
+var backData = {};
+var options = {
+  pageInterrupt: routeResult => null,
+  attachMarkup: $html => document.body.appendChild($html),
+  prepareMarkup: $html => {},
+  loadingPageName: 'loading',
+  error404PageName: 'error-404',
+  defaultPageName: 'root',
+  beforeHide: null
+};
+function registerPage(opts) {
+  let loadPageClass = opts.pageClass ? () => opts.pageClass : opts.loadPageClass;
+  let namedRoutes = opts.namedRoutes || {
+    [opts.name]: opts.route
+  };
+  let cacheMarkupBy = opts.cacheMarkupBy || 'path';
+  let extra = opts.extra || {};
+  for (const [name, route] of Object.entries(namedRoutes)) {
+    _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].addRoute(name, route, {
+      route,
+      loadPageClass,
+      loadMarkup: opts.loadMarkup,
+      cacheMarkupBy,
+      extra
+    });
+  }
+}
+function getPath(name, values) {
+  let url = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].interpolate(name, values);
+  if (values?.hash) url += '#' + values.hash;
+  return url;
+}
+function refresh() {
+  let frame = stack[stackPointer];
+  showPage(frame.data.route.url, frame.data, 'replace');
+}
+function emitUrlChanged(url) {
+  window.dispatchEvent(new CustomEvent('page-manager.url-changed', {
+    detail: {
+      url: url
+    },
+    bubbles: true
+  }));
+}
+
+// TODO: 404 and error too?
+function initLoading() {
+  var url = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].interpolate(options.loadingPageName, {});
+  var routeResult = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].parse(url);
+  return loadPage(routeResult, {});
+}
+function showLoading() {
+  var url = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].interpolate(options.loadingPageName, {});
+  var route = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].parse(url);
+  var data = {
+    route: route,
+    scrollY: window.scrollY,
+    event: {
+      action: 'replace'
+    }
+  };
+  var page = (pageCache[route.path] || pageCache[route.pattern]).page;
+  return Promise.resolve(page.show(data));
+}
+function hideLoading() {
+  var url = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].interpolate(options.loadingPageName, {});
+  var route = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].parse(url);
+  var page = (pageCache[route.path] || pageCache[route.pattern]).page;
+  return Promise.resolve(page.hide());
+}
+async function loadPage(routeResult, data) {
+  if (!pageTemplateCache[routeResult.pattern]) pageTemplateCache[routeResult.pattern] = await routeResult.data.loadMarkup(routeResult);
+  let $template = pageTemplateCache[routeResult.pattern];
+  var $html = $template.cloneNode(true);
+  options.prepareMarkup($html);
+  options.attachMarkup($html);
+  routeResult.data.pageClass = await Promise.resolve(routeResult.data.loadPageClass());
+  let page = new routeResult.data.pageClass($html);
+  await Promise.resolve(page.boot(data));
+  let cacheKey = routeResult.data.cacheMarkupBy == 'path' ? routeResult.path : routeResult.pattern;
+  pageCache[cacheKey] = {
+    $html,
+    page
+  };
+  return page;
+}
+async function showPage(url, data, event) {
+  var routeResult = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].parse(url);
+  if (routeResult == null) {
+    console.error(`Can't find page: '${url}'`);
+    let url = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].interpolate(options.error404PageName, {});
+    routeResult = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].parse(url);
+  }
+  data = data || {};
+  for (let key in routeResult.params) data[key] = routeResult.params[key];
+  data.route = {
+    url: url,
+    path: routeResult.path,
+    name: routeResult.name,
+    params: routeResult.params
+  };
+  data.event = event;
+  let interrupt = await Promise.resolve(options.pageInterrupt(routeResult));
+  if (interrupt) {
+    goal = {
+      url,
+      data
+    };
+    return showPage(interrupt.url, null, event);
+  }
+  await showLoading();
+  var getPage = null;
+  if (pageCache[routeResult.path]) getPage = pageCache[routeResult.path].page;else if (pageCache[routeResult.pattern]) getPage = pageCache[routeResult.pattern].page;else getPage = loadPage(routeResult, data);
+
+  // handle initial page
+  if (event.action == 'load') {
+    const page = await getPage;
+    await doShow(page, data);
+    await hideLoading();
+
+    // clean initial load
+    if (stackPointer == -1) {
+      stack.push({
+        uid: 0,
+        data,
+        page
+      });
+      stackPointer = 0;
+    }
+
+    // page refresh
+    else {
+      stack[stackPointer].page = page;
+      stack[stackPointer].data = data;
+    }
+    return page;
+  }
+  let currentState = stack[stackPointer];
+  if (currentState.data.route.path == routeResult.path) {
+    handleHistoryAction(event, url, data, currentState.page);
+    const page = await getPage;
+    await doUpdate(page, data);
+    await hideLoading();
+    return page;
+  }
+  currentState.data.scrollY = window.scrollY;
+  const results = await Promise.all([currentState.page.hide(event), getPage]);
+  const page = results[1];
+  handleHistoryAction(event, url, data, page);
+  await doShow(page, data);
+  // .catch(e => {
+  // 	// TODO: what case is this?
+  // 	manuallyAdjustingHistory = () => manuallyAdjustingHistory = false;
+  // 	if (event.action == 'back')
+  // 		history.go(1);
+  // 	else if (event.action == 'fwd')
+  // 		history.go(-1);
+  // });
+  await hideLoading();
+  return page;
+}
+async function doShow(page, data) {
+  window.scroll(0, 0);
+  await Promise.resolve(page.show(data));
+  document.title = page.title;
+}
+async function doUpdate(page, data) {
+  await Promise.resolve(page.update(data));
+  document.title = page.title;
+}
+function getNewUid() {
+  let uid = -1;
+  for (let i = 0; i < stack.length; i++) uid = Math.max(uid, stack[i].uid);
+  return uid + 1;
+}
+async function handleHistoryAction(event, url, data, page) {
+  if (event.action == 'push') {
+    let newUid = getNewUid();
+    window.history.pushState({
+      uid: newUid
+    }, null, url);
+    emitUrlChanged(url);
+
+    // remove future
+    stack.splice(stackPointer + 1, stack.length - stackPointer);
+    stack.push({
+      uid: newUid,
+      data,
+      page
+    });
+    stackPointer++;
+  } else if (event.action == 'replace') {
+    if (data.route.url == stack[stackPointer - 1]?.data?.route?.url) {
+      let statesToKeep = [];
+      for (var i = 0; i < stackPointer - 1; i++) statesToKeep.push(stack[i]);
+      statesToKeep.push({
+        uid: stack[stackPointer - 1].uid,
+        data,
+        page
+      });
+      await modifyHistory(statesToKeep);
+    } else {
+      let newId = getNewUid();
+      window.history.replaceState({
+        uid: newId
+      }, null, url);
+      stack[stackPointer] = {
+        uid: newId,
+        data,
+        page
+      };
+      emitUrlChanged(url);
+    }
+  } else if (event.action == 'back') {
+    stackPointer -= event.distance;
+  } else if (event.action == 'fwd') {
+    stackPointer += event.distance;
+  }
+}
+function doNavigate(url, data) {
+  if (url === 'goal') {
+    url = goal ? goal.url : data?.fallback || getPath(options.defaultPageName);
+    data = goal?.data || {};
+    goal = null;
+  }
+  return showPage(url, data, {
+    action: 'push',
+    distance: 0
+  });
+}
+function storageAvailable() {
+  try {
+    var x = '__storage_test__';
+    window.sessionStorage.setItem(x, x);
+    window.sessionStorage.removeItem(x);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+async function init(opts) {
+  Object.assign(options, opts);
+  if (storageAvailable()) {
+    let storedStack = window.sessionStorage.getItem("stack");
+    if (storedStack) {
+      storedStack = JSON.parse(storedStack);
+      stack = storedStack.stack;
+      stackPointer = storedStack.stackPointer;
+      window.sessionStorage.removeItem("stack");
+    }
+  }
+  await initLoading();
+  await showLoading();
+}
+async function ready() {
+  // set initial page
+  emitUrlChanged(window.location.pathname + window.location.search + window.location.hash);
+  showPage(window.location.pathname + window.location.search + window.location.hash, null, {
+    action: 'load',
+    distance: 0
+  }).catch(e => {
+    console.error(e);
+    if (e instanceof PageShowError) {
+      return showPage(e.url, e.data, {
+        action: 'load',
+        distance: 0
+      }).then(async page => {
+        if (e.action == 'replace') await handleHistoryAction({
+          action: e.action
+        }, e.url, e.data, page);
+        return page;
+      });
+    }
+  });
+  async function handlePopstate(context, direction, distance) {
+    if (manuallyAdjustingHistory) {
+      await manuallyAdjustingHistory(context, {
+        action: direction,
+        distance
+      });
+      return;
+    }
+    if (direction == 'back') Object.assign(context.data, backData);
+    backData = {};
+    emitUrlChanged(context.data.route.url);
+    showPage(context.data.route.url, context.data, {
+      action: direction,
+      distance
+    }).catch(e => {
+      console.error(e);
+      if (e instanceof PageShowError) return showPage(e.url, e.data, {
+        action: e.action || 'show'
+      });
+    }).then(page => {
+      // set page as it can be missing in the case of refreshes
+      context.page = page;
+    });
+  }
+  function handleBeforeHidePart1(lastNavDirection) {
+    // if we're ignoring beforeHide this navigation
+    if (handlingBeforeHide === 'ignore') {
+      handlingBeforeHide = false;
+      return false;
+    }
+
+    // if we have a before-unload confirm to show
+    if (stack[stackPointer].page.beforeHide && options.beforeHide && handlingBeforeHide === false) {
+      beforeHideNavDirection = lastNavDirection;
+      var interrupt = stack[stackPointer].page.beforeHide();
+      if (interrupt) {
+        handlingBeforeHide = 'step1';
+
+        // do this in a new thread, you cant call history actions from inside a history-aciton-handler
+        window.setTimeout(() => {
+          // undo the navigation so the URL remains correct whilst we show the confirm dialog
+          if (beforeHideNavDirection == 'fwd') history.back();else if (beforeHideNavDirection == 'back') history.forward();
+        }, 1);
+        return true;
+      }
+    }
+
+    // we've finished beforeHiding
+    if (handlingBeforeHide === 'step2') {
+      handlingBeforeHide = false;
+      beforeHideNavDirection = null;
+    }
+    return false;
+  }
+  function handleBeforeHidePart2() {
+    if (handlingBeforeHide !== 'step1') return false;
+    if (manuallyAdjustingHistory) return false;
+
+    // do the beforeHide action, then...
+    options.beforeHide(stack[stackPointer].page.beforeHide()).then(result => {
+      // if the user confirmed, redo the original action
+      if (result) {
+        handlingBeforeHide = 'step2';
+        if (beforeHideNavDirection == 'fwd') history.forward();else if (beforeHideNavDirection == 'back') history.back();
+      } else {
+        handlingBeforeHide = false;
+        beforeHideNavDirection = null;
+      }
+    });
+    return true;
+  }
+
+  // listen for browser navigations
+  window.addEventListener("popstate", async e => {
+    // TODO: is 0 sensible here, or should we call getNewId()?
+    let newUid = e.state?.uid || 0;
+    let previousUid = stack[stackPointer].uid;
+    let lastNavigationDirection = newUid > previousUid ? 'fwd' : 'back';
+    let distance = Math.abs(newUid - previousUid);
+    var interrupted = handleBeforeHidePart2();
+    if (interrupted) return;
+    var interrupted = handleBeforeHidePart1(lastNavigationDirection);
+    if (interrupted) return;
+    var context = findContext(newUid);
+    await handlePopstate(context, lastNavigationDirection, distance);
+  });
+  if (storageAvailable()) {
+    window.addEventListener("beforeunload", () => {
+      let stackToSerialize = stack.map(s => ({
+        uid: s.uid,
+        data: s.data
+      }));
+      let stackToStore = {
+        stack: stackToSerialize,
+        stackPointer
+      };
+      window.sessionStorage.setItem('stack', JSON.stringify(stackToStore));
+    });
+  }
+}
+function findContext(uid) {
+  for (var i = 0; i < stack.length; i++) {
+    if (stack[i].uid == uid) return stack[i];
+  }
+  return null;
+}
+function expandOnlyHash(url) {
+  if (url.startsWith('#')) {
+    let currentState = stack[stackPointer];
+    let currentUrl = currentState.data.route.url;
+    let hashIndex = currentUrl.indexOf('#');
+    if (hashIndex > -1) return currentUrl.substr(0, hashIndex);
+    return currentUrl + url;
+  }
+  return url;
+}
+function navigate(url, data, checkBeforeHide = true) {
+  url = expandOnlyHash(url);
+  if (checkBeforeHide === true && options.beforeHide && stack[stackPointer].page.beforeHide) {
+    var interrupt = stack[stackPointer].page.beforeHide();
+    if (interrupt) {
+      options.beforeHide(interrupt).then(result => {
+        if (result) doNavigate(url, data);
+      });
+      return;
+    }
+  }
+  doNavigate(url, data).catch(e => {
+    console.error(e);
+    if (e instanceof PageShowError) return showPage(e.url, e.data, {
+      action: e.action || 'show'
+    });
+  });
+}
+function replace(url, data) {
+  url = expandOnlyHash(url);
+  return showPage(url, data, {
+    action: 'replace',
+    distance: 0
+  });
+}
+function show(url, data) {
+  return showPage(url, data, {
+    action: 'show',
+    distance: 0
+  });
+}
+function back(data, checkBeforeHide) {
+  backData = data || {};
+  handlingBeforeHide = checkBeforeHide === false ? 'ignore' : false;
+  history.go(-1);
+}
+function printStack() {
+  console.log("Stack length: " + stack.length);
+  console.log("Stack pointer: " + stackPointer);
+  for (var i = 0; i < stack.length; i++) console.log(stack[i]);
+}
+function modifyHistory(statesToKeep) {
+  // BUG: You can't remove the 2nd stack frame. This is because you'd have to go back to -1, to then go forward to 0 (removing frame 1)
+  // For clarity, you can remove (replace) frame 0 (1st), and frame 2+ (3rd+)
+  // As a workaround, we replace the 2nd stack frame, if it is the tail, with the root "/". 
+  // This at least hopefully removes any meaning from it, simply taking you "home" rather than to wherever you were likely trying to remove.
+
+  if (statesToKeep.length == stack.length) return Promise.resolve();
+  return new Promise(async (resolve, reject) => {
+    let backsToDo = stackPointer;
+
+    //  TODO: handle stack pointer not being at the tail when this process starts
+
+    // see BUG comments at the top of this method
+    let apply2ndFrameHack = statesToKeep.length == 1 && stack.length > 1;
+    let secondFrameHackUid = -1;
+    let defaultPageRouteResult = null;
+    let defaultPage = null;
+    if (apply2ndFrameHack) {
+      let url = getPath(options.defaultPageName);
+      defaultPageRouteResult = _trullock_router__WEBPACK_IMPORTED_MODULE_0__["default"].parse(url);
+      defaultPage = await loadPage(defaultPageRouteResult, {});
+      secondFrameHackUid = getNewUid();
+    }
+    manuallyAdjustingHistory = async _ => {
+      // rewind to the first history position
+      if (backsToDo > 0) {
+        window.setTimeout(() => {
+          backsToDo--;
+          history.back();
+        }, 1);
+        return;
+      }
+
+      // reset the stack
+
+      stack = [];
+      for (var k = 0; k < statesToKeep.length; k++) {
+        let currentState = statesToKeep[k];
+        if (k == 0) window.history.replaceState({
+          uid: currentState.uid
+        }, currentState.page.title, currentState.data.route.url);else window.history.pushState({
+          uid: currentState.uid
+        }, currentState.page.title, currentState.data.route.url);
+
+        // TODO: this doesnt seem to work when k=0
+        document.title = currentState.page.title;
+        stack.push(currentState);
+        emitUrlChanged(currentState.data.route.url);
+      }
+
+      // see BUG comments at the top of this method
+      if (apply2ndFrameHack) {
+        stack.push({
+          uid: secondFrameHackUid,
+          data: {
+            route: {
+              url: defaultPageRouteResult.path,
+              path: defaultPageRouteResult.path,
+              name: defaultPageRouteResult.name,
+              params: defaultPageRouteResult.params
+            }
+          },
+          page: defaultPage
+        });
+        stackPointer = 0;
+      } else {
+        stackPointer = stack.length - 1;
+      }
+      manuallyAdjustingHistory = false;
+      resolve();
+    };
+
+    // see BUG comments at the top of this method
+    if (apply2ndFrameHack && backsToDo == 1) {
+      window.history.replaceState({
+        uid: secondFrameHackUid
+      }, defaultPage.title, defaultPageRouteResult.path);
+      document.title = defaultPage.title;
+    }
+    backsToDo--;
+    history.back();
+  });
+}
+function removeHistory(predicate) {
+  let statesToKeep = [];
+  for (var i = 0; i < stack.length; i++) {
+    if (!predicate(stack[i], i)) statesToKeep.push(stack[i]);
+  }
+  return modifyHistory(statesToKeep);
+}
+function purgeCache() {
+  for (const key in pageCache) {
+    pageCache[key].page.destroy && pageCache[key].page.destroy();
+    if (!pageCache[key].page.constructor.existingDomSelector) {
+      pageCache[key].$html.remove();
+      delete pageCache[key];
+    }
+  }
+}
+class PageShowError extends Error {
+  constructor(url, message, data, action) {
+    super(message || 'Error showing requested page');
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) Error.captureStackTrace(this, PageShowError);
+    this.name = 'PageShowError';
+    this.url = url;
+    this.data = data;
+    this.action = action;
+  }
+}
+
+/***/ }),
+
+/***/ "./tests/helpers.js":
+/*!**************************!*\
+  !*** ./tests/helpers.js ***!
+  \**************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "loadMarkup": () => (/* binding */ loadMarkup)
+/* harmony export */ });
+async function loadMarkup(routeResult) {
+  let url = '/pages/' + routeResult.name + '.htm';
+  let response = await fetch(url);
+  let text = await response.text();
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(text, "text/html");
+  const elem = doc.querySelector('body').firstElementChild;
+  return elem;
+}
+
+/***/ }),
+
+/***/ "./tests/page-loading.js":
+/*!*******************************!*\
+  !*** ./tests/page-loading.js ***!
+  \*******************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _loading_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./loading.htm */ "./tests/loading.htm");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+var _class;
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_3__.registerPage)({
+  name: 'loading',
+  route: '/loading',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_1__.loadMarkup,
+  pageClass: (_class = class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_2__["default"] {
+    constructor($page) {
+      super($page);
+    }
+  }, _defineProperty(_class, "existingDomSelector", '#page-loading'), _class)
+}));
+
+/***/ }),
+
+/***/ "./tests/page-page1.js":
+/*!*****************************!*\
+  !*** ./tests/page-page1.js ***!
+  \*****************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _page1_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./page1.htm */ "./tests/page1.htm");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.registerPage)({
+  name: 'page1',
+  route: '/page1',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_3__.loadMarkup,
+  pageClass: class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+    constructor($page) {
+      super($page);
+      _defineProperty(this, "title", "Page 1");
+      _defineProperty(this, "type", 'A');
+      $page.querySelector('button').addEventListener('click', e => {
+        (0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.refresh)();
+      });
+    }
+    update(data) {
+      this.$page.querySelector('.js-time').textContent = new Date().getTime();
+    }
+  }
+}));
+
+/***/ }),
+
+/***/ "./tests/page-page2.js":
+/*!*****************************!*\
+  !*** ./tests/page-page2.js ***!
+  \*****************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _page2_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./page2.htm */ "./tests/page2.htm");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.registerPage)({
+  name: 'page2',
+  route: '/page2',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_3__.loadMarkup,
+  pageClass: class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+    constructor($page) {
+      super($page);
+      _defineProperty(this, "title", "Page 2");
+      _defineProperty(this, "type", 'A');
+      $page.querySelector('button').addEventListener('click', e => {
+        e.preventDefault();
+        (0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.replace)('/page3');
+      });
+    }
+  }
+}));
+
+/***/ }),
+
+/***/ "./tests/page-page3.js":
+/*!*****************************!*\
+  !*** ./tests/page-page3.js ***!
+  \*****************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _page3_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./page3.htm */ "./tests/page3.htm");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.registerPage({
+  name: 'page3',
+  route: '/page3',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_3__.loadMarkup,
+  pageClass: class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+    constructor($page) {
+      super($page);
+      _defineProperty(this, "title", "Page 3");
+      _defineProperty(this, "beforeHide", () => 'Are you sure?');
+      $page.querySelector('.btnRemove').addEventListener('click', e => {
+        _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.removeHistory(state => {
+          return state.page.type == 'A';
+        });
+      });
+    }
+  }
+}));
+
+/***/ }),
+
+/***/ "./tests/page-page4.js":
+/*!*****************************!*\
+  !*** ./tests/page-page4.js ***!
+  \*****************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _page4_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./page4.htm */ "./tests/page4.htm");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.registerPage)({
+  name: 'page4',
+  route: '/page4',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_3__.loadMarkup,
+  pageClass: class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+    constructor($page) {
+      super($page);
+      _defineProperty(this, "title", "Page 4");
+    }
+    show(opts) {
+      throw new _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.PageShowError('/page1', 'Cant show page4, showing page1 instead', {}, 'replace');
+    }
+  }
+}));
+
+/***/ }),
+
+/***/ "./tests/page-page404.js":
+/*!*******************************!*\
+  !*** ./tests/page-page404.js ***!
+  \*******************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _page404_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./page404.htm */ "./tests/page404.htm");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.registerPage)({
+  name: 'page404',
+  route: '/404',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_3__.loadMarkup,
+  pageClass: class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+    constructor($page) {
+      super($page);
+      _defineProperty(this, "title", "Page 404");
+    }
+  }
+}));
+
+/***/ }),
+
+/***/ "./tests/page-pageX.js":
+/*!*****************************!*\
+  !*** ./tests/page-pageX.js ***!
+  \*****************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _pageX_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./pageX.htm */ "./tests/pageX.htm");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.registerPage)({
+  name: 'pageX',
+  route: '/page/{x}',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_3__.loadMarkup,
+  pageClass: class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+    constructor($page) {
+      super($page);
+      _defineProperty(this, "title", "Page X");
+    }
+    show(opts) {
+      this.$page.querySelector('#PageX').textContent = "Page: " + opts.x;
+      return super.show(opts);
+    }
+  }
+}));
+
+/***/ }),
+
+/***/ "./tests/page-show-fail.js":
+/*!*********************************!*\
+  !*** ./tests/page-show-fail.js ***!
+  \*********************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _page404_htm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./page404.htm */ "./tests/page404.htm");
+/* harmony import */ var _page_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page.js */ "./tests/page.js");
+/* harmony import */ var _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @trullock/page-manager */ "./src/index.js");
+/* harmony import */ var _helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers.js */ "./tests/helpers.js");
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+ // doesnt matter
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.registerPage)({
+  name: 'pageShowFail',
+  route: '/show-fail',
+  loadMarkup: _helpers_js__WEBPACK_IMPORTED_MODULE_3__.loadMarkup,
+  pageClass: class pageClass extends _page_js__WEBPACK_IMPORTED_MODULE_1__["default"] {
+    constructor($page) {
+      super($page);
+      _defineProperty(this, "title", "Page 4");
+    }
+    show(opts) {
+      throw new _trullock_page_manager__WEBPACK_IMPORTED_MODULE_2__.PageShowError('/page1', 'Cant show pageShowFail, showing page1 instead', {}, 'replace');
+    }
+  }
+}));
+
+/***/ }),
+
+/***/ "./tests/page.js":
+/*!***********************!*\
+  !*** ./tests/page.js ***!
+  \***********************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "cacheMarkupBy": () => (/* binding */ cacheMarkupBy),
+/* harmony export */   "default": () => (/* binding */ Page)
+/* harmony export */ });
+const cacheMarkupBy = 'route';
+class Page {
+  constructor($page) {
+    this.$page = $page;
+  }
+  get title() {
+    return this.$page.dataset['title'] || 'PageManager';
+  }
+  boot(opts) {
+    return Promise.resolve();
+  }
+  show(opts) {
+    this.$page.style.display = 'block';
+    return Promise.resolve();
+  }
+  update() {
+    return Promise.resolve();
+  }
+  hide() {
+    this.$page.style.display = 'none';
+    return Promise.resolve();
+  }
+}
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/publicPath */
+/******/ 	(() => {
+/******/ 		__webpack_require__.p = "/";
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+/*!**************************!*\
+  !*** ./tests/lolpack.js ***!
+  \**************************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _src_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../src/index.js */ "./src/index.js");
+/* harmony import */ var _page_loading_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./page-loading.js */ "./tests/page-loading.js");
+/* harmony import */ var _page_page1_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./page-page1.js */ "./tests/page-page1.js");
+/* harmony import */ var _page_page2_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./page-page2.js */ "./tests/page-page2.js");
+/* harmony import */ var _page_page3_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./page-page3.js */ "./tests/page-page3.js");
+/* harmony import */ var _page_page4_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./page-page4.js */ "./tests/page-page4.js");
+/* harmony import */ var _page_pageX_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./page-pageX.js */ "./tests/page-pageX.js");
+/* harmony import */ var _page_page404_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./page-page404.js */ "./tests/page-page404.js");
+/* harmony import */ var _page_show_fail_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./page-show-fail.js */ "./tests/page-show-fail.js");
+
+
+
+
+
+
+
+
+
+window.addEventListener('DOMContentLoaded', async function () {
+  await _src_index_js__WEBPACK_IMPORTED_MODULE_0__.init({
+    error404PageName: 'page404',
+    defaultPageName: 'page1',
+    beforeHide: message => new Promise(resolve => {
+      resolve(confirm(message));
+    })
+  });
+
+  // listen for navigations
+  document.addEventListener('click', e => {
+    if (e.ctrlKey || e.metaKey) return;
+    var $a = e.target.matches('a') ? e.target : e.target.closest('a');
+    if (!$a) return;
+    var href = $a.pathname + $a.search + $a.hash;
+    _src_index_js__WEBPACK_IMPORTED_MODULE_0__.navigate(href);
+    e.preventDefault();
+  }, false);
+  document.querySelector('.btnStack').addEventListener('click', e => {
+    _src_index_js__WEBPACK_IMPORTED_MODULE_0__.printStack();
+  });
+  window.addEventListener("page-manager.url-changed", e => {
+    console.log(e.detail.url);
+  });
+  await _src_index_js__WEBPACK_IMPORTED_MODULE_0__.ready();
+});
+})();
+
+/******/ })()
+;
+//# sourceMappingURL=main.js.map