@alneas/appkit-react 0.2.0 → 0.3.0

package/dist/consumer-ai/package-context.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "name": "@alneas/appkit-react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "exports": {
     ".": {
       "import": {
@@ -353,27 +353,27 @@
   "dependencies": {
     "@alneas/appkit-core": "0.2.0",
     "@base-ui/react": "^1.9.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.9.2",
-    "@tanstack/react-query": "5.104.4",
+    "@dnd-kit/collision": "0.5.1",
+    "@dnd-kit/dom": "0.5.1",
+    "@dnd-kit/react": "0.5.1",
+    "@hookform/resolvers": "^6.0.0",
+    "@tanstack/react-query": "5.104.5",
     "@tanstack/react-table": "9.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk-base": "^1.0.0",
     "date-fns": "^4.4.0",
     "input-otp": "^1.5.0",
-    "lucide-react": "^1.59.0",
+    "lucide-react": "^1.61.0",
     "react-day-picker": "^10.0.2",
     "react-hook-form": "^7.90.0",
-    "react-resizable-panels": "^4.14.6",
+    "react-resizable-panels": "^4.14.8",
     "tailwind-merge": "^3.7.0",
     "vaul-base": "^1.0.0",
-    "zustand": "^5.0.15",
+    "zustand": "^5.0.16",
     "tw-animate-css": "^1.4.0",
     "zod": "^4.2.1",
-    "@tanstack/query-core": "5.104.4",
+    "@tanstack/query-core": "5.104.5",
     "@tanstack/table-core": "9.3.1"
   },
   "peers": {

package/dist/mockServiceWorker.js

@@ -7,10 +7,15 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.15.0'
-const INTEGRITY_CHECKSUM = '03cb67ac84128e63d7cd722a6e5b7f1e'
+const PACKAGE_VERSION = '3.0.3'
+const INTEGRITY_CHECKSUM = '5cd5cf8b54c3a90f82960cedcd637772'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+
 const activeClientIds = new Set()
+/**
+ * @type {Map<string, Set<Promise<Response>>>}
+ */
+const pendingRequests = new Map()
 
 addEventListener('install', function () {
   self.skipWaiting()
@@ -20,82 +25,101 @@ addEventListener('activate', function (event) {
   event.waitUntil(self.clients.claim())
 })
 
-addEventListener('message', async function (event) {
+addEventListener('message', function (event) {
   const clientId = Reflect.get(event.source || {}, 'id')
 
   if (!clientId || !self.clients) {
     return
   }
 
-  const client = await self.clients.get(clientId)
-
-  if (!client) {
-    return
-  }
-
-  const allClients = await self.clients.matchAll({
-    type: 'window',
-  })
-
-  switch (event.data) {
-    case 'KEEPALIVE_REQUEST': {
-      sendToClient(client, {
-        type: 'KEEPALIVE_RESPONSE',
-      })
-      break
-    }
-
-    case 'INTEGRITY_CHECK_REQUEST': {
-      sendToClient(client, {
-        type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: {
-          packageVersion: PACKAGE_VERSION,
-          checksum: INTEGRITY_CHECKSUM,
-        },
-      })
-      break
-    }
-
-    case 'MOCK_ACTIVATE': {
-      activeClientIds.add(clientId)
-
-      sendToClient(client, {
-        type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
-      })
-      break
-    }
-
-    case 'CLIENT_CLOSED': {
-      activeClientIds.delete(clientId)
+  event.waitUntil(
+    (async () => {
+      if (event.data === 'CLIENT_CLOSE') {
+        const allClients = await self.clients.matchAll({
+          type: 'window',
+        })
+
+        activeClientIds.delete(clientId)
+
+        // Await any pending requests from the closing client.
+        // This makes sure that those requests are handled and not passthrough.
+        const pending = pendingRequests.get(clientId)
+        if (pending != null && pending.size > 0) {
+          await Promise.allSettled(pending)
+        }
+        pendingRequests.delete(clientId)
+
+        const remainingClients = allClients.filter((client) => {
+          return client.id !== clientId
+        })
+
+        // Unregister itself when there are no more clients
+        if (remainingClients.length === 0) {
+          await self.registration.unregister()
+        }
+
+        const client = await self.clients.get(clientId)
+
+        if (client != null) {
+          await sendToClient(client, {
+            type: 'CLIENT_CLOSED',
+          })
+        }
+
+        return
+      }
 
-      const remainingClients = allClients.filter((client) => {
-        return client.id !== clientId
-      })
+      /**
+       * @note Check for the client AFTER handling "CLIENT_CLOSE".
+       * This prevents early return on "!client" in case the page has reloaded
+       * and disassociated itself from the worker. This ensures self-unregistration
+       * still fires for those pages.
+       */
+      const client = await self.clients.get(clientId)
 
-      // Unregister itself when there are no more clients
-      if (remainingClients.length === 0) {
-        self.registration.unregister()
+      if (!client) {
+        return
       }
 
-      break
-    }
-  }
+      switch (event.data) {
+        case 'KEEPALIVE_REQUEST': {
+          await sendToClient(client, {
+            type: 'KEEPALIVE_RESPONSE',
+          })
+          break
+        }
+
+        case 'INTEGRITY_CHECK_REQUEST': {
+          await sendToClient(client, {
+            type: 'INTEGRITY_CHECK_RESPONSE',
+            payload: {
+              packageVersion: PACKAGE_VERSION,
+              checksum: INTEGRITY_CHECKSUM,
+            },
+          })
+          break
+        }
+
+        case 'MOCK_ACTIVATE': {
+          activeClientIds.add(clientId)
+
+          await sendToClient(client, {
+            type: 'MOCKING_ENABLED',
+            payload: {
+              client: {
+                id: client.id,
+                frameType: client.frameType,
+              },
+            },
+          })
+          break
+        }
+      }
+    })(),
+  )
 })
 
 addEventListener('fetch', function (event) {
-  const requestInterceptedAt = Date.now()
-
-  // Bypass navigation requests.
-  if (event.request.mode === 'navigate') {
-    return
-  }
-
   // Opening the DevTools triggers the "only-if-cached" request
   // that cannot be handled by the worker. Bypass such requests.
   if (
@@ -113,23 +137,54 @@ addEventListener('fetch', function (event) {
   }
 
   const requestId = crypto.randomUUID()
-  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+  event.respondWith(handleRequest(event, requestId))
 })
 
 /**
  * @param {FetchEvent} event
  * @param {string} requestId
- * @param {number} requestInterceptedAt
  */
-async function handleRequest(event, requestId, requestInterceptedAt) {
+async function handleRequest(event, requestId) {
   const client = await resolveMainClient(event)
   const requestCloneForEvents = event.request.clone()
-  const response = await getResponse(
-    event,
-    client,
-    requestId,
-    requestInterceptedAt,
-  )
+
+  const responsePromise = getResponse(event, client, requestId)
+
+  if (client != null) {
+    let pending = pendingRequests.get(client.id)
+
+    if (pending == null) {
+      pendingRequests.set(client.id, (pending = new Set()))
+    }
+
+    pending.add(responsePromise)
+    responsePromise
+      .finally(() => pending.delete(responsePromise))
+      .catch(() => {})
+  }
+
+  let response
+
+  try {
+    response = await responsePromise
+  } catch (error) {
+    // The request has settled without a response (e.g. a passthrough
+    // request failed with a network error). Notify the client so it
+    // can release the resources associated with this request.
+    if (client && activeClientIds.has(client.id)) {
+      sendToClient(client, {
+        type: 'REQUEST_ERROR',
+        payload: {
+          request: {
+            id: requestId,
+          },
+          error: serializeError(error),
+        },
+      })
+    }
+
+    throw error
+  }
 
   // Send back the response clone for the "response:*" life-cycle events.
   // Ensure MSW is active and ready to handle the message, otherwise
@@ -217,18 +272,32 @@ async function resolveMainClient(event) {
  * @param {FetchEvent} event
  * @param {Client | undefined} client
  * @param {string} requestId
- * @param {number} requestInterceptedAt
  * @returns {Promise<Response>}
  */
-async function getResponse(event, client, requestId, requestInterceptedAt) {
+async function getResponse(event, client, requestId) {
   // Clone the request because it might've been already used
   // (i.e. its body has been read and sent to the client).
   const requestClone = event.request.clone()
 
-  function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
+  /**
+   * @param {{ request?: { headers?: Array<[string, string]> } }} [data]
+   */
+  function passthrough(data) {
+    const headers = new Headers()
+    const requestHeaders = data?.request?.headers
+
+    if (Array.isArray(requestHeaders)) {
+      // Apply the request headers provided by the client.
+      // Those reflect any modifications made in the request handlers.
+      // Use ".append()" to support multiple headers with the same name.
+      for (const [name, value] of requestHeaders) {
+        headers.append(name, value)
+      }
+    } else {
+      for (const [name, value] of requestClone.headers) {
+        headers.append(name, value)
+      }
+    }
 
     // Remove the "accept" header value that marked this request as passthrough.
     // This prevents request alteration and also keeps it compliant with the
@@ -271,7 +340,6 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
       type: 'REQUEST',
       payload: {
         id: requestId,
-        interceptedAt: requestInterceptedAt,
         ...serializedRequest,
       },
     },
@@ -280,17 +348,35 @@ async function getResponse(event, client, requestId, requestInterceptedAt) {
 
   switch (clientMessage.type) {
     case 'MOCK_RESPONSE': {
-      return respondWithMock(clientMessage.data)
+      return respondWithMock(clientMessage.data, event)
     }
 
     case 'PASSTHROUGH': {
-      return passthrough()
+      return passthrough(clientMessage.data)
     }
   }
 
   return passthrough()
 }
 
+/**
+ * @param {unknown} error
+ * @returns {{ name: string, message: string }}
+ */
+function serializeError(error) {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message,
+    }
+  }
+
+  return {
+    name: 'Error',
+    message: String(error),
+  }
+}
+
 /**
  * @param {Client} client
  * @param {any} message
@@ -318,9 +404,10 @@ function sendToClient(client, message, transferrables = []) {
 
 /**
  * @param {Response} response
- * @returns {Response}
+ * @param {FetchEvent} event
+ * @returns {Promise<Response>}
  */
-function respondWithMock(response) {
+async function respondWithMock(response, event) {
   // Setting response status code to 0 is a no-op.
   // However, when responding with a "Response.error()", the produced Response
   // instance will have status code set to 0. Since it's not possible to create
@@ -329,7 +416,19 @@ function respondWithMock(response) {
     return Response.error()
   }
 
-  const mockedResponse = new Response(response.body, response)
+  let body = response.body
+
+  // Buffer the streamed mocked response body for navigation requests.
+  // The stream is transferred from the client that is being navigated
+  // away from. Once the navigation commits, that client gets destroyed
+  // and the stream will never complete, resulting in an empty document.
+  // Buffering here keeps "event.respondWith()" pending (the navigation
+  // cannot commit) until the entire body arrives from the client.
+  if (event.request.mode === 'navigate' && body instanceof ReadableStream) {
+    body = await new Response(body).arrayBuffer()
+  }
+
+  const mockedResponse = new Response(body, response)
 
   Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
     value: true,