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

[ci] format

Browse source
This commit is contained in:
Princesseuh 2023-09-13 16:29:09 +00:00 • committed by astrobot-houston
parent a8d72ceaee
commit de8d6ad237
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/integrations/mdx/src/index.ts
View file

@ -13,8 +13,12 @@ import { VFile } from 'vfile';
import type { Plugin as VitePlugin } from 'vite'; import type { Plugin as VitePlugin } from 'vite';
import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js'; import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js';
import type { OptimizeOptions } from './rehype-optimize-static.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 { 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'> & { export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
extendMarkdownConfig: boolean; extendMarkdownConfig: boolean;
@ -195,11 +199,17 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
if (!moduleExports.find(({ n }) => n === 'Content')) { if (!moduleExports.find(({ n }) => n === 'Content')) {
// If have `export const components`, pass that as props to `Content` as fallback // If have `export const components`, pass that as props to `Content` as fallback
const hasComponents = moduleExports.find(({ n }) => n === 'components'); 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) { 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 += ' }'; componentsCode += ' }';

4
packages/integrations/mdx/src/remark-images-to-component.ts
View file

@ -96,7 +96,9 @@ export function remarkImageToComponent() {
// Add all the import statements to the top of the file for the images // Add all the import statements to the top of the file for the images
tree.children.unshift(...importsStatements); 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. // Export `__usesAstroImage` to pick up `astro:assets` usage in the module graph.
// @see the '@astrojs/mdx-postprocess' plugin // @see the '@astrojs/mdx-postprocess' plugin
tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`)); tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`));

10
packages/integrations/mdx/test/mdx-images.test.js
View file

@ -2,7 +2,7 @@ import { expect } from 'chai';
import { parseHTML } from 'linkedom'; import { parseHTML } from 'linkedom';
import { loadFixture } from '../../../astro/test/test-utils.js'; 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', () => { describe('MDX Page', () => {
let devServer; let devServer;
@ -43,17 +43,17 @@ describe('MDX Page', () => {
it(`supports img component - ${route}`, async () => { it(`supports img component - ${route}`, async () => {
const res = await fixture.fetch(`/${route}`); const res = await fixture.fetch(`/${route}`);
expect(res.status).to.equal(200); expect(res.status).to.equal(200);
const html = await res.text(); const html = await res.text();
const { document } = parseHTML(html); const { document } = parseHTML(html);
const imgs = document.getElementsByTagName('img'); const imgs = document.getElementsByTagName('img');
expect(imgs.length).to.equal(2); expect(imgs.length).to.equal(2);
const assetsImg = imgs.item(0); const assetsImg = imgs.item(0);
expect(assetsImg.src.startsWith('/_image')).to.be.true; expect(assetsImg.src.startsWith('/_image')).to.be.true;
expect(assetsImg.hasAttribute('data-my-image')).to.be.true; expect(assetsImg.hasAttribute('data-my-image')).to.be.true;
const publicImg = imgs.item(1); const publicImg = imgs.item(1);
expect(publicImg.src).to.equal('/favicon.svg'); expect(publicImg.src).to.equal('/favicon.svg');
expect(publicImg.hasAttribute('data-my-image')).to.be.true; expect(publicImg.hasAttribute('data-my-image')).to.be.true;