Merge branch 'next'

.eslintignore

@@ -1,3 +1,4 @@
 **/node_modules
 coverage
 dist
+example/index*

.github/workflows/ci.yml

@@ -8,6 +8,7 @@ jobs:
     strategy:
       matrix:
         node-version: [18.x, 20.x, 21.x]
+        react: [16, 17, 18]
     steps:
       - uses: actions/checkout@v3
 
@@ -22,6 +23,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install React <18 deps
+        if: matrix.react == '16' || matrix.react == '17'
+        run: npm i react@${{ matrix.react }} react-dom@${{ matrix.react }} @testing-library/react@12
+
       - name: Run tests
         run: npm test
 
@@ -31,7 +36,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 21.x]
+        node-version: [20.x]
+        react: [18]
 
     steps:
       - uses: actions/checkout@v3

Dockerfile

@@ -1,21 +1,17 @@
 ARG NODE_VERSION=18
-FROM node:${NODE_VERSION}-buster
+FROM node:${NODE_VERSION}-alpine3.18
 
 ARG NODE_VERSION
 ENV NODE_VERSION=$NODE_VERSION
 
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
-ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/google-chrome-stable
-
-RUN apt-get update && apt-get install -y \
-  curl \
-  gnupg \
-  fonts-noto-color-emoji \
-  && curl --location --silent https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
-  && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
-  && apt-get update \
-  && apt-get install google-chrome-stable -y --no-install-recommends \
-  && rm -rf /var/lib/apt/lists/*
+ENV PUPPETEER_EXECUTABLE_PATH /usr/bin/chromium-browser
+
+RUN apk update && apk add \
+  make \
+  font-noto-emoji \
+  font-roboto \
+  chromium
 
 RUN npm install -g npm@latest
 

Dockerfile.legacy

@@ -0,0 +1,40 @@
+ARG NODE_VERSION=18
+FROM node:${NODE_VERSION}-alpine3.18
+
+ARG NODE_VERSION
+ENV NODE_VERSION=$NODE_VERSION
+
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+ENV PUPPETEER_EXECUTABLE_PATH /usr/bin/chromium-browser
+
+ENV USE_LEGACY=true
+
+ARG REACT_VERSION
+ENV REACT_VERSION=$REACT_VERSION
+
+RUN apk update && apk add \
+  make \
+  font-noto-emoji \
+  font-roboto \
+  chromium
+
+RUN npm install -g npm@latest
+
+ENV DOCKER_WORKSPACE=/markdown
+WORKDIR ${DOCKER_WORKSPACE}
+
+COPY package.json package-lock.json ./
+RUN npm install
+
+RUN npm install react@${REACT_VERSION} react-dom@${REACT_VERSION} @testing-library/react@12
+
+COPY . ./
+
+RUN mkdir -p __tests__/browser/__image_snapshots__/__diff_output__
+
+RUN make emojis
+
+EXPOSE 9966
+
+CMD ["test.browser"]
+ENTRYPOINT ["npm", "run"]

Makefile

@@ -14,8 +14,13 @@ example/public/img/emojis: node_modules/@readme/emojis
 	mkdir -p example/public/img/emojis
 	cp node_modules/@readme/emojis/src/img/*.png example/public/img/emojis/
 
+ifeq ($(USE_LEGACY), true)
+dockerfile = -f Dockerfile.legacy
+endif
+
 build:
-	docker build --platform linux/amd64 -t markdown .
+	@echo USE_LEGACY=$(USE_LEGACY)
+	docker build --platform linux/amd64 -t markdown $(dockerfile) --build-arg REACT_VERSION=${REACT_VERSION} .
 
 # This lets us call `make run test.browser`. Make expects cmdline args
 # to be targets. So this creates noop targets out of args. Copied from

__tests__/components/HTMLBlock.test.jsx

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { renderToString } from 'react-dom/server';
 
 import createHTMLBlock from '../../components/HTMLBlock';
 import { react } from '../../index';
@@ -46,11 +45,9 @@ describe('HTML Block', () => {
     <h1>Hello World</h1>
     <script>mockFn()</script>
     `;
-    const elem = <HTMLBlock html={html} runScripts={true} />;
-    const view = renderToString(elem);
-    expect(elem.props.runScripts).toBe(true);
-    expect(view.indexOf('<script>')).toBeLessThan(0);
-    expect(view.indexOf('<h1>')).toBeGreaterThanOrEqual(0);
+    const { container } = render(<HTMLBlock html={html} runScripts={true} />);
+
+    expect(container.querySelector('script')).not.toBeInTheDocument();
   });
 
   it('renders the html in a `<pre>` tag if safeMode={true}', () => {
@@ -62,8 +59,8 @@ ${JSON.stringify({
 [/block]
     `;
 
-    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>"',
-    );
+    const { container } = render(react(md, { safeMode: true }));
+
+    expect(container.querySelector('pre > code').innerHTML).toBe('&lt;button onload="alert(\'gotcha!\')"/&gt;');
   });
 });

__tests__/components/Style.test.jsx

@@ -1,37 +1,34 @@
-const { renderToString } = require('react-dom/server');
+const { render } = require('@testing-library/react');
 
 const { react } = require('../../index');
 
 describe('Style tag', () => {
   describe('safeMode = false', () => {
     it('renders as a style tag', () => {
       const md = '<style>{ background-color: salmon }</style>';
+      const { container } = render(react(md));
 
-      expect(renderToString(react(md))).toMatchInlineSnapshot(
-        '"<style data-reactroot=\\"\\">{ background-color: salmon }</style>"',
-      );
+      expect(container.querySelector('style').innerHTML).toBe('{ background-color: salmon }');
     });
   });
 
   describe('safeMode = true', () => {
     it('renders the style in a `<pre>`', () => {
       const md = '<style>{ background-color: salmon }</style>';
+      const { container } = render(react(md, { safeMode: true }));
 
-      expect(renderToString(react(md, { safeMode: true }))).toMatchInlineSnapshot(`
-        "<pre data-reactroot=\\"\\"><code>&lt;style&gt;
-        { background-color: salmon }
-        &lt;/style&gt;</code></pre>"
-      `);
+      expect(container.querySelector('pre > code').innerHTML).toBe(
+        '&lt;style&gt;\n{ background-color: salmon }\n&lt;/style&gt;',
+      );
     });
 
     it('renders the style in a `<pre>` when attrs are present', () => {
       const md = '<style someAttr="muahaha">{ background-color: salmon }</style>';
+      const { container } = render(react(md, { safeMode: true }));
 
-      expect(renderToString(react(md, { safeMode: true }))).toMatchInlineSnapshot(`
-        "<pre data-reactroot=\\"\\"><code>&lt;style&gt;
-        { background-color: salmon }
-        &lt;/style&gt;</code></pre>"
-      `);
+      expect(container.querySelector('pre > code').innerHTML).toBe(
+        '&lt;style&gt;\n{ background-color: salmon }\n&lt;/style&gt;',
+      );
     });
   });
 });

__tests__/components/style-attributes.test.js

@@ -1,25 +1,23 @@
-const { renderToString } = require('react-dom/server');
+const { render } = require('@testing-library/react');
 
 const { react } = require('../../index');
 
 describe('style attributes', () => {
   describe('safeMode = false', () => {
     it('renders style attributes', () => {
       const md = '<div style="background-color: salmon">fish content</div>';
+      const { container } = render(react(md));
 
-      expect(renderToString(react(md))).toMatchInlineSnapshot(
-        '"<div style=\\"background-color:salmon\\" data-reactroot=\\"\\">fish content</div>"',
-      );
+      expect(container.querySelector('[style]')).toBeVisible();
     });
   });
 
   describe('safeMode = true', () => {
     it('does not render style attributes', () => {
       const md = '<div style="background-color: salmon">fish content</div>';
+      const { container } = render(react(md, { safeMode: true }));
 
-      expect(renderToString(react(md, { safeMode: true }))).toMatchInlineSnapshot(
-        '"<div data-reactroot=\\"\\">fish content</div>"',
-      );
+      expect(container.querySelector('[style]')).toBeNull();
     });
   });
 });

example/index.jsx

@@ -1,23 +1,7 @@
-/* eslint-disable import/no-import-module-exports */
 import React from 'react';
-import ReactDOM from 'react-dom';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { AppContainer } from 'react-hot-loader';
+import { createRoot } from 'react-dom/client';
 
 import Demo from './Demo';
 
-function render(Component) {
-  ReactDOM.render(
-    <AppContainer>
-      <Component />
-    </AppContainer>,
-    document.getElementById('rdmd-demo'),
-  );
-}
-
-render(Demo);
-
-// Webpack Hot Module Replacement API
-if (module.hot) {
-  module.hot.accept('./Demo', () => render(Demo));
-}
+const root = createRoot(document.getElementById('rdmd-demo'));
+root.render(<Demo />);

example/index.legacy.jsx

@@ -0,0 +1,7 @@
+/* eslint-disable import/no-import-module-exports */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Demo from './Demo';
+
+ReactDOM.render(<Demo />, document.getElementById('rdmd-demo'));