From a7e2b37ff73871c46895c615846a86a539f45330 Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Mon, 5 Jun 2023 16:40:53 +0200 Subject: [PATCH] fix(html): Export HTML components as default export so their type is valid JSX (#7296) Co-authored-by: Bjorn Lu --- .changeset/khaki-onions-relax.md | 5 +++++ packages/astro/env.d.ts | 4 ++-- packages/astro/src/runtime/server/render/component.ts | 6 +++--- packages/astro/src/vite-plugin-html/transform/index.ts | 6 ++---- 4 files changed, 12 insertions(+), 9 deletions(-) create mode 100644 .changeset/khaki-onions-relax.md diff --git a/.changeset/khaki-onions-relax.md b/.changeset/khaki-onions-relax.md new file mode 100644 index 000000000..fd665ea7c --- /dev/null +++ b/.changeset/khaki-onions-relax.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix HTML component type causing an error when imported in the editor diff --git a/packages/astro/env.d.ts b/packages/astro/env.d.ts index 774e25633..079370bec 100644 --- a/packages/astro/env.d.ts +++ b/packages/astro/env.d.ts @@ -1,4 +1,4 @@ -/// +/// // Caution! The types here are only available inside Astro files (injected automatically by our language server) // As such, if the typings you're trying to add should be available inside ex: React components, they should instead @@ -18,6 +18,6 @@ declare const Astro: Readonly; declare const Fragment: any; declare module '*.html' { - const Component: { render(opts: { slots: Record }): string }; + const Component: (opts?: { slots?: Record }) => string; export default Component; } diff --git a/packages/astro/src/runtime/server/render/component.ts b/packages/astro/src/runtime/server/render/component.ts index d954a5396..e91703c53 100644 --- a/packages/astro/src/runtime/server/render/component.ts +++ b/packages/astro/src/runtime/server/render/component.ts @@ -17,7 +17,7 @@ import { } from './astro/index.js'; import { Fragment, Renderer, stringifyChunk } from './common.js'; import { componentIsHTMLElement, renderHTMLElement } from './dom.js'; -import { renderSlots, renderSlotToString, type ComponentSlots } from './slot.js'; +import { renderSlotToString, renderSlots, type ComponentSlots } from './slot.js'; import { formatList, internalSpreadAttributes, renderElement, voidElementNames } from './util.js'; const rendererAliases = new Map([['solid', 'solid-js']]); @@ -51,7 +51,7 @@ function isFragmentComponent(Component: unknown) { } function isHTMLComponent(Component: unknown) { - return Component && typeof Component === 'object' && (Component as any)['astro:html']; + return Component && (Component as any)['astro:html'] === true; } const ASTRO_SLOT_EXP = /\<\/?astro-slot\b[^>]*>/g; @@ -364,7 +364,7 @@ async function renderHTMLComponent( slots: any = {} ) { const { slotInstructions, children } = await renderSlots(result, slots); - const html = (Component as any).render({ slots: children }); + const html = (Component as any)({ slots: children }); const hydrationHtml = slotInstructions ? slotInstructions.map((instr) => stringifyChunk(result, instr)).join('') : ''; diff --git a/packages/astro/src/vite-plugin-html/transform/index.ts b/packages/astro/src/vite-plugin-html/transform/index.ts index ddb4761ce..139f01555 100644 --- a/packages/astro/src/vite-plugin-html/transform/index.ts +++ b/packages/astro/src/vite-plugin-html/transform/index.ts @@ -10,10 +10,8 @@ export async function transform(code: string, id: string) { const vfile = new VFile({ value: code, path: id }); await parser.process(vfile); - s.prepend( - `export default {\n\t"astro:html": true,\n\trender({ slots: ${SLOT_PREFIX} }) {\n\t\treturn \`` - ); - s.append('`\n\t}\n}'); + s.prepend(`function render({ slots: ${SLOT_PREFIX} }) {\n\t\treturn \``); + s.append('`\n\t}\nrender["astro:html"] = true;\nexport default render;'); return { code: s.toString(),