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

Handle edge case in jsx-runtime (#4158)

Browse source 
* fix(#4135): handle edge case in jsx-runtime

* test: add mdx test case

* chore: fix utils reference

* test: fix mdx escape test

Co-authored-by: Nate Moore <nate@astro.build>
This commit is contained in:
Nate Moore 2022-08-05 10:35:47 -05:00 committed by GitHub
parent e7bee22d18
commit e569f0a5c7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 66 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/hungry-vans-deliver.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix edge case where MDX components would be escaped

4
packages/astro/src/runtime/server/jsx.ts
View file

@ -51,12 +51,12 @@ export async function renderJSX(result: SSRResult, vnode: any): Promise<any> {
props[key] = value;
}
}
return await renderToString(result, vnode.type as any, props, slots);
return markHTMLString(await renderToString(result, vnode.type as any, props, slots));
}
case !vnode.type && (vnode.type as any) !== 0:
return '';
case typeof vnode.type === 'string' && vnode.type !== ClientOnlyPlaceholder:
return await renderElement(result, vnode.type as string, vnode.props ?? {});
return markHTMLString(await renderElement(result, vnode.type as string, vnode.props ?? {}));
}
if (vnode.type) {

7
packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Em.astro vendored Normal file
View file

@ -0,0 +1,7 @@
<em><slot/></em>
<style>
em {
color: red;
}
</style>

1
packages/integrations/mdx/test/fixtures/mdx-escape/src/components/P.astro vendored Normal file
View file

@ -0,0 +1 @@
<p><slot /></p>

1
packages/integrations/mdx/test/fixtures/mdx-escape/src/components/Title.astro vendored Normal file
View file

@ -0,0 +1 @@
<h1><slot/></h1>

5
packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/html-tag.mdx vendored Normal file
View file

@ -0,0 +1,5 @@
import P from '../components/P.astro';
import Em from '../components/Em.astro';
<P>Render <Em>Me</Em></P>
<P><Em>Me</Em></P>

13
packages/integrations/mdx/test/fixtures/mdx-escape/src/pages/index.mdx vendored Normal file
View file

@ -0,0 +1,13 @@
import P from '../components/P.astro';
import Em from '../components/Em.astro';
import Title from '../components/Title.astro';
export const components = { p: P, em: Em, h1: Title };
# Hello _there_
# _there_
Hello _there_
_there_

32
packages/integrations/mdx/test/mdx-escape.test.js Normal file
View file

@ -0,0 +1,32 @@
import mdx from '@astrojs/mdx';
import { expect } from 'chai';
import { parseHTML } from 'linkedom';
import { loadFixture } from '../../../astro/test/test-utils.js';
const FIXTURE_ROOT = new URL('./fixtures/mdx-escape/', import.meta.url);
describe('MDX frontmatter', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
root: FIXTURE_ROOT,
integrations: [mdx()],
});
await fixture.build();
});
it('does not have unescaped HTML at top-level', async () => {
const html = await fixture.readFile('/index.html');
const { document } = parseHTML(html);
expect(document.body.textContent).to.not.include('<em');
});
it('does not have unescaped HTML inside html tags', async () => {
const html = await fixture.readFile('/html-tag/index.html');
const { document } = parseHTML(html);
expect(document.body.textContent).to.not.include('<em');
});
});