Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support rendering <Fragment> in MDX <Content /> component #5522

Merged
merged 11 commits into from
Dec 5, 2022
Merged

Support rendering <Fragment> in MDX <Content /> component #5522

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
58065cd
Add tests for rendering `<Fragment>` via MDX `<Content />`
delucis Dec 3, 2022
7f16c95
Wrap fragment in `<p>` to match test DOM query
delucis Dec 3, 2022
c57a114
Pass fragment definition into MDX `<Content />` component
delucis Dec 3, 2022
3107ec3
Attach `astro.needsHeadRendering` symbol to new default export
delucis Dec 3, 2022
d308e0e
Add changeset
delucis Dec 3, 2022
cb597b6
Add test suite for using slots in MDX
delucis Dec 3, 2022
4754e30
Remove astro core hack of passing Fragment to MDX pages
delucis Dec 3, 2022
910d77e
Revert "Remove astro core hack of passing Fragment to MDX pages"
delucis Dec 5, 2022
95b6ef6
Add TODO to remove core MDX hack
delucis Dec 5, 2022
45e036f
Add fragment import injection redundancy to be safe
delucis Dec 5, 2022
eb6baf7
Merge branch 'main' into issue/5519
delucis Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions packages/integrations/mdx/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,6 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
transform(code, id) {
if (!id.endsWith('.mdx')) return;

// Ensures styles and scripts are injected into a `<head>`
// When a layout is not applied
code += `\nMDXContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;

const [, moduleExports] = parseESM(code);

const { fileUrl, fileId } = getFileInfo(id, config);
Expand All @@ -156,9 +152,19 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
)}) };`;
}
if (!moduleExports.includes('Content')) {
code += `\nexport const Content = MDXContent;`;
// Make `Content` the default export so we can wrap `MDXContent` and pass in `Fragment`
code = code.replace('export default MDXContent;', '');
code += `\nexport const Content = (props = {}) => MDXContent({
...props,
components: { Fragment, ...props.components },
delucis marked this conversation as resolved.
Show resolved Hide resolved
});
export default Content;`;
}

// Ensures styles and scripts are injected into a `<head>`
// When a layout is not applied
code += `\nContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;

if (command === 'dev') {
// TODO: decline HMR updates until we have a stable approach
code += `\nif (import.meta.hot) {
Expand Down
3 changes: 3 additions & 0 deletions ...es/integrations/mdx/test/fixtures/mdx-component/src/components/WithFragment.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# MDX containing `<Fragment />`

<p><Fragment>bar</Fragment></p>
13 changes: 11 additions & 2 deletions packages/integrations/mdx/test/fixtures/mdx-component/src/pages/glob.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
---
import { parse } from 'node:path';
const components = await Astro.glob('../components/*.mdx');
---

<div data-default-export>
{components.map(Component => <Component.default />)}
{components.map(Component => (
<div data-file={parse(Component.file).base}>
<Component.default />
</div>
))}
</div>

<div data-content-export>
{components.map(({ Content }) => <Content />)}
{components.map(({ Content, file }) => (
<div data-file={parse(file).base}>
<Content />
</div>
))}
</div>
5 changes: 5 additions & 0 deletions packages/integrations/mdx/test/fixtures/mdx-component/src/pages/w-fragment.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
import WithFragment from '../components/WithFragment.mdx';
---

<WithFragment />
79 changes: 79 additions & 0 deletions packages/integrations/mdx/test/mdx-component.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,41 @@ describe('MDX Component', () => {
expect(h1.textContent).to.equal('Hello component!');
expect(foo.textContent).to.equal('bar');
});

describe('with <Fragment>', () => {
it('supports top-level imports', async () => {
const html = await fixture.readFile('/w-fragment/index.html');
const { document } = parseHTML(html);

const h1 = document.querySelector('h1');
const p = document.querySelector('p');

expect(h1.textContent).to.equal('MDX containing <Fragment />');
expect(p.textContent).to.equal('bar');
});

it('supports glob imports - <Component.default />', async () => {
const html = await fixture.readFile('/glob/index.html');
const { document } = parseHTML(html);

const h = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] h1');
const p = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] p');

expect(h.textContent).to.equal('MDX containing <Fragment />');
expect(p.textContent).to.equal('bar');
});

it('supports glob imports - <Content />', async () => {
const html = await fixture.readFile('/glob/index.html');
const { document } = parseHTML(html);

const h = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] h1');
const p = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] p');

expect(h.textContent).to.equal('MDX containing <Fragment />');
expect(p.textContent).to.equal('bar');
});
});
});

describe('dev', () => {
Expand Down Expand Up @@ -108,5 +143,49 @@ describe('MDX Component', () => {
expect(h1.textContent).to.equal('Hello component!');
expect(foo.textContent).to.equal('bar');
});

describe('with <Fragment>', () => {
it('supports top-level imports', async () => {
const res = await fixture.fetch('/w-fragment');
expect(res.status).to.equal(200);

const html = await res.text();
const { document } = parseHTML(html);

const h1 = document.querySelector('h1');
const p = document.querySelector('p');

expect(h1.textContent).to.equal('MDX containing <Fragment />');
expect(p.textContent).to.equal('bar');
});

it('supports glob imports - <Component.default />', async () => {
const res = await fixture.fetch('/glob');
expect(res.status).to.equal(200);

const html = await res.text();
const { document } = parseHTML(html);

const h = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] h1');
const p = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] p');

expect(h.textContent).to.equal('MDX containing <Fragment />');
expect(p.textContent).to.equal('bar');
});

it('supports glob imports - <Content />', async () => {
const res = await fixture.fetch('/glob');
expect(res.status).to.equal(200);

const html = await res.text();
const { document } = parseHTML(html);

const h = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] h1');
const p = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] p');

expect(h.textContent).to.equal('MDX containing <Fragment />');
expect(p.textContent).to.equal('bar');
});
});
});
});