@jskit-ai/http-web 0.1.92 → 0.1.93

package/test/crudAddEditActions.test.js

@@ -4,9 +4,10 @@ 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 { createRenderer, defineComponent, h, nextTick, ref } from "vue";
+import { createMemoryHistory, createRouter } from "vue-router";
 import { createSchema } from "json-rest-schema";
+import { SHELL_WEB_PLACEMENT_RUNTIME_KEY } from "@jskit-ai/shell-web/client/placement";
 import { useCrudAddEditScreen } from "../src/client/composables/useCrudAddEditScreen.js";
 
 const componentUrl = new URL("../src/client/components/CrudAddEditScreen.vue", import.meta.url).href;
@@ -24,7 +25,7 @@ const hooks = registerHooks({
 const { default: CrudAddEditScreen } = await import(componentUrl);
 hooks.deregister();
 
-async function fixture(t, { actions, onSaveSuccess, request, ...options } = {}) {
+async function fixture(t, { actions, onSaveSuccess, request, screenResource = null, ...options } = {}) {
   const node = (type, text = "") => ({ type, text, props: {}, children: [], parent: null });
   const renderer = createRenderer({
     createElement: node,
@@ -51,7 +52,18 @@ async function fixture(t, { actions, onSaveSuccess, request, ...options } = {})
   });
   await router.push("/books/new?source=list");
   const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  const canSave = ref(true);
+  // Save permission comes from the web placement context, as in a real shell.
+  let placementContext = Object.freeze({ permissions: ["books.save"] });
+  const placementListeners = new Set();
+  const canSave = {
+    get value() {
+      return placementContext.permissions.includes("books.save");
+    },
+    set value(allowed) {
+      placementContext = Object.freeze({ permissions: allowed ? ["books.save"] : [] });
+      for (const listener of placementListeners) listener();
+    }
+  };
   const reports = [];
   const calls = [];
   let screen;
@@ -59,6 +71,7 @@ async function fixture(t, { actions, onSaveSuccess, request, ...options } = {})
     setup() {
       screen = useCrudAddEditScreen({
         mode: "new",
+        resource: screenResource,
         saveLabel: "Save book",
         cancelTo: "/books/:bookId",
         preserveCancelQuery: true,
@@ -80,21 +93,10 @@ async function fixture(t, { actions, onSaveSuccess, request, ...options } = {})
               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))
-              };
-            }
-          },
+          apiSuffix: "/books",
+          queryKeyFactory: () => ["books", "new"],
+          ownershipFilter: "public",
+          savePermissions: ["books.save"],
           onSaveSuccess: onSaveSuccess ? (payload, context) => onSaveSuccess(screen, payload, context) : undefined,
           ...options
         },
@@ -111,6 +113,16 @@ async function fixture(t, { actions, onSaveSuccess, request, ...options } = {})
   });
   app.use(router);
   app.use(VueQueryPlugin, { queryClient });
+  app.provide(SHELL_WEB_PLACEMENT_RUNTIME_KEY, {
+    getContext: () => placementContext,
+    getPlacements: () => [],
+    setContext: () => placementContext,
+    subscribe(listener) {
+      placementListeners.add(listener);
+      return () => placementListeners.delete(listener);
+    },
+    getRevision: () => 0
+  });
   app.provide("jskit.shell-web.runtime.web-error.client", {
     report(value) { reports.push(value); },
     dismiss() {}
@@ -310,3 +322,31 @@ test("route cleanup resets validation attempts unless clearOnRouteChange is disa
     });
   }
 });
