aberdeen 0.2.4 → 0.4.0

package/src/prediction.ts

@@ -1,4 +1,4 @@
-import {withEmitHandler} from 'aberdeen'
+import {withEmitHandler} from './aberdeen.js'
 
 type ObsCollection = any
 type Patch = Map<ObsCollection, Map<any, [any, any]>>;

package/src/route.ts

@@ -1,48 +1,76 @@
-import {Store, observe, immediateObserve, inhibitEffects} from 'aberdeen'
+import {Store, observe, immediateObserve, runQueue, getParentElement, clean} from './aberdeen.js'
 
 /**
  * A `Store` object that holds the following keys:
  * - `path`: The current path of the URL split into components. For instance `/` or `/users/123/feed`. Updates will be reflected in the URL and will *push* a new entry to the browser history.
  * - `p`: Array containing the path segments. For instance `[]` or `['users', 123, 'feed']`. Updates will be reflected in the URL and will *push* a new entry to the browser history. Also, the values of `p` and `path` will be synced.
- * - `search`: An observable object containing search parameters (a split up query string). For instance `{order: "date", title: "something"}` or just `{}`. Updates will be reflected in the URL, modifying the current history state. 
+ * - `search`: An observable object containing search parameters (a split up query string). For instance `{order: "date", title: "something"}` or just `{}`. By default, updates will be reflected in the URL, replacing the current history state. 
  * - `hash`: The document hash part of the URL. For instance `"#section-title"`. It can also be an empty string. Updates will be reflected in the URL, modifying the current history state.
- * - `state`: The browser history *state* object for the current page. Creating or removing top-level keys will cause *pushing* a new entry to the browser history.
+ * - `id`: A part of the browser history *state* that is considered part of the page *identify*, meaning changes will (by default) cause a history push, and when going *back*, it must match.
+ * - `aux`: The auxiliary part of the browser history *state*, not considered part of the page *identity*. Changes will be reflected in the browser history using a replace. 
+ * - `depth`: The navigation depth of the current session. Starts at 1. Writing to this property has no effect.
+ * - `nav`: The navigation action that got us to this page. Writing to this property has no effect.
+ *    - `"load"`: An initial page load.
+ *    - `"back"` or `"forward"`: When we navigated backwards or forwards in the stack.
+ *    - `"push"`: When we added a new page on top of the stack. 
  * 
  * The following key may also be written to `route` but will be immediately and silently removed: 
  * - `mode`: As described above, this library takes a best guess about whether pushing an item to the browser history makes sense or not. When `mode` is...
  * 	  	- `"push"`: Force creation of a new browser history entry. 
  * 	  	- `"replace"`: Update the current history entry, even when updates to other keys would normally cause a *push*.
- * 		- `"back"`: Unwind the history (like repeatedly pressing the *back* button) until we find a page that matches the given `path`, `search` and top-level `state` keys, and then *replace* that state by the full given state.
+ * 		- `"back"`: Unwind the history (like repeatedly pressing the *back* button) until we find a page that matches the given `path` and `id`, and then *replace* that state by the full given state.
  */
-export const route = new Store()
 
-// Contains url (path+search) and state for all history entries for this session, with the current
-// entry on top. It is used for `mode: "back"`, to know how many entries to go back.
-let stack: Array<{url: string, state: object}> = []
+// Idea: split `state` into `pstate` (primary) and `astate` (auxilary). The former is used to determine if new pages should be pushed and if, when moving back, a page matches.
+// Moving back is done by just doing history.back() while depth > 1, and repeating in handleLocationUpdate until matching page is found (or overriding base page).
 
-// Keep track of the initial history length, so we'll always know how long our `stack` should be.
-const initialHistoryLength = history.length;
+export const route = new Store()
 
-// Keep a copy of the last known history state, so we can tell if the user changed one of its
-// top-level keys, so we can decide between push/replace when `mode` is not set.
-let prevHistoryState: any
+let stateRoute = {
+	nonce: -1,
+	depth: 0,
+}
 
 // Reflect changes to the browser URL (back/forward navigation) in the `route` and `stack`.
 function handleLocationUpdate(event?: PopStateEvent) {
+	let state = event?.state || {}
+	let nav = 'load'
+	if (state.route?.nonce == null) {
+		state.route = {
+			nonce: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER),
+			depth: 1,
+		} 
+		history.replaceState(state, '')
+	} else if (stateRoute.nonce === state.route.nonce) {
+		nav = state.route.depth > stateRoute.depth ? 'forward' : 'back'
+	}
+	stateRoute = state.route
+
+	if (route('mode').peek() === 'back') {
+		route('depth').set(stateRoute.depth)
+		// We are still in the process of searching for a page in our navigation history..
+		updateHistory()
+		return
+	}
+
 	const search: any= {}
 	for(let [k, v] of new URLSearchParams(location.search)) {
 		search[k] = v
 	}
