Skip to content

Commit

Permalink
feat: document new entrypoints (#9680)
Browse files Browse the repository at this point in the history
* feat: document new entrypoints

* consistent intro sentences

---------

Co-authored-by: Sarah Rainsberger <[email protected]>
  • Loading branch information
ematipico and sarah11918 authored Oct 15, 2024
1 parent f54349c commit e984433
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 0 deletions.
24 changes: 24 additions & 0 deletions src/content/docs/en/reference/dev-toolbar-app-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,30 @@ The path to the file that exports the dev toolbar app.
}
```

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

The function also accepts a `URL` as `entrypoint`:


```ts title="my-integration.js" "new URL("./my-app.js", import.meta.url)"
/**
* @type {() => import('astro').AstroIntegration}
*/
export default () => ({
name: "my-integration",
hooks: {
"astro:config:setup": ({ addDevToolbarApp }) => {
addDevToolbarApp({
id: "my-app",
name: "My App",
icon: "<svg>...</svg>",
entrypoint: new URL("./my-app.js", import.meta.url),
});
},
},
});
```

## Structure of a Dev Toolbar App

A Dev Toolbar App is a `.js` or `.ts` file that default exports an object using the [`defineToolbarApp()` function](#definetoolbarapp) available from the `astro/toolbar` module.
Expand Down
36 changes: 36 additions & 0 deletions src/content/docs/en/reference/integrations-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,10 @@ A callback function to add a component framework renderer (i.e. React, Vue, Svel
- `clientEntrypoint` - path to a file that executes on the client whenever your component is used. This is mainly for rendering or hydrating your component with JS.
- `serverEntrypoint` - path to a file that executes during server-side requests or static builds whenever your component is used. These should render components to static markup, with hooks for hydration where applicable. [React's `renderToString` callback](https://react.dev/reference/react-dom/server/renderToString) is a classic example.

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

The functions `clientEntrypoint` and `serverEntrypoint` accept a `URL`.

#### `addWatchFile` option

**Type:** `URL | string`
Expand Down Expand Up @@ -325,6 +329,27 @@ export const onRequest = defineMiddleware(async (context, next) => {
});
```

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

The function also accepts a `URL` for `entrypoint`:

```js title="@my-package/integration.js" ins={9}
/**
* @type {() => import('astro').AstroIntegration}
*/
export default () => ({
name: "my-middleware-package",
hooks: {
"astro:config:setup": ({ addMiddleware }) => {
addMiddleware({
entrypoint: new URL('./middleware.js', import.meta.url),
order: 'pre'
});
},
},
});
```
#### `injectRoute` option
**Type:** `({ pattern: string; entrypoint: string; pattern?: boolean }) => void;`
Expand Down Expand Up @@ -370,6 +395,17 @@ When publishing your package (`@fancy/dashboard`, in this case) to npm, you must
}
```
<p><Since v="5.0.0" /></p>
The function also accepts a `URL` for `entrypoint`:
```js "new URL('./dashboard.astro', import.meta.url)"
injectRoute({
pattern: '/fancy-dashboard',
entrypoint: new URL('./dashboard.astro', import.meta.url)
});
```
#### `injectScript` option
**Type:** `(stage: InjectedScriptStage, content: string) => void;`
Expand Down

0 comments on commit e984433

Please sign in to comment.