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

another pass at head/body handling in pages

Browse source
This commit is contained in:
Fred K. Schott 2021-03-21 20:34:11 -07:00
parent e03afbd980
commit 6e4367fd49
16 changed files with 374 additions and 442 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
examples/snowpack/astro/layouts/base.hmx
View file

@ -12,7 +12,7 @@
}
</script>
<slot:head>
<astro:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
@ -27,14 +27,14 @@
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={context.permalink}/>
<meta property="og:url" content={context.permalink} />
<meta property="og:title" content={context.title} />
<meta property="og:description" content={context.description} />
<meta property="og:image" content="https://www.snowpack.dev/img/social-2.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={context.permalink}/>
<meta property="twitter:url" content={context.permalink} />
<meta property="twitter:title" content={context.title} />
<meta property="twitter:description" content={context.description} />
<meta property="twitter:image" content="https://www.snowpack.dev/img/social-2.jpg" />
@ -42,27 +42,21 @@
<!-- Global Stylesheets -->
<link rel="stylesheet" href="/css/app.css" />
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700;900&display=swap" rel="stylesheet" />
</astro:head>
<!-- Note: You can then add additional, custom things here as well. -->
<!-- if no slot given, assume add to bottom -->
<slot></slot>
</slot:head>
<Banner></Banner>
<Nav version={context.currentSnowpackVersion} />
<slot:body>
<Banner></Banner>
<Nav version={context.currentSnowpackVersion} />
<!-- if no slot given, assume add to bottom -->
<slot></slot>
<!-- if no slot given, assume add to bottom -->
<slot></slot>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-9"></script>
<script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-130280175-9', { page_path: location.pathname === '/' ? (location.pathname + location.hash) : (location.pathname) });
</script>
</slot:body>
</script>

12
examples/snowpack/astro/layouts/content-with-cover.hmx
View file

@ -8,8 +8,8 @@
}
</script>
<slot:head>
<style>
<style>
.cover-wrapper {
width: 100%;
height: 44vh;
@ -46,12 +46,7 @@
object-fit: cover;
}
}
</style>
<slot></slot>
</slot:head>
<slot:body>
</style>
<div class="cover-wrapper">
<img class="cover-blur" src={context.cover} alt=""/>
@ -81,4 +76,3 @@
<Subnav title={context.title} headers={context.content.headers} />
</section>
</div>
</slot:body>

11
examples/snowpack/astro/layouts/content.hmx
View file

@ -11,13 +11,7 @@
}
</script>
<slot:head>
<slot></slot>
</slot:head>
<slot:body>
<div class="container">
<div class="container">
<section class="snow-view__docs has-subnav">
<aside id="nav-primary" class="snow-view-nav">
@ -40,5 +34,4 @@
</article>
</section>
</div>
</slot:body>
</div>

12
examples/snowpack/astro/layouts/main.hmx
View file

@ -6,14 +6,7 @@
}
</script>
<slot:head>
<!-- hi -->
<slot></slot>
</slot:head>
<slot:body>
<div class="container">
<div class="container">
<section class="snow-view__docs is-full">
<aside id="nav-primary" class="snow-view-nav">
@ -25,5 +18,4 @@
</article>
</section>
</div>
</slot:body>
</div>

30
examples/snowpack/astro/layouts/post.hmx
View file

@ -1,14 +1,16 @@
<script astro>
import {format as formatDate, parseISO} from 'date-fns';
import { format as formatDate, parseISO } from 'date-fns';
export const layout = 'layouts/base.hmx';
export function setup({ context }) {
return {};
}
</script>
<slot:head>
<astro:head>
<link rel="stylesheet" href="/css/legacy-post.css" />
<style>
</astro:head>
<style>
.markdown-body img,
.markdown-body video,
.markdown-body iframe {
@ -98,15 +100,12 @@
opacity: 1;
}
}
</style>
<slot></slot>
</slot:head>
</style>
<slot:body>
<div class="grid-extra-space">
<div class="grid-extra-space">
<div class="grid-body-header">
<svg height="80px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg height="80px" style="padding-left: 8px;" viewBox="0 0 640 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
<g id="mountain-solid" transform="translate(-1.000000, 0.000000)" fill-rule="nonzero">
<path
@ -128,16 +127,15 @@
<!-- Place this tag where you want the button to render. -->
<div class="hidden-mobile" style="text-align: center; margin-top: 0.5rem; filter: scale(2);">
<a class="github-button" href="https://github.com/snowpackjs/snowpack" data-icon="octicon-star"
data-size="large" data-show-count="true" aria-label="Star snowpackjs/snowpack on GitHub">Star</a>
<a class="github-button" href="https://github.com/snowpackjs/snowpack" data-icon="octicon-star" data-size="large"
data-show-count="true" aria-label="Star snowpackjs/snowpack on GitHub">Star</a>
</div>
<!-- Place this tag in your head or just before your close body tag. -->
<script defer src="https://buttons.github.io/buttons.js"></script>
</div>
</div>
<div class="grid-body">
</div>
<div class="grid-body">
<article class="markdown-body">
<slot></slot>
</article>
</div>
</slot:body>
</div>

