5.0.0 beta docs

scripts/docgen.mjs

@@ -52,7 +52,7 @@ export async function run() {
 	const inputBuffer =
 		STUB ||
 		(await fetch(
-			`https://raw.githubusercontent.com/${sourceRepo}/${sourceBranch}/packages/astro/src/%40types/astro.ts`
+			`https://raw.githubusercontent.com/${sourceRepo}/${sourceBranch}/packages/astro/src/types/public/config.ts`
 		).then((r) => r.text()));
 
 	console.timeEnd(task);

src/components/starlight/SiteTitle.astro

@@ -2,6 +2,7 @@
 import logo from '~/assets/astro-logo.svg?raw';
 import docs from '~/assets/docs.svg?raw';
 import type { Props } from '@astrojs/starlight/props';
+import Badge from '../Badge.astro';
 
 const main = 'https://astro.build/';
 const self = '/' + (Astro.props.locale || 'en') + '/getting-started/';
@@ -10,6 +11,7 @@ const self = '/' + (Astro.props.locale || 'en') + '/getting-started/';
 <span class="site-title sl-flex">
 	<a class="astro-logo" href={main} set:html={logo} aria-label="Astro" />
 	<a class="docs-logo" href={self} set:html={docs} aria-label="Docs" />
+	<Badge text="v5-beta" style={{alignSelf: 'center'}} />
 </span>
 
 <style>

src/content/docs/en/concepts/why-astro.mdx

@@ -13,7 +13,7 @@ i18nReady: true
 Some highlights include:
 
 - **[Islands](/en/concepts/islands/):** A component-based web architecture optimized for content-driven websites.
-- **[UI-agnostic](/en/guides/framework-components/):** Supports React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components, and more.
+- **[UI-agnostic](/en/guides/framework-components/):** Supports React, Preact, Svelte, Vue, Solid, HTMX, web components, and more.
 - **[Server-first](/en/basics/rendering-modes/):** Moves expensive rendering off of your visitors' devices.
 - **[Zero JS, by default](/en/basics/astro-components/):** Less client-side JavaScript to slow your site down.
 - **[Content collections](/en/guides/content-collections/):** Organize, validate, and provide TypeScript type-safety for your Markdown content.
@@ -73,7 +73,7 @@ An Astro website can [load 40% faster with 90% less JavaScript](https://twitter.
 
 The `.astro` UI language is a superset of HTML: any valid HTML is valid Astro templating syntax! So, if you can write HTML, you can write Astro components! But, it also combines some of our favorite features borrowed from other component languages like JSX expressions (React) and CSS scoping by default (Svelte and Vue). This closeness to HTML also makes it easier to use progressive enhancement and common accessibility patterns without any overhead.
 
-We then made sure that you could also use your favorite UI component languages that you already know, and even reuse components you might already have. React, Preact, Svelte, Vue, Solid, Lit, and others, including web components, are all supported for authoring UI components in an Astro project.
+We then made sure that you could also use your favorite UI component languages that you already know, and even reuse components you might already have. React, Preact, Svelte, Vue, Solid, and others, including web components, are all supported for authoring UI components in an Astro project.
 
 Astro was designed to be less complex than other UI frameworks and languages. One big reason for this is that Astro was designed to render on the server, not in the browser. That means that you don't need to worry about: hooks (React), stale closures (also React), refs (Vue), observables (Svelte), atoms, selectors, reactions, or derivations. There is no reactivity on the server, so all of that complexity melts away.
 

src/content/docs/en/getting-started.mdx

@@ -16,6 +16,10 @@ hero:
       icon: right-arrow
       variant: minimal
       link: /en/concepts/why-astro/
+    - text: V5 UPGRADE GUIDE - delete before publishing
+      icon: rocket
+      link: /en/guides/upgrade-to/v5/
+      variant: primary
   facepile:
     tagline: Powered by Astro and our open-source contributors.
     linkText: Join us!

src/content/docs/en/guides/framework-components.mdx

@@ -10,7 +10,7 @@ Build your Astro website without sacrificing your favorite component framework.
 
 ## Official UI Framework Integrations
 
-Astro supports a variety of popular frameworks including [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/) and [Lit](https://lit.dev/) with official integrations. 
+Astro supports a variety of popular frameworks including [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [SolidJS](https://www.solidjs.com/), and [AlpineJS](https://alpinejs.dev/) with official integrations. 
 
 Find even more [community-maintained framework integrations](https://astro.build/integrations/?search=&categories%5B%5D=frameworks) (e.g. Angular, Qwik, Elm) in our integrations directory. 
 

src/content/docs/en/guides/integrations-guide/lit.mdx

@@ -1,218 +1,22 @@
 ---
-type: integration
-title: '@astrojs/lit'
-description: Learn how to use the @astrojs/lit framework integration to extend component support in your Astro project.
-githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/lit/'
-category: renderer
+title: 'Lit'
+description: Using Lit to extend component support in your Astro project.
 i18nReady: true
 ---
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
-This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Lit](https://lit.dev/) custom elements.
-
-## Installation
-
-Astro includes an `astro add` command to automate the setup of official integrations. If you prefer, you can [install integrations manually](#manual-install) instead.
-
-To install `@astrojs/lit`, run the following from your project directory and follow the prompts:
-
-<PackageManagerTabs>
-  <Fragment slot="npm">
-    ```sh
-    npx astro add lit
-    ```
-  </Fragment>
-  <Fragment slot="pnpm">
-    ```sh
-    pnpm astro add lit
-    ```
-  </Fragment>
-  <Fragment slot="yarn">
-    ```sh
-    yarn astro add lit
-    ```
-  </Fragment>
-</PackageManagerTabs>
-
-If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-
-### Manual Install
-
-First, install the `@astrojs/lit` package:
-
-<PackageManagerTabs>
-  <Fragment slot="npm">
-  ```sh
-  npm install @astrojs/lit
-  ```
-  </Fragment>
-  <Fragment slot="pnpm">
-  ```sh
-  pnpm add @astrojs/lit
-  ```
-  </Fragment>
-  <Fragment slot="yarn">
-  ```sh
-  yarn add @astrojs/lit
-  ```
-  </Fragment>
-</PackageManagerTabs>
-
-Most package managers will install associated peer dependencies as well. If you see a "Cannot find package 'lit'" (or similar) warning when you start up Astro, you'll need to install `lit` and `@webcomponents/template-shadowroot`:
-
-<PackageManagerTabs>
-  <Fragment slot="npm">
-  ```sh
-  npm install lit @webcomponents/template-shadowroot
-  ```
-  </Fragment>
-  <Fragment slot="pnpm">
-  ```sh
-  pnpm add lit @webcomponents/template-shadowroot
-  ```
-  </Fragment>
-  <Fragment slot="yarn">
-  ```sh
-  yarn add lit @webcomponents/template-shadowroot
-  ```
-  </Fragment>
-</PackageManagerTabs>
-
-Then, apply the integration to your `astro.config.*` file using the `integrations` property:
-
-```js ins={2} ins="lit()" title="astro.config.mjs"
-import { defineConfig } from 'astro/config';
-import lit from '@astrojs/lit';
-
-export default defineConfig({
-  // ...
-  integrations: [lit()],
-});
-```
-
-## Getting started
-
-To use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:
-
-* 📦 how framework components are loaded,
-* 💧 client-side hydration options, and
-* 🤝 opportunities to mix and nest frameworks together
-
-Writing and importing a Lit component in Astro looks like this:
-
-```js title="src/components/my-element.js"
-import { LitElement, html } from 'lit';
-
-export class MyElement extends LitElement {
-  render() {
-    return html`<p>Hello world! From my-element</p>`;
-  }
-}
-
-customElements.define('my-element', MyElement);
-```
-
-Now, the component is ready to be imported via the Astro frontmatter:
-
-```astro title="src/pages/index.astro"
----
-import { MyElement } from '../components/my-element.js';
----
-
-<MyElement />
-```
-
-:::note
-Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this.
+:::caution[Deprecated]
+This Astro integration to enable server-side rendering and client-side hydration for your [Lit](https://lit.dev/) custom elements was deprecated in Astro 5.0.
 :::
 
-### Experimental Decorators
-
-To use [experimental decorators in Lit](https://lit.dev/docs/components/decorators/), add the following to your `tsconfig.json` file:
-
-```json title="tsconfig.json" add={3}
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-  }
-}
-```
-
-This allows you to use experimental decorators such as `@customElement` and `@state` to register a custom element and define a state property in your Lit component:
-
-```ts title="src/components/my-element.ts"
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-
-@customElement("my-element")
-export class MyElement extends LitElement {
-    @state() name = "my-element";
-
-    override render() {
-        return html`<p>Hello world! From ${this.name}</p>`;
-    }
-}
-```
-
-### Polyfills & Hydration
-
-The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about *1.5kB*. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
-
-Hydration is also handled automatically. You can use the same hydration directives such as `client:load`, `client:idle` and `client:visible` as you can with other libraries that Astro supports.
+You can continue to use Lit for client components by adding a client-side script tag. For example:
 
 ```astro
----
-import { MyElement } from '../components/my-element.js';
----
+<script>
+  import "../components/MyTabs";
+</script>
 
-<MyElement client:visible />
+<my-tabs title="These are my tabs">...</my-tabs>
 ```
 
-The above will only load the element's JavaScript when the user has scrolled it into view. Since it is server rendered they will not see any jank; it will load and hydrate transparently.
-
-## Troubleshooting
-
-For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
-
-You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
-Common issues are listed below:
-
-### Browser globals
-
-The Lit integration's SSR works by adding a few browser global properties to the global environment. Some of the properties it adds includes `window`, `document`, and `location`.
-
-These globals *can* interfere with other libraries that might use the existence of these variables to detect that they are running in the browser, when they are actually running in the server. This can cause bugs with these libraries.
-
-Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations:
-
-```js lang="js" title="astro.config.mjs" ins={7} del={6}
-  import { defineConfig } from 'astro/config';
-  import vue from '@astrojs/vue';
-  import lit from '@astrojs/lit';
-
-  export default defineConfig({
-    integrations: [vue(), lit()]
-    integrations: [lit(), vue()]
-  });
-```
-
-The correct order might be different depending on the underlying cause of the problem. This is not guaranteed to fix every issue however, and some libraries cannot be used if you are using the Lit integration because of this.
-
-### Strict package managers
-
-When using a [strict package manager](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) like `pnpm`, you may get an error such as `ReferenceError: module is not defined` when running your site. To fix this, hoist Lit dependencies with an `.npmrc` file:
-
-```ini title=".npmrc"
-public-hoist-pattern[]=*lit*
-```
-
-### Limitations
-
-- The Lit integration is powered by `@lit-labs/ssr` which has some limitations. See their [limitations documentation](https://www.npmjs.com/package/@lit-labs/ssr#notes-and-limitations) to learn more.
-
-- Astro does not support IntelliSense for Lit components.
-
-[astro-integration]: /en/guides/integrations-guide/
-
-[astro-ui-frameworks]: /en/guides/framework-components/#using-framework-components
+If you're interested in maintaining a Lit integration yourself, you may wish to use the [last published version of `@astrojs/lit`](https://github.com/withastro/astro/tree/astro%404.13.0/packages/integrations/lit) as a starting point and upgrade the relevant packages.

src/content/docs/en/guides/integrations-guide/vercel.mdx

@@ -374,33 +374,6 @@ export default defineConfig({
 });
 ```
 
-### Function bundling configuration
-
-:::caution[Deprecated]
-The `functionPerRoute` option is deprecated and will be removed entirely in Astro 5. Additionally, this option is incompatible with some Astro features such as i18n domains and request rewriting.
-
-If you have currently enabled `functionPerRoute: true`, we recommend removing this configuration option as soon as you are able.
-:::
-
-The Vercel adapter combines all of your routes into a single function by default.
-
-You also have the option to split builds into a separate function for each route using the `functionPerRoute` option. This reduces the size of each function, meaning you are less likely to exceed the size limit for an individual function. Also, code starts are faster.
-
-Verify that your Vercel plan includes an appropriate number of functions before enabling `functionPerRoute`. For example, Vercel's free tier limits each deployment to no more than 12 functions. If your Vercel plan is insufficient for the number of routes in your project, you will receive an error message during deployment.
-
-```js title="astro.config.mjs" ins={8}
-import { defineConfig } from 'astro/config';
-import vercel from '@astrojs/vercel/serverless';
-
-export default defineConfig({
-  // ...
-  output: 'server',
-  adapter: vercel({
-    functionPerRoute: true,
-  }),
-});
-```
-
 ### Running Astro middleware on Vercel Edge Functions
 
 The `@astrojs/vercel/serverless` adapter can create an [edge function](https://vercel.com/docs/functions/edge-functions) from an Astro middleware in your code base. When `edgeMiddleware` is enabled, an edge function will execute your middleware code for all requests including static assets, prerendered pages, and on-demand rendered pages.

src/content/docs/en/guides/internationalization.mdx

@@ -350,7 +350,7 @@ This feature has some restrictions:
 - The `site` option is mandatory.
 - The `output` option must be set to `"server"`.
 - There cannot be any individual prerendered pages.
-- The adapter feature [`functionPerRoute`](/en/reference/adapter-reference/#functionperroute) is not supported.
+
 
 Astro relies on the following headers in order to support the feature:
 - [`X-Forwarded-Host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Forwarded-Host) and [`Host`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Host). Astro will use the former, and if not present, will try the latter.

src/content/docs/en/guides/migrate-to-astro/from-docusaurus.mdx

@@ -33,7 +33,7 @@ Docusaurus and Astro share some similarities that will help you migrate your pro
 
 When you rebuild your Docusaurus site in Astro, you will notice some important differences:
 
-- Docusaurus is a React-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/guides/framework-components/) and raw HTML templating.
+- Docusaurus is a React-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/en/guides/framework-components/) and raw HTML templating.
 
 - Docusaurus was designed to build documentation websites and has some built-in, documentation-specific website features that you would have to build yourself in Astro. Instead, Astro offers some of these features through [Starlight: an official docs theme](https://starlight.astro.build). This website was the inspiration for Starlight, and now runs on it! You can also find more [community docs themes](https://astro.build/themes?search=&categories%5B%5D=docs) with built-in features in our Themes Showcase.
 

src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx

@@ -27,7 +27,7 @@ Gridsome and Astro share some similarities that will help you migrate your proje
 
 When you rebuild your Gridsome site in Astro, you will notice some important differences:
 
-- Gridsome is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/guides/framework-components/) and raw HTML templating.
+- Gridsome is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/en/guides/framework-components/) and raw HTML templating.
 
 - As an SPA, Gridsome uses `vue-router` for SPA routing, and `vue-meta` for managing `<head>`. In Astro, you will create separate HTML pages and control your page `<head>` directly, or in a [layout component](/en/basics/layouts/).
 

src/content/docs/en/guides/migrate-to-astro/from-nuxtjs.mdx

@@ -29,7 +29,7 @@ Nuxt and Astro share some similarities that will help you migrate your project:
 
 When you rebuild your Nuxt site in Astro, you will notice some important differences:
 
-- Nuxt is a Vue-based SPA (single-page application). Astro sites are multi-page apps built using `.astro` components, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit and raw HTML templating.
+- Nuxt is a Vue-based SPA (single-page application). Astro sites are multi-page apps built using `.astro` components, but can also support React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, and raw HTML templating.
 
 - [Page Routing](/en/basics/astro-pages/#file-based-routing): Nuxt uses `vue-router` for SPA routing, and `vue-meta` for managing `<head>`. In Astro, you will create separate HTML page routes and control your page `<head>` directly, or in a layout component.
 

src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx

@@ -29,7 +29,7 @@ When you rebuild your SvelteKit site in Astro, you will notice some important di
 
 - Astro sites are multi-page apps, whereas SvelteKit defaults to SPAs (single-page applications) with server-side rendering, but can also create MPAs, traditional SPAs, or you can mix and match these techniques within an app.
 
-- [Components](/en/basics/astro-components/): SvelteKit uses [Svelte](https://svelte.dev). Astro pages are built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS, Lit](/en/guides/framework-components/) and raw HTML templating.
+- [Components](/en/basics/astro-components/): SvelteKit uses [Svelte](https://svelte.dev). Astro pages are built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/en/guides/framework-components/) and raw HTML templating.
 
 - [content-driven](/en/concepts/why-astro/#content-driven): Astro was designed to showcase your content and to allow you to opt-in to interactivity only as needed. An existing SvelteKit app might be built for high client-side interactivity. Astro has built-in capabilities for working with your content, such as page generation, but may require advanced Astro techniques to include items that are more challenging to replicate using `.astro` components, such as dashboards.