fabricjs-document-engine 0.3.0 → 0.5.0

package/dist/recovery/recovery-controller.cjs

@@ -0,0 +1,159 @@
+const require_asset_pipeline = require("../assets/asset-pipeline.cjs");
+//#region src/recovery/recovery-controller.ts
+const documentKeyPrefix = "document:";
+const unloadKeyPrefix = "unload:";
+const loadingKey = "loading";
+function documentKey(documentId) {
+	return `${documentKeyPrefix}${documentId}`;
+}
+function unloadKey(documentId) {
+	return `${unloadKeyPrefix}${documentId}`;
+}
+function newerRecord(checkpoint, unloadCopy) {
+	if (!unloadCopy) return checkpoint;
+	if (!checkpoint || unloadCopy.savedAt > checkpoint.savedAt) return {
+		...unloadCopy,
+		files: {
+			...checkpoint?.files,
+			...unloadCopy.files
+		}
+	};
+	return checkpoint;
+}
+function isRecoveryRecord(value) {
+	const record = value;
+	return typeof record?.documentId === "string" && typeof record.document === "object" && record.document !== null;
+}
+async function restoreRecordedFiles(record) {
+	const document = JSON.parse(JSON.stringify(record.document));
+	const recreatedUrls = /* @__PURE__ */ new Map();
+	await require_asset_pipeline.rewriteUrls(document, async (url) => {
+		const blob = record.files[url];
+		if (!blob) return url;
+		const recreated = recreatedUrls.get(url) ?? URL.createObjectURL(blob);
+		recreatedUrls.set(url, recreated);
+		return recreated;
+	});
+	return document;
+}
+function createRecoveryController(options) {
+	const { store } = options;
+	const interval = options.interval ?? 2e3;
+	const capturedFiles = /* @__PURE__ */ new Map();
+	const readyFiles = /* @__PURE__ */ new Map();
+	let timer;
+	let queue = Promise.resolve();
+	let checkpointWaiting;
+	function enqueue(task) {
+		const run = queue.then(task).catch(options.onError);
+		queue = run;
+		return run;
+	}
+	async function captureTabOnlyFiles(document) {
+		const files = {};
+		await require_asset_pipeline.rewriteUrls(document, async (url) => {
+			if (!url.startsWith("blob:")) return url;
+			let capturing = capturedFiles.get(url);
+			if (!capturing) {
+				capturing = fetch(url).then((response) => response.blob());
+				capturedFiles.set(url, capturing);
+				capturing.then((blob) => readyFiles.set(url, blob), () => void 0);
+				capturing.catch(() => capturedFiles.delete(url));
+			}
+			files[url] = await capturing;
+			return url;
+		});
+		return files;
+	}
+	function createRecord(document, files) {
+		return {
+			documentId: document.id,
+			savedAt: (/* @__PURE__ */ new Date()).toISOString(),
+			baseRevision: document.revision ?? 0,
+			document,
+			files
+		};
+	}
+	async function writeCheckpoint() {
+		checkpointWaiting = void 0;
+		if (!options.shouldWrite()) return;
+		const document = options.createDocument();
+		const record = createRecord(document, await captureTabOnlyFiles(document));
+		await store.set(documentKey(document.id), record);
+		options.onCheckpoint(record);
+	}
+	function writeCheckpointBeforeThePageCloses() {
+		cancel();
+		if (!options.shouldWrite()) return;
+		const document = options.createDocument();
+		if (store.setNow) {
+			store.setNow(unloadKey(document.id), createRecord(document, {}));
+			return;
+		}
+		const record = createRecord(document, Object.fromEntries(readyFiles));
+		store.set(documentKey(document.id), record).then(() => options.onCheckpoint(record), options.onError);
+	}
+	async function read(documentId) {
+		await queue;
+		const [checkpoint, unloadCopy] = await Promise.all([store.get(documentKey(documentId)), store.get(unloadKey(documentId))]);
+		return newerRecord(isRecoveryRecord(checkpoint) ? checkpoint : void 0, isRecoveryRecord(unloadCopy) ? unloadCopy : void 0);
+	}
+	function cancel() {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+	}
+	function flush() {
+		cancel();
+		checkpointWaiting ?? (checkpointWaiting = enqueue(writeCheckpoint));
+		return checkpointWaiting;
+	}
+	const handlePageHidden = () => writeCheckpointBeforeThePageCloses();
+	const handleVisibilityChange = () => {
+		if (document.visibilityState === "hidden") writeCheckpointBeforeThePageCloses();
+	};
+	const pageEvents = typeof window === "undefined" ? void 0 : window;
+	pageEvents?.addEventListener("pagehide", handlePageHidden);
+	pageEvents?.document.addEventListener("visibilitychange", handleVisibilityChange);
+	return {
+		schedule() {
+			if (timer !== void 0) return;
+			timer = setTimeout(() => {
+				timer = void 0;
+				flush();
+			}, interval);
+		},
+		flush,
+		cancel,
+		remove: (documentId) => enqueue(async () => {
+			await store.delete(unloadKey(documentId));
+			await store.delete(documentKey(documentId));
+		}),
+		read,
+		async list() {
+			await queue;
+			const documentIds = /* @__PURE__ */ new Set();
+			for (const key of await store.keys()) {
+				if (key.startsWith(documentKeyPrefix)) documentIds.add(key.slice(9));
+				if (key.startsWith(unloadKeyPrefix)) documentIds.add(key.slice(7));
+			}
+			return (await Promise.all([...documentIds].map(read))).filter((record) => record !== void 0).sort((first, second) => second.savedAt.localeCompare(first.savedAt));
+		},
+		markLoadStarted: (documentId) => store.set(loadingKey, {
+			documentId,
+			startedAt: (/* @__PURE__ */ new Date()).toISOString()
+		}).catch(options.onError),
+		markLoadFinished: () => store.delete(loadingKey).catch(options.onError),
+		async interruptedLoad() {
+			const marker = await store.get(loadingKey);
+			return marker && typeof marker.startedAt === "string" ? marker : void 0;
+		},
+		destroy() {
+			cancel();
+			pageEvents?.removeEventListener("pagehide", handlePageHidden);
+			pageEvents?.document.removeEventListener("visibilitychange", handleVisibilityChange);
+		}
+	};
+}
+//#endregion
+exports.createRecoveryController = createRecoveryController;
+exports.restoreRecordedFiles = restoreRecordedFiles;

