@verdant-web/store 5.4.3 → 5.5.0

package/src/entities/Entity.ts

@@ -27,7 +27,7 @@ import {
 	validateEntityField,
 } from '@verdant-web/common';
 import { Context } from '../context/context.js';
-import { CHILD_FILE_CHANGED } from '../files/EntityFile.js';
+import { EntityFileContext } from '../files/EntityFile.js';
 import { FileManager } from '../files/FileManager.js';
 import { processValueFiles } from '../files/utils.js';
 import { ClientWithCollections, EntityFile } from '../index.js';
@@ -751,16 +751,38 @@ export class Entity<
 		this.emit('changeDeep', target, ev);
 		this.parent?.deepChange(target, ev);
 	};
-	[CHILD_FILE_CHANGED] = (file: EntityFile) => {
-		// consistent with prior behavior, but kind of arbitrary.
-		this.deepChange(this, { isLocal: false, oid: this.oid });
-	};
+	private createFileContext = (key: any): EntityFileContext => ({
+		oid: this.oid,
+		key,
+		getFileRef: () => {
+			const file = this.rawView?.[key];
+			return isFileRef(file) ? file : null;
+		},
+		applyFileRef: (file) => {
+			if (this.readonlyKeys.includes(key as string)) {
+				throw new Error(`Cannot set readonly key ${key.toString()}`);
+			}
+			this.addPendingOperations(
+				this.isList
+					? this.patchCreator.createListSet(this.oid, key, file)
+					: this.patchCreator.createSet(this.oid, key, file),
+			);
+		},
+		subscribe: (callback) => this.subscribe('change', callback),
+		onChange: () => this.deepChange(this, { isLocal: false, oid: this.oid }),
+	});
 
 	private getChild = (key: any, oid: ObjectIdentifier) => {
 		const schema = getChildFieldSchema(this.schema, key);
 		if (!schema) {
+			let schemaString = '';
+			try {
+				schemaString = JSON.stringify(this.schema);
+			} catch {
+				schemaString = '<unable to stringify schema>';
+			}
 			throw new Error(
-				`No schema for key ${String(key)} in ${JSON.stringify(this.schema)}`,
+				`No schema for key ${String(key)} in ${schemaString} (${this.oid})`,
 			);
 		}
 		return this.entityFamily.get({
@@ -828,7 +850,7 @@ export class Entity<
 				const file = this.files.get(child.id, {
 					downloadRemote: !!fieldSchema.downloadRemote,
 					ctx: this.ctx,
-					parent: this,
+					fileContext: this.createFileContext(key),
 				});
 
 				return file as KeyValue[Key];
@@ -1013,7 +1035,7 @@ export class Entity<
 				});
 			}
 		}
-		return processValueFiles(value, (file) => this.files.add(file, this));
+		return processValueFiles(value, (file) => this.files.add(file));
 	};
 
 	private getDeleteMode = (key: any) => {

package/src/entities/EntityStore.ts

@@ -389,7 +389,7 @@ export class EntityStore extends Disposable {
 			'files to new entity',
 			oid,
 		);
-		fileRefs.forEach((file) => this.files.add(file, entity));
+		fileRefs.forEach((file) => this.files.add(file));
 		return entity;
 	};
 

package/src/files/EntityFile.ts

@@ -1,6 +1,11 @@
-import { EventSubscriber, FileData } from '@verdant-web/common';
+import {
+	EventSubscriber,
+	FileData,
+	FileRef,
+	ObjectIdentifier,
+	PropertyName,
+} from '@verdant-web/common';
 import { Context } from '../context/context.js';
