From e984433829fcbf07c1cb0dedaef9bee3e6ae8bba Mon Sep 17 00:00:00 2001
From: Emanuele Stoppa <my.burning@gmail.com>
Date: Tue, 15 Oct 2024 20:18:56 +0100
Subject: [PATCH] feat: document new entrypoints (#9680)

* feat: document new entrypoints

* consistent intro sentences

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
---
 .../reference/dev-toolbar-app-reference.mdx   | 24 +++++++++++++
 .../en/reference/integrations-reference.mdx   | 36 +++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
index 6ac1771a53e0e..3f16c8b45ca45 100644
--- a/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
+++ b/src/content/docs/en/reference/dev-toolbar-app-reference.mdx
@@ -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. 
diff --git a/src/content/docs/en/reference/integrations-reference.mdx b/src/content/docs/en/reference/integrations-reference.mdx
index 0e5278939247c..190642d79f1f7 100644
--- a/src/content/docs/en/reference/integrations-reference.mdx
+++ b/src/content/docs/en/reference/integrations-reference.mdx
@@ -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`
@@ -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;`
@@ -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;`