Merge branch 'main' into fix/md-ampersands

withastro · Jun 20, 2022 · afaab05 · afaab05
2 parents 954ad17 + 9502fbf
commit afaab05
Show file tree

Hide file tree

Showing 28 changed files with 455 additions and 543 deletions.
diff --git a/.changeset/empty-bats-grow.md b/.changeset/empty-bats-grow.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Fix: HTML comments in markdown code blocks should not be wrapped in JS comments
diff --git a/.changeset/hungry-ravens-cheat.md b/.changeset/hungry-ravens-cheat.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add component hydration in Markdown E2E tests
diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md
@@ -34,7 +34,8 @@
   ```ts
   integration: [
     // Only run `compress` integration when in production environments, etc...
-    import.meta.env.production ? compress() : null,
+    // Note that `import.meta.env` is not available inside the `astro.config.mjs` file!
+    process.env.production ? compress() : null,
   ];
   ```
 

diff --git a/packages/astro/e2e/fixtures/preact-component/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/preact-component/src/components/JSXComponent.jsx
@@ -1,5 +1,5 @@
 import { h } from 'preact';
 
 export default function({ id }) {
-	return <div id={id}>Preact client:only component</div>
+	return <div id={id}>Framework client:only component</div>
 }
diff --git a/packages/astro/e2e/fixtures/preact-component/src/pages/index.astro b/packages/astro/e2e/fixtures/preact-component/src/pages/index.astro
@@ -8,10 +8,10 @@ const someProps = {
 ---
 
 <html>
-  <head>
-    <!-- Head Stuff -->
-  </head>
-  <body>
+	<head>
+		<!-- Head Stuff -->
+	</head>
+	<body>
 		<Counter id="server-only" {...someProps}>
 			<h1>Hello, server!</h1>
 		</Counter>
@@ -24,14 +24,14 @@ const someProps = {
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-    <Counter id="client-visible" {...someProps} client:visible>
+		<Counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
-		<Counter id="client-media" {...someProps}  client:media="(max-width: 50em)">
+		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
 			<h1>Hello, client:media!</h1>
 		</Counter>
 
 		<PreactComponent id="client-only" client:only="preact" />
-  </body>
+	</body>
 </html>
diff --git a/packages/astro/e2e/fixtures/preact-component/src/pages/markdown.md b/packages/astro/e2e/fixtures/preact-component/src/pages/markdown.md
@@ -0,0 +1,31 @@
+---
+setup: |
+  import Counter from '../components/Counter.jsx';
+  import PreactComponent from '../components/JSXComponent.jsx';
+
+  const someProps = {
+    count: 0,
+  };
+---
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<PreactComponent id="client-only" client:only="preact" />
diff --git a/packages/astro/e2e/fixtures/react-component/src/components/JSXComponent.jsx b/packages/astro/e2e/fixtures/react-component/src/components/JSXComponent.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
 export default function({ id }) {
-	return <div id={id}>React client:only component</div>
+	return <div id={id}>Framework client:only component</div>
 }
diff --git a/packages/astro/e2e/fixtures/react-component/src/pages/index.astro b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
@@ -8,10 +8,10 @@ const someProps = {
 ---
 
 <html>
-  <head>
-    <!-- Head Stuff -->
-  </head>
-  <body>
+	<head>
+		<!-- Head Stuff -->
+	</head>
+	<body>
 		<Counter id="server-only" {...someProps}>
 			<h1>Hello, server!</h1>
 		</Counter>
@@ -24,7 +24,7 @@ const someProps = {
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-    <Counter id="client-visible" {...someProps} client:visible>
+		<Counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
@@ -33,5 +33,5 @@ const someProps = {
 		</Counter>
 
 		<ReactComponent id="client-only" client:only="react" />
-  </body>
+	</body>
 </html>
diff --git a/packages/astro/e2e/fixtures/react-component/src/pages/markdown.md b/packages/astro/e2e/fixtures/react-component/src/pages/markdown.md
@@ -0,0 +1,31 @@
+---
+setup: |
+  import Counter from '../components/Counter.jsx';
+  import ReactComponent from '../components/JSXComponent.jsx';
+
+  const someProps = {
+    count: 0,
+  };
+---
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<ReactComponent id="client-only" client:only="react" />
diff --git a/packages/astro/e2e/fixtures/solid-component/src/components/SolidComponent.jsx b/packages/astro/e2e/fixtures/solid-component/src/components/SolidComponent.jsx
@@ -0,0 +1,5 @@
+export default function SolidComponent({ id }) {
+	return (
+		<div id={id}>Framework client:only component</div>
+	);
+}
diff --git a/packages/astro/e2e/fixtures/solid-component/src/pages/index.astro b/packages/astro/e2e/fixtures/solid-component/src/pages/index.astro
@@ -1,16 +1,17 @@
 ---
 import Counter from '../components/Counter.jsx';
+import SolidComponent from '../components/SolidComponent.jsx';
 
 const someProps = {
 	count: 0,
 };
 ---
 
 <html>
-  <head>
-    <!-- Head Stuff -->
-  </head>
-  <body>
+	<head>
+		<!-- Head Stuff -->
+	</head>
+	<body>
 		<Counter id="server-only" {...someProps}>
 			<h1>Hello, server!</h1>
 		</Counter>
@@ -23,12 +24,14 @@ const someProps = {
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-    <Counter id="client-visible" {...someProps} client:visible>
+		<Counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
 		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
 			<h1>Hello, client:media!</h1>
 		</Counter>
-  </body>
+
+		<SolidComponent id="client-only" client:only="solid" />
+	</body>
 </html>
diff --git a/packages/astro/e2e/fixtures/solid-component/src/pages/markdown.md b/packages/astro/e2e/fixtures/solid-component/src/pages/markdown.md
@@ -0,0 +1,31 @@
+---
+setup: |
+  import Counter from '../components/Counter.jsx';
+  import SolidComponent from '../components/SolidComponent.jsx';
+
+  const someProps = {
+    count: 0,
+  };
+---
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<SolidComponent id="client-only" client:only="solid" />
diff --git a/packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	export let id: string;
-
-  let count = 0;
+	export let count: number = 0;
 
   function add() {
     count += 1;

diff --git a/packages/astro/e2e/fixtures/svelte-component/src/components/SvelteComponent.svelte b/packages/astro/e2e/fixtures/svelte-component/src/components/SvelteComponent.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let id: string;
+</script>
+
+<div {id}>Framework client:only component</div>
diff --git a/packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte-component/src/pages/index.astro
@@ -1,34 +1,37 @@
 ---
 import Counter from '../components/Counter.svelte';
+import SvelteComponent from '../components/SvelteComponent.svelte';
 
 const someProps = {
 	count: 0,
 };
 ---
 
 <html>
-  <head>
-    <!-- Head Stuff -->
-  </head>
-  <body>
-		<Counter id="server-only">
+	<head>
+		<!-- Head Stuff -->
+	</head>
+	<body>
+		<Counter id="server-only" {...someProps}>
 			<h1>Hello, server!</h1>
 		</Counter>
 
-		<Counter id="client-idle" client:idle>
+		<Counter id="client-idle" {...someProps} client:idle>
 			<h1>Hello, client:idle!</h1>
 		</Counter>
 
-		<Counter id="client-load" client:load>
+		<Counter id="client-load" {...someProps} client:load>
 			<h1>Hello, client:load!</h1>
 		</Counter>
 
-		<Counter id="client-visible" client:visible>
+		<Counter id="client-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
-		<Counter id="client-media" client:media="(max-width: 50rem)">
+		<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
 			<h1>Hello, client:media!</h1>
 		</Counter>
-  </body>
+
+		<SvelteComponent id="client-only" client:only="svelte" />
+	</body>
 </html>
diff --git a/packages/astro/e2e/fixtures/svelte-component/src/pages/markdown.md b/packages/astro/e2e/fixtures/svelte-component/src/pages/markdown.md
@@ -0,0 +1,31 @@
+---
+setup: |
+  import Counter from '../components/Counter.svelte';
+  import SvelteComponent from '../components/SvelteComponent.svelte';
+
+  const someProps = {
+    count: 0,
+  };
+---
+
+<Counter id="server-only" {...someProps}>
+	# Hello, server!
+</Counter>
+
+<Counter id="client-idle" {...someProps} client:idle>
+	# Hello, client:idle!
+</Counter>
+
+<Counter id="client-load" {...someProps} client:load>
+	# Hello, client:load!
+</Counter>
+
+<Counter id="client-visible" {...someProps} client:visible>
+	# Hello, client:visible!
+</Counter>
+
+<Counter id="client-media" {...someProps} client:media="(max-width: 50em)">
+	# Hello, client:media!
+</Counter>
+
+<SvelteComponent id="client-only" client:only="svelte" />