Using TypeScriptExample component

Author: Oxyjun

src/content/docs/durable-objects/get-started.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 2
 ---
 
-import { Render, TabItem, Tabs, PackageManagers, WranglerConfig } from "~/components";
+import { Render, TabItem, Tabs, PackageManagers, WranglerConfig, TypeScriptExample } from "~/components";
 
 This guide will instruct you through:
 
@@ -72,16 +72,7 @@ If you do not use JavaScript or TypeScript, you will need a [shim](https://devel
 
 Your `MyDurableObject` class will have a constructor with two parameters. The first parameter, `ctx`, passed to the class constructor contains state specific to the Durable Object, including methods for accessing storage. The second parameter, `env`, contains any bindings you have associated with the Worker when you uploaded it.
 
-<Tabs syncKey="language"> <TabItem label="JavaScript" icon="seti:javascript">
-
-```js
-export class MyDurableObject extends DurableObject<Env> {
-	constructor(ctx, env) {}
-}
-```
-
-</TabItem> <TabItem label="TypeScript" icon="seti:typescript">
-
+<TypeScriptExample>
 ```ts
 export class MyDurableObject extends DurableObject<Env> {
 	constructor(ctx: DurableObjectState, env: Env) {
@@ -90,30 +81,13 @@ export class MyDurableObject extends DurableObject<Env> {
 	}
 }
 ```
-
-</TabItem> </Tabs>
+</TypeScriptExample>
 
 Workers communicate with a Durable Object using [remote-procedure call](/workers/runtime-apis/rpc/#_top). Public methods on a Durable Object class are exposed as [RPC methods](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/) to be called by another Worker.
 
 Your file should now look like:
 
-<Tabs syncKey="language"> <TabItem label="JavaScript" icon="seti:javascript">
-
-```js
-export class MyDurableObject extends DurableObject<Env> {
-	constructor(ctx: DurableObjectState, env: Env) {}
-
-	async sayHello():Promise<string> {
-		let result = this.ctx.storage.sql
-			.exec("SELECT 'Hello, World!' as greeting")
-			.one();
-		return result.greeting;
-	}
-}
-```
-
-</TabItem> <TabItem label="TypeScript" icon="seti:typescript">
-
+<TypeScriptExample>
 ```ts
 export class MyDurableObject extends DurableObject<Env> {
 	constructor(ctx: DurableObjectState, env: Env) {
@@ -129,8 +103,7 @@ export class MyDurableObject extends DurableObject<Env> {
 	}
 }
 ```
-
-</TabItem> </Tabs>
+</TypeScriptExample>
 
 In the code above, you have:
 
@@ -151,24 +124,7 @@ A Worker is used to [access Durable Objects](/durable-objects/best-practices/cre
 
 To communicate with a Durable Object, the Worker's fetch handler should look like the following:
 
-<Tabs syncKey="language"> <TabItem label="JavaScript" icon="seti:javascript">
-
-```js
-export default {
-	async fetch(request, env):Promise<string> {
-		const id = env.MY_DURABLE_OBJECT.idFromName(new URL(request.url).pathname);
-
-		const stub = env.MY_DURABLE_OBJECT.get(id);
-
-		const greeting = await stub.sayHello();
-
-		return new Response(greeting);
-	},
-};
-```
-
-</TabItem> <TabItem label="TypeScript" icon="seti:typescript">
-
+<TypeScriptExample>
 ```ts
 export default {
 	async fetch(request, env, ctx): Promise<Response> {
@@ -182,8 +138,7 @@ export default {
 	},
 } satisfies ExportedHandler<Env>;
 ```
-
-</TabItem> </Tabs>
+</TypeScriptExample>
 
 In the code above, you have:
 
@@ -262,6 +217,7 @@ Preview your Durable Object Worker at `<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.de
 
 Your final code should look like this:
 
+<TypeScriptExample>
 ```ts title="index.ts"
 import { DurableObject } from "cloudflare:workers";
 export class MyDurableObject extends DurableObject<Env> {
@@ -289,6 +245,7 @@ export default {
 	},
 } satisfies ExportedHandler<Env>;
 ```
+</TypeScriptExample>
 
 By finishing this tutorial, you have: