chore: lint

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
           '**/*.test.[tj]sx',
           '**/vitest.*.[tj]s',
           '**/webpack..*.js',
+          './example/**',
         ],
       },
     ],

__tests__/compilers/gemoji.test.ts

@@ -4,18 +4,18 @@ describe('gemoji compiler', () => {
   it('should compile back to a shortcode', () => {
     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:';
 
-    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:';
 
-    expect(mdx(mdast(markdown)).trimEnd()).toEqual(markdown);
+    expect(mdx(mdast(markdown)).trimEnd()).toStrictEqual(markdown);
   });
 });

__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__/custom-components/index.test.tsx

@@ -1,25 +1,32 @@
+import type { RMDXModule } from '../../types';
+
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { execute } from '../helpers';
 
-describe('Custom Components', async () => {
-  const Example = await execute('It works!', {}, {}, { getDefault: false });
-  const Multiple = await execute(
-    `
-export const First = () => <div>First</div>;
-export const Second = () => <div>Second</div>;
-`,
-    {},
-    {},
-    { getDefault: false },
-  );
+describe('Custom Components', () => {
+  let Example;
+  let Multiple;
+
+  beforeEach(async () => {
+    Example = await execute('It works!', {}, {}, { getDefault: false });
+    Multiple = await execute(
+      `
+  export const First = () => <div>First</div>;
+  export const Second = () => <div>Second</div>;
+  `,
+      {},
+      {},
+      { getDefault: false },
+    );
+  });
 
   it('renders custom components', async () => {
     const doc = `
 <Example />
     `;
-    const Page = await execute(doc, undefined, { components: { Example } });
+    const Page = (await execute(doc, undefined, { components: { Example } })) as RMDXModule['default'];
     render(<Page />);
 
     expect(screen.getByText('It works!')).toBeVisible();
@@ -31,7 +38,7 @@ export const Second = () => <div>Second</div>;
 
 <Second />
     `;
-    const Page = await execute(doc, undefined, { components: { Multiple } });
+    const Page = (await execute(doc, undefined, { components: { Multiple } })) as RMDXModule['default'];
     render(<Page />);
 
     expect(screen.getByText('First')).toBeVisible();

__tests__/helpers.ts

@@ -7,14 +7,16 @@ import { run, compile, migrate as baseMigrate } from '../index';
 export const silenceConsole =
   (prop: keyof Console = 'error', impl = () => {}) =>
   fn => {
-    let spy;
+    let spy: ReturnType<typeof vi.spyOn> | undefined;
 
     try {
-      spy = vi.spyOn(console, prop).mockImplementation(impl);
+      spy = vi.spyOn(console, prop);
+      // @ts-expect-error - spy is a spy
+      spy.mockImplementation(impl);
 
       return fn(spy);
     } finally {
-      spy.mockRestore();
+      spy?.mockRestore();
     }
   };
 

__tests__/index.test.js

@@ -1,7 +1,7 @@
-import { cleanup, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React, { createElement } from 'react';
 
-import { Provider } from '../contexts/BaseUrl';
+import BaseUrlContext from '../contexts/BaseUrl';
 import { run, compile, utils, html as _html, mdast, hast as _hast, plain, mdx, astToPlainText } from '../index';
 import { options } from '../options';
 import { tableFlattening } from '../processor/plugin/table-flattening';
@@ -133,7 +133,7 @@ test.skip('anchor target: should allow download if using HTML', () => {
 test.skip('anchors with baseUrl', () => {
   const { container } = render(
     createElement(
-      Provider,
+      BaseUrlContext.Provider,
       {
         value: '/child/v1.0',
       },
@@ -159,7 +159,7 @@ test.skip('anchors with baseUrl and special characters in url hash', () => {
 
 test.skip('emojis', () => {
   const { container } = render(
-    markdown(`
+    execute(`
 :joy:
 :fa-lock:
 :unknown-emoji:
@@ -172,7 +172,7 @@ test.skip('emojis', () => {
 describe.skip('code samples', () => {
   it('should codify code', () => {
     const { container } = render(
-      markdown(`
+      execute(`
   \`\`\`javascript
   var a = 1;
   \`\`\`
@@ -210,52 +210,6 @@ test.skip('should render nothing if nothing passed in', () => {
   expect(_html('')).toBeNull();
 });
 
-test.skip('`correctnewlines` option', () => {
-  let { container } = render(react('test\ntest\ntest', { correctnewlines: true }));
-  expect(container).toContainHTML('<p>test\ntest\ntest</p>');
-
-  cleanup();
-
-  ({ container } = render(react('test\ntest\ntest', { correctnewlines: false })));
-  expect(container).toContainHTML('<p>test<br>\ntest<br>\ntest</p>');
-});
-
-describe.skip('`alwaysThrow` option', () => {
-  it('should throw if `alwaysThrow` is true and magic block has invalid JSON', () => {
-    const shouldThrow = () =>
-      render(
-        markdown(
-          `[block:api-header]
-    {,
-      "title": "Uh-oh, I'm invalid",
-      "level": 2
-    }
-    [/block]`,
-          { alwaysThrow: true },
-        ),
-      );
-
-    expect(shouldThrow).toThrow('Invalid Magic Block JSON');
-  });
-
-  it('should not throw if `alwaysThrow` is true but magic block has valid JSON', () => {
-    const shouldThrow = () =>
-      render(
-        markdown(
-          `[block:api-header]
-    {
-      "title": "Ooh I'm valid 💅",
-      "level": 2
-    }
-    [/block]`,
-          { alwaysThrow: true },
-        ),
-      );
-
-    expect(() => shouldThrow()).not.toThrow('Invalid Magic Block JSON');
-  });
-});
-
 // TODO not sure if this needs to work or not?
 // Isn't it a good thing to always strip HTML?
 describe.skip('`stripHtml` option', () => {

__tests__/lib/hast.test.ts

@@ -20,7 +20,8 @@ describe('hast transformer', () => {
       h('h2', { id: 'its-coming-from-within-the-component' }, "It's coming from within the component!"),
     );
 
-    // @ts-ignore
+    // @ts-expect-error - the custom matcher types are not being set up
+    // correctly
     expect(hast(md, { components })).toStrictEqualExceptPosition(expected);
   });
 });

__tests__/lib/mdast/index.test.ts

@@ -1,47 +1,64 @@
 import { mdast } from '../../../lib';
 
+// @ts-expect-error - these are being imported as strings
 import esmMdx from './esm/in.mdx?raw';
+// @ts-expect-error - these are being imported as json
 import esmJson from './esm/out.json';
+// @ts-expect-error - these are being imported as strings
 import inlineImagesMdx from './images/inline/in.mdx?raw';
+// @ts-expect-error - these are being imported as json
 import inlineImagesJson from './images/inline/out.json';
+// @ts-expect-error - these are being imported as strings
 import nullAttributesMdx from './null-attributes/in.mdx?raw';
+// @ts-expect-error - these are being imported as json
 import nullAttributesJson from './null-attributes/out.json';
+// @ts-expect-error - these are being imported as strings
 import tablesMdx from './tables/in.mdx?raw';
+// @ts-expect-error - these are being imported as json
 import tablesJson from './tables/out.json';
+// @ts-expect-error - these are being imported as strings
 import variablesMdx from './variables/in.mdx?raw';
+// @ts-expect-error - these are being imported as json
 import variablesJson from './variables/out.json';
+// @ts-expect-error - these are being imported as strings
 import variablesWithSpacesMdx from './variables-with-spaces/in.mdx?raw';
+// @ts-expect-error - these are being imported as json
 import variablesWithSpacesJson from './variables-with-spaces/out.json';
 
-
-describe('mdast transformer', async () => {
+describe('mdast transformer', () => {
   it('parses null attributes', () => {
-    // @ts-ignore
+    // @ts-expect-error - the custom matcher types are not being set up
+    // correctly
     expect(mdast(nullAttributesMdx)).toStrictEqualExceptPosition(nullAttributesJson);
   });
 
   it('parses tables', () => {
-    // @ts-ignore
+    // @ts-expect-error - the custom matcher types are not being set up
+    // correctly
     expect(mdast(tablesMdx)).toStrictEqualExceptPosition(tablesJson);
   });
 
   it('parses variables', () => {
-    // @ts-ignore
+    // @ts-expect-error - the custom matcher types are not being set up
+    // correctly
     expect(mdast(variablesMdx)).toStrictEqualExceptPosition(variablesJson);
   });
 
   it('parses variables with spaces', () => {
-    // @ts-ignore
+    // @ts-expect-error - the custom matcher types are not being set up
+    // correctly
     expect(mdast(variablesWithSpacesMdx)).toStrictEqualExceptPosition(variablesWithSpacesJson);
   });
 
   it('parses inline images', () => {
-    // @ts-ignore
+    // @ts-expect-error - the custom matcher types are not being set up
+    // correctly
     expect(mdast(inlineImagesMdx)).toStrictEqualExceptPosition(inlineImagesJson);
   });
 
   it('parses esm (imports and exports)', () => {
-    // @ts-ignore
+    // @ts-expect-error - the custom matcher types are not being set up
+    // correctly
     expect(mdast(esmMdx)).toStrictEqualExceptPosition(esmJson);
   });
 });

__tests__/matchers.ts

@@ -1,11 +1,11 @@
-
 import type { ExpectationResult } from '@vitest/expect';
 import type { Root, Node } from 'mdast';
 
 import { map } from 'unist-util-map';
 
 import { expect } from 'vitest';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const removePosition = ({ position, ...node }: Node) => node;
 
 function toStrictEqualExceptPosition(received: Root, expected: Root): ExpectationResult {

__tests__/migration/html-blocks.test.ts

@@ -13,7 +13,7 @@ describe('migrating html blocks', () => {
     const mdx = migrate(md);
     expect(mdx).toMatchInlineSnapshot(`
       "<HTMLBlock>{\`
-      <a href="example.com">${'\\`example.com\\`'}</a>
+      <a href="example.com">\\\`example.com\\\`</a>
       \`}</HTMLBlock>
       "
     `);
@@ -31,7 +31,7 @@ describe('migrating html blocks', () => {
     const mdx = migrate(md);
     expect(mdx).toMatchInlineSnapshot(`
       "<HTMLBlock>{\`
-      <a href="example.com">${'\\`example.com\\`'}</a>
+      <a href="example.com">\\\`example.com\\\`</a>
       \`}</HTMLBlock>
       "
     `);

__tests__/transformers/embeds.test.ts

@@ -1,4 +1,3 @@
-
 import { mdast } from '../../index';
 
 describe('embeds transformer', () => {
@@ -11,5 +10,4 @@ describe('embeds transformer', () => {
     expect(tree.children[0].type).toBe('embed-block');
     expect(tree.children[0].data.hProperties.title).toBe('alt');
   });
-
 });

__tests__/transformers/tailwind.test.tsx

@@ -5,7 +5,7 @@ describe('tailwind transformer', () => {
     const testComponent = `
 export const Styled = () => <div className="bg-blue-500 text-white p-4">Hello, World!</div>;
     `;
-    const md = `<Styled />`;
+    const md = '<Styled />';
 
     const TestComponent = await run(await compile(testComponent));
     const { stylesheet } = await run(
@@ -44,6 +44,6 @@ export const stylesheet = ".test { color: red; }";
       },
     );
 
-    expect(stylesheet).toMatchInlineSnapshot(`".test { color: red; }"`);
+    expect(stylesheet).toMatchInlineSnapshot('".test { color: red; }"');
   });
 });

__tests__/transformers/variables.test.tsx

@@ -12,7 +12,7 @@ describe('variables transformer', () => {
         name: 'Test User',
       },
     };
-    const Content = await execute(mdx, { variables });
+    const Content = (await execute(mdx, { variables })) as () => React.ReactNode;
 
     render(<Content />);
 
@@ -26,7 +26,7 @@ describe('variables transformer', () => {
         name: 'Test User',
       },
     };
-    const Content = await execute(mdx, { variables });
+    const Content = (await execute(mdx, { variables })) as () => React.ReactNode;
 
     render(<Content />);
 
@@ -36,7 +36,7 @@ describe('variables transformer', () => {
   it('parses variables into the mdast', () => {
     const mdx = '{user.name}';
 
-    // @ts-ignore
+    // @ts-expect-error - custom matcher types aren't set up right
     expect(rmdx.mdast(mdx)).toStrictEqualExceptPosition({
       children: [
         {
@@ -57,7 +57,6 @@ describe('variables transformer', () => {
   it('does not parse regular expressions into variables', () => {
     const mdx = '{notUser.name}';
 
-    // @ts-ignore
     expect(rmdx.mdast(mdx).children[0].type).toBe('mdxFlowExpression');
   });
 });

components/Accordion/index.tsx

@@ -2,7 +2,9 @@ import React, { useState } from 'react';
 
 import './style.scss';
 
-const Accordion = ({ children, icon, iconColor, title }) => {
+interface Props extends React.PropsWithChildren<{ icon?: string; iconColor?: string; title: string }> {}
+
+const Accordion = ({ children, icon, iconColor, title }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -17,4 +19,5 @@ const Accordion = ({ children, icon, iconColor, title }) => {
   );
 };
 
-export default Accordion;
+export default Accordion;
+