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