fixups

Author: emily-shen

src/content/docs/ai-gateway/integrations/worker-binding-methods.mdx

@@ -25,7 +25,7 @@ binding = "AI"
 
 This configuration sets up the AI binding accessible in your Worker code as `env.AI`.
 
-<Render file="wrangler-typegen" />
+<Render file="wrangler-typegen" product="workers" />
 
 ## 2. Basic Usage with Workers AI + Gateway
 

src/content/docs/browser-rendering/platform/playwright.mdx

@@ -42,7 +42,7 @@ binding = "MYBROWSER"
 
 </WranglerConfig>
 
-<Render file="wrangler-typegen" />
+<Render file="wrangler-typegen" product="workers" />
 
 Install the npm package:
 

src/content/docs/pages/framework-guides/deploy-a-qwik-site.mdx

@@ -68,7 +68,7 @@ The following code block shows an example of accessing a KV namespace in QwikCit
 // ...
 
 export const useGetServerTime = routeLoader$(({ platform }) => {
-  // the type `KVNamespace` comes from types generated by running `wrangler types`
+  // the type `KVNamespace` comes from runtime types generated by running `wrangler types`
   const { MY_KV } = (platform.env as { MY_KV: KVNamespace }));
 
   return {

src/content/docs/vectorize/reference/client-api.mdx

@@ -218,4 +218,4 @@ Refer to the [bindings documentation](/workers/wrangler/configuration/#vectorize
 
 ## TypeScript Types
 
-<Render file="wrangler-typegen" />
+<Render file="wrangler-typegen" product="workers" />

src/content/docs/workers/runtime-apis/rpc/typescript.mdx

@@ -8,25 +8,40 @@ head:
     content: Workers RPC — TypeScript
 description: How TypeScript types for your Worker or Durable Object's RPC
   methods are generated and exposed to clients
-
 ---
 
 The types generated by running [`wrangler types`](/workers/languages/typescript/#generate-types) provide the `Service` and `DurableObjectNamespace` types, each of which accepts a single type parameter for the server-side [`WorkerEntrypoint`](/workers/runtime-apis/bindings/service-bindings/rpc) or [`DurableObject`](/durable-objects/best-practices/create-durable-object-stubs-and-send-requests/#call-rpc-methods) types.
+We recommend extending the `Env` type generated in a separate file and providing the type parameter there, so that these are not overwritten when you run `wrangler types` again.
+
+For example, if you had a Worker with bindings to a WorkerEntrypoint called `SumService` and a Durable Object called `Counter`, your `wrangler types` output would look like this:
 
-Using higher-order types, we automatically generate client-side stub types (e.g., forcing all methods to be async).
+```ts title="worker-configuration.d.ts"
+// Generated by Wrangler by running `wrangler types --env-interface BaseEnv`
+declare namespace Cloudflare {
+	interface Env {
+		SUM_SERVICE: Fetcher;
+		COUNTER_OBJECT: DurableObjectNamespace;
+	}
+}
+interface BaseEnv extends Cloudflare.Env {}
+```
 
-For example:
+Then extend `Env` type in a separate file:
 
-```ts
-interface Env {
-  SUM_SERVICE: Service<SumService>;
-  COUNTER_OBJECT: DurableObjectNamespace<Counter>
+```ts title="env.d.ts"
+interface Env extends BaseEnv {
+	SUM_SERVICE: Service<import("../path/to/your/bound/worker").SumService>;
+	COUNTER_OBJECT: DurableObjectNamespace<import("../path/to/your/do").Counter>;
 }
+```
+
+Using higher-order types, we automatically generate client-side stub types (e.g., forcing all methods to be async). In the following example, `env.SUM_SERVICE.sum` will be typed as defined in the `SumService` WorkerEntrypoint.
 
+```ts title="src/index.ts"
 export default {
-  async fetch(req, env, ctx): Promise<Response> {
-    const result = await env.SUM_SERVICE.sum(1, 2);
-    return new Response(result.toString());
-  }
+	async fetch(req, env, ctx): Promise<Response> {
+		const result = await env.SUM_SERVICE.sum(1, 2);
+		return new Response(result.toString());
+	},
 } satisfies ExportedHandler<Env>;
 ```

src/content/docs/workers/vite-plugin/tutorial.mdx

@@ -6,7 +6,7 @@ sidebar:
 description: Create a React SPA with an API Worker using the Vite plugin
 ---
 
-import { PackageManagers, WranglerConfig } from "~/components";
+import { PackageManagers, WranglerConfig, Render } from "~/components";
 
 This tutorial takes you through the steps needed to adapt a Vite project to use the Cloudflare Vite plugin.
 Much of the content can also be applied to adapting existing Vite projects and to front-end frameworks other than React.

src/content/docs/workflows/build/workers-api.mdx

@@ -212,7 +212,7 @@ script_name = "billing-worker"
 
 </WranglerConfig>
 
-<Render file="wrangler-typegen" />
+<Render file="wrangler-typegen" product="workers" />
 
 ## Workflow
 

src/content/docs/workflows/examples/send-invoices.mdx

@@ -12,7 +12,7 @@ sidebar:
 description: Send invoice when shopping cart is checked out and paid for
 ---
 
-import { TabItem, Tabs, WranglerConfig } from "~/components";
+import { TabItem, Tabs, WranglerConfig, Render } from "~/components";
 
 In this example, we implement a Workflow for an e-commerce website that is triggered every time a shopping cart is created.
 
@@ -219,4 +219,4 @@ name = "SEND_EMAIL"
 
 </WranglerConfig>
 
-<Render file="wrangler-typegen" />
+<Render file="wrangler-typegen" product="workers" />