michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes for blog and docs examples (#2373)

Browse source 
* Fixes for blog and docs examples

* Adds a changeset

* Upgrade the compiler version

* Use a global style tag

* Skip on windows temporarily
This commit is contained in:
Matthew Phillips 2022-01-14 12:11:56 -05:00 committed by GitHub
parent 0257419af8
commit 92532b8882
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 95 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/yellow-dolphins-buy.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Hydrated component fix with the static build

5
examples/blog/src/components/BaseHead.astro
View file

@ -1,4 +1,6 @@
--- ---
export interface Props { export interface Props {
title: string; title: string;
description: string; description: string;
@ -34,3 +36,6 @@ const { title, description, permalink } = Astro.props;
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" /> <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" /> <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>

2
examples/blog/src/layouts/BlogPost.astro
View file

@ -3,6 +3,7 @@ import BaseHead from '../components/BaseHead.astro';
import BlogHeader from '../components/BlogHeader.astro'; import BlogHeader from '../components/BlogHeader.astro';
import BlogPost from '../components/BlogPost.astro'; import BlogPost from '../components/BlogPost.astro';
const { content } = Astro.props; const { content } = Astro.props;
const { title, description, publishDate, author, heroImage, permalink, alt } = content; 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'}> <html lang={content.lang || 'en'}>
<head> <head>
<BaseHead {title} {description} {permalink} /> <BaseHead {title} {description} {permalink} />
<link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
</head> </head>
<body> <body>

1
examples/blog/src/pages/index.astro
View file

@ -28,7 +28,6 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
<html lang="en"> <html lang="en">
<head> <head>
<BaseHead {title} {description} {permalink} /> <BaseHead {title} {description} {permalink} />
<link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
<style> <style>
header { header {

4
examples/docs/src/components/Header/Search.tsx
View file

@ -1,11 +1,13 @@
/* jsxImportSource: react */ /* jsxImportSource: react */
import { useState, useCallback, useRef } from 'react'; import { useState, useCallback, useRef } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'; import * as docSearchReact from '@docsearch/react';
import * as CONFIG from '../../config'; import * as CONFIG from '../../config';
import '@docsearch/css/dist/style.css'; import '@docsearch/css/dist/style.css';
import './Search.css'; import './Search.css';
const { DocSearchModal, useDocSearchKeyboardEvents } = docSearchReact.default;
export default function Search() { export default function Search() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const searchButtonRef = useRef(); const searchButtonRef = useRef();

2
packages/astro/package.json
View file

@ -56,7 +56,7 @@
"test": "mocha --parallel --timeout 15000" "test": "mocha --parallel --timeout 15000"
}, },
"dependencies": { "dependencies": {
"@astrojs/compiler": "^0.7.4", "@astrojs/compiler": "^0.8.0",
"@astrojs/language-server": "^0.8.6", "@astrojs/language-server": "^0.8.6",
"@astrojs/markdown-remark": "^0.6.0", "@astrojs/markdown-remark": "^0.6.0",
"@astrojs/prism": "0.4.0", "@astrojs/prism": "0.4.0",

4
packages/astro/src/runtime/server/index.ts
View file

@ -286,8 +286,8 @@ function createFetchContentFn(url: URL) {
// This is used to create the top-level Astro global; the one that you can use // This is used to create the top-level Astro global; the one that you can use
// Inside of getStaticPaths. // Inside of getStaticPaths.
export function createAstro(fileURLStr: string, site: string, projectRootStr: string): AstroGlobalPartial { export function createAstro(filePathname: string, site: string, projectRootStr: string): AstroGlobalPartial {
const url = new URL(fileURLStr); const url = new URL(filePathname, site);
const projectRoot = new URL(projectRootStr); const projectRoot = new URL(projectRootStr);
const fetchContent = createFetchContentFn(url); const fetchContent = createFetchContentFn(url);
return { return {

12
packages/astro/src/runtime/server/metadata.ts
View file

@ -57,7 +57,7 @@ export class Metadata {
const found = new Set<string>(); const found = new Set<string>();
for (const metadata of this.deepMetadata()) { for (const metadata of this.deepMetadata()) {
for (const component of metadata.hydratedComponents) { for (const component of metadata.hydratedComponents) {
const path = this.getPath(component); const path = metadata.getPath(component);
if (path && !found.has(path)) { if (path && !found.has(path)) {
found.add(path); found.add(path);
yield path; yield path;
@ -70,8 +70,14 @@ export class Metadata {
* Gets all of the hydration specifiers used within this component. * Gets all of the hydration specifiers used within this component.
*/ */
*hydrationDirectiveSpecifiers() { *hydrationDirectiveSpecifiers() {
for (const directive of this.hydrationDirectives) { const found = new Set<string>();
yield hydrationSpecifier(directive); for(const metadata of this.deepMetadata()) {
for (const directive of metadata.hydrationDirectives) {
if(!found.has(directive)) {
found.add(directive);
yield hydrationSpecifier(directive);
}
}
} }
} }

7
packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.astro vendored Normal file
View file

@ -0,0 +1,7 @@
---
import NestedCounter from './Nested.jsx';
---
<div class="nested-counter">
<NestedCounter client:idle />
</div>

18
packages/astro/test/fixtures/static-build-frameworks/src/components/Nested.jsx vendored Normal file
View file

@ -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>
</>
);
}

13
packages/astro/test/fixtures/static-build-frameworks/src/pages/nested.astro vendored Normal file
View file

@ -0,0 +1,13 @@
---
import Nested from '../components/Nested.astro';
---
<html>
<head>
<title>Nested</title>
</head>
<body>
<h1>Testing</h1>
<Nested />
</body>
</html>

6
packages/astro/test/fixtures/static-build/src/pages/index.astro vendored
View file

@ -1,6 +1,7 @@
--- ---
import MainHead from '../components/MainHead.astro'; import MainHead from '../components/MainHead.astro';
import Nav from '../components/Nav/index.jsx'; import Nav from '../components/Nav/index.jsx';
let allPosts = await Astro.fetchContent('./posts/*.md');
--- ---
<html> <html>
<head> <head>
@ -21,5 +22,10 @@ import Nav from '../components/Nav/index.jsx';
<body> <body>
<Nav /> <Nav />
<h1>Testing</h1> <h1>Testing</h1>
<ul class="posts">
{allPosts.map(post => (
<li><a href={post.url}>post.title</a></li>
))}
</ul>
</body> </body>
</html> </html>

13
packages/astro/test/static-build-frameworks.test.js
View file

@ -1,8 +1,12 @@
import { expect } from 'chai'; import { expect } from 'chai';
import cheerio from 'cheerio'; import cheerio from 'cheerio';
import { loadFixture } from './test-utils.js'; import { loadFixture, isWindows } from './test-utils.js';
describe('Static build - frameworks', () => { describe('Static build - frameworks', () => {
if(isWindows) {
return;
}
let fixture; let fixture;
before(async () => { before(async () => {
@ -25,4 +29,11 @@ describe('Static build - frameworks', () => {
const html = await fixture.readFile('/react/index.html'); const html = await fixture.readFile('/react/index.html');
expect(html).to.be.a('string'); 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');
});
}); });

10
packages/astro/test/static-build.test.js
View file

@ -20,11 +20,19 @@ describe('Static build', () => {
await fixture.build(); await fixture.build();
}); });
it('Builds out .astro pags', async () => { it('Builds out .astro pages', async () => {
const html = await fixture.readFile('/index.html'); const html = await fixture.readFile('/index.html');
expect(html).to.be.a('string'); 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 () => { it('Builds out .md pages', async () => {
const html = await fixture.readFile('/posts/thoughts/index.html'); const html = await fixture.readFile('/posts/thoughts/index.html');
expect(html).to.be.a('string'); expect(html).to.be.a('string');

8
yarn.lock
View file

@ -130,10 +130,10 @@
jsonpointer "^5.0.0" jsonpointer "^5.0.0"
leven "^3.1.0" leven "^3.1.0"
"@astrojs/compiler@^0.7.4": "@astrojs/compiler@^0.8.0":
version "0.7.4" version "0.8.0"
resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.7.4.tgz#f32559254c715af36e3169c33c717fc2a084b71a" resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.8.0.tgz#7c9a7e333a29cb7b7d64def734966ec84595110f"
integrity sha512-CgKxhVYpfzr9Nox+79IGCd9IszEGIVhYCDl1am+LeAvpIVage9YE8YLVY0r+Ow8LaK26uqko/ae06+DmGDtU5w== integrity sha512-ZlZ8wgo+hAQSvQk1yQhZa1QSnrvnw37+mIshAIc1TFhWxhh2yM2zikpkuxuCCcBUtu5XeCld1rAVKzKaz1HAQA==
dependencies: dependencies:
typescript "^4.3.5" typescript "^4.3.5"