Merge branch 'main' into feat/remote-optimization

withastro · Aug 18, 2023 · eb91e6e · eb91e6e
2 parents 2732ba9 + 4b33a62
commit eb91e6e
Show file tree

Hide file tree

Showing 44 changed files with 2,462 additions and 168 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,7 +9,9 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  rules: {},
+  rules: {
+    'no-mixed-spaces-and-tabs': 'off',
+  },
   settings: {
     react: {
       pragma: 'h',

diff --git a/package.json b/package.json
@@ -75,8 +75,8 @@
     "p-retry": "^5.1.1",
     "parse-numeric-range": "^1.3.0",
     "preact": "^10.16.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.8.0",
+    "prettier": "^3.0.2",
+    "prettier-plugin-astro": "^0.11.1",
     "prompts": "^2.4.2",
     "rehype": "^12.0.1",
     "remark": "^14.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/index.css b/public/index.css
@@ -460,7 +460,9 @@ h2.heading {
 
 .header-link {
 	font-size: 1em;
-	transition: border-inline-start-color 100ms ease-out, background-color 200ms ease-out;
+	transition:
+		border-inline-start-color 100ms ease-out,
+		background-color 200ms ease-out;
 }
 
 a.header-link {

diff --git a/scripts/lib/translation-status/builder.ts b/scripts/lib/translation-status/builder.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-mixed-spaces-and-tabs */
 import dedent from 'dedent-js';
 import glob from 'fast-glob';
 import fs from 'fs';

diff --git a/scripts/lib/translation-status/template.html b/scripts/lib/translation-status/template.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html dir="ltr" lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/src/components/Header/ThemeToggleButton.css b/src/components/Header/ThemeToggleButton.css
@@ -12,7 +12,9 @@
 
 .theme-toggle > label:focus-within {
 	outline: 2px solid transparent;
-	box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+	box-shadow:
+		0 0 0 0.08em var(--theme-accent),
+		0 0 0 0.12em white;
 }
 
 .theme-toggle > label {

diff --git a/src/content/docs/en/core-concepts/layouts.mdx b/src/content/docs/en/core-concepts/layouts.mdx
@@ -215,7 +215,7 @@ function fancyJsHelper() {
 
 Then, your values are available to you through `Astro.props` in your layout, and your MDX content will be injected into the page where your `<slot />` component is written:
 
-```astro "fancyJsHelper" "title"
+```astro /{?title}?/ "fancyJsHelper" "{fancyJsHelper()}"
 ---
 // src/layouts/BaseLayout.astro
 const { title, fancyJsHelper } = Astro.props;
@@ -233,7 +233,7 @@ const { title, fancyJsHelper } = Astro.props;
 
 A single Astro layout can be written to receive the `frontmatter` object from `.md` and `.mdx` files, as well as any named props passed from `.astro` files.
 
-In the example below, the layout will display the page title either from an Astro component passing a `title` attribute or from a frontmatter YAML `title` property:
+In the example below, the layout will display the page title either from a frontmatter YAML `title` property or from an Astro component passing a `title` attribute:
 
 ```astro /{?title}?/ /Astro.props[.a-z]*/
 ---

diff --git a/src/content/docs/en/guides/backend/google-firebase.mdx b/src/content/docs/en/guides/backend/google-firebase.mdx
@@ -705,8 +705,8 @@ After creating server endpoints for Firestore, your project directory should now
 Create the pages that will use the Firestore endpoints:
 
 - `src/pages/add.astro` - will contain a form to add a new friend.
-- `src/pages/edit/[id].ts` - will contain a form to edit a friend and a button to delete a friend.
-- `src/pages/friend/[id].ts` - will contain the details of a friend.
+- `src/pages/edit/[id].astro` - will contain a form to edit a friend and a button to delete a friend.
+- `src/pages/friend/[id].astro` - will contain the details of a friend.
 - `src/pages/dashboard.astro` - will display a list of friends.
 
 #### Add a new record

diff --git a/src/content/docs/en/guides/deploy/cloudflare.mdx b/src/content/docs/en/guides/deploy/cloudflare.mdx
@@ -32,7 +32,6 @@ To get started, you will need:
     - **Framework preset**: `Astro`
     - **Build command:** `npm run build`
     - **Build output directory:** `dist`
-    - **Environment variables (advanced)**: By default, Cloudflare Pages uses Node.js 12.18.0, but Astro [requires a higher version](/en/install/auto/#prerequisites). Add an environment variable with a **Variable name** of `NODE_VERSION` and a **Value** of `v16.13.0` or higher to tell Cloudflare to use a compatible Node version. Alternatively, add a `.nvmrc` file to your project to specify a Node version.
 
 7. Click the **Save and Deploy** button.
 
@@ -109,9 +108,9 @@ If you prefer to install the adapter manually instead, complete the following tw
 
 ### Modes
 
-There are currently two modes supported when using Pages Functions with the [`@astrojs/cloudflare`](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare#readme) adapter. 
+There are currently two modes supported when using Pages Functions with the [`@astrojs/cloudflare`](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare#readme) adapter.
 
-1. **Advanced** mode: This mode is used when you want to run your function in `advanced` mode which picks up the `_worker.js` in `dist`, or a directory mode where pages will compile the worker out of a functions folder in the project root.  
+1. **Advanced** mode: This mode is used when you want to run your function in `advanced` mode which picks up the `_worker.js` in `dist`, or a directory mode where pages will compile the worker out of a functions folder in the project root.
 
     If no mode is set, the default  is `"advanced"`.
 

diff --git a/src/content/docs/en/guides/integrations-guide/react.mdx b/src/content/docs/en/guides/integrations-guide/react.mdx
@@ -82,6 +82,46 @@ To use your first React component in Astro, head to our [UI framework documentat
 *   💧 client-side hydration options, and
 *   🤝 opportunities to mix and nest frameworks together
 
+## Options
+
+### Children parsing
+
+Children passed into a React component from an Astro component are parsed as plain strings, not React nodes.
+
+For example, the `<ReactComponent />` below will only receive a single child element:
+
+```astro
+---
+import ReactComponent from './ReactComponent';
+---
+
+<ReactComponent>
+  <div>one</div>
+  <div>two</div>
+</ReactComponent>
+```
+
+If you are using a library that *expects* more than one child element element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker.
+
+You can set the experimental flag `experimentalReactChildren` to tell Astro to always pass children to React as React vnodes. There is some runtime cost to this, but it can help with compatibility.
+
+You can enable this option in the configuration for the React integration:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+export default defineConfig({
+  // ...
+  integrations: [
+    react({
+      experimentalReactChildren: true,
+    }),
+  ],
+});
+```
+
 ## Troubleshooting
 
 For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!