diff --git a/.changeset/khaki-onions-relax.md b/.changeset/khaki-onions-relax.md new file mode 100644 index 000000000000..fd665ea7cdf1 --- /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 774e25633921..079370becebd 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 d954a5396903..e91703c53d40 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 ddb4761ce9b6..139f01555859 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(),