@trullock/page-manager 0.14.3 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trullock/page-manager",
-  "version": "0.14.3",
+  "version": "1.0.0",
   "description": "Single page app manager",
   "exports": {
     ".": "./src/index.js"
@@ -17,7 +17,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@trullock/router": "^0.2.5"
+    "@trullock/router": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

package/readme.md

@@ -8,16 +8,20 @@ Create a basic page like this:
 
 ```
 import {registerPage, Page} from '@trullock/page-manager';
-registerPage('view-thing', '/things/{thingId}', class extends Page {
-
+registerPage({
+	name: 'view-thing',
+	route: '/things/{thingId}',
+	pageClass: class extends Page { }
 });
 ```
 
-The first argument `'view-thing'` is the name of the page, this can be used to build/look-up its url later without needing to hardcode url strings everywhere
+`'view-thing'` is the name of the page, this can be used to build/look-up its url later without needing to hardcode url strings everywhere
+
+`'/things/{thingId}'` is the url (route) of the page
 
-The second argument `'/things/{thingId}'` is the url (route) of the page
+`pageClass` is a class definition for the page.
 
-The third arguent is a class definition for the page.
+This can by lazily loaded by providing `pageClassLoader: async () => { ... }` which returns the class type (not an instance of it)
 
 ### Routing
 
@@ -34,7 +38,11 @@ To build a URL from a route and some parameters, do this:
 ```
 import { getPath, registerPage } from '@trullock/page-manager';
 
-registerPage('view-thing', '/things/{thingId}', class extends Page { } );
+registerPage({
+	name: 'view-thing',
+	route: '/things/{thingId}',
+	pageClass: class extends Page { }
+});
 
 let url = getPath('view-thing', { thingId: 1 })
 // url == '/things/1'
@@ -298,12 +306,12 @@ In the case that were was no goal (i.e. you went directly to the current page, i
 PageManager is built so that it can lazily fetch page markup. To do this, use the following options:
 
 ```
-	// The path to make an HTTP request to to fetch the markup, given a route
-	fetchPath: route => '/pages/' + route.routeName + '.html',
-
-	// The fetch method, you probably dont want to mess with this implementation
-	fetchPageTemplate: route => {
-		return fetch(options.fetchPath(route))
+registerPage({
+	name: 'view-thing',
+	route: '/things/{thingId}',
+	pageClass: class extends Page { },
+	loadMarkup: routeResult => {
+		return fetch('/pages/' + routeResult.name + '.html')
 			.then(r => r.text())
 			.then(html => {
 				var $div = document.createElement('div');
@@ -312,10 +320,11 @@ PageManager is built so that it can lazily fetch page markup. To do this, use th
 				return $div.firstElementChild;
 			})
 			.then($template => {
-				pageTemplateCache[route.pattern] = $template;
+				pageTemplateCache[routeResult.pattern] = $template;
 				return $template;
 			});
-	},
+	}
+});
 
 	// Once a page has been fetched and rendered from its template, it needs attaching to the DOM. Use this options to control where it gets inserted.
 	attachMarkup: $html => document.body.appendChild($html),

package/src/index.js

@@ -1,7 +1,6 @@
 import router from '@trullock/router';
 
-var pageHash = {},
-	pageCache = {},
+var pageCache = {},
 	pageTemplateCache = {},
 	stack = [],
 	stackPointer = -1;
@@ -13,21 +12,7 @@ var lastNavigationDirection = null;
 var goal = null;
 var backData = {};
 var options = {
-	fetchPath: route => '/pages/' + route.routeName + '.html',
-	fetchPageTemplate: async route => {
-		const response = await fetch(options.fetchPath(route));
-		const html = await response.text();
-		
-		var $div = document.createElement('div');
-		$div.innerHTML = html;
-		const $template = $div.firstElementChild;
-
-		// TODO: why is this in here and not in the caller?
-		pageTemplateCache[route.pattern] = $template;
-
-		return $template;
-	},
-	pageInterrupt: route => null,
+	pageInterrupt: routeResult => null,
 	attachMarkup: $html => document.body.appendChild($html),
 	prepareMarkup: $html => { },
 	loadingPageName: 'loading',
@@ -36,35 +21,22 @@ var options = {
 	beforeHide: null
 }
 
-export const pages = pageHash;
-
-export function registerPage(argA, argB, argC) {
+export function registerPage(opts) {
 
-	let namedRoutes = null, 
-		pageClass = null;
-
-	if(argC == undefined)
-	{
-		namedRoutes = argA;
-		pageClass = argB;
-	} else {
-		namedRoutes = {
-			[argA]: argB
-		};
-		pageClass = argC;
-	}
-	
+	let loadPageClass = opts.pageClass || opts.pageClassLoader;
+	let namedRoutes = opts.namedRoutes || { [opts.name]: opts.route };
+	let auth = opts.auth || null;
+	let cacheMarkupBy = opts.cacheMarkupBy || 'path'
 
 	for (const [name, route] of Object.entries(namedRoutes)) {
-		router.addRoute(name, route, pageClass);
-
-		pageHash[name] = {
-			route: route,
-			pageClass: pageClass
-		}
+		router.addRoute(name, route, {
+			route,
+			auth,
+			loadPageClass,
+			loadMarkup: opts.loadMarkup,
+			cacheMarkupBy
+		});
 	}
-
-	return pageClass;
 }
 
 export function getPath(name, values) {
@@ -92,13 +64,13 @@ function emitUrlChanged(url)
 // TODO: 404 and error too?
 function initLoading()
 {
-	var entry = pageHash[options.loadingPageName];
+	var entry = router.routesByName(options.loadingPageName);
 	var route = router.parse(entry.route);
 	return loadPage(route, {});
 }
 
 function showLoading() {
-	var pageLookup = pageHash[options.loadingPageName];
+	var pageLookup = router.routesByName(options.loadingPageName);
 	var route = router.parse(pageLookup.route);
 	var data = {
 		route: route,
@@ -113,27 +85,28 @@ function showLoading() {
 }
 
 function hideLoading() {
-	var pageLookup = pageHash[options.loadingPageName];
+	var pageLookup = router.routesByName(options.loadingPageName);
 	var route = router.parse(pageLookup.route);
 	var page = (pageCache[route.path] || pageCache[route.pattern]).page;
 	return Promise.resolve(page.hide());
 }
 
-async function loadPage(route, data) {
-
-	var fetchPage = pageTemplateCache[route.pattern] ? Promise.resolve(pageTemplateCache[route.pattern]) : options.fetchPageTemplate(route);
-
-	const $template = await fetchPage;
+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);
 	
-	let page = new (route.pageClass)($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 = route.pageClass.cacheMarkupBy == 'path' ? route.path : route.pattern;
+	let cacheKey = routeResult.data.cacheMarkupBy == 'path' ? routeResult.path : routeResult.pattern;
 	pageCache[cacheKey] = {
 		$html,
 		page
@@ -142,49 +115,52 @@ async function loadPage(route, data) {
 	return page;
 }
 
-async function showPage(url, data, event) {
-	var route = router.parse(url);
-	if (route == null) {
+async function showPage(url, data, event)
+{
+	var routeResult = router.parse(url);
+	if (routeResult == null) {
 		console.error(`Can't find page: '${url}'`);
 		
-		let page404 = pageHash[options.error404PageName];
-		route = router.parse(page404.route)
+		let page404 = router.routesByName(options.error404PageName);
+		routeResult = router.parse(page404.route)
 	}
 
 	data = data || {};
-	for (let key in route.params)
-		data[key] = route.params[key];
+	for (let key in routeResult.params)
+		data[key] = routeResult.params[key];
 
 	data.route = {
 		url: url,
-		path: route.path,
-		routeName: route.routeName,
-		params: route.params
+		path: routeResult.path,
+		name: routeResult.name,
+		params: routeResult.params
 	};
 	data.event = event;
 
-	let interrupt = await Promise.resolve(options.pageInterrupt(route));
+	let interrupt = await Promise.resolve(options.pageInterrupt(routeResult));
 	if(interrupt)
 	{
 		goal = { url, data };
 		return showPage(interrupt.url, null, event);
 	}
 	
-	var getPage = showLoading().then(() => {
-		if (pageCache[route.path])
-			return pageCache[route.path].page;
-
-		if (pageCache[route.pattern])
-			return pageCache[route.pattern].page;
+	await showLoading();
 
-		return loadPage(route, data)
-	});
+	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 });
@@ -201,10 +177,11 @@ async function showPage(url, data, event) {
 
 	let currentState = stack[stackPointer];
 
-	if (currentState.data.route.path == route.path) {
+	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;
 	}
 
@@ -225,6 +202,7 @@ async function showPage(url, data, event) {
 			// 	else if (event.action == 'fwd')
 			// 		history.go(-1);
 			// });
+	await hideLoading();
 	return page
 }
 
@@ -234,14 +212,12 @@ async function doShow(page, data) {
 
 	await Promise.resolve(page.show(data));
 	document.title = page.title;
-	await hideLoading();
 }
 
 async function doUpdate(page, data) {
 
 	await Promise.resolve(page.update(data));
 	document.title = page.title
-	await hideLoading();
 }
 
 function handleHistoryAction(event, url, data, page) {
@@ -320,26 +296,6 @@ export async function init(opts) {
 		}
 	}
 
-	// handle pages whose markup is already loaded in the page
-	for (var key in pageHash) {
-		if (pageHash[key].pageClass.existingDomSelector !== undefined) {
-			
-			if(pageHash[key].pageClass.existingDomSelector === null)
-				continue;
-
-			let $html = document.querySelector(pageHash[key].pageClass.existingDomSelector)
-			if(!$html)
-			{
-				console.error(`Unable to find DOM element '${pageHash[key].pageClass.existingDomSelector}' for page '${key}'`)
-				continue;
-			}
-			
-			// TODO: this is inefficient for non parameterised routes. There will always be HTML in memory and then copied for the page once loaded
-			pageTemplateCache[router.routesByName[key]._pattern] = $html;
-			$html.parentElement.removeChild($html);	
-		}
-	}
-
 	await initLoading();
 	
 	// set initial page

package/src/page.js

@@ -5,8 +5,6 @@ export default class Page {
 		this.visible = false;
 	}
 
-	static cacheMarkupBy = 'route'
-
 	_title = null;
 	get title() {
 		return this._title;

package/tests/lolpack.js

@@ -12,7 +12,7 @@ import pageShowFail from './page-show-fail.js'
 window.addEventListener('DOMContentLoaded', function () {
 	pageManager.init({
 		pageContainer: () => document.body,
-		fetchPath: route => '/pages/' + route.routeName + '.htm',
+		fetchPath: route => '/pages/' + route.name + '.htm',
 		error404PageName: 'page404',
 		beforeHide: message => new Promise(resolve => {
 			resolve(confirm(message))

package/tests/page.js

@@ -1,6 +1,6 @@
-export default class Page {
+export const cacheMarkupBy = 'route'
 
-	static cacheMarkupBy = 'route'
+export default class Page {
 	
 	constructor($page){
 		this.$page = $page;