Merge branch 'next'

.github/workflows/bundlewatch.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 20.x
 
       - name: Update npm
         run: npm i -g npm@7

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x, 21.x]
     steps:
       - uses: actions/checkout@v3
 
@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x, 21.x]
 
     steps:
       - uses: actions/checkout@v3

__mocks__/.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": "@readme/eslint-config/testing"
+  "extends": "@readme/eslint-config/testing/jest"
 }

__tests__/.eslintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "@readme/eslint-config/testing",
+  "extends": "@readme/eslint-config/testing/jest",
   "rules": {
     "testing-library/no-container": "off",
     "testing-library/no-node-access": "off"

__tests__/astToPlainText.test.js

@@ -58,7 +58,7 @@ ${JSON.stringify(
     align: ['left', 'left', 'left'],
   },
   null,
-  2
+  2,
 )}
 [/block]
     `;

__tests__/browser/markdown.test.js

@@ -15,7 +15,7 @@ describe('visual regression tests', () => {
       'calloutTests',
       'codeBlocks',
       'embeds',
-      'features',
+      // 'features',
       'headings',
       'images',
       'lists',
@@ -31,13 +31,16 @@ describe('visual regression tests', () => {
       async doc => {
         const uri = `http://localhost:9966/?ci=true#${doc}`;
         await page.goto(uri, { waitUntil: 'networkidle0' });
+        await page.evaluate(() => {
+          window.scrollTo(0, window.document.body.scrollHeight);
+        });
         await sleep(500);
 
         const image = await page.screenshot({ fullPage: true });
 
         expect(image).toMatchImageSnapshot();
       },
