Merge pull request #82 from ony3000/fix-markdown

Leave Prettier's output as is for code blocks embedded in markdown and mdx

src/packages/v2-plugin/parsers.ts

@@ -5,6 +5,8 @@ import { parsers as babelParsers } from 'prettier/parser-babel';
 import { parsers as htmlParsers } from 'prettier/parser-html';
 import { parsers as typescriptParsers } from 'prettier/parser-typescript';
 
+const EOL = '\n';
+
 const addon = {
   parseBabel: (text: string, options: ParserOptions) =>
     babelParsers.babel.parse(text, { babel: babelParsers.babel }, options),
@@ -25,6 +27,34 @@ function transformParser(
       parsers: { [parserName: string]: Parser },
       options: ParserOptions & ThisPluginOptions,
     ): FormattedTextAST => {
+      if (options.parentParser === 'markdown' || options.parentParser === 'mdx') {
+        let codeblockStart = '```';
+        const codeblockEnd = '```';
+
+        if (options.parser === 'babel') {
+          codeblockStart = '```jsx';
+        } else if (options.parser === 'typescript') {
+          codeblockStart = '```tsx';
+        }
+
+        const formattedCodeblock = format(`${codeblockStart}${EOL}${text}${EOL}${codeblockEnd}`, {
+          ...options,
+          plugins: [],
+          rangeEnd: Infinity,
+          endOfLine: 'lf',
+          parser: options.parentParser,
+          parentParser: undefined,
+        });
+        const formattedText = formattedCodeblock
+          .trim()
+          .slice(`${codeblockStart}${EOL}`.length, -`${EOL}${codeblockEnd}`.length);
+
+        return {
+          type: 'FormattedText',
+          body: formattedText,
+        };
+      }
+
       const plugins = options.plugins.filter((plugin) => typeof plugin !== 'string') as Plugin[];
 
       let languageImplementedPlugin: Plugin | undefined;

src/packages/v3-plugin/parsers.ts

@@ -5,6 +5,8 @@ import { parsers as babelParsers } from 'prettier/plugins/babel';
 import { parsers as htmlParsers } from 'prettier/plugins/html';
 import { parsers as typescriptParsers } from 'prettier/plugins/typescript';
 
+const EOL = '\n';
+
 const addon = {
   parseBabel: (text: string, options: ParserOptions) => babelParsers.babel.parse(text, options),
   parseTypescript: (text: string, options: ParserOptions) =>
@@ -23,6 +25,37 @@ function transformParser(
       text: string,
       options: ParserOptions & ThisPluginOptions,
     ): Promise<FormattedTextAST> => {
+      if (options.parentParser === 'markdown' || options.parentParser === 'mdx') {
+        let codeblockStart = '```';
+        const codeblockEnd = '```';
+
+        if (options.parser === 'babel') {
+          codeblockStart = '```jsx';
+        } else if (options.parser === 'typescript') {
+          codeblockStart = '```tsx';
+        }
+
+        const formattedCodeblock = await format(
+          `${codeblockStart}${EOL}${text}${EOL}${codeblockEnd}`,
+          {
+            ...options,
+            plugins: [],
+            rangeEnd: Infinity,
+            endOfLine: 'lf',
+            parser: options.parentParser,
+            parentParser: undefined,
+          },
+        );
+        const formattedText = formattedCodeblock
+          .trim()
+          .slice(`${codeblockStart}${EOL}`.length, -`${EOL}${codeblockEnd}`.length);
+
+        return {
+          type: 'FormattedText',
+          body: formattedText,
+        };
+      }
+
       const plugins = options.plugins.filter((plugin) => typeof plugin !== 'string') as Plugin[];
 
       let languageImplementedPlugin: Plugin | undefined;

tests/v2-test/markdown/issue-80/__snapshots__/absolute.test.ts.snap

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'(1) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+<div />
+\`\`\`
+"
+`;
+
+exports[`'(2) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+import foo from "foo";
+
+<div />;
+\`\`\`
+"
+`;
+
+exports[`'(3) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+"
+`;
+
+exports[`'(4) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+<div />
+\`\`\`
+"
+`;
+
+exports[`'(5) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+import foo from "foo";
+
+<div />;
+\`\`\`
+"
+`;
+
+exports[`'(6) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+"
+`;

tests/v2-test/markdown/issue-80/__snapshots__/ideal.test.ts.snap

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'(1) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+<div />
+\`\`\`
+"
+`;
+
+exports[`'(2) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+import foo from "foo";
+
+<div />;
+\`\`\`
+"
+`;
+
+exports[`'(3) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+"
+`;
+
+exports[`'(4) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+<div />
+\`\`\`
+"
+`;
+
+exports[`'(5) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+import foo from "foo";
+
+<div />;
+\`\`\`
+"
+`;
+
+exports[`'(6) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+"
+`;

tests/v2-test/markdown/issue-80/__snapshots__/relative.test.ts.snap

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`'(1) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+<div />
+\`\`\`
+"
+`;
+
+exports[`'(2) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+import foo from "foo";
+
+<div />;
+\`\`\`
+"
+`;
+
+exports[`'(3) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`jsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+"
+`;
+
+exports[`'(4) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+<div />
+\`\`\`
+"
+`;
+
+exports[`'(5) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+import foo from "foo";
+
+<div />;
+\`\`\`
+"
+`;
+
+exports[`'(6) This plugin doesn\\'t support markdown parser, so it leaves Prettier\\'s output as is.' > expectation 1`] = `
+"\`\`\`tsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+"
+`;

tests/v2-test/markdown/issue-80/absolute.test.ts

@@ -0,0 +1,13 @@
+import { baseOptions } from 'test-settings';
+
+import { thisPlugin, testSnapshotEach } from '../../adaptor';
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: [thisPlugin],
+  parser: 'markdown',
+  endingPosition: 'absolute',
+};
+
+testSnapshotEach(fixtures, options);

tests/v2-test/markdown/issue-80/fixtures.ts

@@ -0,0 +1,78 @@
+import type { Fixture } from 'test-settings';
+
+export const fixtures: Omit<Fixture, 'output'>[] = [
+  {
+    name: "(1) This plugin doesn't support markdown parser, so it leaves Prettier's output as is.",
+    input: `
+\`\`\`jsx
+<div />;
+\`\`\`
+`,
+    options: {},
+  },
+  {
+    name: "(2) This plugin doesn't support markdown parser, so it leaves Prettier's output as is.",
+    input: `
+\`\`\`jsx
+import foo from 'foo'
+
+<div />
+\`\`\`
+`,
+    options: {},
+  },
+  {
+    name: "(3) This plugin doesn't support markdown parser, so it leaves Prettier's output as is.",
+    input: `
+\`\`\`jsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+`,
+    options: {
+      printWidth: 60,
+    },
+  },
+  {
+    name: "(4) This plugin doesn't support markdown parser, so it leaves Prettier's output as is.",
+    input: `
+\`\`\`tsx
+<div />;
+\`\`\`
+`,
+    options: {},
+  },
+  {
+    name: "(5) This plugin doesn't support markdown parser, so it leaves Prettier's output as is.",
+    input: `
+\`\`\`tsx
+import foo from 'foo'
+
+<div />
+\`\`\`
+`,
+    options: {},
+  },
+  {
+    name: "(6) This plugin doesn't support markdown parser, so it leaves Prettier's output as is.",
+    input: `
+\`\`\`tsx
+export function Foo({ children }) {
+  return (
+    <div className="lorem ipsum dolor sit amet consectetur adipiscing elit proin ex massa hendrerit eu posuere eu volutpat id neque pellentesque">
+      {children}
+    </div>
+  );
+}
+\`\`\`
+`,
+    options: {
+      printWidth: 60,
+    },
+  },
+];

tests/v2-test/markdown/issue-80/ideal.test.ts

@@ -0,0 +1,13 @@
+import { baseOptions } from 'test-settings';
+
+import { thisPlugin, testSnapshotEach } from '../../adaptor';
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: [thisPlugin],
+  parser: 'markdown',
+  endingPosition: 'absolute-with-indent',
+};
+
+testSnapshotEach(fixtures, options);

tests/v2-test/markdown/issue-80/relative.test.ts

@@ -0,0 +1,13 @@
+import { baseOptions } from 'test-settings';
+
+import { thisPlugin, testSnapshotEach } from '../../adaptor';
+import { fixtures } from './fixtures';
+
+const options = {
+  ...baseOptions,
+  plugins: [thisPlugin],
+  parser: 'markdown',
+  endingPosition: 'relative',
+};
+
+testSnapshotEach(fixtures, options);