package/dist/recovery/recovery-controller.d.cts

@@ -0,0 +1,19 @@
+import { FabricDocument } from "../document/document-format.cjs";
+import { RecoveryStore } from "./recovery-store.cjs";
+//#region src/recovery/recovery-controller.d.ts
+export interface RecoveryOptions {
+  store: RecoveryStore;
+  interval?: number;
+}
+export interface RecoveryRecord {
+  documentId: string;
+  savedAt: string;
+  baseRevision: number;
+  document: FabricDocument;
+  files: Record<string, Blob>;
+}
+export interface InterruptedLoad {
+  documentId: string | undefined;
+  startedAt: string;
+}
+//#endregion

package/dist/recovery/recovery-controller.d.ts

@@ -0,0 +1,19 @@
+import { FabricDocument } from "../document/document-format.js";
+import { RecoveryStore } from "./recovery-store.js";
+//#region src/recovery/recovery-controller.d.ts
+export interface RecoveryOptions {
+  store: RecoveryStore;
+  interval?: number;
+}
+export interface RecoveryRecord {
+  documentId: string;
+  savedAt: string;
+  baseRevision: number;
+  document: FabricDocument;
+  files: Record<string, Blob>;
+}
+export interface InterruptedLoad {
+  documentId: string | undefined;
+  startedAt: string;
+}
+//#endregion

package/dist/recovery/recovery-controller.js

