@jskit-ai/http-web 0.1.59 → 0.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/http-web",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -44,14 +44,14 @@
     "./client/support/contractGuards": "./src/client/support/contractGuards.js"
   },
   "dependencies": {
-    "@jskit-ai/resource-crud-core": "0.1.156",
+    "@jskit-ai/resource-crud-core": "0.1.158",
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.212",
-    "@jskit-ai/kernel": "0.1.214",
-    "@jskit-ai/realtime": "0.1.211",
-    "@jskit-ai/shell-web": "0.1.218",
+    "@jskit-ai/http-runtime": "0.1.214",
+    "@jskit-ai/kernel": "0.1.216",
+    "@jskit-ai/realtime": "0.1.213",
+    "@jskit-ai/shell-web": "0.1.220",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/src/client/components/CrudAddEditScreen.vue

@@ -52,15 +52,27 @@ function resolveCancelTo(target = cancelTo.value) {
 <template>
   <section class="crud-screen crud-screen--operator crud-add-edit-form d-flex flex-column ga-4">
     <div class="crud-add-edit-form__actions">
-      <v-btn v-if="cancelTo" color="primary" variant="outlined" :to="resolveCancelTo(cancelTo)">Cancel</v-btn>
-      <v-btn
-        color="primary"
-        variant="flat"
-        :disabled="addEdit.isSubmitDisabled"
-        @click="addEdit.submit"
+      <slot
+        name="actions"
+        :screen="screen"
+        :mode="mode"
+        :form-runtime="formRuntime"
+        :form-state="formState"
+        :add-edit="addEdit"
+        :save-label="saveLabel"
+        :cancel-to="resolveCancelTo()"
+        :submit="addEdit.submit"
       >
-        {{ addEdit.isSaving ? "Saving…" : saveLabel }}
-      </v-btn>
+        <v-btn v-if="cancelTo" color="primary" variant="outlined" :to="resolveCancelTo(cancelTo)">Cancel</v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          :disabled="addEdit.isSubmitDisabled"
+          @click="addEdit.submit"
+        >
+          {{ addEdit.isSaving ? "Saving…" : saveLabel }}
+        </v-btn>
+      </slot>
     </div>
 
     <v-sheet rounded="lg" border class="crud-add-edit-form__panel">

package/src/client/composables/records/useAddEdit.js

@@ -44,6 +44,7 @@ function useAddEdit({
   buildRawPayload,
   buildSavePayload,
   onSaveSuccess,
+  validationFeedback = true,
   requestQueryParams = null,
   recordIdParam = "recordId",
   routeParams = null,
@@ -148,6 +149,7 @@ function useAddEdit({
     buildRawPayload,
     buildSavePayload,
     onSaveSuccess,
+    validationFeedback,
     messages: effectiveMessages
   });
 
@@ -155,7 +157,7 @@ function useAddEdit({
     enabled: clearOnRouteChange,
     route: routeContext.route,
     feedback,
-    fieldBag
+    onClear: addEdit.resetValidation
   });
 
   const isInitialLoading = operationScope.isLoading(endpointResource.isInitialLoading);
@@ -165,7 +167,7 @@ function useAddEdit({
     Boolean(!canSave.value || addEdit.saving.value || isRefetching.value)
   );
   const isSubmitDisabled = computed(() =>
-    Boolean(isInitialLoading.value || isRefetching.value || !canSave.value)
+    Boolean(isInitialLoading.value || isRefetching.value || !canSave.value || addEdit.saving.value)
   );
   const loadError = operationScope.loadError(endpointResource.loadError);
   const isLoading = operationScope.isLoading(endpointResource.isLoading);
@@ -207,6 +209,9 @@ function useAddEdit({
     isLoading,
     isSaving: addEdit.saving,
     fieldErrors: addEdit.fieldErrors,
+    validationAttempted: addEdit.validationAttempted,
+    validationErrors: addEdit.validationErrors,
+    resetValidation: addEdit.resetValidation,
     message: addEdit.message,
     messageType: addEdit.messageType,
     submit: addEdit.submit,

package/src/client/composables/runtime/operationUiHelpers.js

@@ -106,7 +106,8 @@ function setupRouteChangeCleanup({
   enabled = true,
   route = null,
   feedback = null,
-  fieldBag = null
+  fieldBag = null,
+  onClear = null
 } = {}) {
   if (!enabled) {
     return;
@@ -117,6 +118,7 @@ function setupRouteChangeCleanup({
     () => {
       feedback?.clear?.();
       fieldBag?.clear?.();
+      onClear?.();
     }
   );
 }

package/src/client/composables/runtime/useAddEditCore.js

@@ -1,4 +1,5 @@
 import { useQueryClient } from "@tanstack/vue-query";
+import { computed, ref } from "vue";
 import { resolveFieldErrors } from "@jskit-ai/http-runtime/client";
 import { validateOperationInput } from "./operationValidationHelpers.js";
 import { watchResourceModelState } from "./modelStateHelpers.js";
@@ -15,6 +16,7 @@ function useAddEditCore({
   buildRawPayload,
   buildSavePayload,
   onSaveSuccess,
+  validationFeedback = true,
   messages = {}
 } = {}) {
   const queryClient = useQueryClient();
@@ -30,29 +32,50 @@ function useAddEditCore({
     }
   });
 
-  const saving = resource?.isSaving;
+  const submitting = ref(false);
+  const saving = computed(() => Boolean(submitting.value || resource?.isSaving?.value));
   const fieldErrors = fieldBag?.errors;
   const message = feedback?.message;
   const messageType = feedback?.messageType;
+  const validationAttempted = ref(false);
+  const validationErrors = computed(() => {
+    if (!validationAttempted.value || !input) {
+      return {};
+    }
+
+    // Revalidate without changing server field errors or reporting feedback.
+    const result = validateOperationInput({ input, rawPayload: resolveRawPayload() });
+    return result.ok ? {} : resolveFieldErrors(result.failure);
+  });
+
+  function resolveRawPayload() {
+    return typeof buildRawPayload === "function" ? buildRawPayload(model, {
+      queryClient,
+      resource
+    }) : {};
+  }
+
+  function resetValidation() {
+    validationAttempted.value = false;
+    fieldBag?.clear?.();
+  }
 
   async function submit() {
-    if (!canSave?.value || saving?.value) {
+    if (!canSave?.value || saving.value) {
       return;
     }
 
     feedback?.clear?.();
     fieldBag?.clear?.();
+    validationAttempted.value = true;
 
-    const rawPayload = typeof buildRawPayload === "function" ? buildRawPayload(model, {
-      queryClient,
-      resource
-    }) : {};
+    const rawPayload = resolveRawPayload();
 
     const validationResult = validateOperationInput({
       input,
       rawPayload,
       fieldBag,
-      feedback,
+      feedback: validationFeedback === false ? null : feedback,
       validationMessage: String(messages.validation || "Validation failed.")
     });
     if (!validationResult.ok) {
@@ -69,6 +92,7 @@ function useAddEditCore({
       : parsedInput;
 
     try {
+      submitting.value = true;
       const queryKeySnapshot = queryKey?.value;
       const payload = await resource.save(savePayload);
 
@@ -97,6 +121,8 @@ function useAddEditCore({
     } catch (error) {
       fieldBag?.apply?.(resolveFieldErrors(error));
       feedback?.error?.(error, String(messages.saveError || "Unable to save."));
+    } finally {
+      submitting.value = false;
     }
   }
 
@@ -105,6 +131,9 @@ function useAddEditCore({
     fieldErrors,
     message,
     messageType,
+    validationAttempted,
+    validationErrors,
+    resetValidation,
     submit
   });
 }

package/src/client/composables/runtime/useEndpointResource.js

@@ -91,7 +91,7 @@ function useEndpointResource({
 
   const query = useQuery({
     queryKey,
-    queryFn: () => {
+    queryFn: ({ signal }) => {
       const requestPath = normalizedPath.value;
       if (!requestPath) {
         throw new Error("Resource path is required.");
@@ -102,7 +102,8 @@ function useEndpointResource({
           method: readMethod,
           query: readQuery,
           transport
-        })
+        }),
+        signal
       });
     },
     enabled: queryEnabled,

package/src/client/composables/runtime/useListCore.js

@@ -79,20 +79,15 @@ function useListCore({
     queryKey,
     initialPageParam,
     enabled: queryEnabled,
-    queryFn: async ({ pageParam }) => {
+    queryFn: async ({ pageParam, signal }) => {
       const requestPath = normalizedPath.value;
       if (!requestPath) {
         throw new Error("List path is required.");
       }
 
-      return activeClient.request(
-        requestPath,
-        buildListRequestOptions({
-          requestOptions,
-          transport,
-          pageParam
-        })
-      );
+      const options = buildListRequestOptions({ requestOptions, transport, pageParam });
+      options.signal = options.signal ? AbortSignal.any([signal, options.signal]) : signal;
+      return activeClient.request(requestPath, options);
     },
     getNextPageParam,
     selectItems,

package/test/crudAddEditActions.test.js

@@ -0,0 +1,312 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { registerHooks } from "node:module";
+import test from "node:test";
+import { compileScript, parse } from "@vue/compiler-sfc";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
+import { computed, createRenderer, defineComponent, h, nextTick, ref, unref } from "vue";
+import { createMemoryHistory, createRouter, useRoute } from "vue-router";
+import { createSchema } from "json-rest-schema";
+import { useCrudAddEditScreen } from "../src/client/composables/useCrudAddEditScreen.js";
+
+const componentUrl = new URL("../src/client/components/CrudAddEditScreen.vue", import.meta.url).href;
+const hooks = registerHooks({
+  load(url, context, nextLoad) {
+    if (url !== componentUrl) return nextLoad(url, context);
+    const { descriptor } = parse(readFileSync(new URL(url), "utf8"));
+    return {
+      format: "module",
+      shortCircuit: true,
+      source: compileScript(descriptor, { id: "crud-add-edit-actions", inlineTemplate: true }).content
+    };
+  }
+});
+const { default: CrudAddEditScreen } = await import(componentUrl);
+hooks.deregister();
+
+async function fixture(t, { actions, onSaveSuccess, request, ...options } = {}) {
+  const node = (type, text = "") => ({ type, text, props: {}, children: [], parent: null });
+  const renderer = createRenderer({
+    createElement: node,
+    createText: (text) => node("text", text),
+    createComment: () => node("comment"),
+    setText: (item, text) => { item.text = text; },
+    setElementText: (item, text) => { item.text = text; item.children = []; },
+    patchProp: (item, key, _previous, value) => { item.props[key] = value; },
+    parentNode: (item) => item.parent,
+    nextSibling: (item) => item.parent?.children[item.parent.children.indexOf(item) + 1] ?? null,
+    insert(item, parent, anchor) {
+      if (item.parent) item.parent.children.splice(item.parent.children.indexOf(item), 1);
+      item.parent = parent;
+      const index = anchor ? parent.children.indexOf(anchor) : -1;
+      if (index < 0) parent.children.push(item); else parent.children.splice(index, 0, item);
+    },
+    remove(item) {
+      if (item.parent) item.parent.children.splice(item.parent.children.indexOf(item), 1);
+    }
+  });
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: "/books/:bookId?", component: { render: () => h("div") } }]
+  });
+  await router.push("/books/new?source=list");
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  const canSave = ref(true);
+  const reports = [];
+  const calls = [];
+  let screen;
+  const app = renderer.createApp({
+    setup() {
+      screen = useCrudAddEditScreen({
+        mode: "new",
+        saveLabel: "Save book",
+        cancelTo: "/books/:bookId",
+        preserveCancelQuery: true,
+        formFields: [{ key: "title", type: "string" }, { key: "author", type: "string" }],
+        input: {
+          schema: createSchema({
+            title: { type: "string", required: true, minLength: 1, messages: { minLength: "Title is required." } },
+            author: { type: "string", required: true, minLength: 1, messages: { minLength: "Author is required." } }
+          }),
+          mode: "replace"
+        },
+        addEditOptions: {
+          readEnabled: false,
+          writeMethod: "POST",
+          recordIdParam: "bookId",
+          client: {
+            async request(path, requestOptions) {
+              calls.push({ path, ...requestOptions });
+              return request ? request(path, requestOptions) : { id: calls.length, ...requestOptions.body };
+            }
+          },
+          adapter: {
+            useOperationScope() {
+              return {
+                routeContext: { route: useRoute(), currentSurfaceId: ref("admin") },
+                scopeParamValue: ref(""),
+                normalizedOwnershipFilter: "none",
+                apiPath: ref("/api/books"),
+                queryKey: ref(["books", "new"]),
+                queryCanRun: () => ref(false),
+                permissionGate: (key) => key === "save" ? canSave : ref(true),
+                loadError: (value) => computed(() => unref(value)),
+                isLoading: (value) => computed(() => unref(value))
+              };
+            }
+          },
+          onSaveSuccess: onSaveSuccess ? (payload, context) => onSaveSuccess(screen, payload, context) : undefined,
+          ...options
+        },
+        saveSuccess: { navigateToView: false, navigateToList: false }
+      });
+      return () => h(CrudAddEditScreen, { screen }, {
+        fields: ({ formState }) => h("input", {
+          value: formState.title,
+          onInput: (event) => { formState.title = event.target.value; }
+        }),
+        ...(actions ? { actions } : {})
+      });
+    }
+  });
+  app.use(router);
+  app.use(VueQueryPlugin, { queryClient });
+  app.provide("jskit.shell-web.runtime.web-error.client", {
+    report(value) { reports.push(value); },
+    dismiss() {}
+  });
+  for (const [name, tag] of [
+    ["VBtn", "button"], ["VForm", "form"], ["VSheet", "div"], ["VRow", "div"], ["VSkeletonLoader", "div"]
+  ]) {
+    app.component(name, defineComponent({ setup: (_props, { slots }) => () => h(tag, {}, slots.default?.()) }));
+  }
+  const root = node("root");
+  app.mount(root);
+  t.after(() => { app.unmount(); queryClient.clear(); });
+  const all = (item = root) => [item, ...item.children.flatMap((child) => all(child))];
+  const button = (label) => all().find((item) => item.type === "button" &&
+    all(item).some((child) => child.text.trim() === label));
+  return { screen, router, queryClient, canSave, reports, calls, all, button };
+}
+
+test("default form actions retain Cancel, Save, validation feedback, and keyboard submission", async (t) => {
+  const { screen, reports, calls, all, button } = await fixture(t);
+  const { addEdit, formState } = screen;
+  assert.deepEqual(button("Cancel").props.to, { path: "/books/new", query: { source: "list" } });
+  assert.equal(button("Save book").props.disabled, false);
+  assert.equal(addEdit.validationAttempted, false);
+  assert.deepEqual(addEdit.validationErrors, {});
+
+  await button("Save book").props.onClick();
+  assert.equal(calls.length, 0);
+  assert.equal(addEdit.validationAttempted, true);
+  assert.deepEqual(addEdit.validationErrors, { title: "Title is required.", author: "Author is required." });
+  assert.equal(reports.length, 1);
+  assert.equal(reports[0].cause.code, "validation_failed");
+
+  formState.title = " A book ";
+  assert.deepEqual(addEdit.validationErrors, { author: "Author is required." });
+  formState.author = "An author";
+  assert.deepEqual(addEdit.validationErrors, {});
+  assert.equal(reports.length, 1);
+
+  let prevented = false;
+  await all().find((item) => item.type === "form").props.onSubmit({ preventDefault() { prevented = true; } });
+  assert.equal(prevented, true);
+  assert.equal(calls.length, 1);
+  assert.equal(calls[0].method, "POST");
+  assert.deepEqual(calls[0].body, { title: "A book", author: "An author" });
+  assert.equal(reports.at(-1).severity, "success");
+});
+
+test("actions slot supports local guidance and save-and-add-another through onSaveSuccess", async (t) => {
+  let actionScope;
+  let saved;
+  const activeAction = ref("");
+  const { screen, reports, calls, all, button, queryClient, router } = await fixture(t, {
+    validationFeedback: false,
+    actions(scope) {
+      actionScope = scope;
+      return ["Save", "Save and add another"].map((label) => h("div", {}, [
+        h("button", {
+          onClick() { activeAction.value = label; return scope.submit(); },
+          disabled: scope.addEdit.isSubmitDisabled
+        }, label),
+        activeAction.value === label && scope.addEdit.validationAttempted
+          ? h("p", { "data-action": label }, Object.values(scope.addEdit.validationErrors).join(" "))
+          : null
+      ]));
+    },
+    onSaveSuccess(currentScreen, payload, context) {
+      saved = { payload, context };
+      Object.assign(currentScreen.formState, { title: "", author: "" });
+      currentScreen.addEdit.resetValidation();
+    }
+  });
+  const { addEdit, formState } = screen;
+  assert.equal(button("Save book"), undefined);
+  assert.equal(button("Cancel"), undefined);
+  assert.equal(actionScope.screen, screen);
+  assert.equal(actionScope.formState, formState);
+  assert.equal(actionScope.formRuntime, screen.formRuntime);
+  assert.equal(actionScope.addEdit, addEdit);
+  assert.equal(actionScope.mode, "new");
+  assert.equal(actionScope.saveLabel, "Save book");
+  assert.deepEqual(actionScope.cancelTo, { path: "/books/new", query: { source: "list" } });
+
+  await button("Save and add another").props.onClick();
+  assert.equal(reports.length, 0);
+  assert.equal(calls.length, 0);
+  assert.equal(saved, undefined);
+  assert.equal(addEdit.validationErrors.title, "Title is required.");
+  assert.deepEqual(screen.resolveFieldErrors("title"), ["Title is required."]);
+  await nextTick();
+  assert.equal(all().find((item) => item.type === "p").props["data-action"], "Save and add another");
+  assert.equal(all().find((item) => item.type === "p").text, "Title is required. Author is required.");
+  formState.title = "First book";
+  await nextTick();
+  assert.equal(all().find((item) => item.type === "p").text, "Author is required.");
+  await button("Save").props.onClick();
+  await nextTick();
+  assert.equal(all().find((item) => item.type === "p").props["data-action"], "Save");
+  Object.assign(formState, { title: "First book", author: "An author" });
+  assert.deepEqual(addEdit.validationErrors, {});
+  await button("Save and add another").props.onClick();
+  await nextTick();
+
+  assert.equal(calls.length, 1);
+  assert.equal(saved.payload.title, "First book");
+  assert.equal(saved.context.queryClient, queryClient);
+  assert.deepEqual(saved.context.parsed, { title: "First book", author: "An author" });
+  assert.equal(formState.title, "");
+  assert.equal(addEdit.validationAttempted, false);
+  assert.deepEqual(addEdit.validationErrors, {});
+  assert.deepEqual(screen.resolveFieldErrors("title"), []);
+  assert.equal(reports.length, 1);
+  assert.equal(reports[0].severity, "success");
+  assert.equal(router.currentRoute.value.path, "/books/new");
+
+  await all().find((item) => item.type === "form").props.onSubmit({ preventDefault() {} });
+  assert.equal(calls.length, 1);
+  assert.equal(addEdit.validationAttempted, true);
+});
+
+test("permission gating and duplicate-submit protection cover the request and success callback", async (t) => {
+  const response = Promise.withResolvers();
+  const success = Promise.withResolvers();
+  const { screen, calls, canSave, button } = await fixture(t, {
+    request: () => response.promise,
+    onSaveSuccess: () => success.promise
+  });
+  const { addEdit, formState } = screen;
+  canSave.value = false;
+  await nextTick();
+  assert.equal(button("Save book").props.disabled, true);
+  await addEdit.submit();
+  assert.equal(calls.length, 0);
+  assert.equal(addEdit.validationAttempted, false);
+
+  canSave.value = true;
+  Object.assign(formState, { title: "Book", author: "Author" });
+  const pending = addEdit.submit();
+  await addEdit.submit();
+  await nextTick();
+  assert.equal(calls.length, 1);
+  assert.equal(button("Saving…").props.disabled, true);
+  assert.equal(addEdit.isFieldLocked, true);
+  response.resolve({ id: 1, title: "Book", author: "Author" });
+  await new Promise((resolve) => setImmediate(resolve));
+  assert.equal(addEdit.resource.isSaving.value, false);
+  assert.equal(addEdit.isSaving, true);
+  await addEdit.submit();
+  assert.equal(calls.length, 1);
+  success.resolve();
+  await pending;
+  assert.equal(addEdit.isSaving, false);
+  assert.equal(addEdit.isSubmitDisabled, false);
+});
+
+test("local validation feedback opt-out preserves permission, network, and server failure feedback", async (t) => {
+  for (const error of [
+    Object.assign(new Error("Permission denied."), { status: 403 }),
+    new TypeError("Failed to fetch"),
+    Object.assign(new Error("Title is already taken."), { status: 422, fieldErrors: { title: "Title is already taken." } }),
+    Object.assign(new Error("Server unavailable."), { status: 503 })
+  ]) {
+    await t.test(error.message, async (t) => {
+      let succeeded = false;
+      const { screen, reports } = await fixture(t, {
+        validationFeedback: false,
+        request() { throw error; },
+        onSaveSuccess() { succeeded = true; }
+      });
+      Object.assign(screen.formState, { title: "Book", author: "Author" });
+      await screen.addEdit.submit();
+      assert.equal(succeeded, false);
+      assert.equal(reports.length, 1);
+      assert.equal(reports[0].cause, error);
+      assert.equal(screen.addEdit.isSaving, false);
+      assert.equal(screen.formState.title, "Book");
+      assert.deepEqual(screen.addEdit.validationErrors, {});
+      if (error.fieldErrors) {
+        screen.formState.author = "Another author";
+        assert.deepEqual(screen.addEdit.validationErrors, {});
+        assert.deepEqual(screen.resolveFieldErrors("title"), [error.fieldErrors.title]);
+      }
+    });
+  }
+});
+
+test("route cleanup resets validation attempts unless clearOnRouteChange is disabled", async (t) => {
+  for (const clearOnRouteChange of [true, false]) {
+    await t.test(String(clearOnRouteChange), async (t) => {
+      const { screen, router } = await fixture(t, { clearOnRouteChange, validationFeedback: false });
+      await screen.addEdit.submit();
+      await router.push("/books/other");
+      await nextTick();
+      assert.equal(screen.addEdit.validationAttempted, !clearOnRouteChange);
+      assert.equal(Object.keys(screen.addEdit.validationErrors).length, clearOnRouteChange ? 0 : 2);
+      if (clearOnRouteChange) assert.deepEqual(screen.resolveFieldErrors("title"), []);
+    });
+  }
+});

package/test/requestTransportOptions.test.js

@@ -14,7 +14,7 @@ import {
   configureHttpWebClient,
   resetHttpWebClientForTests
 } from "../src/client/lib/httpClient.js";
-import { buildListRequestOptions } from "../src/client/composables/runtime/useListCore.js";
+import { buildListRequestOptions, useListCore } from "../src/client/composables/runtime/useListCore.js";
 import {
   resolveOperationRealtimeOptions
 } from "../src/client/composables/useRealtimeQueryInvalidation.js";
@@ -293,6 +293,75 @@ test("endpoint resource reads attach request recovery metadata to query options"
   });
 });
 
+for (const kind of ["endpoint", "list", "list with caller signal"]) {
+  test(`repeated ${kind} refreshes abort superseded HTTP requests`, async (t) => {
+    const paginated = kind !== "endpoint";
+    const caller = kind === "list with caller signal" ? new AbortController() : null;
+    const queryClient = new QueryClient();
+    const queryKey = ["endpoint-cancellation"];
+    const requests = [];
+    const active = new Set();
+    let resource;
+    const payload = (revision) => paginated
+      ? { pages: [{ items: [revision] }], pageParams: [null] }
+      : { revision };
+    queryClient.setQueryData(queryKey, payload(0));
+    const app = createSSRApp({
+      setup() {
+        resource = (paginated ? useListCore : useEndpointResource)({
+          queryKey,
+          path: "/api/endpoint-cancellation",
+          requestOptions: caller ? { signal: caller.signal } : null,
+          queryOptions: { staleTime: Infinity, retry: false },
+          client: {
+            request(_path, { signal }) {
+              return new Promise((resolve, reject) => {
+                const request = { signal, resolve };
+                requests.push(request);
+                active.add(request);
+                signal?.addEventListener("abort", () => {
+                  active.delete(request);
+                  reject(new DOMException("Query cancelled", "AbortError"));
+                }, { once: true });
+              });
+            }
+          }
+        });
+        return () => h("div");
+      }
+    });
+    app.use(VueQueryPlugin, { queryClient });
+    t.after(() => {
+      queryClient.clear();
+      for (const request of requests) request.resolve({ revision: -1 });
+    });
+    await renderToString(app);
+
+    const refreshes = [];
+    for (let revision = 1; revision <= 10; revision += 1) {
+      // SSR has no mounted observer; include its cached query in invalidation.
+      refreshes.push(revision % 2 === 0
+        ? queryClient.invalidateQueries({ queryKey, refetchType: "all" })
+        : resource.reload());
+      await new Promise((resolve) => setImmediate(resolve));
+      assert.equal(requests.length, revision);
+      assert.equal(active.size, 1, "only the latest refresh should keep an HTTP request alive");
+    }
+    assert.equal(requests[0].signal.aborted, true);
+    assert.equal(requests.at(-1).signal.aborted, false);
+    requests.at(-1).resolve(paginated ? { items: [10] } : { revision: 10 });
+    await Promise.all(refreshes);
+    assert.deepEqual(queryClient.getQueryData(queryKey), payload(10));
+    if (caller) {
+      const pending = resource.reload();
+      caller.abort();
+      assert.equal(requests.at(-1).signal.aborted, true);
+      await pending;
+      assert.equal(resource.query.error.value.name, "AbortError");
+    }
+  });
+}
+
 test("endpoint resources use the configured http-web HTTP client by default", async () => {
   const queryClient = new QueryClient();
   const calls = [];

package/test/useAddEditCore.test.js

@@ -117,6 +117,8 @@ test("useAddEditCore snapshots the cache key after payload normalization", async
   await runtime.submit();
   scope.stop();
 
+  assert.equal(runtime.validationAttempted.value, true);
+  assert.deepEqual(runtime.validationErrors.value, {});
   assert.equal(model.status, "published");
   assert.equal(queryClient.getQueryData(["products", "draft"]), undefined);
   assert.deepEqual(queryClient.getQueryData(["products", "normalized"]), payload);

package/test/useListRouteInitialization.test.js

@@ -256,10 +256,14 @@ test("route-synchronized lists make one initial request with the hydrated route
   });
 
   assert.equal(runtime.calls.length, 1);
+  const { signal } = runtime.calls[0].options;
+  assert.ok(signal instanceof AbortSignal);
+  assert.equal(signal.aborted, false);
   assert.deepEqual(runtime.calls[0], {
     path: "/contacts",
     options: {
       method: "GET",
+      signal,
       query: {
         currentness: "archived",
         limit: 20