R2-3381: add conditional/ranges to r2 workers example (#24323)

Co-authored-by: helloimalastair <[email protected]>

Author: helloimalastair

src/content/docs/r2/api/workers/workers-api-usage.mdx

@@ -89,46 +89,111 @@ Use `wrangler dev --remote` if you want R2 operations made during development to
 
 An R2 bucket is able to READ, LIST, WRITE, and DELETE objects. You can see an example of all operations below using the Module Worker syntax. Add the following snippet into your project's `index.js` file:
 
+import { TabItem, Tabs } from "~/components";
+
+<Tabs> <TabItem label="TypeScript" icon="seti:typescript">
+```ts
+import { WorkerEntrypoint } from "cloudflare:workers";
+
+export default class extends WorkerEntrypoint<Env> {
+  async fetch(request: Request) {
+    const url = new URL(request.url);
+    const key = url.pathname.slice(1);
+
+    switch (request.method) {
+      case "PUT": {
+        await this.env.R2.put(key, request.body, {
+          onlyIf: request.headers,
+          httpMetadata: request.headers,
+        });
+        return new Response(`Put ${key} successfully!`);
+      }
+      case "GET": {
+        const object = await this.env.R2.get(key, {
+          onlyIf: request.headers,
+          range: request.headers,
+        });
+
+        if (object === null) {
+          return new Response("Object Not Found", { status: 404 });
+        }
+
+        const headers = new Headers();
+        object.writeHttpMetadata(headers);
+        headers.set("etag", object.httpEtag);
+
+        // When no body is present, preconditions have failed
+        return new Response("body" in object ? object.body : undefined, {
+          status: "body" in object ? 200 : 412,
+          headers,
+        });
+      }
+      case "DELETE": {
+        await this.env.R2.delete(key);
+        return new Response("Deleted!");
+      }
+      default:
+        return new Response("Method Not Allowed", {
+          status: 405,
+          headers: {
+            Allow: "PUT, GET, DELETE",
+          },
+        });
+    }
+  }
+};
+```
+</TabItem> <TabItem label="JavaScript" icon="seti:javascript">
 ```js
 export default {
-	async fetch(request, env) {
-		const url = new URL(request.url);
-		const key = url.pathname.slice(1);
-
-		switch (request.method) {
-			case "PUT":
-				await env.MY_BUCKET.put(key, request.body);
-				return new Response(`Put ${key} successfully!`);
-			case "GET":
-				const object = await env.MY_BUCKET.get(key);
-
-				if (object === null) {
-					return new Response("Object Not Found", { status: 404 });
-				}
-
-				const headers = new Headers();
-				object.writeHttpMetadata(headers);
-				headers.set("etag", object.httpEtag);
-
-				return new Response(object.body, {
-					headers,
-				});
-			case "DELETE":
-				await env.MY_BUCKET.delete(key);
-				return new Response("Deleted!");
-
-			default:
-				return new Response("Method Not Allowed", {
-					status: 405,
-					headers: {
-						Allow: "PUT, GET, DELETE",
-					},
-				});
-		}
-	},
-};
+  async fetch(request, env) {
+    const url = new URL(request.url);
+    const key = url.pathname.slice(1);
+
+    switch (request.method) {
+      case "PUT": {
+        await this.env.R2.put(key, request.body, {
+          onlyIf: request.headers,
+          httpMetadata: request.headers,
+        });
+        return new Response(`Put ${key} successfully!`);
+      }
+      case "GET": {
+        const object = await this.env.R2.get(key, {
+          onlyIf: request.headers,
+          range: request.headers,
+        });
+
+        if (object === null) {
+          return new Response("Object Not Found", { status: 404 });
+        }
+
+        const headers = new Headers();
+        object.writeHttpMetadata(headers);
+        headers.set("etag", object.httpEtag);
+
+        // When no body is present, preconditions have failed
+        return new Response("body" in object ? object.body : undefined, {
+          status: "body" in object ? 200 : 412,
+          headers,
+        });
+      }
+      case "DELETE": {
+        await this.env.R2.delete(key);
+        return new Response("Deleted!");
+      }
+      default:
+        return new Response("Method Not Allowed", {
+          status: 405,
+          headers: {
+            Allow: "PUT, GET, DELETE",
+          },
+        });
+    }
+  }
+}
 ```
-
+</TabItem> </Tabs>
 <Render file="request-dot-clone-warning" product="workers" />
 
 ## 5. Bucket access and privacy