@composy/store-vue 0.0.1 → 0.0.2

package/dist/index.js

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/store-vue v0.0.1       *
 * Built with rollup               *
-* Build time: 2024-08-17 11:39:29 *
+* Build time: 2024-10-12 17:40:04 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -15,7 +15,7 @@
 		"vue",
 		"@composy/store-core",
 		"@composy/store-core/engine"
-	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignStoreVue = {}, global.Pinia, global.Vue, global.ComposyStoreCore, global.ComposyStoreCore));
+	], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignStoreVue = {}, global.Pinia, global.Vue, global.LDesignStoreCore, global.LDesignStoreCore));
 })(this, function(exports, pinia, vue, _composy_store_core, _composy_store_core_engine) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#region src/composables/defineSetupStore.ts
@@ -214,39 +214,54 @@
 	}
 	function useOptimistic(initialState) {
 		const state = (0, vue.ref)((0, _composy_store_core.deepClone)(initialState));
+		let committedState = (0, _composy_store_core.deepClone)(initialState);
+		const operations = [];
 		const isPending = (0, vue.ref)(false);
 		const isRolledBack = (0, vue.ref)(false);
 		const pending = (0, vue.ref)([]);
+		const refresh = () => {
+			let nextState = (0, _composy_store_core.deepClone)(committedState);
+			operations.forEach((operation) => {
+				if (operation.status !== "rolled-back") nextState = operation.apply(nextState);
+			});
+			state.value = (0, _composy_store_core.deepClone)(nextState);
+			pending.value = operations.filter((operation) => operation.status === "pending").map((operation) => ({
+				id: operation.id,
+				snapshot: (0, _composy_store_core.deepClone)(operation.snapshot),
+				status: operation.status,
+				timestamp: operation.timestamp
+			}));
+			isPending.value = pending.value.length > 0;
+		};
+		const reconcile = () => {
+			while (operations[0] && operations[0].status !== "pending") {
+				const operation = operations.shift();
+				if (!operation || operation.status === "rolled-back") continue;
+				committedState = operation.apply((0, _composy_store_core.deepClone)(committedState));
+			}
+			refresh();
+		};
 		async function mutate(optimisticValue, confirm) {
 			const snapshot = (0, _composy_store_core.deepClone)(state.value);
-			const entryId = uid();
-			const entry = {
-				id: entryId,
+			const apply = typeof optimisticValue === "function" ? (previous) => (0, _composy_store_core.deepClone)(optimisticValue((0, _composy_store_core.deepClone)(previous))) : () => (0, _composy_store_core.deepClone)(optimisticValue);
+			const operation = {
+				id: uid(),
 				snapshot,
 				status: "pending",
-				timestamp: Date.now()
+				timestamp: Date.now(),
+				apply
 			};
-			pending.value = [...pending.value, entry];
-			isPending.value = true;
+			operations.push(operation);
 			isRolledBack.value = false;
-			if (typeof optimisticValue === "function") state.value = optimisticValue(state.value);
-			else state.value = optimisticValue;
+			refresh();
 			try {
 				await confirm();
-				pending.value = pending.value.map((e) => e.id === entryId ? {
-					...e,
-					status: "confirmed"
-				} : e);
+				operation.status = "confirmed";
 			} catch {
-				state.value = snapshot;
+				operation.status = "rolled-back";
 				isRolledBack.value = true;
-				pending.value = pending.value.map((e) => e.id === entryId ? {
-					...e,
-					status: "rolled-back"
-				} : e);
 			} finally {
-				pending.value = pending.value.filter((e) => e.status === "pending");
-				isPending.value = pending.value.length > 0;
+				reconcile();
 			}
 		}
 		return {
@@ -261,10 +276,14 @@
 	//#region src/composables/usePersist.ts
 	function getStorage$2(type) {
 		if (typeof window === "undefined") return null;
-		return type === "localStorage" ? localStorage : sessionStorage;
+		try {
+			return type === "localStorage" ? window.localStorage : window.sessionStorage;
+		} catch {
+			return null;
+		}
 	}
 	function usePersist(options) {
-		const { key, storage: storageType = "localStorage", defaultValue, serialize = JSON.stringify, deserialize = JSON.parse } = options;
+		const { key, storage: storageType = "localStorage", defaultValue, serialize = JSON.stringify, deserialize = JSON.parse, restoreOnMounted = true } = options;
 		const storage = getStorage$2(storageType);
 		const value = (0, vue.ref)(defaultValue);
 		const restore = () => {
@@ -293,7 +312,7 @@
 				console.error(`[usePersist] \u6E05\u9664\u5931\u8D25 (${key}):`, error);
 			}
 		};
-		(0, vue.onMounted)(() => {
+		if (restoreOnMounted) (0, vue.onMounted)(() => {
 			restore();
 		});
 		(0, vue.watch)(value, () => {
@@ -315,12 +334,13 @@
 		return value;
 	}
 	function usePersistedRefWithTTL(key, defaultValue, ttl) {
-		const { value } = usePersist({
+		const persisted = usePersist({
 			key,
 			defaultValue: {
 				value: defaultValue,
 				expiry: 0
 			},
+			restoreOnMounted: false,
 			serialize: (data) => JSON.stringify(data),
 			deserialize: (str) => {
 				const data = JSON.parse(str);
@@ -331,13 +351,17 @@
 				return data;
 			}
 		});
-		const wrappedRef = (0, vue.ref)(value.value.value);
+		persisted.restore();
+		const wrappedRef = (0, vue.ref)(persisted.value.value.value);
 		(0, vue.watch)(wrappedRef, (newValue) => {
-			value.value = {
+			persisted.value.value = {
 				value: newValue,
 				expiry: Date.now() + ttl
 			};
 		});
+		(0, vue.watch)(persisted.value, (stored) => {
+			if (!Object.is(wrappedRef.value, stored.value)) wrappedRef.value = stored.value;
+		}, { deep: true });
 		return wrappedRef;
 	}
 	//#endregion
@@ -361,6 +385,7 @@
 		const storage = getStorage$1(storageType);
 		const createDefaultValue = () => (0, _composy_store_core.deepClone)(defaultValue);
 		const state = (0, vue.ref)(createDefaultValue());
+		let skipNextSave = false;
 		const save = () => {
 			if (!storage) return;
 			try {
@@ -374,6 +399,7 @@
 				console.error(`[usePersistedState] \u4FDD\u5B58\u5931\u8D25 (${key}):`, error);
 			}
 		};
+		const debouncedSave = debounceDelay > 0 ? (0, _composy_store_core.debounce)(save, debounceDelay) : null;
 		const clear = () => {
 			if (!storage) return;
 			try {
@@ -401,6 +427,8 @@
 			}
 		};
 		const reset = () => {
+			debouncedSave?.cancel();
+			skipNextSave = true;
 			state.value = createDefaultValue();
 			clear();
 		};
@@ -415,9 +443,14 @@
 				return false;
 			}
 		};
-		const debouncedSave = debounceDelay > 0 ? (0, _composy_store_core.debounce)(save, debounceDelay) : null;
 		const handleStorageEvent = (event) => {
-			if (event.key !== key || !event.newValue) return;
+			if (event.key !== key) return;
+			if (!event.newValue) {
+				debouncedSave?.cancel();
+				skipNextSave = true;
+				state.value = createDefaultValue();
+				return;
+			}
 			try {
 				const item = JSON.parse(event.newValue);
 				if (item.expiresAt && Date.now() > item.expiresAt) return;
@@ -428,6 +461,10 @@
 		};
 		restore();
 		(0, vue.watch)(state, (newValue, oldValue) => {
+			if (skipNextSave) {
+				skipNextSave = false;
+				return;
+			}
 			if (onBeforeChange?.(newValue, oldValue) === false) return;
 			if (debouncedSave) debouncedSave();
 			else save();
@@ -455,7 +492,11 @@
 		const peerCount = (0, vue.ref)(0);
 		const lastSyncAt = (0, vue.ref)(null);
 		let channel = null;
-		let isReceiving = false;
+		const originId = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+		let revision = 0;
+		const latestRemoteRevision = /* @__PURE__ */ new Map();
+		let pendingRemoteState;
+		let hasPendingRemoteState = false;
 		if (typeof BroadcastChannel === "undefined") {
 			console.warn("[useSharedState] BroadcastChannel not supported in this environment");
 			return {
@@ -484,7 +525,9 @@
 				channel.postMessage({
 					type: "state-update",
 					payload: (0, _composy_store_core.deepClone)(state.value),
-					timestamp: Date.now()
+					timestamp: Date.now(),
+					origin: originId,
+					revision: ++revision
 				});
 			} catch (e) {
 				console.warn("[useSharedState] broadcast error:", e);
@@ -494,15 +537,26 @@
 			const msg = event.data;
 			if (!msg || typeof msg !== "object") return;
 			if (msg.type === "state-update") {
-				isReceiving = true;
-				state.value = msg.payload;
+				if (msg.origin === originId) return;
+				const remoteRevision = typeof msg.revision === "number" ? msg.revision : 0;
+				if (remoteRevision <= (latestRemoteRevision.get(String(msg.origin)) ?? -1)) return;
+				latestRemoteRevision.set(String(msg.origin), remoteRevision);
+				pendingRemoteState = (0, _composy_store_core.deepClone)(msg.payload);
+				hasPendingRemoteState = true;
+				state.value = pendingRemoteState;
 				lastSyncAt.value = msg.timestamp || Date.now();
-				isReceiving = false;
 			} else if (msg.type === "ping") channel?.postMessage({ type: "pong" });
 			else if (msg.type === "pong") peerCount.value++;
 		};
 		const stopWatch = (0, vue.watch)(state, () => {
-			if (!isReceiving) broadcast();
+			if (hasPendingRemoteState) {
+				if ((0, _composy_store_core.deepEqual)(state.value, pendingRemoteState)) {
+					hasPendingRemoteState = false;
+					return;
+				}
+				hasPendingRemoteState = false;
+			}
+			broadcast();
 		}, { deep });
 		function close() {
 			stopWatch();
@@ -739,6 +793,7 @@
 		const currentIndex = (0, vue.ref)(-1);
 		let debounceTimer;
 		let isRestoring = false;
+		let previousAutoRecordState;
 		const getState = () => {
 			return typeof state === "function" ? state() : state.value;
 		};
@@ -769,6 +824,7 @@
 			try {
 				setState((0, _composy_store_core.deepClone)(snapshots.value[index].state));
 				currentIndex.value = index;
+				previousAutoRecordState = (0, _composy_store_core.deepClone)(getState());
 				return true;
 			} finally {
 				isRestoring = false;
@@ -776,10 +832,12 @@
 		};
 		const undo = () => {
 			if (!canUndo.value) return false;
-			currentIndex.value--;
+			const targetIndex = currentIndex.value - 1;
 			isRestoring = true;
 			try {
-				setState((0, _composy_store_core.deepClone)(snapshots.value[currentIndex.value].state));
+				setState((0, _composy_store_core.deepClone)(snapshots.value[targetIndex].state));
+				currentIndex.value = targetIndex;
+				previousAutoRecordState = (0, _composy_store_core.deepClone)(getState());
 				return true;
 			} finally {
 				isRestoring = false;
@@ -787,10 +845,12 @@
 		};
 		const redo = () => {
 			if (!canRedo.value) return false;
-			currentIndex.value++;
+			const targetIndex = currentIndex.value + 1;
 			isRestoring = true;
 			try {
-				setState((0, _composy_store_core.deepClone)(snapshots.value[currentIndex.value].state));
+				setState((0, _composy_store_core.deepClone)(snapshots.value[targetIndex].state));
+				currentIndex.value = targetIndex;
+				previousAutoRecordState = (0, _composy_store_core.deepClone)(getState());
 				return true;
 			} finally {
 				isRestoring = false;
@@ -798,10 +858,11 @@
 		};
 		const goto = (index) => {
 			if (index < 0 || index >= snapshots.value.length) return false;
-			currentIndex.value = index;
 			isRestoring = true;
 			try {
 				setState((0, _composy_store_core.deepClone)(snapshots.value[index].state));
+				currentIndex.value = index;
+				previousAutoRecordState = (0, _composy_store_core.deepClone)(getState());
 				return true;
 			} finally {
 				isRestoring = false;
@@ -836,9 +897,12 @@
 			}
 		};
 		if (autoRecord) {
-			const stopWatch = (0, vue.watch)(typeof state === "function" ? (0, vue.computed)(state) : state, (newState, oldState) => {
+			const stateRef = typeof state === "function" ? (0, vue.computed)(state) : state;
+			previousAutoRecordState = (0, _composy_store_core.deepClone)(getState());
+			const stopWatch = (0, vue.watch)(stateRef, (newState, oldState) => {
 				if (isRestoring) return;
-				if ((0, _composy_store_core.deepEqual)(newState, oldState)) return;
+				if ((0, _composy_store_core.deepEqual)(newState, previousAutoRecordState ?? oldState)) return;
+				previousAutoRecordState = (0, _composy_store_core.deepClone)(newState);
 				if (debounceTimer) clearTimeout(debounceTimer);
 				debounceTimer = setTimeout(() => {
 					takeSnapshot();
@@ -917,7 +981,11 @@
 	const activePersistControllers = /* @__PURE__ */ new Set();
 	function getStorage(type) {
 		if (typeof window === "undefined") return null;
-		return type === "localStorage" ? window.localStorage : window.sessionStorage;
+		try {
+			return type === "localStorage" ? window.localStorage : window.sessionStorage;
+		} catch {
+			return null;
+		}
 	}
 	function normalizePersistConfig(value) {
 		if (!value) return null;
@@ -962,17 +1030,21 @@
 	function createPersistPluginController(options = {}) {
 		const { storage: defaultStorage = "localStorage", keyPrefix = "ldesign-store:", debounce: debounceDelay = 100, debug = false, syncTabs: defaultSyncTabs = false, defaultTTL } = options;
 		const cleanupMap = /* @__PURE__ */ new Map();
+		let isDisposed = false;
 		const dispose = () => {
+			if (isDisposed) return;
+			isDisposed = true;
 			cleanupMap.forEach((cleanup) => cleanup());
 			cleanupMap.clear();
 			activePersistControllers.delete(dispose);
 		};
 		activePersistControllers.add(dispose);
 		const plugin = (context) => {
+			if (isDisposed) return;
 			const { store, options: storeOptions } = context;
 			const config = normalizePersistConfig(storeOptions.persist);
 			if (!config) return;
-			const storage = getStorage(config.storage === "sessionStorage" ? "sessionStorage" : defaultStorage);
+			const storage = getStorage(config.storage ?? defaultStorage);
 			const serializer = config.serializer?.serialize ?? JSON.stringify;
 			const deserialize = config.serializer?.deserialize ?? JSON.parse;
 			const syncTabs = config.syncTabs ?? defaultSyncTabs;
@@ -1032,7 +1104,16 @@
 			let stopStorageSync = () => {};
 			if (syncTabs && typeof window !== "undefined") {
 				const handleStorage = (event) => {
-					if (event.key !== key || !event.newValue) return;
+					if (event.key !== key) return;
+					if (event.newValue === null) {
+						isRestoring = true;
+						try {
+							store.$reset?.();
+						} finally {
+							isRestoring = false;
+						}
+						return;
+					}
 					try {
 						const storageItem = JSON.parse(event.newValue);
 						if (storageItem.expiresAt && Date.now() > storageItem.expiresAt) return;
@@ -1050,9 +1131,10 @@
 				saveState.cancel();
 				stopSubscribe();
 				stopStorageSync();
-				cleanupMap.delete(key);
+				cleanupMap.delete(store);
+				store[STORE_PERSIST_DISPOSE_KEY]?.();
 			};
-			cleanupMap.set(key, cleanup);
+			cleanupMap.set(store, cleanup);
 			patchPersistDispose(store, cleanup);
 			restoreState();
 		};
@@ -1090,7 +1172,7 @@
 		if (restorePatchedDispose) restorePatchedDispose();
 		const originalDispose = store.$dispose;
 		store.$dispose = function patchedDispose() {
-			unregister(store.$id);
+			unregister();
 			return originalDispose.call(this);
 		};
 		store[STORE_DISPOSE_PATCH_KEY] = () => {
@@ -1100,12 +1182,17 @@
 	}
 	function createStoreRegistry() {
 		const stores = /* @__PURE__ */ new Map();
-		const unregister = (storeId) => {
+		const unregister = (storeId, expectedStore) => {
+			const store = stores.get(storeId);
+			if (!store || expectedStore && store !== expectedStore) return;
 			stores.delete(storeId);
+			store[STORE_DISPOSE_PATCH_KEY]?.();
 		};
 		const register = (store) => {
+			const existingStore = stores.get(store.$id);
+			if (existingStore && existingStore !== store) unregister(store.$id, existingStore);
 			stores.set(store.$id, store);
-			patchStoreDispose(store, unregister);
+			patchStoreDispose(store, () => unregister(store.$id, store));
 		};
 		const hasStore = (storeId) => {
 			return stores.has(storeId);
@@ -1125,6 +1212,9 @@
 			});
 		};
 		const clear = () => {
+			stores.forEach((store) => {
+				store[STORE_DISPOSE_PATCH_KEY]?.();
+			});
 			stores.clear();
 		};
 		const registerExistingStores = (pinia) => {
@@ -1154,6 +1244,8 @@
 	}
 	let globalRegistry = createStoreRegistry();
 	function setGlobalStoreRegistry(registry) {
+		if (registry === globalRegistry) return;
+		globalRegistry.clear();
 		globalRegistry = registry ?? createStoreRegistry();
 	}
 	function getStoreRegistry() {
@@ -1180,11 +1272,15 @@
 		const pinia$1 = resolvedOptions.pinia ?? (0, pinia.createPinia)();
 		if (pinia$1[STORE_RUNTIME_KEY]) return pinia$1[STORE_RUNTIME_KEY];
 		const registry = createStoreRegistry();
+		let isActive = true;
 		const persistController = resolvedOptions.persist ? createPersistPluginController({
 			...resolvedOptions.persistOptions,
 			debug: resolvedOptions.debug || resolvedOptions.persistOptions.debug
 		}) : null;
-		pinia$1.use(createStoreRegistryPlugin(registry));
+		const registryPlugin = createStoreRegistryPlugin(registry);
+		pinia$1.use((context) => {
+			if (isActive) registryPlugin(context);
+		});
 		persistController && pinia$1.use(persistController.plugin);
 		registry.registerExistingStores(pinia$1);
 		const runtime = {
@@ -1197,6 +1293,8 @@
 			* 释放所有资源：清除运行时标记、持久化插件、注册表
 			*/
 			dispose: () => {
+				if (!isActive) return;
+				isActive = false;
 				if (pinia$1[STORE_RUNTIME_KEY] === runtime) delete pinia$1[STORE_RUNTIME_KEY];
 				persistController?.dispose();
 				registry.clear();
@@ -1260,7 +1358,7 @@
 		return getGlobalStoreAPI$1();
 	}
 	function createStoreEnginePlugin(options = {}) {
-		const { debug = false, dependencies = [], name = "store", version = "1.0.0" } = options;
+		const { debug = false, dependencies = [], name = "store", version = "0.0.1" } = options;
 		let bridge = null;
 		const createBridge = () => {
 			const activeBridge = (0, _composy_store_core_engine.createStoreEngineBridge)({
@@ -1326,7 +1424,7 @@
 	}
 	//#endregion
 	//#region src/index.ts
-	const version = "1.0.0";
+	const version = "0.0.1";
 	const name = "@composy/store-vue";
 	//#endregion
 	Object.defineProperty(exports, "batch", {