Improve example and include it in the documentation of Request

Author: npaun

src/content/changelog/workers/2025-03-14-handle-request-cancellation.mdx

@@ -6,38 +6,12 @@ products:
 date: 2025-03-14T01:00:00Z
 ---
 
-import { Render, TypeScriptExample } from "~/components";
+import { Render } from "~/components";
 
 In Cloudflare Workers, you can now attach an event listener to [`Request`](/workers/runtime-apis/request/) objects, using the [`signal` property](https://developer.mozilla.org/en-US/docs/Web/API/Request/signal), and perform tasks when the request to your Worker is canceled by the client.
 
 This allows you to perform cleanup tasks or write to logs before your Worker's invocation ends. For example, if you run the Worker below, and then abort the request from the client, a log will be written:
 
-<TypeScriptExample filename="index.ts">
-```ts
-import { WorkerEntrypoint } from 'cloudflare:workers'; 
-
-class Example extends WorkerEntrypoint {
-  async fetch(req: Request): Response {
-    req.signal.onabort = () => {
-      console.log('The request was aborted!');
-    };
-
-    const { readable, writable } = new IdentityTransformStream();
-    this.ctx.waitUntil(this.sendPing(writable));
-    return new Response(readable);
-  }
-
-  async sendPing(writable: WritableStream): void {
-     const writer = writable.getWriter();
-     const enc = new TextEncoder();
-
-     for (;;) {
-       // Send 'ping' every second to keep the connection alive
-       await writer.write(enc.encode('ping')); 
-       scheduler.wait(1000);
-     }
-  }
-}
-</TypeScriptExample>
+<Render file="request-signal-example" product="workers" />
 
 For more information see the [`Request` documentation](/workers/runtime-apis/request).

src/content/compatibility-flags/request-signal-passthrough.md

@@ -6,8 +6,9 @@ _build:
 
 name: "Request.signal is passed through to subrequests"
 sort_date: "2025-03-14"
-enable_date: "request_signal_passthrough"
-disable_date: "no_request_signal_passthrough"
+enable_date: "2025-04-14"
+enable_flag: "request_signal_passthrough"
+disable_flag: "no_request_signal_passthrough"
 ---
 
 When this flag is enabled, the `signal` property of the incoming request to a Worker follows Web-standard behaviour, and will be passed through when the request is cloned, or a new request is created from it. As a result, if the incoming request is canceled by the client, all outgoing subrequests will also be canceled, unless the `signal` property is explicitly modified or cleared.

src/content/docs/workers/runtime-apis/request.mdx

@@ -6,7 +6,7 @@ description: Interface that represents an HTTP request.
 
 ---
 
-import { Type, MetaInfo } from "~/components";
+import { Type, MetaInfo, Render } from "~/components";
 
 The [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request/Request) interface represents an HTTP request and is part of the [Fetch API](/workers/runtime-apis/fetch/).
 
@@ -197,7 +197,9 @@ All properties of an incoming `Request` object (the request you receive from the
   * The redirect mode to use: `follow`, `error`, or `manual`. The `fetch` method will automatically follow redirects if the redirect mode is set to `follow`. If set to `manual`, the `3xx` redirect response will be returned to the caller as-is. The default for a new `Request` object is `follow`. Note, however, that the incoming `Request` property of a `FetchEvent` will have redirect mode `manual`.
 
 * `signal` AbortSignal read-only
-  * The `AbortSignal` corresponding to this request. By attaching an event listener to the signal, a Worker can take action when the request made to it is canceled by the client. For example, the Worker may write log entries or perform cleanup tasks before being aborted.
+  * The `AbortSignal` corresponding to this request. By attaching an event listener to the signal, you can perform cleanup tasks or write to logs before your Worker's invocation ends. 
+    For example, if you run the Worker below, and then abort the request from the client, a log will be written: 
+    <Render file="request-signal-example" />
 
 * `url` string read-only
 

src/content/partials/workers/request-signal-example.mdx

@@ -0,0 +1,34 @@
+---
+{}
+
+---
+
+import { TypeScriptExample } from "~/components";
+
+<TypeScriptExample filename="index.ts">
+```ts
+export default {
+  async fetch(request, env, ctx): Promise<Response> {
+    request.signal.onabort = () => {
+      console.log('The request was aborted!');
+    };
+    
+    const { readable, writable } = new IdentityTransformStream();
+    ctx.waitUntil(sendPing(writable));
+    return new Response(readable);
+  },
+} satisfies ExportedHandler<Env>;
+
+
+async function sendPing(writable: WritableStream): Promise<void> {
+  const writer = writable.getWriter();
+  const enc = new TextEncoder();
+
+  for (;;) {
+    // Send 'ping' every second to keep the connection alive
+    await writer.write(enc.encode('ping\r\n')); 
+    await scheduler.wait(1000);
+  }
+ }
+```
+</TypeScriptExample>