fix(html): Export HTML components as default export so their type is …

…valid JSX (#7296)

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>

.changeset/khaki-onions-relax.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix HTML component type causing an error when imported in the editor

packages/astro/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference path="./client.d.ts" />
+/// <reference path="./client-base.d.ts" />
 
 // 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<Astro>;
 declare const Fragment: any;
 
 declare module '*.html' {
-	const Component: { render(opts: { slots: Record<string, string> }): string };
+	const Component: (opts?: { slots?: Record<string, string> }) => string;
 	export default Component;
 }

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('')
 		: '';

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(),