-import { Entity } from '../entities/Entity.js';
 
 export type EntityFileEvents = {
 	change: () => void;
@@ -9,12 +14,23 @@ export type EntityFileEvents = {
 export const UPDATE = Symbol('entity-file-update');
 export const MARK_FAILED = Symbol('entity-file-mark-failed');
 
-// this one goes on Entity
-export const CHILD_FILE_CHANGED = Symbol('child-file-changed');
+export interface EntityFileContext {
+	readonly oid: ObjectIdentifier;
+	readonly key: PropertyName;
+	getFileRef(): FileRef | null;
+	applyFileRef(file: FileRef): void;
+	subscribe(callback: () => void): () => void;
+	onChange(): void;
+}
 
 export type EntityFileSnapshot = {
 	id: string;
 	url?: string | null;
+	name: string;
+	remote: boolean;
+	type: string;
+	file?: Blob | null;
+	alt: string | null;
 };
 
 /**
@@ -30,26 +46,29 @@ export class EntityFile extends EventSubscriber<EntityFileEvents> {
 	private _failedReason: string | undefined;
 	private _downloadRemote = false;
 	private _uploaded = false;
+	private _alt: string | null = null;
 	private ctx: Context;
 	private unsubscribes: (() => void)[] = [];
-	private parent: Entity;
+	private fileContext: EntityFileContext;
 
 	constructor(
 		public readonly id: string,
 		{
 			downloadRemote = false,
 			ctx,
-			parent,
+			fileContext,
 		}: {
 			downloadRemote?: boolean;
 			ctx: Context;
-			parent: Entity;
+			fileContext: EntityFileContext;
 		},
 	) {
 		super();
 		this.ctx = ctx;
-		this.parent = parent;
+		this.fileContext = fileContext;
 		this._downloadRemote = downloadRemote;
+		this._alt = fileContext.getFileRef()?.alt ?? null;
+		this.unsubscribes.push(fileContext.subscribe(this.onContextChange));
 
 		this.unsubscribes.push(
 			this.ctx.internalEvents.subscribe(`fileUploaded:${id}`, this.onUploaded),
@@ -68,9 +87,31 @@ export class EntityFile extends EventSubscriber<EntityFileEvents> {
 	get error() {
 		return this._failedReason || null;
 	}
+	get alt() {
+		return this._alt;
+	}
+
+	setAlt = (alt: string | null) => {
+		const file = this.fileContext.getFileRef();
+		if (!file || file.id !== this.id) {
+			throw new Error(
+				'Cannot set alt text on a file which is no longer present',
+			);
+		}
+		if ((file.alt ?? null) === alt) return;
+		this.fileContext.applyFileRef({ ...file, alt });
+	};
+
+	private onContextChange = () => {
+		const nextAlt = this.fileContext.getFileRef()?.alt ?? null;
+		if (nextAlt !== this._alt) {
+			this._alt = nextAlt;
+			this.emitChange();
+		}
+	};
 
 	private emitChange() {
-		this.parent[CHILD_FILE_CHANGED](this);
+		this.fileContext.onChange();
 		this.emit('change');
 	}
 
@@ -135,7 +176,7 @@ export class EntityFile extends EventSubscriber<EntityFileEvents> {
 		this.dispose();
 	};
 
-	getSnapshot(): FileData {
+	getSnapshot(): EntityFileSnapshot {
 		return {
 			id: this.id,
 			url: this._fileData?.url ?? this._objectUrl ?? undefined,
@@ -143,6 +184,7 @@ export class EntityFile extends EventSubscriber<EntityFileEvents> {
 			remote: this._fileData?.remote ?? false,
 			type: this.type ?? '',
 			file: this._fileData?.file,
+			alt: this.alt,
 		};
 	}
 }

package/src/files/FileManager.ts

@@ -1,15 +1,20 @@
 import { FileData } from '@verdant-web/common';
 import { Context } from '../context/context.js';
-import { Entity } from '../entities/Entity.js';
 import { Disposable } from '../internal.js';
 import { Sync } from '../sync/Sync.js';
-import { EntityFile, MARK_FAILED, UPDATE } from './EntityFile.js';
+import {
+	EntityFile,
+	EntityFileContext,
+	MARK_FAILED,
+	UPDATE,
+} from './EntityFile.js';
 
 export class FileManager extends Disposable {
 	private sync;
 	private context;
 
-	private cache = new Map<string, EntityFile>();
+	private cache = new Map<string, WeakRef<EntityFile>>();
+	private fileData = new Map<string, WeakRef<FileData>>();
 
 	constructor({ sync, context }: { sync: Sync; context: Context }) {
 		super();
@@ -23,24 +28,17 @@ export class FileManager extends Disposable {
 		);
 	}
 
-	add = async (file: FileData, parent: Entity) => {
-		// immediately cache the file
-		let entityFile = this.cache.get(file.id);
-		if (!entityFile) {
-			entityFile = new EntityFile(file.id, { ctx: this.context, parent });
-			this.cache.set(file.id, entityFile);
-		}
-
+	add = async (file: FileData) => {
 		if (!file.remote) {
 			// immediately update local files.
-			entityFile[UPDATE](file);
+			this.updateFileData(file);
 		}
 		// this will download any original remote file and trigger a re-upload to the
 		// new file's identity, in addition to storing it on disk
 		const processedFile = await (
 			await this.context.files
 		).add(file, { cloneRemote: true });
-		entityFile[UPDATE](processedFile);
+		this.updateFileData(processedFile);
 	};
 
 	/**
@@ -49,22 +47,49 @@ export class FileManager extends Disposable {
 	 */
 	get = (
 		id: string,
-		options: { downloadRemote?: boolean; ctx: Context; parent: Entity },
+		options: {
+			downloadRemote?: boolean;
+			ctx: Context;
+			fileContext: EntityFileContext;
+		},
 	) => {
-		if (this.cache.has(id)) {
-			return this.cache.get(id)!;
+		const cacheKey = `${options.fileContext.oid}:${String(options.fileContext.key)}:${id}`;
+		const cachedFile = this.cache.get(cacheKey)?.deref();
+		if (cachedFile) {
+			return cachedFile;
 		}
+		this.cache.delete(cacheKey);
 		const file = new EntityFile(id, options);
-		this.cache.set(id, file);
-		this.load(file);
+		this.cache.set(cacheKey, this.context.weakRef(file));
+		const data = this.fileData.get(id)?.deref();
+		if (data) {
+			file[UPDATE](data);
+		} else {
+			this.fileData.delete(id);
+			this.load(file);
+		}
 		return file;
 	};
 
+	private updateFileData = (data: FileData) => {
+		this.fileData.set(data.id, this.context.weakRef(data));
+		for (const [key, fileRef] of this.cache) {
+			const file = fileRef.deref();
+			if (!file) {
+				this.cache.delete(key);
+				continue;
+			}
+			if (file.id === data.id) {
+				file[UPDATE](data);
+			}
+		}
+	};
+
 	private load = async (file: EntityFile) => {
 		const fileData = await (await this.context.files).get(file.id);
 		// immediately apply any file data we have
 		if (fileData) {
-			file[UPDATE](fileData);
+			this.updateFileData(fileData);
 		}
 
 		if (!fileData?.url && (!fileData || fileData.remote)) {
@@ -96,7 +121,7 @@ export class FileManager extends Disposable {
 						url: result.data.url,
 					};
 					await (await this.context.files).update(copyWithUrl);
-					file[UPDATE](result.data);
+					this.updateFileData(result.data);
 				} else {
 					this.context.log('error', 'Failed to load file', result);
 					if (!fileData) {

package/src/queries/BaseQuery.ts

@@ -1,5 +1,5 @@
 import { EventSubscriber } from '@verdant-web/common';
-import { Context } from '../context/context.js';
+import type { Context } from '../context/context.js';
 import { Entity } from '../entities/Entity.js';
 import { Disposable } from '../utils/Disposable.js';
 import {
@@ -8,6 +8,7 @@ import {
 	QueryRun,
 	QueryTiming,
 } from './diagnostics.js';
+import { enqueueQueryRun } from './QueryBatcher.js';
 import { filterResultSet } from './utils.js';
 
 export type BaseQueryEvents = {
@@ -28,11 +29,7 @@ export type QueryStatus = 'initial' | 'initializing' | 'revalidating' | 'ready';
 export const ON_ALL_UNSUBSCRIBED = Symbol('ON_ALL_UNSUBSCRIBED');
 export const UPDATE = Symbol('UPDATE');
 
-// export interface BaseQuery<T> {
-// 	subscribe(event: 'change', callback: (value: T) => void): () => void;
-// 	subscribe(event: 'statusChange', callback: (status: QueryStatus) => void): () => void;
-// 	subscribe(callback: (value: T) => void): () => void;
-// }
+const REVALIDATION_DEBOUNCE = 50;
 
 export abstract class BaseQuery<T> extends Disposable {
 	private _rawValue;
@@ -50,6 +47,8 @@ export abstract class BaseQuery<T> extends Disposable {
 	};
 	private _startedAt: number | null = null;
 	private _timingHistory: QueryRun[] = [];
+	private _revalidationTimeout: ReturnType<typeof setTimeout> | undefined;
+	private _needsTrailingRevalidation = false;
 
 	protected context;
 
@@ -80,6 +79,7 @@ export abstract class BaseQuery<T> extends Disposable {
 		this.key = key;
 		this.collection = collection;
 		this.type = this.constructor.name;
+		this.addDispose(() => clearTimeout(this._revalidationTimeout));
 		const shouldUpdateFn =
 			shouldUpdate ||
 			((collections: string[]) => collections.includes(collection));
@@ -88,11 +88,7 @@ export abstract class BaseQuery<T> extends Disposable {
 				'collectionsChanged',
 				(collections) => {
 					if (shouldUpdateFn(collections)) {
-						this.context.log('info', 'Updating query', this.key);
-						// immediately refilter the result set - deleted
-						// entities will already be nulled out
-						// this.refreshValue();
-						this.execute();
+						this.revalidate();
 					}
 				},
 			),
@@ -100,6 +96,23 @@ export abstract class BaseQuery<T> extends Disposable {
 		// TODO: subscribe to document changes and update if necessary.
 	}
 
+	private revalidate = () => {
+		if (this._revalidationTimeout !== undefined) {
+			this._needsTrailingRevalidation = true;
+			clearTimeout(this._revalidationTimeout);
+		} else {
+			this.execute();
+		}
+
+		this._revalidationTimeout = setTimeout(() => {
+			this._revalidationTimeout = undefined;
+			if (this._needsTrailingRevalidation) {
+				this._needsTrailingRevalidation = false;
+				this.execute();
+			}
+		}, REVALIDATION_DEBOUNCE);
+	};
+
 	get current() {
 		return this._value;
 	}
@@ -249,7 +262,7 @@ export abstract class BaseQuery<T> extends Disposable {
 		}
 		// no status change needed if already in a 'running' status.
 
-		this._executionPromise = this.run()
+		this._executionPromise = enqueueQueryRun(this.context, this.run)
 			.then(() => this._value)
 			.catch((err) => {
 				if (err instanceof Error) {

package/src/queries/QueryBatcher.ts

@@ -0,0 +1,54 @@
+import type { Context } from '../context/context.js';
+
+const BATCH_SIZE = 20;
+
+type QueuedRun = {
+	run: () => Promise<any>;
+	resolve: (value: any) => void;
+	reject: (reason?: any) => void;
+};
+
+class QueryBatcher {
+	private queue: QueuedRun[] = [];
+	private scheduled = false;
+
+	enqueue<T>(run: () => Promise<T>): Promise<T> {
+		const promise = new Promise<T>((resolve, reject) => {
+			this.queue.push({ run, resolve, reject });
+		});
+
+		if (!this.scheduled) {
+			this.scheduled = true;
+			queueMicrotask(this.flush);
+		}
+
+		return promise;
+	}
+
+	private flush = () => {
+		const batch = this.queue.splice(0, BATCH_SIZE);
+		for (const { run, resolve, reject } of batch) {
+			run().then(resolve, reject);
+		}
+
+		if (this.queue.length) {
+			setTimeout(this.flush, 0);
+		} else {
+			this.scheduled = false;
+		}
+	};
+}
+
+const batchers = new WeakMap<Context, QueryBatcher>();
+
+export function enqueueQueryRun<T>(
+	context: Context,
+	run: () => Promise<T>,
+): Promise<T> {
+	let batcher = batchers.get(context);
+	if (!batcher) {
+		batcher = new QueryBatcher();
+		batchers.set(context, batcher);
+	}
+	return batcher.enqueue(run);
+}