-	prevHistoryState = event ? (event.state || {}) : {}
-	stack.length = Math.max(1, history.length - initialHistoryLength + 1)
-	stack[stack.length-1] = {url: location.pathname + location.search, state: prevHistoryState}
+
 	route.set({
 		path: location.pathname,
 		p: location.pathname.slice(1).split('/'),
 		search: search,
 		hash: location.hash,
-		state: prevHistoryState,
+		id: state.id,
+		aux: state.aux,
+		depth: stateRoute.depth,
+		nav,
 	})
+
+	// Forward or back event. Redraw synchronously, because we can!
+	if (event) runQueue();
 }
 handleLocationUpdate()
 window.addEventListener("popstate", handleLocationUpdate);
@@ -52,80 +80,115 @@ window.addEventListener("popstate", handleLocationUpdate);
 // initiated `set` will see the canonical form (instead of doing a rerender shortly after,
 // or crashing due to non-canonical data).
 function updatePath(): void {
-	let path = route.get('path')
-	if (path == null && route.peek('p')) {
+	let path = route('path').get()
+	if (path == null && route('p').peek()) {
 		return updateP();
 	} 
 	path = ''+path
 	if (!path.startsWith('/')) path = '/'+path
-	route.set('path', path)
-	route.set('p', path.slice(1).split('/'))
+	route('path').set(path)
+	route('p').set(path.slice(1).split('/'))
 }
 immediateObserve(updatePath)
 
 function updateP(): void {
-	const p = route.get('p')
-	console.log('imm p', p)
-	if (p == null && route.peek('path')) {
+	const p = route('p').get()
+	if (p == null && route('path').peek()) {
 		return updatePath()
 	}
 	if (!(p instanceof Array)) {
 		console.error(`aberdeen route: 'p' must be a non-empty array, not ${JSON.stringify(p)}`)
-		route.set('p', ['']) // This will cause a recursive call this observer.
+		route('p').set(['']) // This will cause a recursive call this observer.
 	} else if (p.length == 0) {
-		route.set('p', ['']) // This will cause a recursive call this observer.
+		route('p').set(['']) // This will cause a recursive call this observer.
 	} else {
-		route.set('path', '/' + p.join('/'))
+		route('path').set('/' + p.join('/'))
 	}
 }
 immediateObserve(updateP)
 
 immediateObserve(() => {
-	if (route.getType('search') !== 'object') route.set('search', {})
+	if (route('search').getType() !== 'object') route('search').set({})
 })
 
 immediateObserve(() => {
-	if (route.getType('state') !== 'object') route.set('state', {})
+	if (route('state').getType() !== 'object') route('state').set({})
 })
 
 immediateObserve(() => {
-	let hash = ''+(route.get('hash') || '')
+	let hash = ''+(route('hash').get() || '')
 	if (hash && !hash.startsWith('#')) hash = '#'+hash
-	route.set('hash', hash)
+	route('hash').set(hash)
 })
 
-// This deferred-mode observer will update the URL and history based on `route` changes.
-observe(() => {
+function isSamePage(path: string, state: any): boolean {
+	return location.pathname === path && JSON.stringify(history.state.id) === JSON.stringify(state.id)
+}
+
+function updateHistory() {
 	// Get and delete mode without triggering anything.
-	const mode = route.get('mode')
-	if (mode) inhibitEffects(() => route.delete('mode'))
-	const state = route.get('state')
+	let mode = route('mode').get()
+	const state = {
+		id: route('id').get(),
+		aux: route('aux').get(),
+		route: stateRoute,
+	}
 	
 	// Construct the URL.
-	const path = route.get('path')
-	const search = new URLSearchParams(route.get('search')).toString()
-	const url = (search ? path+'?'+search : path) + route.get('hash')
+	const path = route('path').get()
 
 	// Change browser state, according to `mode`.
 	if (mode === 'back') {
-		let goDelta = 0
-		while(stack.length > 1) {
-			const item = stack[stack.length-1]
-			if (item.url === url && JSON.stringify(Object.keys(state||{})) === JSON.stringify(Object.keys(item.state||{}))) break // Found it!
-			goDelta--
-			stack.pop()
+		route('nav').set('back')
+		if (!isSamePage(path, state) && (history.state.route?.depth||0) > 1) {
+			history.back()
+			return
 		}
-		if (goDelta) history.go(goDelta)
+		mode = 'replace'
 		// We'll replace the state async, to give the history.go the time to take affect first.
-		setTimeout(() => history.replaceState(state, '', url), 0)
-		stack[stack.length-1] = {url,state}
-	} else if (mode === 'push' || (!mode && (location.pathname !== path || JSON.stringify(Object.keys(state||{})) !== JSON.stringify(Object.keys(prevHistoryState||{}))))) {
+		//setTimeout(() => history.replaceState(state, '', url), 0)
+	}
+
+	if (mode) route('mode').delete()
+	const search = new URLSearchParams(route('search').get()).toString()
+	const url = (search ? path+'?'+search : path) + route('hash').get()
+		
+	if (mode === 'push' || (!mode && !isSamePage(path, state))) {
+		stateRoute.depth++ // stateRoute === state.route
 		history.pushState(state, '', url)
-		stack.push({url,state})
+		route.merge({
+			nav: 'push',
+			depth: stateRoute.depth
+		})
 	} else {
+		// Default to `push` when the URL changed or top-level state keys changed.
 		history.replaceState(state, '', url)
-		stack[stack.length-1] = {url,state}
 	}
-	prevHistoryState = state
-})
+}
+
+// This deferred-mode observer will update the URL and history based on `route` changes.
+observe(updateHistory)
+
+
+/**
+ * Restore and store the vertical and horizontal scroll position for
+ * the parent element to the page state.
+ * 
+ * @param {string} name - A unique (within this page) name for this
+ * scrollable element. Defaults to 'main'.
+ */
+export function persistScroll(name: string = 'main') {
+	const el = getParentElement()
+	el.addEventListener('scroll', onScroll)
+	clean(() => el.removeEventListener('scroll', onScroll))
 
+	let restore = route('state', 'scroll', name).peek()
+	if (restore) {
+		Object.assign(el, restore)
+	}
+
+	function onScroll() {
+		route('mode').set('replace')
+		route('state', 'scroll', name).set({scrollTop: el.scrollTop, scrollLeft: el.scrollLeft})
+	}
+}

package/src/transitions.ts

@@ -1,4 +1,4 @@
-import {scheduleDomReader, scheduleDomWriter} from 'aberdeen'
+import {DOM_READ_PHASE, DOM_WRITE_PHASE} from './aberdeen.js'
 
 const FADE_TIME = 400
 const GROW_SHRINK_TRANSITION = `margin ${FADE_TIME}ms ease-out, transform ${FADE_TIME}ms ease-out`
@@ -20,34 +20,28 @@ function getGrowShrinkProps(el: HTMLElement) {
 * The transition doesn't look great for table elements, and may have problems
 * for other specific cases as well.
 */
-export function grow(el: HTMLElement): void {
-	// This timeout is to await all other elements having been added to the Dom
-	scheduleDomReader(() => {
-		// Make the element size 0 using transforms and negative margins.
-		// This causes a browser layout, as we're querying el.offset<>.
-		let props = getGrowShrinkProps(el)
-		
-		// The timeout is in order to batch all reads and then all writes when there
-		// are multiple simultaneous grow transitions.
-		scheduleDomWriter(() => {
-			Object.assign(el.style, props)
-			
-			// This timeout is to combine multiple transitions into a single browser layout
-			scheduleDomReader(() => {
-				// Make sure the layouting has been performed, to cause transitions to trigger
-				el.offsetHeight
-				scheduleDomWriter(() => {
-					// Do the transitions
-					el.style.transition = GROW_SHRINK_TRANSITION
-					for(let prop in props) el.style[prop as any] = ""
-					setTimeout(() => {
-						// Reset the element to a clean state
-						el.style.transition = ""
-					}, FADE_TIME)
-				})
-			})
-		})
-	})
+export async function grow(el: HTMLElement) {
+	// Wait until all DOM updates have been done. Then get info from the computed layout.
+	await DOM_READ_PHASE
+	let props = getGrowShrinkProps(el)
+
+	// In the write phase, make the element size 0 using transforms and negative margins.
+	await DOM_WRITE_PHASE
+	Object.assign(el.style, props)
+	
+	// Await read phase, to combine multiple transitions into a single browser layout
+	await DOM_READ_PHASE
+	// Make sure the layouting has been performed, to cause transitions to trigger
+	el.offsetHeight
+
+	// In the next write phase, do the transitions
+	await DOM_WRITE_PHASE
+	el.style.transition = GROW_SHRINK_TRANSITION
+	for(let prop in props) el.style[prop as any] = ''
+	setTimeout(() => {
+		// Disable transitions.
+		el.style.transition = ''
+	}, FADE_TIME)
 }
 
 /** Do a shrink transition for the given element, and remove it from the DOM
@@ -58,16 +52,18 @@ export function grow(el: HTMLElement): void {
 * The transition doesn't look great for table elements, and may have problems
 * for other specific cases as well.
 */
-export function shrink(el: HTMLElement): void {
-	scheduleDomReader(() => {
-		const props = getGrowShrinkProps(el)
-		// The timeout is in order to batch all reads and then all writes when there
-		// are multiple simultaneous shrink transitions.
-		scheduleDomWriter(() => {
-			el.style.transition = GROW_SHRINK_TRANSITION
-			Object.assign(el.style, props)
-			
-			setTimeout(() => el.remove(), FADE_TIME)
-		})
-	})
-}
+export async function shrink(el: HTMLElement) {
+	// Wait until all DOM updates have been done. Then get info from the computed layout.
+	await DOM_READ_PHASE
+	const props = getGrowShrinkProps(el)
+
+	// Batch starting transitions in the write phase.
+	await DOM_WRITE_PHASE
+	el.style.transition = GROW_SHRINK_TRANSITION
+	Object.assign(el.style, props)
+	
+	// Remove the element after the transition is done.
+	setTimeout(() => {
+		el.remove()
+	}, FADE_TIME)
+}