@antelopejs/dms 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.5.5
+
+[compare changes](https://github.com/AntelopeJS/dms/compare/v0.5.4...v0.5.5)
+
+### 🩹 Fixes
+
+- **layout:** Hold the in-flight modules listing fetch on the DMS app ([#121](https://github.com/AntelopeJS/dms/pull/121))
+
+### ❤️ Contributors
+
+- Alessandro Aloisio
+
 ## v0.5.4
 
 [compare changes](https://github.com/AntelopeJS/dms/compare/v0.5.3...v0.5.4)

package/frontend-vue/layers/dms-layout/app/composables/page/useModulesListing.ts

@@ -6,6 +6,7 @@ type ModulesListingEntry = ModuleInfo & {
 const STATE_KEY_MODULES = "dms-modulesListing";
 const STATE_KEY_LOADING = "dms-modulesListingLoading";
 const STATE_KEY_ERROR = "dms-modulesListingError";
+const IN_FLIGHT_MODULES_LISTING_KEY = "__dmsInFlightModulesListing";
 const ENDPOINT_MODULES_LISTING = "/dms/modules-listing";
 const ERROR_FORBIDDEN_MESSAGE = "Forbidden: only owners can list modules";
 const ERROR_UNKNOWN_MESSAGE = "Unknown error loading modules listing";
@@ -26,8 +27,6 @@ function extractErrorMessage(error: unknown): string {
   return ERROR_UNKNOWN_MESSAGE;
 }
 
-let inFlightLoadingPromise: Promise<void> | null = null;
-
 export const useModulesListing = () => {
   const modules = useDmsState<ModulesListingEntry[] | undefined>(
     STATE_KEY_MODULES,
@@ -36,6 +35,21 @@ export const useModulesListing = () => {
   const isLoading = useDmsState<boolean>(STATE_KEY_LOADING, () => false);
   const loadingError = useDmsState<string | null>(STATE_KEY_ERROR, () => null);
 
+  // Held on the DMS app, like the in-flight fetches of useSiteLayout: every
+  // caller writes the same listing state, so they share one fetch. Not module
+  // scope, which the server shares across the requests it renders at once: a
+  // second render would wait on the first one's fetch, whose answer lands in
+  // the first request's state, and render an empty listing.
+  const dmsApp = useDmsApp() as unknown as Record<PropertyKey, unknown>;
+  const inFlightLoadingPromise = {
+    get value(): Promise<void> | null {
+      return (dmsApp[IN_FLIGHT_MODULES_LISTING_KEY] as Promise<void>) ?? null;
+    },
+    set value(promise: Promise<void> | null) {
+      dmsApp[IN_FLIGHT_MODULES_LISTING_KEY] = promise;
+    },
+  };
+
   function fetchModulesListing(): Promise<void> {
     const { $authFetch } = useAuthFetch();
     isLoading.value = true;
@@ -51,16 +65,16 @@ export const useModulesListing = () => {
       })
       .finally(() => {
         isLoading.value = false;
-        inFlightLoadingPromise = null;
+        inFlightLoadingPromise.value = null;
       });
 
-    inFlightLoadingPromise = promise;
+    inFlightLoadingPromise.value = promise;
     return promise;
   }
 
   async function loadModulesListing(): Promise<void> {
-    if (inFlightLoadingPromise) {
-      await inFlightLoadingPromise;
+    if (inFlightLoadingPromise.value) {
+      await inFlightLoadingPromise.value;
       return;
     }
     if (modules.value !== undefined) {
@@ -70,8 +84,8 @@ export const useModulesListing = () => {
   }
 
   async function refresh(): Promise<void> {
-    if (inFlightLoadingPromise) {
-      await inFlightLoadingPromise;
+    if (inFlightLoadingPromise.value) {
+      await inFlightLoadingPromise.value;
     }
     modules.value = undefined;
     loadingError.value = null;

package/frontend-vue/tests/modules-listing-per-request.test.ts

@@ -0,0 +1,104 @@
+/**
+ * The modules listing as a server runs it: every request it renders has its
+ * own DMS app and its own state, and two renders of the modules page can be in
+ * flight at once. Each one must fetch and render its own listing.
+ */
+import { ref, type Ref } from "vue";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { useModulesListing } from "../layers/dms-layout/app/composables/page/useModulesListing";
+
+interface Render {
+  app: Record<PropertyKey, unknown>;
+  state: Map<string, Ref>;
+  authFetch: ReturnType<typeof vi.fn>;
+}
+
+const ordersModule = {
+  id: "orders",
+  title: "Orders",
+  description: "",
+  icon: "i-lucide-package",
+  hasAccess: true,
+  landingSlug: "/modules/orders/list",
+};
+const billingModule = {
+  id: "billing",
+  title: "Billing",
+  description: "",
+  icon: "i-lucide-receipt",
+  hasAccess: true,
+  landingSlug: "/modules/billing/invoices",
+};
+
+let current: Render;
+
+function createRender(): Render {
+  return { app: {}, state: new Map(), authFetch: vi.fn() };
+}
+
+// What the renderer resolves from the component being set up: the app and
+// the state of the request that component belongs to.
+function inRender<T>(render: Render, callback: () => T): T {
+  current = render;
+  return callback();
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((settle) => {
+    resolve = settle;
+  });
+  return { promise, resolve };
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useDmsApp", () => current.app);
+  vi.stubGlobal("useDmsState", (key: string, initial: () => unknown) => {
+    if (!current.state.has(key)) current.state.set(key, ref(initial()));
+    return current.state.get(key);
+  });
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: current.authFetch }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+it("fetches the listing of a render that starts while another render's fetch is in flight", async () => {
+  const first = createRender();
+  const second = createRender();
+  const firstResponse = deferred<unknown[]>();
+  first.authFetch.mockReturnValueOnce(firstResponse.promise);
+  second.authFetch.mockResolvedValueOnce([billingModule]);
+
+  const firstListing = inRender(first, () => useModulesListing());
+  const firstLoad = inRender(first, () => firstListing.loadModulesListing());
+  const secondListing = inRender(second, () => useModulesListing());
+  const secondLoad = inRender(second, () => secondListing.loadModulesListing());
+  firstResponse.resolve([ordersModule]);
+  await Promise.all([firstLoad, secondLoad]);
+
+  expect(secondListing.modules.value).toEqual([billingModule]);
+  expect(second.authFetch).toHaveBeenCalledOnce();
+  expect(firstListing.modules.value).toEqual([ordersModule]);
+});
+
+it("still shares one fetch between the callers of one render", async () => {
+  const render = createRender();
+  const response = deferred<unknown[]>();
+  render.authFetch.mockReturnValueOnce(response.promise);
+
+  const [page, widget] = inRender(render, () => [
+    useModulesListing(),
+    useModulesListing(),
+  ]);
+  const loads = inRender(render, () => [
+    page.loadModulesListing(),
+    widget.loadModulesListing(),
+  ]);
+  response.resolve([ordersModule]);
+  await Promise.all(loads);
+
+  expect(render.authFetch).toHaveBeenCalledOnce();
+  expect(widget.modules.value).toEqual([ordersModule]);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"