Add "abort request" experiment client-side code

Author: LSViana

pages/experiments/index.vue

@@ -5,7 +5,7 @@
         <p>{{ group.target }}</p>
         <ul class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
           <li v-for="experiment in group.experiments" :key="experiment.route">
-            <WlExperimentCard :experiment="experiment" />
+            <WlExperimentCard :experiment="experiment"/>
           </li>
         </ul>
       </div>
@@ -27,44 +27,87 @@ const groups: ExperimentGroup[] = [
   {
     target: 'Forms & Input',
     experiments: [
-      { name: 'Button', route: '/experiments/forms-input/button' },
-      { name: 'Progress', route: '/experiments/forms-input/progress' },
-      { name: 'Input', route: '/experiments/forms-input/input' },
-      { name: 'Select', route: '/experiments/forms-input/select' },
-      { name: 'Badge', route: '/experiments/forms-input/badge' }
+      {
+        name: 'Button',
+        route: '/experiments/forms-input/button'
+      },
+      {
+        name: 'Progress',
+        route: '/experiments/forms-input/progress'
+      },
+      {
+        name: 'Input',
+        route: '/experiments/forms-input/input'
+      },
+      {
+        name: 'Select',
+        route: '/experiments/forms-input/select'
+      },
+      {
+        name: 'Badge',
+        route: '/experiments/forms-input/badge'
+      }
     ]
   },
   {
     target: 'Micro-interactions',
     experiments: [
-      { name: 'Scroll', route: '/experiments/micro-interactions/scroll' },
-      { name: 'SVG', route: '/experiments/micro-interactions/svg' },
-      { name: 'Drag & Drop', route: '/experiments/micro-interactions/drag-n-drop' },
-      { name: 'GSAP', route: '/experiments/micro-interactions/gsap' }
+      {
+        name: 'Scroll',
+        route: '/experiments/micro-interactions/scroll'
+      },
+      {
+        name: 'SVG',
+        route: '/experiments/micro-interactions/svg'
+      },
+      {
+        name: 'Drag & Drop',
+        route: '/experiments/micro-interactions/drag-n-drop'
+      },
+      {
+        name: 'GSAP',
+        route: '/experiments/micro-interactions/gsap'
+      },
+      {
+        name: 'Abort Request',
+        route: '/experiments/micro-interactions/abort-request'
+      }
     ]
   },
   {
     target: 'Navigation',
     experiments: [
-      { name: 'Transitions', route: '/experiments/navigation/transitions' }
+      {
+        name: 'Transitions',
+        route: '/experiments/navigation/transitions'
+      }
     ]
   },
   {
     target: 'Authentication',
     experiments: [
-      { name: 'Third-party login', route: '/experiments/authentication/third-party-login' }
+      {
+        name: 'Third-party login',
+        route: '/experiments/authentication/third-party-login'
+      }
     ]
   },
   {
     target: 'Real-time Communication',
     experiments: [
-      { name: 'Supabase', route: '/experiments/rtc/supabase' }
+      {
+        name: 'Supabase',
+        route: '/experiments/rtc/supabase'
+      }
     ]
   },
   {
     target: 'Threading',
     experiments: [
-      { name: 'Web Workers', route: '/experiments/threading/web-workers' }
+      {
+        name: 'Web Workers',
+        route: '/experiments/threading/web-workers'
+      }
     ]
   }
 ]

pages/experiments/micro-interactions/abort-request/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <NuxtLayout name="home">
+    <WlContainer class="flex flex-col gap-3 p-3">
+      <p>Cancel an event using an <code>AbortSignal</code> instance:</p>
+      <WlExperimentCanvas>
+        <div class="flex items-center gap-3">
+          <WlButton ref="button" variant="primary" @click="listeners.click">Click</WlButton>
+          <WlButton ref="button" variant="secondary" @click="listeners.cancel">Cancel</WlButton>
+          <p>Result: <code>{{ result }}</code></p>
+        </div>
+      </WlExperimentCanvas>
+    </WlContainer>
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
+import WlExperimentCanvas from '~/components/shared/experiments/WlExperimentCanvas.vue'
+import WlContainer from '~/components/shared/layout/WlContainer.vue'
+
+const result = ref('<empty>')
+const loading = ref(false)
+let abortController = new AbortController()
+
+class UserCancelledError extends Error {
+  constructor () {
+    super('User cancelled the request.')
+    this.name = 'UserCancelledError'
+  }
+}
+
+const listeners = {
+  async click () {
+    loading.value = true
+
+    try {
+      const response = await fetch('/api/abort-request', {
+        signal: abortController.signal
+      })
+      result.value = await response.json()
+    } catch (error) {
+      if (error instanceof UserCancelledError) {
+        result.value = '<cancelled>'
+      } else {
+        throw error
+      }
+    }
+
+    loading.value = false
+  },
+  async cancel () {
+    if (!loading.value) {
+      alert('No operation in progress.')
+
+      return
+    }
+
+    abortController.abort(new UserCancelledError())
+    loading.value = false
+
+    abortController = new AbortController()
+  }
+}
+</script>