more updates

Author: emily-shen

src/content/changelog/browser-rendering/2025-04-04-playwright-beta.mdx

@@ -13,39 +13,38 @@ We're excited to share that you can now use Playwright's browser automation [cap
 Below is an example of how to use Playwright with Browser Rendering to test a TODO application using assertions:
 
 ```ts title="Assertion example"
-import type { Fetcher } from '@cloudflare/workers-types';
-import { launch } from '@cloudflare/playwright';
-import { expect } from '@cloudflare/playwright/test';
+import { launch } from "@cloudflare/playwright";
+import { expect } from "@cloudflare/playwright/test";
 
 interface Env {
-  MYBROWSER: Fetcher;
+	MYBROWSER: Fetcher;
 }
 
 export default {
-  async fetch(request: Request, env: Env) {
-
-    const browser = await launch(env.MYBROWSER);
-    const page = await browser.newPage();
-
-    await page.goto('https://demo.playwright.dev/todomvc');
-
-    const TODO_ITEMS = todos.length > 0 ? todos : [
-        'buy some cheese',
-        'feed the cat',
-        'book a doctors appointment'
-    ];
-
-    const newTodo = page.getByPlaceholder('What needs to be done?');
-    for (const item of TODO_ITEMS) {
-        await newTodo.fill(item);
-        await newTodo.press('Enter');
-    }
-
-    await expect(page.getByTestId('todo-title')).toHaveCount(TODO_ITEMS.length);
-
-    await Promise.all(TODO_ITEMS.map(
-        (value, index) => expect(page.getByTestId('todo-title').nth(index)).toHaveText(value)
-    ));
+	async fetch(request: Request, env: Env) {
+		const browser = await launch(env.MYBROWSER);
+		const page = await browser.newPage();
+
+		await page.goto("https://demo.playwright.dev/todomvc");
+
+		const TODO_ITEMS =
+			todos.length > 0
+				? todos
+				: ["buy some cheese", "feed the cat", "book a doctors appointment"];
+
+		const newTodo = page.getByPlaceholder("What needs to be done?");
+		for (const item of TODO_ITEMS) {
+			await newTodo.fill(item);
+			await newTodo.press("Enter");
+		}
+
+		await expect(page.getByTestId("todo-title")).toHaveCount(TODO_ITEMS.length);
+
+		await Promise.all(
+			TODO_ITEMS.map((value, index) =>
+				expect(page.getByTestId("todo-title").nth(index)).toHaveText(value),
+			),
+		);
 	},
 };
 ```

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

@@ -25,6 +25,8 @@ binding = "AI"
 
 This configuration sets up the AI binding accessible in your Worker code as `env.AI`.
 
+<Render file="wrangler-typegen" />
+
 ## 2. Basic Usage with Workers AI + Gateway
 
 To perform an inference task using Workers AI and an AI Gateway, you can use the following code:
@@ -78,7 +80,7 @@ gateway.patchLog("my-log-id", {
 
 ### 3.2. `getLog`: Read Log Details
 
-The `getLog` method retrieves details of a specific log ID. It returns an object of type `Promise<AiGatewayLog>`. If this type is missing, ensure you have run [`wrangler types`](/workers/languages/typescript/#generate-types)
+The `getLog` method retrieves details of a specific log ID. It returns an object of type `Promise<AiGatewayLog>`. If this type is missing, ensure you have run [`wrangler types`](/workers/languages/typescript/#generate-types).
 
 ```typescript
 const log = await gateway.getLog("my-log-id");

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

@@ -42,6 +42,8 @@ binding = "MYBROWSER"
 
 </WranglerConfig>
 
+<Render file="wrangler-typegen" />
+
 Install the npm package:
 
 ```bash
@@ -55,13 +57,8 @@ Let's look at some examples of how to use Playwright:
 Using browser automation to take screenshots of web pages is a common use case. This script tells the browser to navigate to https://demo.playwright.dev/todomvc, create some items, take a screenshot of the page, and return the image in the response.
 
 ```ts
-import type { Fetcher } from '@cloudflare/workers-types';
 import { launch } from '@cloudflare/playwright';
 
-interface Env {
-  MYBROWSER: Fetcher;
-}
-
 export default {
   async fetch(request: Request, env: Env) {
 
@@ -103,14 +100,9 @@ A Playwright trace is a detailed log of your workflow execution that captures in
 Here's an example of a worker generating a trace file:
 
 ```ts
-import type { Fetcher } from '@cloudflare/workers-types';
 import { launch, fs } from "@cloudflare/playwright";
 import fs from '@cloudflare/playwright/fs';
 
-interface Env {
-  MYBROWSER: Fetcher;
-}
-
 export default {
   async fetch(request: Request, env: Env) {
     const { searchParams } = new URL(request.url);
@@ -172,14 +164,9 @@ export default {
 One of the most common use cases for using Playwright is software testing. Playwright includes test assertion features in its APIs; refer to [Assertions](https://playwright.dev/docs/test-assertions) in the Playwright documentation for details. Here's an example of a Worker doing `expect()` test assertions of the [todomvc](https://demo.playwright.dev/todomvc) demo page:
 
 ```ts
-import type { Fetcher } from '@cloudflare/workers-types';
 import { launch } from '@cloudflare/playwright';
 import { expect } from '@cloudflare/playwright/test';
 
-interface Env {
-  MYBROWSER: Fetcher;
-}
-
 export default {
   async fetch(request: Request, env: Env) {
 

src/content/docs/d1/worker-api/index.mdx

@@ -18,7 +18,7 @@ Refer to the relevant sections for the API documentation.
 
 ## TypeScript support
 
-D1 Worker Bindings API is fully-typed via the types generated by running [`wrangler types`](/workers/languages/typescript/#typescript) package, and also supports [generic types](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-types) as part of its TypeScript API. A generic type allows you to provide an optional `type parameter` so that a function understands the type of the data it is handling.
+D1 Worker Bindings API is fully-typed via the runtime types generated by running [`wrangler types`](/workers/languages/typescript/#typescript) package, and also supports [generic types](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-types) as part of its TypeScript API. A generic type allows you to provide an optional `type parameter` so that a function understands the type of the data it is handling.
 
 When using the query statement methods [`D1PreparedStatement::run`](/d1/worker-api/prepared-statements/#run), [`D1PreparedStatement::raw`](/d1/worker-api/prepared-statements/#raw) and [`D1PreparedStatement::first`](/d1/worker-api/prepared-statements/#first), you can provide a type representing each database row. D1's API will [return the result object](/d1/worker-api/return-object/#d1result) with the correct type.
 

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

@@ -218,6 +218,4 @@ Refer to the [bindings documentation](/workers/wrangler/configuration/#vectorize
 
 ## TypeScript Types
 
-New Workers projects created via `npm create cloudflare@latest` automatically include the relevant TypeScript types for Vectorize.
-
-If you have an older project, or a non-Workers projects looking to use Vectorize's [REST API](https://developers.cloudflare.com/api/resources/vectorize/subresources/indexes/methods/list/) in a TypeScript project, you should ensure you have a compatibility date later than `2023-09-22` and that you have generated types by running [`wrangler types`](/workers/languages/typescript/#generate-types).  
+<Render file="wrangler-typegen" />

src/content/docs/workers/testing/vitest-integration/migration-guides/migrate-from-miniflare-2.mdx

@@ -64,7 +64,7 @@ If you are using TypeScript, update your `tsconfig.json` to include the correct
     "compilerOptions": {
       ...,
       "types": [
-        "@cloudflare/workers-types/experimental"
+				...
 -       "vitest-environment-miniflare/globals"
 +       "@cloudflare/vitest-pool-workers"
       ]

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

@@ -103,16 +103,37 @@ This tutorial, however, will show you how to go a step further and add an API Wo
 
 ## Add an API Worker
 
+### Add to your Worker configuration
+
+<WranglerConfig>
+
+```toml
+name = "cloudflare-vite-tutorial"
+compatibility_date = "2025-04-03"
+assets = { not_found_handling = "single-page-application" }
+main = "./worker/index.ts"
+```
+
+</WranglerConfig>
+
+The `main` field specifies the entry file for your Worker code.
+
 ### Configure TypeScript for your Worker code
 
-<PackageManagers type="add" pkg="@cloudflare/workers-types" dev />
+<Render file="wrangler-typegen" />
+
+Then create a `tsconfig.worker.json` file in the root of your project with the following content:
 
 ```jsonc title="tsconfig.worker.json"
 {
 	"extends": "./tsconfig.node.json",
 	"compilerOptions": {
 		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
-		"types": ["@cloudflare/workers-types/2023-07-01", "vite/client"],
+		"types": [
+			// output of `wrangler types`
+			"./worker-configuration.d.ts",
+			"vite/client",
+		],
 	},
 	"include": ["worker"],
 }
@@ -129,28 +150,9 @@ This tutorial, however, will show you how to go a step further and add an API Wo
 }
 ```
 
-### Add to your Worker configuration
-
-<WranglerConfig>
-
-```toml
-name = "cloudflare-vite-tutorial"
-compatibility_date = "2025-04-03"
-assets = { not_found_handling = "single-page-application" }
-main = "./worker/index.ts"
-```
-
-</WranglerConfig>
-
-The `main` field specifies the entry file for your Worker code.
-
 ### Add your API Worker
 
 ```ts title="worker/index.ts"
-interface Env {
-	ASSETS: Fetcher;
-}
-
 export default {
 	fetch(request, env) {
 		const url = new URL(request.url);

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

@@ -212,17 +212,19 @@ script_name = "billing-worker"
 
 </WranglerConfig>
 
+<Render file="wrangler-typegen" />
+
 ## Workflow
 
 :::note
 
-Ensure you have a compatibility date `2024-10-22` or later installed when binding to Workflows from within a Workers project. If you are using TypeScript, ensure you have generated types by running [`wrangler types`](/workers/languages/typescript/#generate-types).
+Ensure you have a compatibility date `2024-10-22` or later installed when binding to Workflows from within a Workers project.
 
 :::
 
 The `Workflow` type provides methods that allow you to create, inspect the status, and manage running Workflow instances from within a Worker script.
 
-```ts
+```ts title="./worker-configuration.d.ts"
 interface Env {
   // The 'MY_WORKFLOW' variable should match the "binding" value set in the Wrangler config file
   MY_WORKFLOW: Workflow;

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

@@ -219,4 +219,4 @@ name = "SEND_EMAIL"
 
 </WranglerConfig>
 
-Also ensure you have generated types by running [`wrangler types`](/workers/languages/typescript/#generate-types).
+<Render file="wrangler-typegen" />

src/content/partials/workers/wrangler-typegen.mdx

@@ -0,0 +1 @@
+If you're using TypeScript, run [`wrangler types`](/workers/wrangler/commands/#types) whenever you modify your Wrangler configuration file. This generates types for the `env` object based on your bindings, as well as [runtime types](/workers/languages/typescript/).