diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/@types/astro.ts | 1 | ||||
| -rw-r--r-- | src/codegen/index.ts | 30 | ||||
| -rw-r--r-- | src/compiler/parse/state/tag.ts | 4 | ||||
| -rw-r--r-- | src/optimize/styles.ts | 2 | ||||
| -rw-r--r-- | src/transform2.ts | 26 |
5 files changed, 20 insertions, 43 deletions
diff --git a/src/@types/astro.ts b/src/@types/astro.ts index d2d82f3aa..69994375c 100644 --- a/src/@types/astro.ts +++ b/src/@types/astro.ts @@ -18,7 +18,6 @@ export interface JsxItem { export interface TransformResult { script: string; head: JsxItem | undefined; - body: JsxItem | undefined; items: JsxItem[]; } diff --git a/src/codegen/index.ts b/src/codegen/index.ts index 444a065c3..4cba263df 100644 --- a/src/codegen/index.ts +++ b/src/codegen/index.ts @@ -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, }; } diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts index 898aaed12..8ce297bfd 100644 --- a/src/compiler/parse/state/tag.ts +++ b/src/compiler/parse/state/tag.ts @@ -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'], diff --git a/src/optimize/styles.ts b/src/optimize/styles.ts index 1353cb006..abb69810b 100644 --- a/src/optimize/styles.ts +++ b/src/optimize/styles.ts @@ -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. diff --git a/src/transform2.ts b/src/transform2.ts index ea95b0f32..2f1e651cf 100644 --- a/src/transform2.ts +++ b/src/transform2.ts @@ -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`; } |