michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(html): Export HTML components as default export so their type is valid JSX (#7296)

Browse source 
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
This commit is contained in:
Erika 2023-06-05 16:40:53 +02:00 committed by GitHub
parent 91b6ac31f3
commit a7e2b37ff7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/khaki-onions-relax.md Normal file
View file

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

4
packages/astro/env.d.ts vendored
View file

@ -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;
}

6
packages/astro/src/runtime/server/render/component.ts
View file

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

6
packages/astro/src/vite-plugin-html/transform/index.ts
View file

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