fabricjs-document-engine 0.6.0 → 0.8.0

package/dist/state/document-state-store.cjs

@@ -0,0 +1,114 @@
+//#region src/state/document-state-store.ts
+function initialState(engine) {
+	const saveState = engine.getSaveState();
+	const history = engine.getHistory();
+	return {
+		documentId: engine.getDocumentInfo().id,
+		isLoading: false,
+		loadError: void 0,
+		saveStatus: saveState.status,
+		isDirty: saveState.isDirty,
+		isSaving: saveState.isSaving,
+		revision: saveState.revision,
+		lastSavedAt: saveState.lastSavedAt,
+		saveError: saveState.error,
+		canUndo: history.undo.length > 0,
+		canRedo: history.redo.length > 0,
+		undoLabel: history.undo[0],
+		redoLabel: history.redo[0],
+		assetWarnings: []
+	};
+}
+function withLiveEngineValues(engine, previous) {
+	return {
+		...previous,
+		...initialState(engine),
+		isLoading: previous.isLoading,
+		loadError: previous.loadError,
+		assetWarnings: previous.assetWarnings
+	};
+}
+function isSameState(first, second) {
+	return Object.keys(first).every((key) => first[key] === second[key]);
+}
+function createDocumentStateStore(engine) {
+	let state = initialState(engine);
+	const listeners = /* @__PURE__ */ new Set();
+	let detachFromEngine;
+	function update(changes) {
+		const next = {
+			...state,
+			...changes
+		};
+		if (isSameState(state, next)) return;
+		state = next;
+		for (const listener of [...listeners]) listener();
+	}
+	function attachToEngine() {
+		const unsubscribers = [
+			engine.on("load:start", () => update({
+				isLoading: true,
+				loadError: void 0
+			})),
+			engine.on("load:success", ({ warnings }) => update({
+				isLoading: false,
+				assetWarnings: warnings
+			})),
+			engine.on("load:error", ({ error }) => {
+				if (error.code !== "LOAD_ABORTED") update({
+					isLoading: false,
+					loadError: error
+				});
+			}),
+			engine.on("document:change", ({ documentId }) => update({
+				documentId,
+				loadError: void 0
+			})),
+			engine.on("assets:warning", ({ warnings }) => update({ assetWarnings: warnings })),
+			engine.on("save:status", (saveState) => update({
+				saveStatus: saveState.status,
+				isDirty: saveState.isDirty,
+				isSaving: saveState.isSaving,
+				revision: saveState.revision,
+				lastSavedAt: saveState.lastSavedAt,
+				saveError: saveState.error
+			})),
+			engine.on("history:change", (history) => update({
+				canUndo: history.canUndo,
+				canRedo: history.canRedo,
+				undoLabel: history.undoLabel,
+				redoLabel: history.redoLabel
+			}))
+		];
+		return () => unsubscribers.forEach((unsubscribe) => unsubscribe());
+	}
+	function refreshWhileDetached() {
+		if (detachFromEngine) return;
+		const fresh = withLiveEngineValues(engine, state);
+		if (!isSameState(state, fresh)) state = fresh;
+	}
+	return {
+		getSnapshot() {
+			refreshWhileDetached();
+			return state;
+		},
+		subscribe(listener) {
+			refreshWhileDetached();
+			listeners.add(listener);
+			detachFromEngine ?? (detachFromEngine = attachToEngine());
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size > 0) return;
+				detachFromEngine?.();
+				detachFromEngine = void 0;
+			};
+		},
+		destroy() {
+			listeners.clear();
+			detachFromEngine?.();
+			detachFromEngine = void 0;
+		}
+	};
+}
+//#endregion
+exports.createDocumentStateStore = createDocumentStateStore;

package/dist/state/document-state-store.d.cts

@@ -0,0 +1,28 @@
+import { AssetWarning } from "../assets/asset-pipeline.cjs";
+import { DocumentEngineError } from "../engine/errors.cjs";
+import { SaveStatus } from "../save/save-controller.cjs";
+import { DocumentEngine } from "../engine/create-document-engine.cjs";
+//#region src/state/document-state-store.d.ts
+export interface DocumentState {
+  documentId: string;
+  isLoading: boolean;
+  loadError: DocumentEngineError | undefined;
+  saveStatus: SaveStatus;
+  isDirty: boolean;
+  isSaving: boolean;
+  revision: number;
+  lastSavedAt: string | undefined;
+  saveError: DocumentEngineError | undefined;
+  canUndo: boolean;
+  canRedo: boolean;
+  undoLabel: string | undefined;
+  redoLabel: string | undefined;
+  assetWarnings: AssetWarning[];
+}
+export interface DocumentStateStore {
+  getSnapshot(): DocumentState;
+  subscribe(listener: () => void): () => void;
+  destroy(): void;
+}
+export declare function createDocumentStateStore(engine: DocumentEngine): DocumentStateStore;
+//#endregion

package/dist/state/document-state-store.d.ts

@@ -0,0 +1,28 @@
+import { AssetWarning } from "../assets/asset-pipeline.js";
+import { DocumentEngineError } from "../engine/errors.js";
+import { SaveStatus } from "../save/save-controller.js";
+import { DocumentEngine } from "../engine/create-document-engine.js";
+//#region src/state/document-state-store.d.ts
+export interface DocumentState {
+  documentId: string;
+  isLoading: boolean;
+  loadError: DocumentEngineError | undefined;
+  saveStatus: SaveStatus;
+  isDirty: boolean;
+  isSaving: boolean;
+  revision: number;
+  lastSavedAt: string | undefined;
+  saveError: DocumentEngineError | undefined;
+  canUndo: boolean;
+  canRedo: boolean;
+  undoLabel: string | undefined;
+  redoLabel: string | undefined;
+  assetWarnings: AssetWarning[];
+}
+export interface DocumentStateStore {
+  getSnapshot(): DocumentState;
+  subscribe(listener: () => void): () => void;
+  destroy(): void;
+}
+export declare function createDocumentStateStore(engine: DocumentEngine): DocumentStateStore;
+//#endregion

