diff options
-rw-r--r-- | .changeset/yellow-dolphins-buy.md | 5 | ||||
-rw-r--r-- | examples/blog/src/components/BaseHead.astro | 5 | ||||
-rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 2 | ||||
-rw-r--r-- | examples/blog/src/pages/index.astro | 1 | ||||
-rw-r--r-- | examples/docs/src/components/Header/Search.tsx | 4 | ||||
-rw-r--r-- | packages/astro/package.json | 2 | ||||
-rw-r--r-- | packages/astro/src/runtime/server/index.ts | 4 | ||||
-rw-r--r-- | packages/astro/src/runtime/server/metadata.ts | 12 | ||||
-rw-r--r-- | packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.astro | 7 | ||||
-rw-r--r-- | packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.jsx | 18 | ||||
-rw-r--r-- | packages/astro/test/fixtures/static-build-frameworks/src/pages/nested.astro | 13 | ||||
-rw-r--r-- | packages/astro/test/fixtures/static-build/src/pages/index.astro | 6 | ||||
-rw-r--r-- | packages/astro/test/static-build-frameworks.test.js | 13 | ||||
-rw-r--r-- | packages/astro/test/static-build.test.js | 10 | ||||
-rw-r--r-- | yarn.lock | 8 |
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'); @@ -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" |