+
+test("a save failure reports the resource's saveError from both the endpoint and the feedback", async (t) => {
+  const { screen, reports } = await fixture(t, {
+    screenResource: { messages: { saveError: "Could not save the book." } },
+    request() { throw Object.assign(new Error(""), { status: 500 }); }
+  });
+  Object.assign(screen.formState, { title: "Book", author: "Author" });
+  await screen.addEdit.submit();
+
+  assert.equal(screen.addEdit.resource.saveError.value, "Could not save the book.");
+  assert.equal(reports.length, 1);
+  assert.equal(reports[0].message, "Could not save the book.");
+});
+
+test("addEditOptions cannot become a second source for top-level form facts", async (t) => {
+  for (const [key, topLevel] of [
+    ["resource", "resource"],
+    ["input", "input"],
+    ["buildRawPayload", "buildPayload"],
+    ["mapLoadedToModel", "mapPayloadToModel"]
+  ]) {
+    await assert.rejects(
+      fixture(t, { [key]: key === "resource" || key === "input" ? {} : () => ({}) }),
+      new RegExp(`takes ${topLevel} as a top-level option, not addEditOptions\\.${key}`)
+    );
+  }
+  await assert.rejects(fixture(t, { listUrlTemplat: "/books" }), /does not support addEditOptions\.listUrlTemplat/);
+});

package/test/crudListFilterSurface.test.js

@@ -26,10 +26,13 @@ test("http-web exposes client-side CRUD list filter definition helpers", async (
 });
 
 test("CrudListFilterSurface provides adaptive controls without owning server semantics", async () => {
-  const source = await readFile(
-    path.join(PACKAGE_DIR, "src", "client", "components", "CrudListFilterSurface.vue"),
-    "utf8"
-  );
+  const componentsDir = path.join(PACKAGE_DIR, "src", "client", "components");
+  const surfaceSource = await readFile(path.join(componentsDir, "CrudListFilterSurface.vue"), "utf8");
+  const controlsSource = await readFile(path.join(componentsDir, "CrudListFilterControls.vue"), "utf8");
+  const source = `${surfaceSource}\n${controlsSource}`;
+
+  assert.match(surfaceSource, /<CrudListFilterControls[^>]*:runtime="runtime"[^>]*\/>/);
+  assert.match(surfaceSource, /<CrudListFilterControls[^>]*\bstacked\b[^>]*\/>/);
 
   assert.match(source, /defineProps/);
   assert.match(source, /useDisplay/);

package/test/listUiRuntime.test.js

@@ -15,7 +15,9 @@ test("createListUiRuntime resolves row keys and relative route templates from st
     editUrlTemplate: "./:contactId/edit"
   });
 
-  assert.equal(runtime.actionColumnCount, 2);
+  assert.equal(runtime.hasViewUrl, true);
+  assert.equal(runtime.hasEditUrl, true);
+  assert.equal(Object.hasOwn(runtime, "actionColumnCount"), false);
   assert.equal(runtime.resolveRowKey(items.value[0], 0), "abc 123");
   assert.equal(runtime.resolveParams("./new"), "/w/acme/admin/contacts/new");
   assert.equal(runtime.resolveViewUrl(items.value[0]), "/w/acme/admin/contacts/abc%20123");

package/test/requestTransportOptions.test.js

@@ -293,6 +293,30 @@ test("endpoint resource reads attach request recovery metadata to query options"
   });
 });
 
+test("realtime invalidation honours a function-form enabled option like the other operation options", async () => {
+  const subscribed = [];
+  const socket = {
+    on(eventName) { subscribed.push(eventName); },
+    off() {}
+  };
+  const app = createSSRApp({
+    setup() {
+      useEndpointResource({
+        queryKey: ["realtime-disabled"],
+        path: "/api/realtime-disabled",
+        client: { async request() { return {}; } },
+        realtime: { event: "records.changed", enabled: () => false }
+      });
+      return () => h("div");
+    }
+  });
+  app.use(VueQueryPlugin, { queryClient: new QueryClient() });
+  app.provide("jskit.realtime.runtime.client.socket", socket);
+  await renderToString(app);
+
+  assert.deepEqual(subscribed, []);
+});
+
 for (const kind of ["endpoint", "list", "list with caller signal"]) {
   test(`repeated ${kind} refreshes abort superseded HTTP requests`, async (t) => {
     const paginated = kind !== "endpoint";

package/test/resourceLoadStateHelpers.test.js

@@ -187,3 +187,35 @@ test("mergeRequestRecoveryQueryMeta preserves disabled recovery metadata", () =>
     }
   );
 });
