subscribeToRender must manage subscribing and unsubscribing

...because some elements (appbar) gets removed and re-added without destruction.

packages/gallery/src/interface/allImages.js

@@ -179,11 +179,12 @@ export function AllImagesView(vm, params, key, context) {
 			popAppBarState();
 			pushAppBarState();
 		}),
-			subscribeToRender(
-				vm,
-				[selectedIds, images, selectMode],
-				[la.subscribe(res => images.splice(0, images.length, ...res))]
-			);
+			subscribeToRender(vm, [
+				selectedIds,
+				images,
+				selectMode,
+				() => la.subscribe(res => images.splice(0, images.length, ...res))
+			]);
 	});
 
 	function renderSection({ title, sectionId, images: _images }) {

packages/gallery/src/interface/focus.js

@@ -21,7 +21,7 @@ import { CLICKABLE, FILL_STYLE } from './styles.js';
 
 export function FocusView(vm, params, key, { appbar, appbarView }) {
 	const id = prop();
-	const doc = prop(null, pouchDocHash);
+	const doc = prop({}, pouchDocHash);
 	const { body } = document;
 	const nextLink = prop();
 	const prevLink = prop();
@@ -90,9 +90,12 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 	// Subscribe to our changables.
 	subscribeToRender(
 		vm,
-		[doc, imageStyle, nextLink, prevLink],
 		[
+			doc,
+			nextLink,
+			prevLink,
 			// Look for our image and set it.
+			() =>
 				id.subscribe(async _id => {
 					if (!_id) {
 						return;
@@ -108,7 +111,8 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 						prevLink(prev.length ? router.href('focus', { id: prev[0]._id }) : null);
 					});
 				})
-		]
+		],
+		true
 	);
 
 	// Watch for focus changes
@@ -137,7 +141,7 @@ export function FocusView(vm, params, key, { appbar, appbarView }) {
 					: null,
 				AttachmentImageView({
 					src: _id ? doc().sizes.full : null,
-					style: imageStyle()
+					style: imageStyle
 				}),
 				nextLink()
 					? nextClickZone({ href: nextLink() }, [

packages/gallery/src/utils/domvm.js

@@ -4,16 +4,34 @@ import { defineView } from 'domvm/dist/mini/domvm.mini.js';
 import { prop, computed, call } from 'frptools';
 import { deepAssign } from './conversion.js';
 import { error } from '../services/console.js';
+import { streamConfig } from './event.js';
 
-export function subscribeToRender(vm, subscribables, subscriptions) {
+export function subscribeToRender(vm, subscribables, autoSub = false) {
 	const redraw = () => vm.redraw();
-	const subList = subscribables.map(s => s.subscribe(redraw));
+	const subAll = () =>
+		(subList = subscribables.map(s => (streamConfig.is(s) ? streamConfig.sub(s, redraw) : s())));
+	let subList = [];
 
 	vm.config({
 		hooks: {
-			willUnmount: () => subList.concat(subscriptions).forEach(call)
+			willMount: () => {
+				if (!subList.length) {
+					subAll();
+				}
+			},
+			willUnmount: () => {
+				if (subList.length) {
+					subList.forEach(call);
+					subList = [];
+				}
+			}
 		}
 	});
+
+	// If the there is a node, we missed our opportunity to catch willMount.  Sometimes we just want to force it.
+	if (vm.node || autoSub) {
+		subAll();
+	}
 }
 
 export function patchRefStyle(ref, style, evt, node, vm) {