@@ -0,0 +1,158 @@
+import { rewriteUrls } from "../assets/asset-pipeline.js";
+//#region src/recovery/recovery-controller.ts
+const documentKeyPrefix = "document:";
+const unloadKeyPrefix = "unload:";
+const loadingKey = "loading";
+function documentKey(documentId) {
+	return `${documentKeyPrefix}${documentId}`;
+}
+function unloadKey(documentId) {
+	return `${unloadKeyPrefix}${documentId}`;
+}
+function newerRecord(checkpoint, unloadCopy) {
+	if (!unloadCopy) return checkpoint;
+	if (!checkpoint || unloadCopy.savedAt > checkpoint.savedAt) return {
+		...unloadCopy,
+		files: {
+			...checkpoint?.files,
+			...unloadCopy.files
+		}
+	};
+	return checkpoint;
+}
+function isRecoveryRecord(value) {
+	const record = value;
+	return typeof record?.documentId === "string" && typeof record.document === "object" && record.document !== null;
+}
+async function restoreRecordedFiles(record) {
+	const document = JSON.parse(JSON.stringify(record.document));
+	const recreatedUrls = /* @__PURE__ */ new Map();
+	await rewriteUrls(document, async (url) => {
+		const blob = record.files[url];
+		if (!blob) return url;
+		const recreated = recreatedUrls.get(url) ?? URL.createObjectURL(blob);
+		recreatedUrls.set(url, recreated);
+		return recreated;
+	});
+	return document;
+}
+function createRecoveryController(options) {
+	const { store } = options;
+	const interval = options.interval ?? 2e3;
+	const capturedFiles = /* @__PURE__ */ new Map();
+	const readyFiles = /* @__PURE__ */ new Map();
+	let timer;
+	let queue = Promise.resolve();
+	let checkpointWaiting;
+	function enqueue(task) {
+		const run = queue.then(task).catch(options.onError);
+		queue = run;
+		return run;
+	}
+	async function captureTabOnlyFiles(document) {
+		const files = {};
+		await rewriteUrls(document, async (url) => {
+			if (!url.startsWith("blob:")) return url;
+			let capturing = capturedFiles.get(url);
+			if (!capturing) {
+				capturing = fetch(url).then((response) => response.blob());
+				capturedFiles.set(url, capturing);
+				capturing.then((blob) => readyFiles.set(url, blob), () => void 0);
+				capturing.catch(() => capturedFiles.delete(url));
+			}
+			files[url] = await capturing;
+			return url;
+		});
+		return files;
+	}
+	function createRecord(document, files) {
+		return {
+			documentId: document.id,
+			savedAt: (/* @__PURE__ */ new Date()).toISOString(),
+			baseRevision: document.revision ?? 0,
+			document,
+			files
+		};
+	}
+	async function writeCheckpoint() {
+		checkpointWaiting = void 0;
+		if (!options.shouldWrite()) return;
+		const document = options.createDocument();
+		const record = createRecord(document, await captureTabOnlyFiles(document));
+		await store.set(documentKey(document.id), record);
+		options.onCheckpoint(record);
+	}
+	function writeCheckpointBeforeThePageCloses() {
+		cancel();
+		if (!options.shouldWrite()) return;
+		const document = options.createDocument();
+		if (store.setNow) {
+			store.setNow(unloadKey(document.id), createRecord(document, {}));
+			return;
+		}
+		const record = createRecord(document, Object.fromEntries(readyFiles));
+		store.set(documentKey(document.id), record).then(() => options.onCheckpoint(record), options.onError);
+	}
+	async function read(documentId) {
+		await queue;
+		const [checkpoint, unloadCopy] = await Promise.all([store.get(documentKey(documentId)), store.get(unloadKey(documentId))]);
+		return newerRecord(isRecoveryRecord(checkpoint) ? checkpoint : void 0, isRecoveryRecord(unloadCopy) ? unloadCopy : void 0);
+	}
+	function cancel() {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+	}
+	function flush() {
+		cancel();
+		checkpointWaiting ?? (checkpointWaiting = enqueue(writeCheckpoint));
+		return checkpointWaiting;
+	}
+	const handlePageHidden = () => writeCheckpointBeforeThePageCloses();
+	const handleVisibilityChange = () => {
+		if (document.visibilityState === "hidden") writeCheckpointBeforeThePageCloses();
+	};
+	const pageEvents = typeof window === "undefined" ? void 0 : window;
+	pageEvents?.addEventListener("pagehide", handlePageHidden);
+	pageEvents?.document.addEventListener("visibilitychange", handleVisibilityChange);
+	return {
+		schedule() {
+			if (timer !== void 0) return;
+			timer = setTimeout(() => {
+				timer = void 0;
+				flush();
+			}, interval);
+		},
+		flush,
+		cancel,
+		remove: (documentId) => enqueue(async () => {
+			await store.delete(unloadKey(documentId));
+			await store.delete(documentKey(documentId));
+		}),
+		read,
+		async list() {
+			await queue;
+			const documentIds = /* @__PURE__ */ new Set();
+			for (const key of await store.keys()) {
+				if (key.startsWith(documentKeyPrefix)) documentIds.add(key.slice(9));
+				if (key.startsWith(unloadKeyPrefix)) documentIds.add(key.slice(7));
+			}
+			return (await Promise.all([...documentIds].map(read))).filter((record) => record !== void 0).sort((first, second) => second.savedAt.localeCompare(first.savedAt));
+		},
+		markLoadStarted: (documentId) => store.set(loadingKey, {
+			documentId,
+			startedAt: (/* @__PURE__ */ new Date()).toISOString()
+		}).catch(options.onError),
+		markLoadFinished: () => store.delete(loadingKey).catch(options.onError),
+		async interruptedLoad() {
+			const marker = await store.get(loadingKey);
+			return marker && typeof marker.startedAt === "string" ? marker : void 0;
+		},
+		destroy() {
+			cancel();
+			pageEvents?.removeEventListener("pagehide", handlePageHidden);
+			pageEvents?.document.removeEventListener("visibilitychange", handleVisibilityChange);
+		}
+	};
+}
+//#endregion
+export { createRecoveryController, restoreRecordedFiles };