package/dist/state/document-state-store.js

@@ -0,0 +1,114 @@
+//#region src/state/document-state-store.ts
+function initialState(engine) {
+	const saveState = engine.getSaveState();
+	const history = engine.getHistory();
+	return {
+		documentId: engine.getDocumentInfo().id,
+		isLoading: false,
+		loadError: void 0,
+		saveStatus: saveState.status,
+		isDirty: saveState.isDirty,
+		isSaving: saveState.isSaving,
+		revision: saveState.revision,
+		lastSavedAt: saveState.lastSavedAt,
+		saveError: saveState.error,
+		canUndo: history.undo.length > 0,
+		canRedo: history.redo.length > 0,
+		undoLabel: history.undo[0],
+		redoLabel: history.redo[0],
+		assetWarnings: []
+	};
+}
+function withLiveEngineValues(engine, previous) {
+	return {
+		...previous,
+		...initialState(engine),
+		isLoading: previous.isLoading,
+		loadError: previous.loadError,
+		assetWarnings: previous.assetWarnings
+	};
+}
+function isSameState(first, second) {
+	return Object.keys(first).every((key) => first[key] === second[key]);
+}
+function createDocumentStateStore(engine) {
+	let state = initialState(engine);
+	const listeners = /* @__PURE__ */ new Set();
+	let detachFromEngine;
+	function update(changes) {
+		const next = {
+			...state,
+			...changes
+		};
+		if (isSameState(state, next)) return;
+		state = next;
+		for (const listener of [...listeners]) listener();
+	}
+	function attachToEngine() {
+		const unsubscribers = [
+			engine.on("load:start", () => update({
+				isLoading: true,
+				loadError: void 0
+			})),
+			engine.on("load:success", ({ warnings }) => update({
+				isLoading: false,
+				assetWarnings: warnings
+			})),
+			engine.on("load:error", ({ error }) => {
+				if (error.code !== "LOAD_ABORTED") update({
+					isLoading: false,
+					loadError: error
+				});
+			}),
+			engine.on("document:change", ({ documentId }) => update({
+				documentId,
+				loadError: void 0
+			})),
+			engine.on("assets:warning", ({ warnings }) => update({ assetWarnings: warnings })),
+			engine.on("save:status", (saveState) => update({
+				saveStatus: saveState.status,
+				isDirty: saveState.isDirty,
+				isSaving: saveState.isSaving,
+				revision: saveState.revision,
+				lastSavedAt: saveState.lastSavedAt,
+				saveError: saveState.error
+			})),
+			engine.on("history:change", (history) => update({
+				canUndo: history.canUndo,
+				canRedo: history.canRedo,
+				undoLabel: history.undoLabel,
+				redoLabel: history.redoLabel
+			}))
+		];
+		return () => unsubscribers.forEach((unsubscribe) => unsubscribe());
+	}
+	function refreshWhileDetached() {
+		if (detachFromEngine) return;
+		const fresh = withLiveEngineValues(engine, state);
+		if (!isSameState(state, fresh)) state = fresh;
+	}
+	return {
+		getSnapshot() {
+			refreshWhileDetached();
+			return state;
+		},
+		subscribe(listener) {
+			refreshWhileDetached();
+			listeners.add(listener);
+			detachFromEngine ?? (detachFromEngine = attachToEngine());
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size > 0) return;
+				detachFromEngine?.();
+				detachFromEngine = void 0;
+			};
+		},
+		destroy() {
+			listeners.clear();
+			detachFromEngine?.();
+			detachFromEngine = void 0;
+		}
+	};
+}
+//#endregion
+export { createDocumentStateStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "0.6.0",
+  "version": "0.8.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",
@@ -19,7 +19,9 @@
     "editor",
     "typescript",
     "storage",
-    "recovery"
+    "recovery",
+    "react",
+    "react hooks"
   ],
   "license": "MIT",
   "author": "Sohail Khan (https://me.jscrate.dev)",
@@ -64,15 +66,25 @@
         "default": "./dist/recovery.cjs"
       }
     },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "tsdown && npm run lint:publint && npm run lint:attw",
+    "build": "tsdown && node scripts/verify-build.mjs && npm run lint:publint && npm run lint:attw",
     "dev": "tsdown --watch",
     "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.tools.json",
     "test": "vitest run",
     "test:unit": "vitest run --project unit",
-    "test:browser": "vitest run --project browser-fabric7 --project browser-fabric6",
+    "test:browser": "vitest run --project browser-fabric7 --project browser-fabric6 --project browser-firefox --project browser-webkit",
     "test:watch": "vitest",
     "lint:publint": "publint --strict",
     "lint:attw": "attw --pack . --profile node16",
@@ -80,7 +92,8 @@
     "release": "changeset publish"
   },
   "peerDependencies": {
-    "fabric": "^6.0.0 || ^7.0.0"
+    "fabric": "^6.0.0 || ^7.0.0",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public",
@@ -101,13 +114,22 @@
     "@arethetypeswrong/cli": "^0.18.5",
     "@changesets/cli": "^3.0.3",
     "@types/node": "^22.20.4",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@vitest/browser-playwright": "^5.0.2",
     "fabric": "^7.4.0",
     "fabric6": "npm:fabric@^6.9.1",
     "playwright": "^1.63.0",
     "publint": "^0.3.24",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tsdown": "^0.23.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.2"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   }
 }