From f7afdb889fe4e97177958c8ec92f80c5f6e5cb51 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Fri, 12 Aug 2022 17:17:26 -0500 Subject: [MDX] Fix remaining inconsistencies with Markdown (#4268) * feat: add "file" and "url" to layout props * feat: add rawContent and compiledContent errs * fix: add "file" and "url" to frontmatter * fix: add separate MDX instance type * types: add MarkdownLayoutProps and MDXLayoutProps * refactor: simplify MDXLayoutProps * test: pass file and url to layout * test: glob components with .default and Content * feat: add to MDX * feat: declare MDX type module * fix: [MD] move file and url to layout props only * chore: changeset * chore: bump MDX to "minor" with more details * refactor: remove "file" + "url" top-level props (save for minor) * revert: MDInstance type def updates (save for minor) * fix: MDXInstance "default" + "content" types * fix: bad test layout * chore: remove getHeaders fro *.mdx --- .../fixtures/mdx-component/src/pages/glob.astro | 11 +++++ .../mdx-frontmatter/src/layouts/Base.astro | 8 +++- .../integrations/mdx/test/mdx-component.test.js | 56 +++++++++++++++++++++- .../integrations/mdx/test/mdx-frontmatter.test.js | 11 +++++ 4 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 packages/integrations/mdx/test/fixtures/mdx-component/src/pages/glob.astro (limited to 'packages/integrations/mdx/test') diff --git a/packages/integrations/mdx/test/fixtures/mdx-component/src/pages/glob.astro b/packages/integrations/mdx/test/fixtures/mdx-component/src/pages/glob.astro new file mode 100644 index 000000000..ae857fe27 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-component/src/pages/glob.astro @@ -0,0 +1,11 @@ +--- +const components = await Astro.glob('../components/*.mdx'); +--- + +

+ {components.map(Component => )} +

+ +

+ {components.map(({ Content }) => )} +

diff --git a/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro b/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro index e4fa7560a..9a1c84c9d 100644 --- a/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro +++ b/packages/integrations/mdx/test/fixtures/mdx-frontmatter/src/layouts/Base.astro @@ -1,7 +1,11 @@ --- const { content = { title: "content didn't work" }, - frontmatter = { title: "frontmatter didn't work" }, + frontmatter = { + title: "frontmatter didn't work", + file: "file didn't work", + url: "url didn't work", + }, headings = [], } = Astro.props; --- @@ -18,6 +22,8 @@ const {

{content.title}

{frontmatter.title}

{frontmatter.file}

{frontmatter.url}

Layout rendered!

{heading.slug}

', async () => { + const html = await fixture.readFile('/glob/index.html'); + const { document } = parseHTML(html); + + const h1 = document.querySelector('[data-default-export] h1'); + const foo = document.querySelector('[data-default-export] #foo'); + + expect(h1.textContent).to.equal('Hello component!'); + expect(foo.textContent).to.equal('bar'); + }); + + it('supports glob imports - ', async () => { + const html = await fixture.readFile('/glob/index.html'); + const { document } = parseHTML(html); + + const h1 = document.querySelector('[data-content-export] h1'); + const foo = document.querySelector('[data-content-export] #foo'); + + expect(h1.textContent).to.equal('Hello component!'); + expect(foo.textContent).to.equal('bar'); + }); }); describe('dev', () => { @@ -42,7 +64,7 @@ describe('MDX Component', () => { await devServer.stop(); }); - it('works', async () => { + it('supports top-level imports', async () => { const res = await fixture.fetch('/'); expect(res.status).to.equal(200); @@ -56,5 +78,35 @@ describe('MDX Component', () => { expect(h1.textContent).to.equal('Hello component!'); expect(foo.textContent).to.equal('bar'); }); + + it('supports glob imports - ', async () => { + const res = await fixture.fetch('/glob'); + + expect(res.status).to.equal(200); + + const html = await res.text(); + const { document } = parseHTML(html); + + const h1 = document.querySelector('[data-default-export] h1'); + const foo = document.querySelector('[data-default-export] #foo'); + + expect(h1.textContent).to.equal('Hello component!'); + expect(foo.textContent).to.equal('bar'); + }); + + it('supports glob imports - ', async () => { + const res = await fixture.fetch('/glob'); + + expect(res.status).to.equal(200); + + const html = await res.text(); + const { document } = parseHTML(html); + + const h1 = document.querySelector('[data-content-export] h1'); + const foo = document.querySelector('[data-content-export] #foo'); + + expect(h1.textContent).to.equal('Hello component!'); + expect(foo.textContent).to.equal('bar'); + }); }); }); diff --git a/packages/integrations/mdx/test/mdx-frontmatter.test.js b/packages/integrations/mdx/test/mdx-frontmatter.test.js index e69919bd5..9f0e9d8e6 100644 --- a/packages/integrations/mdx/test/mdx-frontmatter.test.js +++ b/packages/integrations/mdx/test/mdx-frontmatter.test.js @@ -56,4 +56,15 @@ describe('MDX frontmatter', () => { expect(headingSlugs).to.contain('section-1'); expect(headingSlugs).to.contain('section-2'); }); + + it('passes "file" and "url" to layout via frontmatter', async () => { + const html = await fixture.readFile('/with-headings/index.html'); + const { document } = parseHTML(html); + + const frontmatterFile = document.querySelector('[data-frontmatter-file]')?.textContent; + const frontmatterUrl = document.querySelector('[data-frontmatter-url]')?.textContent; + + expect(frontmatterFile?.endsWith('with-headings.mdx')).to.equal(true, '"file" prop does not end with correct path or is undefined'); + expect(frontmatterUrl).to.equal('/with-headings'); + }); }); -- cgit v1.2.3