+
+test("request recovery accepts only its short option names", () => {
+  assert.deepEqual(buildRequestRecoveryMeta({ enabled: false, label: "Ignored" }), {
+    jskit: { requestRecovery: false }
+  });
+  assert.deepEqual(buildRequestRecoveryMeta({ dedupeWindowMs: "-5" }, { label: "Default" }), {
+    jskit: { requestRecoveryLabel: "Default", requestRecoveryDedupeWindowMs: 0 }
+  });
+  assert.throws(
+    () => buildRequestRecoveryMeta({ requestRecoveryLabel: "Long name" }),
+    /requestRecovery\.requestRecoveryLabel is not supported/
+  );
+});
+
+test("composable defaults fill only the recovery hints the query options leave unset", () => {
+  assert.deepEqual(
+    mergeRequestRecoveryQueryMeta(
+      { meta: { jskit: { requestRecoveryDedupeWindowMs: 250 } } },
+      null,
+      { label: "Default label", method: "get", dedupeWindowMs: 5000 }
+    ),
+    {
+      meta: {
+        jskit: {
+          requestRecoveryDedupeWindowMs: 250,
+          requestRecoveryLabel: "Default label",
+          requestRecoveryMethod: "GET"
+        }
+      }
+    }
+  );
+});

package/test/useAccess.test.js

@@ -0,0 +1,62 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createSSRApp, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { SHELL_WEB_PLACEMENT_RUNTIME_KEY } from "@jskit-ai/shell-web/client/placement";
+import { useAccess } from "../src/client/composables/useAccess.js";
+
+async function renderAccess(placementContext, options = {}) {
+  let access = null;
+  const app = createSSRApp({
+    setup() {
+      access = useAccess(options);
+      return () => h("div");
+    }
+  });
+  app.provide(SHELL_WEB_PLACEMENT_RUNTIME_KEY, {
+    getContext: () => placementContext,
+    getPlacements: () => [],
+    setContext: () => placementContext,
+    subscribe: () => () => {},
+    getRevision: () => 0
+  });
+  await renderToString(app);
+  return access;
+}
+
+test("useAccess reads permissions from the placement context only", async () => {
+  const access = await renderAccess({ permissions: ["workspace.members.view"] });
+
+  assert.deepEqual(access.permissions.value, ["workspace.members.view"]);
+  assert.equal(access.can("workspace.members.view"), true);
+  assert.equal(access.canAny(["workspace.members.manage", "workspace.members.view"]), true);
+  assert.equal(access.canAll(["workspace.members.manage", "workspace.members.view"]), false);
+  assert.equal(access.awaitingPlacementPermissions.value, false);
+  assert.equal(access.permissionsUnavailableError.value, "");
+  assert.deepEqual(Object.keys(access).sort(), [
+    "accessMode",
+    "accessRequired",
+    "awaitingPlacementPermissions",
+    "can",
+    "canAll",
+    "canAny",
+    "permissions",
+    "permissionsUnavailableError"
+  ]);
+});
+
+test("useAccess awaits placement permissions until the context carries them", async () => {
+  const access = await renderAccess({});
+
+  assert.deepEqual(access.permissions.value, []);
+  assert.equal(access.can("workspace.members.view"), false);
+  assert.equal(access.awaitingPlacementPermissions.value, true);
+  assert.equal(access.permissionsUnavailableError.value, "Permissions are unavailable in placement context.");
+});
+
+test("useAccess reports nothing when disabled", async () => {
+  const access = await renderAccess({}, { enabled: false });
+
+  assert.equal(access.awaitingPlacementPermissions.value, false);
+  assert.equal(access.permissionsUnavailableError.value, "");
+});

package/test/useCrudDeleteAction.test.js

