From 61fec63044e1585348e8405bee6fdf4dec635efa Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Wed, 20 Jul 2022 10:56:32 -0400 Subject: [PATCH] [MDX] Include `url` in glob result (#3981) * deps: add es-module-lexer * feat: inject url export on mdx files * fix: apply url transform in prod * test: page urls with overrides * fix: revert test skips * chore: changeset * fix: add newline before export --- .changeset/shiny-pumpkins-return.md | 5 ++++ packages/integrations/mdx/package.json | 7 +++-- packages/integrations/mdx/src/index.ts | 23 +++++++++++---- packages/integrations/mdx/src/utils.ts | 21 ++++++++++++++ .../mdx-url-export/src/pages/pages.json.js | 9 ++++++ .../mdx-url-export/src/pages/test-1.mdx | 1 + .../mdx-url-export/src/pages/test-2.mdx | 1 + .../src/pages/with-url-override.mdx | 3 ++ .../integrations/mdx/test/mdx-url-export.js | 28 +++++++++++++++++++ pnpm-lock.yaml | 2 ++ 10 files changed, 91 insertions(+), 9 deletions(-) create mode 100644 .changeset/shiny-pumpkins-return.md create mode 100644 packages/integrations/mdx/src/utils.ts create mode 100644 packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/pages.json.js create mode 100644 packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-1.mdx create mode 100644 packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-2.mdx create mode 100644 packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/with-url-override.mdx create mode 100644 packages/integrations/mdx/test/mdx-url-export.js diff --git a/.changeset/shiny-pumpkins-return.md b/.changeset/shiny-pumpkins-return.md new file mode 100644 index 000000000000..6482832a5110 --- /dev/null +++ b/.changeset/shiny-pumpkins-return.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': patch +--- + +Include page url in MDX glob result diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json index 1268f80bd2e1..9ea034634c43 100644 --- a/packages/integrations/mdx/package.json +++ b/packages/integrations/mdx/package.json @@ -30,7 +30,8 @@ "test": "mocha --exit --timeout 20000" }, "dependencies": { - "@mdx-js/rollup": "^2.1.1" + "@mdx-js/rollup": "^2.1.1", + "es-module-lexer": "^0.10.5" }, "devDependencies": { "@types/chai": "^4.3.1", @@ -39,8 +40,8 @@ "astro": "workspace:*", "astro-scripts": "workspace:*", "chai": "^4.3.6", - "mocha": "^9.2.2", - "linkedom": "^0.14.12" + "linkedom": "^0.14.12", + "mocha": "^9.2.2" }, "engines": { "node": "^14.18.0 || >=16.12.0" diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index bd3d50c862d5..7b4a24ff53ef 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -1,11 +1,13 @@ -import mdxPlugin from '@mdx-js/rollup'; import type { AstroIntegration } from 'astro'; +import mdxPlugin from '@mdx-js/rollup'; +import { parse as parseESM } from 'es-module-lexer'; +import { getFileInfo } from './utils.js'; export default function mdx(): AstroIntegration { return { name: '@astrojs/mdx', hooks: { - 'astro:config:setup': ({ updateConfig, addPageExtension, command }: any) => { + 'astro:config:setup': ({ updateConfig, config, addPageExtension, command }: any) => { addPageExtension('.mdx'); updateConfig({ vite: { @@ -20,14 +22,23 @@ export default function mdx(): AstroIntegration { mdExtensions: [], }), }, - command === 'dev' && { + { name: '@astrojs/mdx', transform(code: string, id: string) { if (!id.endsWith('.mdx')) return; - // TODO: decline HMR updates until we have a stable approach - return `${code}\nif (import.meta.hot) { + const [, moduleExports] = parseESM(code); + + if (!moduleExports.includes('url')) { + const { fileUrl } = getFileInfo(id, config); + code += `\nexport const url = ${JSON.stringify(fileUrl)};`; + } + if (command === 'dev') { + // TODO: decline HMR updates until we have a stable approach + code += `\nif (import.meta.hot) { import.meta.hot.decline(); - }`; + }` + } + return code; }, }, ], diff --git a/packages/integrations/mdx/src/utils.ts b/packages/integrations/mdx/src/utils.ts new file mode 100644 index 000000000000..1091e851173a --- /dev/null +++ b/packages/integrations/mdx/src/utils.ts @@ -0,0 +1,21 @@ +import type { AstroConfig } from 'astro'; + +function appendForwardSlash(path: string) { + return path.endsWith('/') ? path : path + '/'; +} + +/** @see 'vite-plugin-utils' for source */ +export function getFileInfo(id: string, config: AstroConfig) { + const sitePathname = appendForwardSlash( + config.site ? new URL(config.base, config.site).pathname : config.base + ); + + const fileId = id.split('?')[0]; + let fileUrl = fileId.includes('/pages/') + ? fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '') + : undefined; + if (fileUrl && config.trailingSlash === 'always') { + fileUrl = appendForwardSlash(fileUrl); + } + return { fileId, fileUrl }; +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/pages.json.js b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/pages.json.js new file mode 100644 index 000000000000..36b6f7af69aa --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/pages.json.js @@ -0,0 +1,9 @@ +export async function get() { + const mdxPages = await import.meta.glob('./*.mdx', { eager: true }); + + return { + body: JSON.stringify({ + urls: Object.values(mdxPages ?? {}).map(v => v?.url), + }) + } +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-1.mdx b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-1.mdx new file mode 100644 index 000000000000..c9b984787ff2 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-1.mdx @@ -0,0 +1 @@ +# I'm a page with a url of "/test-1!" diff --git a/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-2.mdx b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-2.mdx new file mode 100644 index 000000000000..360f72fc351a --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/test-2.mdx @@ -0,0 +1 @@ +# I'm a page with a url of "/test-2!" diff --git a/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/with-url-override.mdx b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/with-url-override.mdx new file mode 100644 index 000000000000..e9961928b6d4 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-url-export/src/pages/with-url-override.mdx @@ -0,0 +1,3 @@ +export const url = '/AH!' + +# I'm a test with a url override! diff --git a/packages/integrations/mdx/test/mdx-url-export.js b/packages/integrations/mdx/test/mdx-url-export.js new file mode 100644 index 000000000000..76d6709f0257 --- /dev/null +++ b/packages/integrations/mdx/test/mdx-url-export.js @@ -0,0 +1,28 @@ +import mdx from '@astrojs/mdx'; + +import { expect } from 'chai'; +import { loadFixture } from '../../../astro/test/test-utils.js'; + +describe('MDX url export', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: new URL('./fixtures/mdx-url-export/', import.meta.url), + integrations: [mdx()], + }); + + await fixture.build(); + }); + + it('generates correct urls in glob result', async () => { + const { urls } = JSON.parse(await fixture.readFile('/pages.json')); + expect(urls).to.include('/test-1'); + expect(urls).to.include('/test-2'); + }); + + it('respects "export url" overrides in glob result', async () => { + const { urls } = JSON.parse(await fixture.readFile('/pages.json')); + expect(urls).to.include('/AH!'); + }); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8bcedfd28cf8..38df67c29af4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2098,10 +2098,12 @@ importers: astro: workspace:* astro-scripts: workspace:* chai: ^4.3.6 + es-module-lexer: ^0.10.5 linkedom: ^0.14.12 mocha: ^9.2.2 dependencies: '@mdx-js/rollup': 2.1.2 + es-module-lexer: 0.10.5 devDependencies: '@types/chai': 4.3.1 '@types/mocha': 9.1.1