From 92532b88820bc45f3f02bca0054e8433c3f7a743 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Fri, 14 Jan 2022 12:11:56 -0500
Subject: [PATCH] Fixes for blog and docs examples (#2373)

* Fixes for blog and docs examples

* Adds a changeset

* Upgrade the compiler version

* Use a global style tag

* Skip on windows temporarily
---
 .changeset/yellow-dolphins-buy.md              |  5 +++++
 examples/blog/src/components/BaseHead.astro    |  5 +++++
 examples/blog/src/layouts/BlogPost.astro       |  2 +-
 examples/blog/src/pages/index.astro            |  1 -
 examples/docs/src/components/Header/Search.tsx |  4 +++-
 packages/astro/package.json                    |  2 +-
 packages/astro/src/runtime/server/index.ts     |  4 ++--
 packages/astro/src/runtime/server/metadata.ts  | 12 +++++++++---
 .../src/components/Nested.astro                |  7 +++++++
 .../src/components/Nested.jsx                  | 18 ++++++++++++++++++
 .../src/pages/nested.astro                     | 13 +++++++++++++
 .../static-build/src/pages/index.astro         |  6 ++++++
 .../astro/test/static-build-frameworks.test.js | 13 ++++++++++++-
 packages/astro/test/static-build.test.js       | 10 +++++++++-
 yarn.lock                                      |  8 ++++----
 15 files changed, 95 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/yellow-dolphins-buy.md
 create mode 100644 packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.astro
 create mode 100644 packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.jsx
 create mode 100644 packages/astro/test/fixtures/static-build-frameworks/src/pages/nested.astro
diff --git a/.changeset/yellow-dolphins-buy.md b/.changeset/yellow-dolphins-buy.md
new file mode 100644
index 000000000..63589b562
--- /dev/null
+++ b/.changeset/yellow-dolphins-buy.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Hydrated component fix with the static build
diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro
index e5745e196..f39f77338 100644
--- a/examples/blog/src/components/BaseHead.astro
+++ b/examples/blog/src/components/BaseHead.astro
@@ -1,4 +1,6 @@
 ---
+
+
 export interface Props {
 	title: string;
 	description: string;
@@ -34,3 +36,6 @@ const { title, description, permalink } = Astro.props;
 <!-- Fonts -->
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap" />
+<style global>
+	@import "../styles/blog.css";
+</style>
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
index e6bb0a6c7..bf682b7ae 100644
--- a/examples/blog/src/layouts/BlogPost.astro
+++ b/examples/blog/src/layouts/BlogPost.astro
@@ -3,6 +3,7 @@ import BaseHead from '../components/BaseHead.astro';
 import BlogHeader from '../components/BlogHeader.astro';
 import BlogPost from '../components/BlogPost.astro';
 
+
 const { content } = Astro.props;
 const { title, description, publishDate, author, heroImage, permalink, alt } = content;
 ---
@@ -10,7 +11,6 @@ const { title, description, publishDate, author, heroImage, permalink, alt } = c
 <html lang={content.lang || 'en'}>
 	<head>
 		<BaseHead {title} {description} {permalink} />
-		<link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
 	</head>
 
 	<body>
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro
index 9a2178ed0..c7bc3ea32 100644
--- a/examples/blog/src/pages/index.astro
+++ b/examples/blog/src/pages/index.astro
@@ -28,7 +28,6 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
 <html lang="en">
 	<head>
 		<BaseHead {title} {description} {permalink} />
-		<link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
 
 		<style>
 			header {
diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx
index cfee83d04..bbe02073d 100644
--- a/examples/docs/src/components/Header/Search.tsx
+++ b/examples/docs/src/components/Header/Search.tsx
@@ -1,11 +1,13 @@
 /* jsxImportSource: react */
 import { useState, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
+import * as docSearchReact from '@docsearch/react';
 import * as CONFIG from '../../config';
 import '@docsearch/css/dist/style.css';
 import './Search.css';
 
+const { DocSearchModal, useDocSearchKeyboardEvents } = docSearchReact.default;
+
 export default function Search() {
 	const [isOpen, setIsOpen] = useState(false);
 	const searchButtonRef = useRef();
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 1332a23a4..74e6557f6 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -56,7 +56,7 @@
     "test": "mocha --parallel --timeout 15000"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.7.4",
+    "@astrojs/compiler": "^0.8.0",
     "@astrojs/language-server": "^0.8.6",
     "@astrojs/markdown-remark": "^0.6.0",
     "@astrojs/prism": "0.4.0",
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index 7fe0a174e..5dcdad35f 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -286,8 +286,8 @@ function createFetchContentFn(url: URL) {
 
 // This is used to create the top-level Astro global; the one that you can use
 // Inside of getStaticPaths.
-export function createAstro(fileURLStr: string, site: string, projectRootStr: string): AstroGlobalPartial {
-	const url = new URL(fileURLStr);
+export function createAstro(filePathname: string, site: string, projectRootStr: string): AstroGlobalPartial {
+	const url = new URL(filePathname, site);
 	const projectRoot = new URL(projectRootStr);
 	const fetchContent = createFetchContentFn(url);
 	return {
diff --git a/packages/astro/src/runtime/server/metadata.ts b/packages/astro/src/runtime/server/metadata.ts
index f012105b1..ca5a63548 100644
--- a/packages/astro/src/runtime/server/metadata.ts
+++ b/packages/astro/src/runtime/server/metadata.ts
@@ -57,7 +57,7 @@ export class Metadata {
 		const found = new Set<string>();
 		for (const metadata of this.deepMetadata()) {
 			for (const component of metadata.hydratedComponents) {
-				const path = this.getPath(component);
+				const path = metadata.getPath(component);
 				if (path && !found.has(path)) {
 					found.add(path);
 					yield path;
@@ -70,8 +70,14 @@ export class Metadata {
 	 * Gets all of the hydration specifiers used within this component.
 	 */
 	*hydrationDirectiveSpecifiers() {
-		for (const directive of this.hydrationDirectives) {
-			yield hydrationSpecifier(directive);
+		const found = new Set<string>();
+		for(const metadata of this.deepMetadata()) {
+			for (const directive of metadata.hydrationDirectives) {
+				if(!found.has(directive)) {
+					found.add(directive);
+					yield hydrationSpecifier(directive);
+				}
+			}
 		}
 	}
 
diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.astro b/packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.astro
new file mode 100644
index 000000000..43a6233ee
--- /dev/null
+++ b/packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.astro
@@ -0,0 +1,7 @@
+---
+import NestedCounter from './Nested.jsx';
+---
+
+<div class="nested-counter">
+	<NestedCounter client:idle />
+</div>
diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.jsx b/packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.jsx
new file mode 100644
index 000000000..9422ac0a1
--- /dev/null
+++ b/packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.jsx
@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+export default function Counter({ children }) {
+	const [count, setCount] = useState(0);
+	const add = () => setCount((i) => i + 1);
+	const subtract = () => setCount((i) => i - 1);
+
+	return (
+		<>
+			<div className="counter">
+				<button onClick={subtract}>-</button>
+				<pre>{count}</pre>
+				<button onClick={add}>+</button>
+			</div>
+			<div className="counter-message">{children}</div>
+		</>
+	);
+}
diff --git a/packages/astro/test/fixtures/static-build-frameworks/src/pages/nested.astro b/packages/astro/test/fixtures/static-build-frameworks/src/pages/nested.astro
new file mode 100644
index 000000000..1a080c30b
--- /dev/null
+++ b/packages/astro/test/fixtures/static-build-frameworks/src/pages/nested.astro
@@ -0,0 +1,13 @@
+---
+import Nested from '../components/Nested.astro';
+---
+
+<html>
+<head>
+<title>Nested</title>
+</head>
+<body>
+<h1>Testing</h1>
+<Nested />
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/static-build/src/pages/index.astro b/packages/astro/test/fixtures/static-build/src/pages/index.astro
index 3cfed9ad6..d96024fae 100644
--- a/packages/astro/test/fixtures/static-build/src/pages/index.astro
+++ b/packages/astro/test/fixtures/static-build/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import MainHead from '../components/MainHead.astro';
 import Nav from '../components/Nav/index.jsx';
+let allPosts = await Astro.fetchContent('./posts/*.md');
 ---
 <html>
 <head>
@@ -21,5 +22,10 @@ import Nav from '../components/Nav/index.jsx';
 <body>
 <Nav />
 <h1>Testing</h1>
+<ul class="posts">
+	{allPosts.map(post => (
+		<li><a href={post.url}>post.title</a></li>
+	))}
+</ul>
 </body>
 </html>
diff --git a/packages/astro/test/static-build-frameworks.test.js b/packages/astro/test/static-build-frameworks.test.js
index 46e7371c1..128deaa38 100644
--- a/packages/astro/test/static-build-frameworks.test.js
+++ b/packages/astro/test/static-build-frameworks.test.js
@@ -1,8 +1,12 @@
 import { expect } from 'chai';
 import cheerio from 'cheerio';
-import { loadFixture } from './test-utils.js';
+import { loadFixture, isWindows } from './test-utils.js';
 
 describe('Static build - frameworks', () => {
+	if(isWindows) {
+		return;
+	}
+
 	let fixture;
 
 	before(async () => {
@@ -25,4 +29,11 @@ describe('Static build - frameworks', () => {
 		const html = await fixture.readFile('/react/index.html');
 		expect(html).to.be.a('string');
 	});
+
+	it('can build nested framework usage', async () => {
+		const html = await fixture.readFile('/nested/index.html');
+		const $ = cheerio.load(html);
+		const counter = $('.nested-counter .counter');
+		expect(counter.length).to.equal(1, 'Found the counter');
+	});
 });
diff --git a/packages/astro/test/static-build.test.js b/packages/astro/test/static-build.test.js
index 7e93706cf..6f0ce9647 100644
--- a/packages/astro/test/static-build.test.js
+++ b/packages/astro/test/static-build.test.js
@@ -20,11 +20,19 @@ describe('Static build', () => {
 		await fixture.build();
 	});
 
-	it('Builds out .astro pags', async () => {
+	it('Builds out .astro pages', async () => {
 		const html = await fixture.readFile('/index.html');
 		expect(html).to.be.a('string');
 	});
 
+	it('can build pages using fetchContent', async () => {
+		const html = await fixture.readFile('/index.html');
+		const $ = cheerio.load(html);
+		const link = $('.posts a');
+		const href = link.attr('href');
+		expect(href).to.be.equal('/posts/thoughts');
+	});
+
 	it('Builds out .md pages', async () => {
 		const html = await fixture.readFile('/posts/thoughts/index.html');
 		expect(html).to.be.a('string');
diff --git a/yarn.lock b/yarn.lock
index 9b600b426..9323ca9f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -130,10 +130,10 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@astrojs/compiler@^0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.7.4.tgz#f32559254c715af36e3169c33c717fc2a084b71a"
-  integrity sha512-CgKxhVYpfzr9Nox+79IGCd9IszEGIVhYCDl1am+LeAvpIVage9YE8YLVY0r+Ow8LaK26uqko/ae06+DmGDtU5w==
+"@astrojs/compiler@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.8.0.tgz#7c9a7e333a29cb7b7d64def734966ec84595110f"
+  integrity sha512-ZlZ8wgo+hAQSvQk1yQhZa1QSnrvnw37+mIshAIc1TFhWxhh2yM2zikpkuxuCCcBUtu5XeCld1rAVKzKaz1HAQA==
   dependencies:
     typescript "^4.3.5"
 
