@spoosh/plugin-optimistic 0.7.1 → 0.8.0

package/dist/index.mjs

@@ -3,40 +3,14 @@ import {
   createSpooshPlugin
 } from "@spoosh/core";
 import "@spoosh/plugin-invalidation";
-function createBuilder(state) {
-  return {
-    ...state,
-    WHERE(predicate) {
-      return createBuilder({ ...state, where: predicate });
-    },
-    UPDATE_CACHE(updater) {
-      return createBuilder({ ...state, updater });
-    },
-    ON_SUCCESS() {
-      return createBuilder({ ...state, timing: "onSuccess" });
-    },
-    NO_ROLLBACK() {
-      return createBuilder({ ...state, rollbackOnError: false });
-    },
-    ON_ERROR(callback) {
-      return createBuilder({ ...state, onError: callback });
-    }
-  };
-}
-function createOptimisticProxy() {
-  const createMethodsProxy = (path) => ({
-    GET: () => createBuilder({
-      path,
-      method: "GET",
-      timing: "immediate",
-      rollbackOnError: true
-    })
-  });
-  return ((path) => createMethodsProxy(path));
-}
+
+// src/utils/path.ts
 function isParameterSegment(segment) {
   return segment.startsWith(":");
 }
+function hasPatternParams(path) {
+  return path.split("/").some(isParameterSegment);
+}
 function pathMatchesPattern(actualPath, pattern) {
   const actualSegments = actualPath.split("/").filter(Boolean);
   const patternSegments = pattern.split("/").filter(Boolean);
@@ -64,9 +38,9 @@ function pathMatchesPattern(actualPath, pattern) {
   }
   return { matches: true, params, paramMapping };
 }