30
examples/snowpack/astro/pages/guides.hmx
View file

@ -42,38 +42,32 @@
}
</script>
<slot:head>
</slot:head>
<slot:body>
<h2 class="content-title">
<h2 class="content-title">
{context.title}
</h2>
</h2>
<h3 class="content-title">
<h3 class="content-title">
Using Snowpack
</h3>
</h3>
<div class="content">
<div class="content">
<ul>
{context.guides.map((post) => {
return <li><a href={post.href}>{post.title}</a></li>;
})}
</ul>
</div>
</div>
<br />
<br />
<br />
<br />
<h3 class="content-title">
<h3 class="content-title">
Popular Integration Guides
</h3>
</h3>
<div class="card-grid card-grid-4">
<div class="card-grid card-grid-4">
{context.communityGuides.map((post) => {
return
<Card item={post} />;
})}
</div>
</slot:body>
</div>

22
examples/snowpack/astro/pages/index.hmx
View file

@ -3,19 +3,17 @@
import Hero from '../components/Hero.hmx';
export const layout = 'layouts/base.hmx';
export function setup({context}) {
export function setup({ context }) {
return {}
}
</script>
<slot:head>
<astro:head>
<meta charset="AAA" />
</slot:head>
</astro:head>
<Hero bar={context.title}></Hero>
<slot:body>
<Hero bar={context.title}></Hero>
<div foo={context.title} class="container" style="margin: 0 auto">
<div foo={context.title} class="container" style="margin: 0 auto">
<section class="snow-view__docs is-full is-home">
<aside id="nav-primary" class="snow-view-nav">
@ -25,8 +23,7 @@
<article class="snow-view-main">
<div class="content">
<article class="grid-body">
<a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank"
rel="noopener noreferrer">
<a class="img-banner" href="https://osawards.com/javascript/2020" target="_blank" rel="noopener noreferrer">
<img src="/img/JSAwardWinner.png" alt="2020 JavaScript Open Source Award Winner banner" />
</a>
@ -90,8 +87,7 @@
</article>
</section>
</div>
</div>
<!-- Place this tag in your head or just before your close body tag. -->
<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>
</slot:body>
<!-- Place this tag in your head or just before your close body tag. -->
<script async="async" defer="defer" src="https://buttons.github.io/buttons.js"></script>

26
examples/snowpack/astro/pages/news.hmx
View file

@ -25,25 +25,22 @@
}
</script>
<slot:head> </slot:head>
<NewsTitle title={context.title} />
<slot:body>
<NewsTitle title={context.title} />
<p>
<p>
Get the latest news, blog posts, and tutorials on Snowpack. <a href="/feed.xml">Also available via RSS.</a>
</p>
</p>
<p>
<p>
Got something that you think we should feature?
<a href="https://github.com/snowpackjs/snowpack/edit/main/www/_data/news.js">Submit it!</a>
</p>
</p>
<p>
<p>
In case you're curious, the best pokemon is <strong>{context.pokemonData.name}.</strong>
</p>
</p>
<div class="card-grid card-grid-3">
<div class="card-grid card-grid-3">
<article class="discord-banner">
<a href="https://discord.gg/snowpack" style="flex-shrink: 0; height: 48px;"><img alt="Join us on Discord!"
src="https://img.shields.io/discord/712696926406967308.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2"
@ -54,9 +51,9 @@
{context.news.reverse().map((item) =>
<Card:dynamic item={item} />)}
</div>
</div>
<div class="content">
<div class="content">
<h3>Who's Using Snowpack?</h3>
@ -78,5 +75,4 @@
</div>
<NewsAssets />
</div>
</slot:body>
</div>

17
examples/snowpack/astro/pages/plugins.hmx
View file

