diff options
| -rw-r--r-- | packages/integrations/mdx/src/index.ts | 18 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/remark-images-to-component.ts | 4 | ||||
| -rw-r--r-- | packages/integrations/mdx/test/mdx-images.test.js | 10 |
3 files changed, 22 insertions, 10 deletions
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 98390b1be..438372e87 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -13,8 +13,12 @@ import { VFile } from 'vfile'; import type { Plugin as VitePlugin } from 'vite'; import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js'; import type { OptimizeOptions } from './rehype-optimize-static.js'; +import { + ASTRO_IMAGE_ELEMENT, + ASTRO_IMAGE_IMPORT, + USES_ASTRO_IMAGE_FLAG, +} from './remark-images-to-component.js'; import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from './utils.js'; -import { ASTRO_IMAGE_ELEMENT, ASTRO_IMAGE_IMPORT, USES_ASTRO_IMAGE_FLAG } from './remark-images-to-component.js'; export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & { extendMarkdownConfig: boolean; @@ -195,11 +199,17 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI if (!moduleExports.find(({ n }) => n === 'Content')) { // If have `export const components`, pass that as props to `Content` as fallback const hasComponents = moduleExports.find(({ n }) => n === 'components'); - const usesAstroImage = moduleExports.find(({n}) => n === USES_ASTRO_IMAGE_FLAG); + const usesAstroImage = moduleExports.find( + ({ n }) => n === USES_ASTRO_IMAGE_FLAG + ); - let componentsCode = `{ Fragment${hasComponents ? ', ...components' : ''}, ...props.components,` + let componentsCode = `{ Fragment${ + hasComponents ? ', ...components' : '' + }, ...props.components,`; if (usesAstroImage) { - componentsCode += ` ${JSON.stringify(ASTRO_IMAGE_ELEMENT)}: ${hasComponents ? 'components.img ?? ' : ''} props.components?.img ?? ${ASTRO_IMAGE_IMPORT}`; + componentsCode += ` ${JSON.stringify(ASTRO_IMAGE_ELEMENT)}: ${ + hasComponents ? 'components.img ?? ' : '' + } props.components?.img ?? ${ASTRO_IMAGE_IMPORT}`; } componentsCode += ' }'; diff --git a/packages/integrations/mdx/src/remark-images-to-component.ts b/packages/integrations/mdx/src/remark-images-to-component.ts index 40d414b5c..f83f5d76a 100644 --- a/packages/integrations/mdx/src/remark-images-to-component.ts +++ b/packages/integrations/mdx/src/remark-images-to-component.ts @@ -96,7 +96,9 @@ export function remarkImageToComponent() { // Add all the import statements to the top of the file for the images tree.children.unshift(...importsStatements); - tree.children.unshift(jsToTreeNode(`import { Image as ${ASTRO_IMAGE_IMPORT} } from "astro:assets";`)); + tree.children.unshift( + jsToTreeNode(`import { Image as ${ASTRO_IMAGE_IMPORT} } from "astro:assets";`) + ); // Export `__usesAstroImage` to pick up `astro:assets` usage in the module graph. // @see the '@astrojs/mdx-postprocess' plugin tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`)); diff --git a/packages/integrations/mdx/test/mdx-images.test.js b/packages/integrations/mdx/test/mdx-images.test.js index 128a2fcb0..950b54581 100644 --- a/packages/integrations/mdx/test/mdx-images.test.js +++ b/packages/integrations/mdx/test/mdx-images.test.js @@ -2,7 +2,7 @@ import { expect } from 'chai'; import { parseHTML } from 'linkedom'; import { loadFixture } from '../../../astro/test/test-utils.js'; -const imageTestRoutes = ['with-components', 'esm-import', 'content-collection'] +const imageTestRoutes = ['with-components', 'esm-import', 'content-collection']; describe('MDX Page', () => { let devServer; @@ -43,17 +43,17 @@ describe('MDX Page', () => { it(`supports img component - ${route}`, async () => { const res = await fixture.fetch(`/${route}`); expect(res.status).to.equal(200); - + const html = await res.text(); const { document } = parseHTML(html); - + const imgs = document.getElementsByTagName('img'); expect(imgs.length).to.equal(2); - + const assetsImg = imgs.item(0); expect(assetsImg.src.startsWith('/_image')).to.be.true; expect(assetsImg.hasAttribute('data-my-image')).to.be.true; - + const publicImg = imgs.item(1); expect(publicImg.src).to.equal('/favicon.svg'); expect(publicImg.hasAttribute('data-my-image')).to.be.true; |