-function hasPatternParams(path) {
-  return path.split("/").some(isParameterSegment);
-}
+
+// src/utils/cache-key.ts
+import { generateSelfTagFromKey } from "@spoosh/core";
 function extractPathFromKey(key) {
   try {
     const parsed = JSON.parse(key);
@@ -74,11 +48,39 @@ function extractPathFromKey(key) {
     if (typeof path === "string") {
       return path;
     }
+    if (Array.isArray(path)) {
+      return path.join("/");
+    }
     return null;
   } catch {
     return null;
   }
 }
+function formatCacheKeyForTrace(key) {
+  const resolvedPath = generateSelfTagFromKey(key);
+  if (!resolvedPath) return "unknown";
+  try {
+    const parsed = JSON.parse(key);
+    const opts = parsed.options ?? parsed.pageRequest;
+    const query = opts?.query;
+    if (!query || Object.keys(query).length === 0) {
+      return resolvedPath;
+    }
+    const queryString = Object.entries(query).map(
+      ([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`
+    ).join("&");
+    return `${resolvedPath}?${queryString}`;
+  } catch {
+    return resolvedPath;
+  }
+}
+function stringifyParams(params) {
+  const result = {};
+  for (const [key, value] of Object.entries(params)) {
+    result[key] = String(value);
+  }
+  return result;
+}
 function extractOptionsFromKey(key) {
   try {
     const parsed = JSON.parse(key);
@@ -89,7 +91,7 @@ function extractOptionsFromKey(key) {
       result.query = opts.query;
     }
     if (opts.params) {
-      result.params = opts.params;
+      result.params = stringifyParams(opts.params);
     }
     return Object.keys(result).length > 0 ? result : null;
   } catch {
@@ -101,30 +103,75 @@ function mapParamsToTargetNames(actualParams, paramMapping) {
   const result = {};
   for (const [targetName, actualName] of Object.entries(paramMapping)) {
     if (actualName in actualParams) {
-      result[targetName] = actualParams[actualName];
+      result[targetName] = String(actualParams[actualName]);
     }
   }
   for (const [key, value] of Object.entries(actualParams)) {
     if (!Object.values(paramMapping).includes(key)) {
-      result[key] = value;
+      result[key] = String(value);
     }
   }
   return result;
 }
+
+// src/builder/index.ts
+function createBuilder(state, isConfirmed = false) {
+  return {
+    ...state,
+    filter(predicate) {
+      return createBuilder({ ...state, filter: predicate }, isConfirmed);
+    },
+    set(updater) {
+      if (isConfirmed) {
+        return createBuilder(
+          {
+            ...state,
+            confirmedUpdater: updater
+          },
+          isConfirmed
+        );
+      }
+      return createBuilder(
+        {
+          ...state,
+          immediateUpdater: updater
+        },
+        isConfirmed
+      );
+    },
+    confirmed() {
+      return createBuilder(state, true);
+    },
+    disableRollback() {
+      return createBuilder({ ...state, rollbackOnError: false }, isConfirmed);
+    },
+    onError(callback) {
+      return createBuilder({ ...state, onError: callback }, isConfirmed);
+    }
+  };
+}
+function createCacheProxy() {
+  return ((path) => createBuilder({
+    path,
+    rollbackOnError: true
+  }));
+}
+
+// src/plugin.ts
 function resolveOptimisticTargets(context) {
   const pluginOptions = context.pluginOptions;
   if (!pluginOptions?.optimistic) return [];
-  const apiProxy = createOptimisticProxy();
-  const result = pluginOptions.optimistic(apiProxy);
+  const cacheProxy = createCacheProxy();
+  const result = pluginOptions.optimistic(cacheProxy);
   const targets = Array.isArray(result) ? result : [result];
   return targets;
 }
-function getMatchingEntries(stateManager, targetPath, targetMethod) {
+function getMatchingEntries(stateManager, targetPath) {
   const results = [];
+  const allEntries = stateManager.getAllCacheEntries();
   if (hasPatternParams(targetPath)) {
-    const allEntries = stateManager.getAllCacheEntries();
     for (const { key, entry } of allEntries) {
-      if (!key.includes(`"method":"${targetMethod}"`)) continue;
+      if (!key.includes(`"method":"GET"`)) continue;
       const actualPath = extractPathFromKey(key);
       if (!actualPath) continue;
       const { matches, params, paramMapping } = pathMatchesPattern(
@@ -136,36 +183,26 @@ function getMatchingEntries(stateManager, targetPath, targetMethod) {
       }
     }
   } else {
-    const allEntries = stateManager.getAllCacheEntries();
     for (const { key, entry } of allEntries) {
-      if (!key.includes(`"method":"${targetMethod}"`)) continue;
+      if (!key.includes(`"method":"GET"`)) continue;
       const actualPath = extractPathFromKey(key);
       if (!actualPath) continue;
       if (actualPath === targetPath) {
         results.push({ key, entry, extractedParams: {}, paramMapping: {} });
-      } else if (hasPatternParams(actualPath)) {
-        const { matches, params, paramMapping } = pathMatchesPattern(
-          targetPath,
-          actualPath
-        );
-        if (matches) {
-          results.push({ key, entry, extractedParams: params, paramMapping });
-        }
       }
     }
   }
   return results;
 }
-function applyOptimisticUpdate(stateManager, target, t) {
-  if (!target.updater) return [];
+function applyUpdate(stateManager, target, updater, response, t) {
   const snapshots = [];
-  const matchingEntries = getMatchingEntries(
-    stateManager,
-    target.path,
-    target.method
-  );
+  const matchingEntries = getMatchingEntries(stateManager, target.path);
+  if (matchingEntries.length === 0) {
+    t?.skip(`Skipped ${target.path} (no cache entry)`);
+    return [];
+  }
   for (const { key, entry, extractedParams, paramMapping } of matchingEntries) {
-    if (target.where) {
+    if (target.filter) {
       const options = extractOptionsFromKey(key) ?? {};
       const mappedParams = mapParamsToTargetNames(
         options.params,
@@ -178,14 +215,23 @@ function applyOptimisticUpdate(stateManager, target, t) {
           ...mappedParams
         }
       };
-      if (!target.where(mergedOptions)) {
+      try {
+        if (!target.filter(mergedOptions)) {
+          t?.skip(
+            `Skipped ${formatCacheKeyForTrace(key)} (filter not matched)`
+          );
+          continue;
+        }
+      } catch {
+        t?.skip(`Skipped ${formatCacheKeyForTrace(key)} (filter error)`);
         continue;
       }
     }
     if (entry?.state.data === void 0) {
+      t?.skip(`Skipped ${formatCacheKeyForTrace(key)} (no cached data)`);
       continue;
     }
-    const afterData = target.updater(entry.state.data, void 0);
+    const afterData = updater(entry.state.data, response);
     snapshots.push({ key, previousData: entry.state.data, afterData });
     stateManager.setCache(key, {
       previousData: entry.state.data,
@@ -195,14 +241,10 @@ function applyOptimisticUpdate(stateManager, target, t) {
       }
     });
     stateManager.setMeta(key, { isOptimistic: true });
-    t?.log("Marked as optimistic", {
-      color: "info",
-      info: [{ value: { isOptimistic: true } }]
-    });
   }
   return snapshots;
 }
-function confirmOptimistic(stateManager, snapshots, t) {
+function confirmOptimistic(stateManager, snapshots) {
   for (const { key } of snapshots) {
     const entry = stateManager.getCache(key);
     if (entry) {
@@ -210,14 +252,10 @@ function confirmOptimistic(stateManager, snapshots, t) {
         previousData: void 0
       });
       stateManager.setMeta(key, { isOptimistic: false });
-      t?.log("Optimistic confirmed", {
-        color: "success",
-        info: [{ value: { isOptimistic: false } }]
-      });
     }
   }
 }
-function rollbackOptimistic(stateManager, snapshots, t) {
+function rollbackOptimistic(stateManager, snapshots) {
   for (const { key, previousData } of snapshots) {
     const entry = stateManager.getCache(key);
     if (entry) {
@@ -229,28 +267,12 @@ function rollbackOptimistic(stateManager, snapshots, t) {
         }
       });
       stateManager.setMeta(key, { isOptimistic: false });
-      t?.log("Optimistic rolled back", {
-        color: "warning",
-        info: [{ value: { isOptimistic: false } }]
-      });
     }
   }
 }
-function buildSnapshotDiff(snapshots, mode = "apply") {
-  const first = snapshots[0];
-  const label = mode === "apply" ? "Optimistic update to cache" : mode === "rollback" ? "Rollback optimistic changes" : "Apply onSuccess updates";
-  if (snapshots.length === 1) {
-    return mode === "apply" || mode === "onSuccess" ? { before: first.previousData, after: first.afterData, label } : { before: first.afterData, after: first.previousData, label };
-  }
-  return mode === "apply" || mode === "onSuccess" ? {
-    before: snapshots.map((s) => ({ key: s.key, data: s.previousData })),
-    after: snapshots.map((s) => ({ key: s.key, data: s.afterData })),
-    label
-  } : {
-    before: snapshots.map((s) => ({ key: s.key, data: s.afterData })),
-    after: snapshots.map((s) => ({ key: s.key, data: s.previousData })),
-    label
-  };
+function buildSingleDiff(snapshot, mode = "apply") {
+  const label = mode === "apply" ? "Optimistic update" : mode === "rollback" ? "Rollback optimistic" : "Confirmed update";
+  return mode === "apply" || mode === "confirmed" ? { before: snapshot.previousData, after: snapshot.afterData, label } : { before: snapshot.afterData, after: snapshot.previousData, label };
 }
 var PLUGIN_NAME = "spoosh:optimistic";
 function optimisticPlugin() {
@@ -267,28 +289,37 @@ function optimisticPlugin() {
         return next();
       }
       context.plugins.get("spoosh:invalidation")?.setDefaultMode("none");
-      const immediateTargets = targets.filter((t2) => t2.timing !== "onSuccess");
-      const allSnapshots = [];
-      for (const target of immediateTargets) {
-        const snapshots = applyOptimisticUpdate(stateManager, target, t);
-        allSnapshots.push(...snapshots);
-      }
-      if (allSnapshots.length > 0) {
-        t?.log(`Applied ${allSnapshots.length} immediate update(s)`, {
-          diff: buildSnapshotDiff(allSnapshots)
-        });
+      const allImmediateSnapshots = [];
+      for (const target of targets) {
+        if (!target.immediateUpdater) continue;
+        const snapshots = applyUpdate(
+          stateManager,
+          target,
+          target.immediateUpdater,
+          void 0,
+          t
+        );
+        for (const snapshot of snapshots) {
+          t?.log(
+            `Applied optimistic update to ${formatCacheKeyForTrace(snapshot.key)}`,
+            { diff: buildSingleDiff(snapshot) }
+          );
+        }
+        allImmediateSnapshots.push(...snapshots);
       }
       const response = await next();
       if (response.error) {
         const shouldRollback = targets.some(
-          (t2) => t2.rollbackOnError && t2.timing !== "onSuccess"
+          (target) => target.rollbackOnError && target.immediateUpdater
         );
-        if (shouldRollback && allSnapshots.length > 0) {
-          rollbackOptimistic(stateManager, allSnapshots, t);
-          t?.log(`Rolled back ${allSnapshots.length} update(s)`, {
-            color: "warning",
-            diff: buildSnapshotDiff(allSnapshots, "rollback")
-          });
+        if (shouldRollback && allImmediateSnapshots.length > 0) {
+          rollbackOptimistic(stateManager, allImmediateSnapshots);
+          for (const snapshot of allImmediateSnapshots) {
+            t?.log(`Rolled back ${formatCacheKeyForTrace(snapshot.key)}`, {
+              color: "warning",
+              diff: buildSingleDiff(snapshot, "rollback")
+            });
+          }
         }
         for (const target of targets) {
           if (target.onError) {
@@ -296,66 +327,28 @@ function optimisticPlugin() {
           }
         }
       } else {
-        if (allSnapshots.length > 0) {
-          confirmOptimistic(stateManager, allSnapshots, t);
+        if (allImmediateSnapshots.length > 0) {
+          confirmOptimistic(stateManager, allImmediateSnapshots);
         }
-        const onSuccessTargets = targets.filter(
-          (target) => target.timing === "onSuccess"
-        );
-        const onSuccessSnapshots = [];
-        for (const target of onSuccessTargets) {
-          if (!target.updater) continue;
-          const matchingEntries = getMatchingEntries(
+        for (const target of targets) {
+          if (!target.confirmedUpdater) continue;
+          const snapshots = applyUpdate(
             stateManager,
-            target.path,
-            target.method
+            target,
+            target.confirmedUpdater,
+            response.data,
+            t
           );
-          for (const {
-            key,
-            entry,
-            extractedParams,
-            paramMapping
-          } of matchingEntries) {
-            if (target.where) {
-              const options = extractOptionsFromKey(key) ?? {};
-              const mappedParams = mapParamsToTargetNames(
-                options.params,
-                paramMapping
-              );
-              const mergedOptions = {
-                ...options,
-                params: {
-                  ...extractedParams,
-                  ...mappedParams
-                }
-              };
-              if (!target.where(mergedOptions)) {
-                continue;
+          for (const snapshot of snapshots) {
+            t?.log(
+              `Applied confirmed update to ${formatCacheKeyForTrace(snapshot.key)}`,
+              {
+                color: "success",
+                diff: buildSingleDiff(snapshot, "confirmed")
               }
-            }
-            if (entry?.state.data === void 0) {
-              continue;
-            }
-            const afterData = target.updater(entry.state.data, response.data);
-            onSuccessSnapshots.push({
-              key,
-              previousData: entry.state.data,
-              afterData
-            });
-            stateManager.setCache(key, {
-              state: {
-                ...entry.state,
-                data: afterData
-              }
-            });
+            );
           }
         }
-        if (onSuccessSnapshots.length > 0) {
-          t?.log(`Applied ${onSuccessSnapshots.length} onSuccess update(s)`, {
-            color: "success",
-            diff: buildSnapshotDiff(onSuccessSnapshots, "onSuccess")
-          });
-        }
       }
       return response;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spoosh/plugin-optimistic",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Optimistic updates plugin for Spoosh - instant UI updates with automatic rollback",
   "license": "MIT",
   "repository": {
@@ -33,12 +33,12 @@
     }
   },
   "peerDependencies": {
-    "@spoosh/core": ">=0.15.0",
+    "@spoosh/core": ">=0.17.0",
     "@spoosh/plugin-invalidation": ">=0.7.0"
   },
   "devDependencies": {
-    "@spoosh/core": "0.15.1",
-    "@spoosh/plugin-invalidation": "0.9.1",
+    "@spoosh/core": "0.17.0",
+    "@spoosh/plugin-invalidation": "0.10.0",
     "@spoosh/test-utils": "0.3.0"
   },
   "scripts": {
@@ -46,6 +46,6 @@
     "build": "tsup",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --max-warnings 0",
-    "format": "prettier --write 'src/**/*.ts'"
+    "format": "prettier --write 'src/**/*.ts' '*.md'"
   }
 }