Skip to content
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ You can create a pnpm script to run `wrangler types` automatically before other
You can type the `runtime` object using `Runtime`:

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
/// <reference path="../.astro/types.d.ts" />

type Runtime = import('@astrojs/cloudflare').Runtime<Env>;

Expand Down
1 change: 0 additions & 1 deletion src/content/docs/en/guides/integrations-guide/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ If you're using TypeScript, you can get proper typings by updating `src/env.d.ts

```ts title="src/env.d.ts"
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

type NetlifyLocals = import('@astrojs/netlify').NetlifyLocals

Expand Down
1 change: 0 additions & 1 deletion src/content/docs/en/guides/integrations-guide/vercel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -420,7 +420,6 @@ The edge middleware has access to Vercel's [`RequestContext`](https://vercel.com

```ts
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

type EdgeLocals = import('@astrojs/vercel').EdgeLocals

Expand Down
3 changes: 2 additions & 1 deletion src/content/docs/en/guides/middleware.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,8 @@ export const onRequest = (context, next) => {
To type the information inside `Astro.locals`, which gives you autocompletion inside `.astro` files and middleware code, declare a global namespace in the `env.d.ts` file:

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
/// <reference path="../.astro/types.d.ts" />

declare namespace App {
interface Locals {
user: {
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ To inherit from one of the templates, use [the `extends` setting](https://www.ty
Additionally, our templates include an `env.d.ts` file inside the `src` folder to provide [Vite's client types](https://vitejs.dev/guide/features.html#client-types) to your project:

```typescript title="env.d.ts"
/// <reference types="astro/client" />
/// <reference path="../.astro/types.d.ts" />
```

### TypeScript editor plugin
Expand Down
7 changes: 0 additions & 7 deletions src/content/docs/en/install-and-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -398,12 +398,6 @@ If you prefer not to use our automatic `create astro` CLI tool, you can set up y
}
```

Finally, create `src/env.d.ts` to let TypeScript know about ambient types available in an Astro project:
Comment thread
sarah11918 marked this conversation as resolved.

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

Read Astro's [TypeScript setup guide](/en/guides/typescript/#setup) for more information.

7. Next Steps
Expand All @@ -417,7 +411,6 @@ If you prefer not to use our automatic `create astro` CLI tool, you can set up y
- src/
- pages/
- index.astro
- env.d.ts
- astro.config.mjs
- package-lock.json or `yarn.lock`, `pnpm-lock.yaml`, etc.
- package.json
Expand Down
4 changes: 3 additions & 1 deletion src/content/docs/en/reference/cli-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ Commands
docs Open documentation in your web browser.
info List info about your current Astro setup.
preview Preview your build locally.
sync Generate content collection types.
sync Generates TypeScript types for all Astro modules.
preferences Configure user preferences.
telemetry Configure telemetry settings.

Expand Down Expand Up @@ -267,6 +267,8 @@ Running `astro dev`, `astro build` or `astro check` will run the `sync` command
Generates TypeScript types for all Astro modules. This sets up a [`src/env.d.ts` file](/en/guides/typescript/#setup) for type inferencing, and defines modules for features that rely on generated types:
- The `astro:content` module for the [Content Collections API](/en/guides/content-collections/).
- The `astro:db` module for [Astro DB](/en/guides/astro-db/).
- The `astro:env` module for [experimental Astro Env](/en/reference/configuration-reference/#experimentalenv).
Comment thread
sarah11918 marked this conversation as resolved.
- The `astro:actions` module for [experimental Astro Actions](/en/reference/configuration-reference/#experimentalactions)

## `astro add`

Expand Down
44 changes: 41 additions & 3 deletions src/content/docs/en/reference/integrations-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,15 @@ interface AstroIntegration {
addMiddleware: (middleware: AstroIntegrationMiddleware) => void;
addDevToolbarApp: (pluginEntrypoint: string) => void;
injectScript: (stage: InjectedScriptStage, content: string) => void;
injectRoute: ({ pattern: string, entrypoint: string }) => void;
injectRoute: (injectedRoute: { pattern: string, entrypoint: string }) => void;
logger: AstroIntegrationLogger;
}) => void | Promise<void>;
'astro:config:done'?: (options: { config: AstroConfig; setAdapter: (adapter: AstroAdapter) => void; logger: AstroIntegrationLogger; }) => void | Promise<void>;
'astro:config:done'?: (options: {
config: AstroConfig;
setAdapter: (adapter: AstroAdapter) => void;
injectTypes: (injectedType: { filename: string; content: string }) => URL;
logger: AstroIntegrationLogger;
}) => void | Promise<void>;
'astro:route:setup'?: (options: { route: RouteOptions; logger: AstroIntegrationLogger; }) => void | Promise<void>;
'astro:server:setup'?: (options: { server: vite.ViteDevServer; logger: AstroIntegrationLogger; }) => void | Promise<void>;
'astro:server:start'?: (options: { address: AddressInfo; logger: AstroIntegrationLogger; }) => void | Promise<void>;
Expand Down Expand Up @@ -388,7 +393,12 @@ The **`stage`** denotes how this script (the `content`) should be inserted. Some
**Why:** To retrieve the final config for use in other hooks.

```js
'astro:config:done'?: (options: { config: AstroConfig }) => void | Promise<void>;
'astro:config:done'?: (options: {
config: AstroConfig;
setAdapter: (adapter: AstroAdapter) => void;
injectTypes: (injectedType: { filename: string; content: string }) => URL;
logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### `config` option
Expand All @@ -397,6 +407,34 @@ The **`stage`** denotes how this script (the `content`) should be inserted. Some

A read-only copy of the user-supplied [Astro config](/en/reference/configuration-reference/). This is resolved _after_ other integrations have run.

#### `setAdapter` option
Comment thread
florian-lefebvre marked this conversation as resolved.

**Type:** `(adapter: AstroAdapter) => void;`

Makes the integration an adapter. Read more in the [adapter API](/en/reference/adapter-reference/).

#### `injectTypes` options

<p><Since v="4.14.0" /></p>

**Type:** `(injectedType: { filename: string; content: string }) => URL`

Allows you to inject types into your user's project by adding a new a `*.d.ts` file.

The `filename` property will be used to generate a file at `/.astro/integrations/<normalized_integration_name>/<normalized_filename>.d.ts` and must end with `".d.ts"`.

The `content` property will create the body of the file, and must be valid TypeScript.

Additionally, `injectTypes()` returns a URL to the normalized path so you can overwrite its content later on, or manipulate it in any way you want.

```js
const path = injectTypes({
filename: "types.d.ts",
content: "declare module 'virtual:integration' {}"
})
console.log(path) // URL
```

### `astro:server:setup`

**Previous hook:** [`astro:config:done`](#astroconfigdone)
Expand Down