refactor: eslint (#1053)

| [![PR App][icn]][demo] | Fix RM-11916 |
| :--------------------: | :----------: |

## 🧰 Changes

Gets eslint working in the repo again.

There's some code changes, but hopefully the behavior is the same. I've
also moved test only docs from `./docs/` to `./__tests/fixtures/` to
make it clearer.

## TODO

There's still a ton of old tests that need to either be updated or
removed.

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: ['@readme/eslint-config', '@readme/eslint-config/react', '@readme/eslint-config/typescript'],
+  root: true,
+  rules: {
+    '@typescript-eslint/no-var-requires': 'off',
+    'import/extensions': 'off',
+    'import/no-extraneous-dependencies': [
+      'warn',
+      {
+        devDependencies: [
+          '**/*.spec.[tj]s',
+          '**/*.test.[tj]s',
+          '**/*.test.[tj]sx',
+          '**/vitest.*.[tj]s',
+          '**/webpack..*.js',
+          './example/**',
+        ],
+      },
+    ],
+  },
+};

__tests__/__snapshots__/index.test.js.snap

@@ -335,7 +335,7 @@ exports[`export multiple Markdown renderers > renders plain markdown as React 1`
 
 exports[`heading 1`] = `"<h2 class=\\"heading heading-2 header-scroll\\" align=\\"\\"><div class=\\"heading-anchor anchor waypoint\\" id=\\"example-header\\"></div><div class=\\"heading-text\\"><div id=\\"section-example-header\\" class=\\"heading-anchor_backwardsCompatibility\\"></div>Example Header</div><a aria-label=\\"Skip link to Example Header\\" class=\\"heading-anchor-icon fa fa-anchor\\" href=\\"#example-header\\"></a></h2>"`;
 
-exports[`image 1`] = `"<span aria-label="Expand image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="http://example.com/image.png" width="auto" height="auto" title="" class="img  " alt="Image" loading="lazy"></span></span>"`;
+exports[`image 1`] = `"<span aria-label="Expand image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img alt="Image" class="img  " height="auto" loading="lazy" src="http://example.com/image.png" title="" width="auto"></span></span>"`;
 
 exports[`list items 1`] = `
 "<ul>

__tests__/browser/markdown.test.js

@@ -16,13 +16,13 @@ describe('visual regression tests', () => {
       'codeBlocks',
       // skipping this because they sporadically failure with network timing
       // issues
-      //'embeds',
+      // 'embeds',
       'exportTests',
-      //'features',
+      // 'features',
       'headings',
       'images',
       'imageTests',
-      //'lists',
+      // 'lists',
       'mdxComponents',
       // 'mermaid',
       'tables',

__tests__/compilers.test.ts

@@ -8,20 +8,6 @@ describe('ReadMe Flavored Blocks', () => {
     expect(out).toMatchSnapshot();
   });
 
-  it.skip('Variables', () => {
-    expect(mdx(mdast('<<variable:user>>'))).toMatchInlineSnapshot(`
-      "<<variable:user>>
-      "
-    `);
-  });
-
-  it.skip('Glossary Items', () => {
-    expect(mdx(mdast('<<glossary:owl>>'))).toMatchInlineSnapshot(`
-      "<<glossary:owl>>
-      "
-    `);
-  });
-
   it('Emojis', () => {
     expect(mdx(mdast(':smiley:'))).toMatchInlineSnapshot(`
       ":smiley:

__tests__/compilers/compatability.test.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
 import fs from 'node:fs';
-import { vi } from 'vitest';
+
 import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { vi } from 'vitest';
+
 
 import { mdx, compile, run } from '../../index';
 import { migrate } from '../helpers';
@@ -199,9 +202,9 @@ This is an image: <img src="http://example.com/#\\>" >
   });
 
   it('compiles user variables', () => {
-    const md = `Contact me at <<email>>`;
+    const md = 'Contact me at <<email>>';
 
-    expect(migrate(md)).toBe(`Contact me at {user.email}\n`);
+    expect(migrate(md)).toBe('Contact me at {user.email}\n');
   });
 
   describe('<HTMLBlock> wrapping', () => {
@@ -245,7 +248,7 @@ This is an image: <img src="http://example.com/#\\>" >
           <Component />
         </div>,
       );
-      expect(screen.queryByTestId('script-tag')).toBe(null);
+      expect(screen.queryByTestId('script-tag')).toBeNull();
     });
 
     it('should never execute <script> tags', async () => {
@@ -320,7 +323,7 @@ This is an image: <img src="http://example.com/#\\>" >
   });
 
   it('trims whitespace surrounding phrasing content (emphasis, strong, etc)', () => {
-    const md = `** bold ** and _ italic _ and ***   bold italic ***`;
+    const md = '** bold ** and _ italic _ and ***   bold italic ***';
 
     const rmdx = migrate(md);
     expect(rmdx).toMatchInlineSnapshot(`
@@ -486,7 +489,7 @@ ${JSON.stringify(
   });
 
   it('compiles inline html', () => {
-    const md = `Inline html: <small>_string_</small>`;
+    const md = 'Inline html: <small>_string_</small>';
 
     const rmdx = migrate(md);
     expect(rmdx).toMatchInlineSnapshot(`
@@ -496,7 +499,7 @@ ${JSON.stringify(
   });
 
   it('compiles tag-like syntax', () => {
-    const md = `Inline: <what even is this>`;
+    const md = 'Inline: <what even is this>';
 
     const rmdx = migrate(md);
     expect(rmdx).toMatchInlineSnapshot(`

__tests__/compilers/gemoji.test.ts

@@ -2,20 +2,20 @@ import { mdast, mdx } from '../../index';
 
 describe('gemoji compiler', () => {
   it('should compile back to a shortcode', () => {
-    const markdown = `This is a gemoji :joy:.`;
+    const markdown = 'This is a gemoji :joy:.';
 
-    expect(mdx(mdast(markdown)).trimEnd()).toEqual(markdown);
+    expect(mdx(mdast(markdown)).trimEnd()).toStrictEqual(markdown);
   });
 
   it('should compile owlmoji back to a shortcode', () => {
-    const markdown = `:owlbert:`;
+    const markdown = ':owlbert:';
 
-    expect(mdx(mdast(markdown)).trimEnd()).toEqual(markdown);
+    expect(mdx(mdast(markdown)).trimEnd()).toStrictEqual(markdown);
   });
 
   it('should compile font-awsome emojis back to a shortcode', () => {
-    const markdown = `:fa-readme:`;
+    const markdown = ':fa-readme:';
 
-    expect(mdx(mdast(markdown)).trimEnd()).toEqual(markdown);
+    expect(mdx(mdast(markdown)).trimEnd()).toStrictEqual(markdown);
   });
 });

__tests__/compilers/html-block.test.ts

@@ -32,7 +32,7 @@ const foo = () => {
   });
 
   it('adds newlines for readability', () => {
-    const markdown = `<HTMLBlock>{\`<p><strong">Hello</strong>, World!</p>\`}</HTMLBlock>`;
+    const markdown = '<HTMLBlock>{`<p><strong">Hello</strong>, World!</p>`}</HTMLBlock>';
     const expected = `<HTMLBlock>{\`
 <p><strong">Hello</strong>, World!</p>
 \`}</HTMLBlock>`;

__tests__/compilers/reusable-content.test.js

@@ -36,7 +36,7 @@ describe.skip('reusable content compiler', () => {
         Defined: '# Whoa',
       };
       const doc = '<Defined />';
-      const string = md(doc, { reusableContent: { tags, serialize: false } });
+      const string = mdx(doc, { reusableContent: { tags, serialize: false } });
 
       expect(string).toBe('# Whoa\n');
     });

__tests__/compilers/tables.test.js

@@ -1,6 +1,7 @@
-import { mdast, mdx } from '../../index';
 import { visit, EXIT } from 'unist-util-visit';
 
+import { mdast, mdx } from '../../index';
+
 describe('table compiler', () => {
   it('writes to markdown syntax', () => {
     const markdown = `

__tests__/compilers/variable.test.ts

@@ -15,7 +15,7 @@ describe('variable compiler', () => {
   });
 
   it('with spaces in a variable, it compiles back to the original', () => {
-    const mdx = `{user["oh no"]}`;
+    const mdx = '{user["oh no"]}';
     const tree = rmdx.mdast(mdx);
 
     expect(rmdx.mdx(tree).trim()).toStrictEqual(mdx.trim());

__tests__/components/Callout.test.tsx

@@ -6,7 +6,7 @@ import Callout from '../../components/Callout';
 describe('Callout', () => {
   it('render _all_ its children', () => {
     render(
-      <Callout title="Title" icon="icon" theme="theme">
+      <Callout icon="icon" theme="theme" title="Title">
         <p>Title</p>
         <p>First Paragraph</p>
         <p>Second Paragraph</p>
@@ -18,7 +18,7 @@ describe('Callout', () => {
 
   it("doesn't render all its children if it's **empty**", () => {
     render(
-      <Callout icon="icon" theme="theme" empty>
+      <Callout empty icon="icon" theme="theme">
         <p>Title</p>
         <p>First Paragraph</p>
         <p>Second Paragraph</p>

__tests__/components/Code.test.tsx

@@ -1,10 +1,11 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import copy from 'copy-to-clipboard';
 import React from 'react';
+
 import { vi } from 'vitest';
 
 import Code from '../../components/Code';
 
-import { fireEvent, render, screen } from '@testing-library/react';
-import copy from 'copy-to-clipboard';
 
 const codeProps = {
   copyButtons: true,

__tests__/components/CodeTabs.test.tsx

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
+
 import { execute } from '../helpers';
 
 describe('CodeTabs', () => {
@@ -15,7 +16,7 @@ assert('theme', 'light');
     const Component = await execute(md);
     const { container } = render(<Component />);
 
-    expect(container).toHaveTextContent(`assert('theme', 'dark')`);
-    expect(container).toHaveTextContent(`assert('theme', 'light')`);
+    expect(container).toHaveTextContent('assert(\'theme\', \'dark\')');
+    expect(container).toHaveTextContent('assert(\'theme\', \'light\')');
   });
 });

__tests__/components/Glossary.test.tsx

@@ -5,7 +5,7 @@ import { execute } from '../helpers';
 
 describe('Glossary', () => {
   it('renders a glossary item', async () => {
-    const md = `<Glossary>parliament</Glossary>`;
+    const md = '<Glossary>parliament</Glossary>';
     const Content = await execute(md);
     render(<Content />);
 

__tests__/components/HTMLBlock.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, cleanup } from '@testing-library/react';
 import React from 'react';
 import { renderToStaticMarkup, renderToString } from 'react-dom/server';
+
 import { vi } from 'vitest';
 
 import HTMLBlock from '../../components/HTMLBlock';
@@ -17,27 +18,27 @@ describe('HTML Block', () => {
   });
 
   it('runs user scripts in compat mode', () => {
-    render(<HTMLBlock runScripts={true}>{`<script>mockFn()</script>`}</HTMLBlock>);
+    render(<HTMLBlock runScripts={true}>{'<script>mockFn()</script>'}</HTMLBlock>);
     expect(global.mockFn).toHaveBeenCalledTimes(1);
   });
 
   it("doesn't run user scripts by default", () => {
-    render(<HTMLBlock>{`<script>mockFn()</script>`}</HTMLBlock>);
+    render(<HTMLBlock>{'<script>mockFn()</script>'}</HTMLBlock>);
     expect(global.mockFn).toHaveBeenCalledTimes(0);
   });
 
   it("doesn't render user scripts by default", () => {
-    render(<HTMLBlock>{`<script>mockFn()</script>`}</HTMLBlock>);
+    render(<HTMLBlock>{'<script>mockFn()</script>'}</HTMLBlock>);
     expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
   });
 
   it("doesn't render user scripts with weird endings", () => {
-    render(<HTMLBlock>{`<script>mockFn()</script foo='bar'>`}</HTMLBlock>);
+    render(<HTMLBlock>{'<script>mockFn()</script foo=\'bar\'>'}</HTMLBlock>);
     expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
   });
 
   it("doesn't render user scripts with a malicious string", () => {
-    render(<HTMLBlock>{`<scrip<script></script>t>mockFn()</s<script></script>cript>`}</HTMLBlock>);
+    render(<HTMLBlock>{'<scrip<script></script>t>mockFn()</s<script></script>cript>'}</HTMLBlock>);
     expect(screen.queryByText('mockFn()')).not.toBeInTheDocument();
   });
 

__tests__/components/Variable.test.tsx

@@ -1,10 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+
 import { execute } from '../helpers';
 
 describe('Variable', () => {
   it('render a variable', async () => {
-    const md = `<Variable variable="name" />`;
+    const md = '<Variable variable="name" />';
     const Content = await execute(md);
 
     render(<Content />);

__tests__/components/__snapshots__/index.test.ts.snap

@@ -10,4 +10,4 @@ exports[`Components > Embed 3`] = `"<div class="embed embed_hasImg"><a class="em
 
 exports[`Components > Embed 4`] = `"<div class="embed "><a class="embed-link" href="https://www.nytimes.com/2020/05/03/us/politics/george-w-bush-coronavirus-unity.html" rel="noopener noreferrer" target="_blank"><div class="embed-body"><small class="embed-provider">nytimes.com</small><div class="embed-title">rdmd</div></div></a></div>"`;
 
-exports[`Components > Image 1`] = `"<span aria-label="Expand image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" width="auto" height="auto" title="Pizza Face" class="img  " alt="Bro eats pizza and makes an OK gesture." loading="lazy"></span></span>"`;
+exports[`Components > Image 1`] = `"<span aria-label="Expand image" class="img lightbox closed" role="button" tabindex="0"><span class="lightbox-inner"><img alt="Bro eats pizza and makes an OK gesture." class="img  " height="auto" loading="lazy" src="https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg" title="Pizza Face" width="auto"></span></span>"`;

__tests__/components/index.test.ts

@@ -31,7 +31,7 @@ describe('Components', () => {
     ({ container } = render(React.createElement(component)));
 
     expect(container.innerHTML).toMatchInlineSnapshot(
-      `"<blockquote class="callout callout_warn" theme="🚧"><h3 class="callout-heading empty"><span class="callout-icon">🚧</span></h3><p>Callout with no title.</p></blockquote>"`,
+      '"<blockquote class="callout callout_warn" theme="🚧"><h3 class="callout-heading empty"><span class="callout-icon">🚧</span></h3><p>Callout with no title.</p></blockquote>"',
     );
 
     cleanup();