@ -13,19 +13,14 @@
}
</script>
<slot:head>
</slot:head>
<slot:body>
<h2 class="content-title">
<h2 class="content-title">
{ context.title }
</h2>
</h2>
<h3 class="pluginPage-subheading">Customize Snowpack with optimized build plugins.</h3>
<p class="pluginPage-intro">To learn more about our plugin system, check out the
<h3 class="pluginPage-subheading">Customize Snowpack with optimized build plugins.</h3>
<p class="pluginPage-intro">To learn more about our plugin system, check out the
<a href="/reference/plugins">Plugin API.</a><br />Can't find what you need?
<a href="/reference/plugins">Creating your own plugin is easy!</a>
</p>
</p>
<PluginSearchPage:dynamic />
</slot:body>
<PluginSearchPage:dynamic />

1
src/@types/astro.ts
View file

@ -18,7 +18,6 @@ export interface JsxItem {
export interface TransformResult {
script: string;
head: JsxItem | undefined;
body: JsxItem | undefined;
items: JsxItem[];
}

30
src/codegen/index.ts
View file

@ -189,9 +189,7 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
const additionalImports = new Set<string>();
let headItem: JsxItem | undefined;
let bodyItem: JsxItem | undefined;
let items: JsxItem[] = [];
let mode: 'JSX' | 'SCRIPT' | 'SLOT' = 'JSX';
let collectionItem: JsxItem | undefined;
let currentItemName: string | undefined;
let currentDepth = 0;
@ -225,10 +223,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
}
collectionItem!.jsx += `,(${code.trim().replace(/\;$/, '')})`;
return;
case 'Slot':
mode = 'SLOT';
collectionItem!.jsx += `,child`;
return;
case 'Comment':
return;
case 'Fragment':
@ -239,8 +233,8 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
}
break;
case 'Slot':
case 'Head':
case 'Body':
case 'InlineComponent':
case 'Title':
case 'Element': {
@ -251,7 +245,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
const attributes = getAttributes(node.attributes);
currentDepth++;
currentItemName = name;
if (!collectionItem) {
collectionItem = { name, jsx: '' };
if (node.type === 'Head') {
@ -259,14 +252,13 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
headItem = collectionItem;
return;
}
if (node.type === 'Body') {
collectionItem.jsx += `h(Fragment, null`;
bodyItem = collectionItem;
return;
}
items.push(collectionItem);
}
collectionItem.jsx += collectionItem.jsx === '' ? '' : ',';
if (node.type === 'Slot') {
collectionItem.jsx += `(children`;
return;
}
const COMPONENT_NAME_SCANNER = /^[A-Z]/;
if (!COMPONENT_NAME_SCANNER.test(name)) {
collectionItem.jsx += `h("${name}", ${attributes ? generateAttributes(attributes) : 'null'}`;
@ -296,9 +288,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
}
case 'Text': {
const text = getTextFromAttribute(node);
if (mode === 'SLOT') {
return;
}
if (!text.trim()) {
return;
}
@ -323,17 +312,11 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
case 'Attribute':
case 'Comment':
return;
case 'Slot': {
const name = node.name;
if (name === 'slot') {
mode = 'JSX';
}
return;
}
case 'Fragment':
if (!collectionItem) {
return;
}
case 'Slot':
case 'Head':
case 'Body':
case 'Title':
@ -360,7 +343,6 @@ export async function codegen(ast: Ast, { compileOptions }: CodeGenOptions): Pro
return {
script: script + '\n' + Array.from(additionalImports).join('\n'),
head: headItem,
body: bodyItem,
items,
};
}

4
src/compiler/parse/state/tag.ts
View file

@ -14,8 +14,8 @@ import list from '../../utils/list.js';
const valid_tag_name = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
const meta_tags = new Map([
['slot:head', 'Head'],
['slot:body', 'Body'],
['astro:head', 'Head'],
// ['slot:body', 'Body'],
// ['astro:options', 'Options'],
// ['astro:window', 'Window'],
// ['astro:body', 'Body'],

2
src/optimize/styles.ts
View file

@ -134,7 +134,7 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
const code = node.content.styles;
const typeAttr = (node.attributes || []).find(({ name }: { name: string }) => name === 'type');
styleNodes.push(node);
styleTransformPromises.push(transformStyle(code, { type: (typeAttr.value[0] && typeAttr.value[0].raw) || undefined, filename, fileID }));
styleTransformPromises.push(transformStyle(code, { type: (typeAttr && typeAttr.value[0] && typeAttr.value[0].raw) || undefined, filename, fileID }));
// TODO: we should delete the old untransformed <style> node after we’re done.
// However, the svelte parser left it in ast.css, not ast.html. At the final step, this just gets ignored, so it will be deleted, in a sense.

26
src/transform2.ts
View file

@ -78,7 +78,7 @@ async function convertMdToJsx(
export function setup({context}) {
return {context: ${stringifiedSetupContext} };
}
</script><slot:head></slot:head><slot:body><section>{${JSON.stringify(mdHtml)}}</section></slot:body>`,
</script><section>{${JSON.stringify(mdHtml)}}</section>`,
{ compileOptions, filename, fileID }
);
}
@ -104,9 +104,7 @@ export async function compileComponent(
): Promise<CompileResult> {
const sourceJsx = await transformFromSource(source, { compileOptions, filename, projectRoot });
const headItem = sourceJsx.head;
const bodyItem = sourceJsx.body;
const headItemJsx = !headItem ? 'null' : headItem.jsx;
const bodyItemJsx = !bodyItem ? 'null' : bodyItem.jsx;
// sort <style> tags first
// TODO: remove these and inject in <head>
@ -120,23 +118,21 @@ ${sourceJsx.script}
// \`__render()\`: Render the contents of the HMX module. "<slot:*>" elements are not
// included (see below).
import { h, Fragment } from '${internalImport('h.js')}';
export default function __render(props) { return h(Fragment, null, ${sourceJsx.items.map(({ jsx }) => jsx).join(',')}); }
// <slot:*> render functions
export function __slothead(context, child) { return h(Fragment, null, ${headItemJsx}); }
export function __slotbody(context, child) { return h(Fragment, null, ${bodyItemJsx}); }
export function __slothead(children, context) { return h(Fragment, null, ${headItemJsx}); }
function __render(props, children, context) { return h(Fragment, null, ${sourceJsx.items.map(({ jsx }) => jsx).join(',')}); }
export default __render;
`;
if (headItemJsx || bodyItemJsx) {
if (headItemJsx) {
modJsx += `
// \`__renderPage()\`: Render the contents of the HMX module as a page. This is a special flow,
// triggered by loading a component directly by URL.
// If the page exports a defined "layout", then load + render those first. "context", "slot:head",
// If the page exports a defined "layout", then load + render those first. "context", "astro:head",
// and "slot:body" should all inherit from parent layouts, merging together in the correct order.
export async function __renderPage({request, children}) {
const currentChild = {
__slothead,
__slotbody,
__render,
setup: typeof setup === 'undefined' ? (passthrough) => passthrough : setup,
layout: typeof layout === 'undefined' ? undefined : layout,
};
@ -166,12 +162,12 @@ export async function __renderPage({request, children}) {
let headResult;
let bodyResult;
for (const child of children.reverse()) {
headResult = await child.__slothead(mergedContext, headResult);
bodyResult = await child.__slotbody(mergedContext, bodyResult);
headResult = await child.__slothead([headResult], mergedContext);
bodyResult = await child.__render(undefined, [bodyResult], mergedContext);
}
return h(Fragment, null, [
h("head", null, currentChild.__slothead(mergedContext, headResult)),
h("body", null, currentChild.__slotbody(mergedContext, bodyResult)),
h("head", null, currentChild.__slothead([headResult], mergedContext)),
h("body", null, currentChild.__render(undefined, [bodyResult], mergedContext)),
]);
};\n`;
}

8
test/fixtures/hmx-basic/astro/pages/index.hmx vendored
View file

@ -6,10 +6,8 @@
}
</script>
<slot:head>
<astro:head>
<!-- Head Stuff -->
</slot:head>
</astro:head>
<slot:body>
<h1>Hello world!</h1>
</slot:body>
<h1>Hello world!</h1>

7
test/snowpack-integration.test.js
View file

@ -7,6 +7,9 @@ import { doc } from './test-utils.js';
const { readdir, stat } = fsPromises;
// Bug: Snowpack config is still loaded relative to the current working directory.
process.chdir(new URL('../examples/snowpack/', import.meta.url).pathname);
const SnowpackDev = suite('snowpack.dev');
let runtime;
@ -67,8 +70,10 @@ SnowpackDev('Can load every page', async () => {
assert.equal(result.statusCode, 200, `Loading ${pathname}`);
}
if (failed.length > 0) {
console.error(failed);
assert.equal(failed.length, 1, 'Failed pages (1 expected)');
}
assert.equal(failed.length, 0, 'Failed pages');
});
SnowpackDev.run();