dry run prettier

beta/plugins/remark-header-custom-ids.js

@@ -36,27 +36,27 @@ module.exports = ({
       // A bit weird: this is to support MDX 2 comments in expressions,
       // while we’re still on MDX 1, which doesn’t support them.
       if (!tail || tail.type !== 'text' || tail.value !== '/}') {
-        return
+        return;
       }
 
-      tail = children[children.length - 2]
+      tail = children[children.length - 2];
 
       if (!tail && tail.type !== 'emphasis') {
-        return
+        return;
       }
 
-      const id = toString(tail)
+      const id = toString(tail);
 
-      tail = children[children.length - 3]
+      tail = children[children.length - 3];
 
       if (!tail || tail.type !== 'text' || !tail.value.endsWith('{/')) {
-        return
+        return;
       }
 
       // Remove the emphasis and trailing `/}`
-      children.splice(children.length - 2, 2)
+      children.splice(children.length - 2, 2);
       // Remove the `{/`
-      tail.value = tail.value.replace(/[ \t]*\{\/$/, '')
+      tail.value = tail.value.replace(/[ \t]*\{\/$/, '');
 
       const data = patch(node, 'data', {});
 

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -21,98 +21,93 @@ interface InlineHiglight {
   endColumn: number;
 }
 
-const CodeBlock = React.forwardRef(function CodeBlock
-  (
-    {
-      children,
-      className = 'language-js',
-      metastring,
-      noMargin,
-      noMarkers,
-    }: {
-      children: string;
-      className?: string;
-      metastring: string;
-      noMargin?: boolean;
-      noMarkers?: boolean;
-    },
-    ref?: React.Ref<HTMLDivElement>
-  ) {
-    const getDecoratedLineInfo = () => {
-      if (!metastring) {
-        return [];
-      }
+const CodeBlock = React.forwardRef(function CodeBlock(
+  {
+    children,
+    className = 'language-js',
+    metastring,
+    noMargin,
+    noMarkers,
+  }: {
+    children: string;
+    className?: string;
+    metastring: string;
+    noMargin?: boolean;
+    noMarkers?: boolean;
+  },
+  ref?: React.Ref<HTMLDivElement>
+) {
+  const getDecoratedLineInfo = () => {
+    if (!metastring) {
+      return [];
+    }
 
-      const linesToHighlight = getHighlightLines(metastring);
-      const highlightedLineConfig = linesToHighlight.map((line) => {
-        return {
-          className: 'bg-github-highlight dark:bg-opacity-10',
-          line,
-        };
-      });
+    const linesToHighlight = getHighlightLines(metastring);
+    const highlightedLineConfig = linesToHighlight.map((line) => {
+      return {
+        className: 'bg-github-highlight dark:bg-opacity-10',
+        line,
+      };
+    });
 
-      const inlineHighlightLines = getInlineHighlights(metastring, children);
-      const inlineHighlightConfig = inlineHighlightLines.map(
-        (line: InlineHiglight) => ({
-          ...line,
-          elementAttributes: {'data-step': `${line.step}`},
-          className: cn(
-            'code-step bg-opacity-10 relative rounded-md p-1 ml-2',
-            {
-              'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4':
-                !noMarkers,
-              'bg-blue-40 before:bg-blue-40': line.step === 1,
-              'bg-yellow-40 before:bg-yellow-40': line.step === 2,
-              'bg-green-40 before:bg-green-40': line.step === 3,
-              'bg-purple-40 before:bg-purple-40': line.step === 4,
-            }
-          ),
-        })
-      );
-
-      return highlightedLineConfig.concat(inlineHighlightConfig);
-    };
-
-    // e.g. "language-js"
-    const language = className.substring(9);
-    const filename = '/index.' + language;
-    const decorators = getDecoratedLineInfo();
-    return (
-      <div
-        translate="no"
-        className={cn(
-          'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
-          !noMargin && 'my-8'
-        )}
-      >
-        <SandpackProvider
-          customSetup={{
-            entry: filename,
-            files: {
-              [filename]: {
-                code: children.trimEnd(),
-              },
-            },
-          }}
-        >
-          <SandpackThemeProvider theme={CustomTheme}>
-            <ClasserProvider
-              classes={{
-                'sp-cm': styles.codeViewer,
-              }}
-            >
-              <SandpackCodeViewer
-                ref={ref}
-                showLineNumbers={false}
-                decorators={decorators}
-              />
-            </ClasserProvider>
-          </SandpackThemeProvider>
-        </SandpackProvider>
-      </div>
+    const inlineHighlightLines = getInlineHighlights(metastring, children);
+    const inlineHighlightConfig = inlineHighlightLines.map(
+      (line: InlineHiglight) => ({
+        ...line,
+        elementAttributes: {'data-step': `${line.step}`},
+        className: cn('code-step bg-opacity-10 relative rounded-md p-1 ml-2', {
+          'pl-3 before:content-[attr(data-step)] before:block before:w-4 before:h-4 before:absolute before:top-1 before:-left-2 before:rounded-full before:text-white before:text-center before:text-xs before:leading-4':
+            !noMarkers,
+          'bg-blue-40 before:bg-blue-40': line.step === 1,
+          'bg-yellow-40 before:bg-yellow-40': line.step === 2,
+          'bg-green-40 before:bg-green-40': line.step === 3,
+          'bg-purple-40 before:bg-purple-40': line.step === 4,
+        }),
+      })
     );
-  }
-);
+
+    return highlightedLineConfig.concat(inlineHighlightConfig);
+  };
+
+  // e.g. "language-js"
+  const language = className.substring(9);
+  const filename = '/index.' + language;
+  const decorators = getDecoratedLineInfo();
+  return (
+    <div
+      translate="no"
+      className={cn(
+        'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
+        !noMargin && 'my-8'
+      )}
+    >
+      <SandpackProvider
+        customSetup={{
+          entry: filename,
+          files: {
+            [filename]: {
+              code: children.trimEnd(),
+            },
+          },
+        }}
+      >
+        <SandpackThemeProvider theme={CustomTheme}>
+          <ClasserProvider
+            classes={{
+              'sp-cm': styles.codeViewer,
+            }}
+          >
+            <SandpackCodeViewer
+              ref={ref}
+              showLineNumbers={false}
+              decorators={decorators}
+            />
+          </ClasserProvider>
+        </SandpackThemeProvider>
+      </SandpackProvider>
+    </div>
+  );
+});
 
 export default CodeBlock;
 

beta/src/components/MDX/MDXComponents.tsx

@@ -244,7 +244,9 @@ function IllustrationBlock({
       {sequential ? (
         <ol className="mdx-illustration-block flex">
           {images.map((x: any, i: number) => (
-            <li className="flex-1" key={i}>{x}</li>
+            <li className="flex-1" key={i}>
+              {x}
+            </li>
           ))}
         </ol>
       ) : (