From 3d58fa65e6b902aafbcfcdf51fc3c4c0de683aea Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 24 Nov 2023 11:26:53 +0100 Subject: [PATCH] Update Prettier config Disable semicolons and trailing commas. --- .prettierrc.yaml | 3 +- README.md | 16 ++--- __fixtures__/alt/expected.jsx | 12 ++-- __fixtures__/duplicate/expected.jsx | 14 ++-- __fixtures__/external-http/expected.jsx | 10 +-- __fixtures__/external-https/expected.jsx | 10 +-- .../external-without-protocol/expected.jsx | 10 +-- __fixtures__/inline/expected.jsx | 12 ++-- __fixtures__/link/expected.jsx | 12 ++-- __fixtures__/multiple/expected.jsx | 18 ++--- __fixtures__/node-modules/expected.jsx | 12 ++-- .../relative-grandparent/expected.jsx | 12 ++-- __fixtures__/relative-parent/expected.jsx | 12 ++-- __fixtures__/relative-sibling/expected.jsx | 12 ++-- __fixtures__/relative-simple/expected.jsx | 12 ++-- __fixtures__/root/expected.jsx | 10 +-- __fixtures__/title/expected.jsx | 12 ++-- index.ts | 72 +++++++++---------- test.ts | 40 +++++------ 19 files changed, 156 insertions(+), 155 deletions(-) diff --git a/.prettierrc.yaml b/.prettierrc.yaml index 6b0b711..b3732ec 100644 --- a/.prettierrc.yaml +++ b/.prettierrc.yaml @@ -1,3 +1,4 @@ proseWrap: always +semi: false singleQuote: true -trailingComma: all +trailingComma: none diff --git a/README.md b/README.md index 8caeb60..e1d50df 100644 --- a/README.md +++ b/README.md @@ -37,29 +37,29 @@ For example, given a file named `example.mdx` with the following contents: The following script: ```js -import { readFile } from 'node:fs/promises'; +import { readFile } from 'node:fs/promises' -import { compile } from '@mdx-js/mdx'; -import remarkMdxImages from 'remark-mdx-images'; +import { compile } from '@mdx-js/mdx' +import remarkMdxImages from 'remark-mdx-images' const { contents } = await compile(await readFile('example.mdx'), { jsx: true, - remarkPlugins: [remarkMdxImages], -}); -console.log(contents); + remarkPlugins: [remarkMdxImages] +}) +console.log(contents) ``` Roughly yields: ```jsx -import kittens from './kittens.png'; +import kittens from './kittens.png' export default function MDXContent() { return (

Very cute kittens

- ); + ) } ``` diff --git a/__fixtures__/alt/expected.jsx b/__fixtures__/alt/expected.jsx index c04ca02..07d7012 100644 --- a/__fixtures__/alt/expected.jsx +++ b/__fixtures__/alt/expected.jsx @@ -1,24 +1,24 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_png__ from './image.png'; +import __0___image_png__ from './image.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img alt="Alt text" src={__0___image_png__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/duplicate/expected.jsx b/__fixtures__/duplicate/expected.jsx index 1e06bcc..fa8a27e 100644 --- a/__fixtures__/duplicate/expected.jsx +++ b/__fixtures__/duplicate/expected.jsx @@ -1,12 +1,12 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_png__ from './image.png'; -import __1___image_jpg__ from './image.jpg'; +import __0___image_png__ from './image.png' +import __1___image_jpg__ from './image.jpg' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <> <_components.p> @@ -25,15 +25,15 @@ function _createMdxContent(props) { <_components.img alt="" src={__1___image_jpg__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/external-http/expected.jsx b/__fixtures__/external-http/expected.jsx index 60b131e..baf2a5a 100644 --- a/__fixtures__/external-http/expected.jsx +++ b/__fixtures__/external-http/expected.jsx @@ -3,21 +3,21 @@ function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img src="http://mdx-logo.now.sh" alt="" /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/external-https/expected.jsx b/__fixtures__/external-https/expected.jsx index 9a003e4..38332ee 100644 --- a/__fixtures__/external-https/expected.jsx +++ b/__fixtures__/external-https/expected.jsx @@ -3,21 +3,21 @@ function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img src="https://mdx-logo.now.sh" alt="" /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/external-without-protocol/expected.jsx b/__fixtures__/external-without-protocol/expected.jsx index 29b0735..7255f65 100644 --- a/__fixtures__/external-without-protocol/expected.jsx +++ b/__fixtures__/external-without-protocol/expected.jsx @@ -3,21 +3,21 @@ function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img src="//mdx-logo.now.sh" alt="" /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/inline/expected.jsx b/__fixtures__/inline/expected.jsx index 7cd7150..fe50a52 100644 --- a/__fixtures__/inline/expected.jsx +++ b/__fixtures__/inline/expected.jsx @@ -1,26 +1,26 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_png__ from './image.png'; +import __0___image_png__ from './image.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> {'This is an inline image: '} <_components.img alt="" src={__0___image_png__} /> {'. See?'} - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/link/expected.jsx b/__fixtures__/link/expected.jsx index d89388e..9a5c460 100644 --- a/__fixtures__/link/expected.jsx +++ b/__fixtures__/link/expected.jsx @@ -1,27 +1,27 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_png__ from './image.png'; +import __0___image_png__ from './image.png' function _createMdxContent(props) { const _components = { a: 'a', img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.a href="https://example.com"> <_components.img alt="" src={__0___image_png__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/multiple/expected.jsx b/__fixtures__/multiple/expected.jsx index c3f3068..4a4e408 100644 --- a/__fixtures__/multiple/expected.jsx +++ b/__fixtures__/multiple/expected.jsx @@ -1,14 +1,14 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_gif__ from './image.gif'; -import __1___image_jpg__ from './image.jpg'; -import __2___image_png__ from './image.png'; -import __3___image_svg__ from './image.svg'; +import __0___image_gif__ from './image.gif' +import __1___image_jpg__ from './image.jpg' +import __2___image_png__ from './image.png' +import __3___image_svg__ from './image.svg' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <> <_components.p> @@ -27,15 +27,15 @@ function _createMdxContent(props) { <_components.img alt="" src={__3___image_svg__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/node-modules/expected.jsx b/__fixtures__/node-modules/expected.jsx index 62e8047..5ceb1f0 100644 --- a/__fixtures__/node-modules/expected.jsx +++ b/__fixtures__/node-modules/expected.jsx @@ -1,24 +1,24 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0__browser_logos_chrome_chrome_png__ from '@browser-logos/chrome/chrome.png'; +import __0__browser_logos_chrome_chrome_png__ from '@browser-logos/chrome/chrome.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img alt="" src={__0__browser_logos_chrome_chrome_png__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/relative-grandparent/expected.jsx b/__fixtures__/relative-grandparent/expected.jsx index d939d17..9ce1b08 100644 --- a/__fixtures__/relative-grandparent/expected.jsx +++ b/__fixtures__/relative-grandparent/expected.jsx @@ -1,24 +1,24 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0_______image_png__ from '../../image.png'; +import __0_______image_png__ from '../../image.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img alt="" src={__0_______image_png__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/relative-parent/expected.jsx b/__fixtures__/relative-parent/expected.jsx index 318b3ef..90dcf41 100644 --- a/__fixtures__/relative-parent/expected.jsx +++ b/__fixtures__/relative-parent/expected.jsx @@ -1,24 +1,24 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0____image_png__ from '../image.png'; +import __0____image_png__ from '../image.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img alt="" src={__0____image_png__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/relative-sibling/expected.jsx b/__fixtures__/relative-sibling/expected.jsx index 85a97d3..d18e6db 100644 --- a/__fixtures__/relative-sibling/expected.jsx +++ b/__fixtures__/relative-sibling/expected.jsx @@ -1,24 +1,24 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_png__ from './image.png'; +import __0___image_png__ from './image.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img alt="" src={__0___image_png__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/relative-simple/expected.jsx b/__fixtures__/relative-simple/expected.jsx index 85a97d3..d18e6db 100644 --- a/__fixtures__/relative-simple/expected.jsx +++ b/__fixtures__/relative-simple/expected.jsx @@ -1,24 +1,24 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_png__ from './image.png'; +import __0___image_png__ from './image.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img alt="" src={__0___image_png__} /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/root/expected.jsx b/__fixtures__/root/expected.jsx index 27883a5..9a99ccd 100644 --- a/__fixtures__/root/expected.jsx +++ b/__fixtures__/root/expected.jsx @@ -3,21 +3,21 @@ function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img src="/image.png" alt="" /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/__fixtures__/title/expected.jsx b/__fixtures__/title/expected.jsx index b3ba5b8..3256e77 100644 --- a/__fixtures__/title/expected.jsx +++ b/__fixtures__/title/expected.jsx @@ -1,24 +1,24 @@ /*@jsxRuntime automatic @jsxImportSource react*/ -import __0___image_png__ from './image.png'; +import __0___image_png__ from './image.png' function _createMdxContent(props) { const _components = { img: 'img', p: 'p', - ...props.components, - }; + ...props.components + } return ( <_components.p> <_components.img alt="" src={__0___image_png__} title="Title" /> - ); + ) } export default function MDXContent(props = {}) { - const { wrapper: MDXLayout } = props.components || {}; + const { wrapper: MDXLayout } = props.components || {} return MDXLayout ? ( <_createMdxContent {...props} /> ) : ( _createMdxContent(props) - ); + ) } diff --git a/index.ts b/index.ts index 9a887cc..5fddd11 100644 --- a/index.ts +++ b/index.ts @@ -1,8 +1,8 @@ -import { type ImportDeclaration } from 'estree'; -import { type Root } from 'mdast'; -import { type MdxJsxTextElement } from 'mdast-util-mdx'; -import { type Plugin } from 'unified'; -import { visit } from 'unist-util-visit'; +import { type ImportDeclaration } from 'estree' +import { type Root } from 'mdast' +import { type MdxJsxTextElement } from 'mdast-util-mdx' +import { type Plugin } from 'unified' +import { visit } from 'unist-util-visit' export interface RemarkMdxImagesOptions { /** @@ -13,11 +13,11 @@ export interface RemarkMdxImagesOptions { * * @default true */ - resolve?: boolean; + resolve?: boolean } -const urlPattern = /^(https?:)?\//; -const relativePathPattern = /\.\.?\//; +const urlPattern = /^(https?:)?\// +const relativePathPattern = /\.\.?\// /** * A Remark plugin for converting Markdown images to MDX images using imports for the image source. @@ -25,21 +25,21 @@ const relativePathPattern = /\.\.?\//; const remarkMdxImages: Plugin<[RemarkMdxImagesOptions?], Root> = ({ resolve = true } = {}) => (ast) => { - const imports: ImportDeclaration[] = []; - const imported = new Map(); + const imports: ImportDeclaration[] = [] + const imported = new Map() visit(ast, 'image', (node, index, parent) => { - let { alt = null, title, url } = node; + let { alt = null, title, url } = node if (urlPattern.test(url)) { - return; + return } if (!relativePathPattern.test(url) && resolve) { - url = `./${url}`; + url = `./${url}` } - let name = imported.get(url); + let name = imported.get(url) if (!name) { - name = `__${imported.size}_${url.replaceAll(/\W/g, '_')}__`; + name = `__${imported.size}_${url.replaceAll(/\W/g, '_')}__` imports.push({ type: 'ImportDeclaration', @@ -47,11 +47,11 @@ const remarkMdxImages: Plugin<[RemarkMdxImagesOptions?], Root> = specifiers: [ { type: 'ImportDefaultSpecifier', - local: { type: 'Identifier', name }, - }, - ], - }); - imported.set(url, name); + local: { type: 'Identifier', name } + } + ] + }) + imported.set(url, name) } const textElement: MdxJsxTextElement = { @@ -71,18 +71,18 @@ const remarkMdxImages: Plugin<[RemarkMdxImagesOptions?], Root> = type: 'Program', sourceType: 'module', comments: [], - body: [{ type: 'ExpressionStatement', expression: { type: 'Identifier', name } }], - }, - }, - }, - }, - ], - }; + body: [{ type: 'ExpressionStatement', expression: { type: 'Identifier', name } }] + } + } + } + } + ] + } if (title) { - textElement.attributes.push({ type: 'mdxJsxAttribute', name: 'title', value: title }); + textElement.attributes.push({ type: 'mdxJsxAttribute', name: 'title', value: title }) } - parent!.children.splice(index!, 1, textElement); - }); + parent!.children.splice(index!, 1, textElement) + }) if (imports.length) { ast.children.unshift({ @@ -92,11 +92,11 @@ const remarkMdxImages: Plugin<[RemarkMdxImagesOptions?], Root> = estree: { type: 'Program', sourceType: 'module', - body: imports, - }, - }, - }); + body: imports + } + } + }) } - }; + } -export default remarkMdxImages; +export default remarkMdxImages diff --git a/test.ts b/test.ts index 9527736..ab88ad3 100644 --- a/test.ts +++ b/test.ts @@ -1,33 +1,33 @@ -import assert from 'node:assert/strict'; -import { readdir, readFile, writeFile } from 'node:fs/promises'; -import { test } from 'node:test'; +import assert from 'node:assert/strict' +import { readdir, readFile, writeFile } from 'node:fs/promises' +import { test } from 'node:test' -import { compile } from '@mdx-js/mdx'; -import prettier from 'prettier'; +import { compile } from '@mdx-js/mdx' +import prettier from 'prettier' -import remarkMdxImages from './index.js'; +import remarkMdxImages from './index.js' -const fixturesDir = new URL('__fixtures__/', import.meta.url); -const tests = await readdir(fixturesDir); +const fixturesDir = new URL('__fixtures__/', import.meta.url) +const tests = await readdir(fixturesDir) for (const name of tests) { test(name, async () => { - const path = new URL(`${name}/`, fixturesDir); - const input = await readFile(new URL('input.md', path)); - const expected = new URL('expected.jsx', path); - const options = JSON.parse(await readFile(new URL('options.json', path), 'utf8')); + const path = new URL(`${name}/`, fixturesDir) + const input = await readFile(new URL('input.md', path)) + const expected = new URL('expected.jsx', path) + const options = JSON.parse(await readFile(new URL('options.json', path), 'utf8')) const result = await compile(input, { remarkPlugins: [[remarkMdxImages, options]], - jsx: true, - }); - const prettierConfig = await prettier.resolveConfig(expected.pathname); + jsx: true + }) + const prettierConfig = await prettier.resolveConfig(expected.pathname) const output = await prettier.format( String(result), - { ...prettierConfig, filepath: expected.pathname }!, - ); + { ...prettierConfig, filepath: expected.pathname }! + ) if (process.argv.includes('--write')) { - await writeFile(expected, output); + await writeFile(expected, output) } - assert.equal(output, await readFile(expected, 'utf8')); - }); + assert.equal(output, await readFile(expected, 'utf8')) + }) }