@@ -1,7 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
-import { createSSRApp, h, nextTick, ref } from "vue";
+import { QueryClient, QueryObserver, VueQueryPlugin } from "@tanstack/vue-query";
+import { createSSRApp, effectScope, h, nextTick, ref, watch } from "vue";
 import { renderToString } from "vue/server-renderer";
 import { createMemoryHistory, createRouter } from "vue-router";
 import { configureHttpWebClient, resetHttpWebClientForTests } from "../src/client/lib/httpClient.js";
@@ -111,6 +111,61 @@ test("useCrudDeleteAction confirms one DELETE, invalidates CRUD state, and retur
   ]);
 });
 
+test("useCrudDeleteAction leaves the deleted record's view before CRUD state is refetched", async () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } }
+  });
+  const viewQueryKey = ["crud", "notes", "view", "42"];
+  let viewFetches = 0;
+  let recordDeleted = false;
+  const viewObserver = new QueryObserver(queryClient, {
+    queryKey: viewQueryKey,
+    async queryFn() {
+      viewFetches += 1;
+      if (recordDeleted) {
+        throw Object.assign(new Error("Record not found."), { status: 404 });
+      }
+      return { id: "42" };
+    }
+  });
+  const stopObservingView = viewObserver.subscribe(() => {});
+  await queryClient.fetchQuery({ queryKey: viewQueryKey, queryFn: () => ({ id: "42" }) });
+  viewFetches = 0;
+
+  const client = {
+    async request() {
+      recordDeleted = true;
+      return null;
+    }
+  };
+  const { deleteAction, router } = await renderDeleteAction({ client, queryClient });
+
+  // The view screen unmounts (stops observing its query) when the route leaves it,
+  // in the same scheduler flush that re-renders the router view.
+  const scope = effectScope();
+  scope.run(() => {
+    watch(() => router.currentRoute.value.path, (path) => {
+      if (path === "/notes") {
+        stopObservingView();
+      }
+    });
+  });
+
+  try {
+    deleteAction.request();
+    await deleteAction.confirm();
+
+    assert.equal(router.currentRoute.value.path, "/notes");
+    assert.equal(viewFetches, 0);
+    assert.equal(queryClient.getQueryState(viewQueryKey)?.isInvalidated, true);
+    assert.equal(queryClient.getQueryState(viewQueryKey)?.error, null);
+  } finally {
+    scope.stop();
+    stopObservingView();
+    queryClient.clear();
+  }
+});
+
 test("useCrudDeleteAction keeps the record dialog open with useful error feedback", async () => {
   const client = {
     async request() {

package/test/useCrudListScreen.test.js

@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createSSRApp, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { createMemoryHistory, createRouter } from "vue-router";
+import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
+import { useCrudListScreen } from "../src/client/composables/useCrudListScreen.js";
+
+async function renderListScreen(options) {
+  const router = createRouter({ history: createMemoryHistory(), routes: [{ path: "/books", component: { render: () => h("div") } }] });
+  await router.push("/books");
+  const queryClient = new QueryClient();
+  let screen;
+  const app = createSSRApp({
+    setup() {
+      screen = useCrudListScreen({
+        resourceNamespace: "books",
+        apiSuffix: "/books",
+        readEnabled: false,
+        client: { async request() { return { items: [], nextCursor: null }; } },
+        ...options
+      });
+      return () => h("div");
+    }
+  });
+  app.use(router);
+  app.use(VueQueryPlugin, { queryClient });
+  await renderToString(app);
+  queryClient.clear();
+  return screen;
+}
+
+test("list screen link availability is the list runtime's single answer", async () => {
+  const blank = await renderListScreen({ viewUrlTemplate: "   ", editUrlTemplate: "" });
+  assert.equal(blank.hasViewUrl, false);
+  assert.equal(blank.hasEditUrl, false);
+  assert.equal(blank.hasViewUrl, blank.records.hasViewUrl);
+
+  const linked = await renderListScreen({ viewUrlTemplate: "/books/:recordId", editUrlTemplate: "/books/:recordId/edit" });
+  assert.equal(linked.hasViewUrl, true);
+  assert.equal(linked.hasEditUrl, true);
+  assert.equal(Object.hasOwn(linked.records, "actionColumnCount"), false);
+  assert.equal(Object.hasOwn(linked.records, "resolveFieldDisplay"), false);
+  assert.equal(linked.resolveRecordTitle({ name: "Dune" }), "Dune");
+});

package/test/useListRouteInitialization.test.js

@@ -1,17 +1,8 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
-import {
-  computed,
-  createRenderer,
-  h,
-  unref
-} from "vue";
-import {
-  createMemoryHistory,
-  createRouter,
-  useRoute
-} from "vue-router";
+import { createRenderer, h } from "vue";
+import { createMemoryHistory, createRouter } from "vue-router";
 
 import { useList } from "../src/client/composables/records/useList.js";
 import { useCrudListFilters } from "../src/client/composables/useCrudListFilters.js";
@@ -137,37 +128,6 @@ function createTestRenderer() {
   });
 }
 
-function createListTestAdapter() {
-  return Object.freeze({
-    useOperationScope() {
-      const route = useRoute();
-
-      return Object.freeze({
-        routeContext: Object.freeze({
-          route,
-          currentSurfaceId: computed(() => "admin")
-        }),
-        scopeParamValue: computed(() => ""),
-        normalizedOwnershipFilter: "none",
-        apiPath: computed(() => "/contacts"),
-        queryKey: computed(() => ["contacts"]),
-        queryCanRun(gate = true) {
-          return computed(() => Boolean(unref(gate)));
-        },
-        permissionGate() {
-          return computed(() => true);
-        },
-        loadError(error = "") {
-          return computed(() => String(unref(error) || ""));
-        },
-        isLoading(loading = false) {
-          return computed(() => Boolean(unref(loading)));
-        }
-      });
-    }
-  });
-}
-
 async function mountRouteSynchronizedList(initialLocation) {
   const calls = [];
   const client = {
@@ -206,7 +166,8 @@ async function mountRouteSynchronizedList(initialLocation) {
     setup() {
       filterRuntime = useCrudListFilters(CURRENTNESS_FILTERS);
       useList({
-        adapter: createListTestAdapter(),
+        apiSuffix: "/contacts",
+        ownershipFilter: "public",
         client,
         queryKeyFactory: () => ["contacts"],
         queryParams: filterRuntime.queryParams,
@@ -260,7 +221,7 @@ test("route-synchronized lists make one initial request with the hydrated route
   assert.ok(signal instanceof AbortSignal);
   assert.equal(signal.aborted, false);
   assert.deepEqual(runtime.calls[0], {
-    path: "/contacts",
+    path: "/api/contacts",
     options: {
       method: "GET",
       signal,

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

@@ -1,34 +0,0 @@
-import { useOperationScope } from "../internal/useOperationScope.js";
-
-const WEB_OPERATION_ADAPTER_ID = "http-web-default";
-
-function createWebOperationAdapter() {
-  return Object.freeze({
-    id: WEB_OPERATION_ADAPTER_ID,
-    useOperationScope(options = {}) {
-      return useOperationScope(options);
-    }
-  });
-}
-
-const defaultWebOperationAdapter = createWebOperationAdapter();
-
-function resolveOperationAdapter(adapter, { context = "http-web operation adapter" } = {}) {
-  if (adapter == null) {
-    return defaultWebOperationAdapter;
-  }
-
-  if (!adapter || typeof adapter !== "object" || Array.isArray(adapter)) {
-    throw new TypeError(`${context} must be an object when provided.`);
-  }
-  if (typeof adapter.useOperationScope !== "function") {
-    throw new TypeError(`${context} must expose useOperationScope(options).`);
-  }
-
-  return adapter;
-}
-
-export {
-  createWebOperationAdapter,
-  resolveOperationAdapter
-};