summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.changeset/yellow-dolphins-buy.md5
-rw-r--r--examples/blog/src/components/BaseHead.astro5
-rw-r--r--examples/blog/src/layouts/BlogPost.astro2
-rw-r--r--examples/blog/src/pages/index.astro1
-rw-r--r--examples/docs/src/components/Header/Search.tsx4
-rw-r--r--packages/astro/package.json2
-rw-r--r--packages/astro/src/runtime/server/index.ts4
-rw-r--r--packages/astro/src/runtime/server/metadata.ts12
-rw-r--r--packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.astro7
-rw-r--r--packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.jsx18
-rw-r--r--packages/astro/test/fixtures/static-build-frameworks/src/pages/nested.astro13
-rw-r--r--packages/astro/test/fixtures/static-build/src/pages/index.astro6
-rw-r--r--packages/astro/test/static-build-frameworks.test.js13
-rw-r--r--packages/astro/test/static-build.test.js10
-rw-r--r--yarn.lock8
15 files changed, 95 insertions, 15 deletions
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"