-      10000
+      10000,
     );
 
     it('renders html blocks, style tags, and style attributes with safeMode off', async () => {

__tests__/components/Callout.test.jsx

@@ -10,7 +10,7 @@ describe('Callout', () => {
         <p>Title</p>
         <p>First Paragraph</p>
         <p>Second Paragraph</p>
-      </Callout>
+      </Callout>,
     );
 
     expect(screen.getByText('Second Paragraph')).toBeVisible();

__tests__/components/HTMLBlock.test.jsx

@@ -63,7 +63,7 @@ ${JSON.stringify({
     `;
 
     expect(renderToString(react(md, { safeMode: true }))).toMatchInlineSnapshot(
-      '"<pre class=\\"html-unsafe\\" data-reactroot=\\"\\"><code>&lt;button onload=&quot;alert(&#39;gotcha!&#39;)&quot;/&gt;</code></pre>"'
+      '"<pre class=\\"html-unsafe\\" data-reactroot=\\"\\"><code>&lt;button onload=&quot;alert(&#39;gotcha!&#39;)&quot;/&gt;</code></pre>"',
     );
   });
 });

__tests__/components/Style.test.jsx

@@ -8,7 +8,7 @@ describe('Style tag', () => {
       const md = '<style>{ background-color: salmon }</style>';
 
       expect(renderToString(react(md))).toMatchInlineSnapshot(
-        '"<style data-reactroot=\\"\\">{ background-color: salmon }</style>"'
+        '"<style data-reactroot=\\"\\">{ background-color: salmon }</style>"',
       );
     });
   });

__tests__/components/TableOfContents.test.jsx

@@ -21,7 +21,7 @@ describe('Table of Contents', () => {
     const { container } = render(
       <TableOfContents>
         <h1>Heading 1</h1>
-      </TableOfContents>
+      </TableOfContents>,
     );
 
     expect(container.querySelectorAll('li')[0]).toHaveTextContent('Table of Contents');
@@ -71,7 +71,7 @@ describe('Table of Contents', () => {
     const { container } = render(<GlossaryContext.Provider value={glossaryTerms}>{toc}</GlossaryContext.Provider>);
 
     expect(container.querySelector('li > a[href]:not([href="#"])')).toHaveTextContent(
-      `Heading ${glossaryTerms[0].term}`
+      `Heading ${glossaryTerms[0].term}`,
     );
   });
 });

__tests__/components/style-attributes.test.js

@@ -8,7 +8,7 @@ describe('style attributes', () => {
       const md = '<div style="background-color: salmon">fish content</div>';
 
       expect(renderToString(react(md))).toMatchInlineSnapshot(
-        '"<div style=\\"background-color:salmon\\" data-reactroot=\\"\\">fish content</div>"'
+        '"<div style=\\"background-color:salmon\\" data-reactroot=\\"\\">fish content</div>"',
       );
     });
   });
@@ -18,7 +18,7 @@ describe('style attributes', () => {
       const md = '<div style="background-color: salmon">fish content</div>';
 
       expect(renderToString(react(md, { safeMode: true }))).toMatchInlineSnapshot(
-        '"<div data-reactroot=\\"\\">fish content</div>"'
+        '"<div data-reactroot=\\"\\">fish content</div>"',
       );
     });
   });

__tests__/components/test.js

@@ -16,8 +16,8 @@ describe('Data Replacements', () => {
             user: { test: 'User Override' },
           },
         },
-        markdown.react('<<test>>')
-      )
+        markdown.react('<<test>>'),
+      ),
     );
     expect(container).toContainHTML('<p><span>User Override</span></p>');
   });
@@ -35,8 +35,8 @@ describe('Data Replacements', () => {
             },
           ],
         },
-        markdown.react('<<glossary:term>>')
-      )
+        markdown.react('<<glossary:term>>'),
+      ),
     );
     expect(container).toContainHTML('<p><span class="GlossaryItem-trigger">term</span></p>');
   });
@@ -216,7 +216,6 @@ ${JSON.stringify({
   let container;
   beforeEach(() => {
     rdmd = markdown.react(tabs, { compatibilityMode: true });
-    // eslint-disable-next-line testing-library/no-render-in-setup
     ({ container } = render(rdmd));
   });
 

__tests__/flavored-compilers.test.js

@@ -51,7 +51,7 @@ describe('ReadMe Flavored Blocks', () => {
 [block:html]
 {
   "html": ${JSON.stringify(
-    '<style>\n  summary {\n    padding-top: 8px;\n    outline: none !important;\n    user-select: none;\n  }\n  details[open] + details > summary {\n    padding-top: 0;\n  }\n  details > summary + hr {\n    opacity: .66;\n  }\n</style>'
+    '<style>\n  summary {\n    padding-top: 8px;\n    outline: none !important;\n    user-select: none;\n  }\n  details[open] + details > summary {\n    padding-top: 0;\n  }\n  details > summary + hr {\n    opacity: .66;\n  }\n</style>',
   )}
 }
 [/block]
@@ -229,7 +229,7 @@ ${JSON.stringify(
     link: 'http://test.com',
   },
   null,
-  2
+  2,
 )}
 [/block]
 

__tests__/flavored-compilers/reusable-content.test.js

@@ -30,13 +30,13 @@ describe('reusable content compiler', () => {
     expect(md(tree)).toMatch(doc);
   });
 
-  describe('writeTags = false', () => {
+  describe('serialize = false', () => {
     it('writes a reusable content block as content', () => {
       const tags = {
         Defined: '# Whoa',
       };
       const doc = '<Defined />';
-      const string = md(doc, { reusableContent: { tags, writeTags: false } });
+      const string = md(doc, { reusableContent: { tags, serialize: false } });
 
       expect(string).toBe('# Whoa\n');
     });

__tests__/flavored-compilers/tables.test.js

@@ -25,7 +25,7 @@ describe('table compiler', () => {
       `|  th 1  |  th 2  |
 | :----: | :----: |
 | cell 1 | cell 2 |
-`
+`,
     );
   });
 

__tests__/flavored-parsers/code-tabs.test.js

@@ -26,7 +26,7 @@ Second code block
     const ast = mdast(md);
 
     expect(ast.children[0].children[0]).toStrictEqual(
-      expect.objectContaining({ lang: 'javascript', meta: 'First Title' })
+      expect.objectContaining({ lang: 'javascript', meta: 'First Title' }),
     );
     expect(ast.children[0].children[1]).toStrictEqual(expect.objectContaining({ lang: 'text', meta: '' }));
   });

__tests__/flavored-parsers/tables.test.js

@@ -14,7 +14,7 @@ ${JSON.stringify(
     rows: 2,
   },
   null,
-  2
+  2,
 )}
 [/block]
     `;

__tests__/flavored-parsers/utils.test.js

@@ -33,7 +33,7 @@ describe('insertBlockTokenizerBefore', () => {
         name: 'test',
         before: 'oh no',
         tokenizer: () => {},
-      })
+      }),
     ).toThrow("The 'oh no' tokenizer does not exist!");
   });
 });
@@ -56,7 +56,7 @@ describe('insertInlineTokenizerBefore', () => {
         name: 'test',
         before: 'oh no',
         tokenizer: () => {},
-      })
+      }),
     ).toThrow("The 'oh no' tokenizer does not exist!");
   });
 });

__tests__/gemoji-parser.test.js

@@ -34,7 +34,7 @@ test('should output an image node for a known emoji', () => {
   };
 
   expect(unified().use(remarkParse).use(parser).data('settings', { position: false }).parse(markdown)).toStrictEqual(
-    ast
+    ast,
   );
 });
 
@@ -64,7 +64,7 @@ test('should output an <i> for a font awesome icon', () => {
   };
 
   expect(unified().use(remarkParse).use(parser).data('settings', { position: false }).parse(markdown)).toStrictEqual(
-    ast
+    ast,
   );
 });
 
@@ -82,6 +82,6 @@ test('should output nothing for unknown emojis', () => {
   };
 
   expect(unified().use(remarkParse).use(parser).data('settings', { position: false }).parse(markdown)).toStrictEqual(
-    ast
+    ast,
   );
 });