package/dist/recovery/recovery-store.cjs

@@ -0,0 +1,19 @@
+//#region src/recovery/recovery-store.ts
+function createMemoryRecovery() {
+	const values = /* @__PURE__ */ new Map();
+	return {
+		get: async (key) => values.get(key),
+		set: async (key, value) => {
+			values.set(key, value);
+		},
+		setNow: (key, value) => {
+			values.set(key, value);
+		},
+		delete: async (key) => {
+			values.delete(key);
+		},
+		keys: async () => [...values.keys()]
+	};
+}
+//#endregion
+exports.createMemoryRecovery = createMemoryRecovery;

package/dist/recovery/recovery-store.d.cts

@@ -0,0 +1,10 @@
+//#region src/recovery/recovery-store.d.ts
+export interface RecoveryStore {
+  get(key: string): Promise<unknown>;
+  set(key: string, value: unknown): Promise<void>;
+  setNow?(key: string, value: unknown): void;
+  delete(key: string): Promise<void>;
+  keys(): Promise<string[]>;
+}
+export declare function createMemoryRecovery(): RecoveryStore;
+//#endregion

package/dist/recovery/recovery-store.d.ts

@@ -0,0 +1,10 @@
+//#region src/recovery/recovery-store.d.ts
+export interface RecoveryStore {
+  get(key: string): Promise<unknown>;
+  set(key: string, value: unknown): Promise<void>;
+  setNow?(key: string, value: unknown): void;
+  delete(key: string): Promise<void>;
+  keys(): Promise<string[]>;
+}
+export declare function createMemoryRecovery(): RecoveryStore;
+//#endregion

package/dist/recovery/recovery-store.js

@@ -0,0 +1,19 @@
+//#region src/recovery/recovery-store.ts
+function createMemoryRecovery() {
+	const values = /* @__PURE__ */ new Map();
+	return {
+		get: async (key) => values.get(key),
+		set: async (key, value) => {
+			values.set(key, value);
+		},
+		setNow: (key, value) => {
+			values.set(key, value);
+		},
+		delete: async (key) => {
+			values.delete(key);
+		},
+		keys: async () => [...values.keys()]
+	};
+}
+//#endregion
+export { createMemoryRecovery };

package/dist/recovery.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_indexed_db_recovery = require("./recovery/indexed-db-recovery.cjs");
+const require_recovery_store = require("./recovery/recovery-store.cjs");
+exports.createIndexedDbRecovery = require_indexed_db_recovery.createIndexedDbRecovery;
+exports.createMemoryRecovery = require_recovery_store.createMemoryRecovery;

package/dist/recovery.d.cts

@@ -0,0 +1,4 @@
+import { RecoveryStore, createMemoryRecovery } from "./recovery/recovery-store.cjs";
+import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.cjs";
+import { IndexedDbRecoveryOptions, createIndexedDbRecovery } from "./recovery/indexed-db-recovery.cjs";
+export { type IndexedDbRecoveryOptions, type InterruptedLoad, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, createIndexedDbRecovery, createMemoryRecovery };

package/dist/recovery.d.ts

@@ -0,0 +1,4 @@
+import { RecoveryStore, createMemoryRecovery } from "./recovery/recovery-store.js";
+import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.js";
+import { IndexedDbRecoveryOptions, createIndexedDbRecovery } from "./recovery/indexed-db-recovery.js";
+export { type IndexedDbRecoveryOptions, type InterruptedLoad, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, createIndexedDbRecovery, createMemoryRecovery };

package/dist/recovery.js

@@ -0,0 +1,3 @@
+import { createIndexedDbRecovery } from "./recovery/indexed-db-recovery.js";
+import { createMemoryRecovery } from "./recovery/recovery-store.js";
+export { createIndexedDbRecovery, createMemoryRecovery };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Turn an existing Fabric.js canvas into a dependable editable document: stable object ids, versioned save and load, undo and redo, safe autosave with conflict protection, custom objects and clear errors.",
   "keywords": [
     "fabric",
@@ -18,7 +18,8 @@
     "autosave",
     "editor",
     "typescript",
-    "storage"
+    "storage",
+    "recovery"
   ],
   "license": "MIT",
   "author": "Sohail Khan (https://me.jscrate.dev)",
@@ -53,6 +54,16 @@
         "default": "./dist/storage.cjs"
       }
     },
+    "./recovery": {
+      "import": {
+        "types": "./dist/recovery.d.ts",
+        "default": "./dist/recovery.js"
+      },
+      "require": {
+        "types": "./dist/recovery.d.cts",
+        "default": "./dist/recovery.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {