Drop support for React versions less than 16

Author: quantizor

.changeset/remove-react-16-compat.md

@@ -0,0 +1,9 @@
+---
+'markdown-to-jsx': major
+---
+
+Drop support for React versions less than 16
+
+- Update peer dependency requirement from `>= 0.14.0` to `>= 16.0.0`
+- Remove legacy code that wrapped string children in `<span>` elements for React < 16 compatibility
+- Directly return single children and null without wrapper elements

package.json

@@ -104,7 +104,7 @@
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "react": ">= 0.14.0"
+    "react": ">= 16.0.0"
   },
   "peerDependenciesMeta": {
     "react": {

src/index.compiler.spec.tsx

@@ -35,7 +35,7 @@ it('should throw if not passed a string (first arg)', () => {
 it('should handle a basic string', () => {
   render(compiler('Hello.'))
 
-  expect(root.innerHTML).toBe('<span>Hello.</span>')
+  expect(root.innerHTML).toBe('Hello.')
 })
 
 it('wraps multiple block element returns in a div to avoid invalid nesting errors', () => {
@@ -468,21 +468,15 @@ describe('inline textual elements', () => {
   it('should handle escaped text', () => {
     render(compiler('Hello.\\_\\_foo\\_\\_'))
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        Hello.__foo__
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"Hello.__foo__"`)
   })
 
   it('regression test for #188, mismatched syntaxes triggered the wrong result', () => {
     render(compiler('*This should render as normal text, not emphasized._'))
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        *This should render as normal text, not emphasized._
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(
+      `"*This should render as normal text, not emphasized._"`
+    )
   })
 
   it('ignore similar syntax inside inline syntax', () => {
@@ -582,11 +576,7 @@ describe('inline textual elements', () => {
   it('replaces common HTML character codes with unicode equivalents so React will render correctly', () => {
     render(compiler('Foo &nbsp; bar&amp;baz.'))
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        Foo   bar&amp;baz.
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"Foo   bar&amp;baz."`)
   })
 
   it('replaces custom named character codes with unicode equivalents so React will render correctly', () => {
@@ -599,11 +589,9 @@ describe('inline textual elements', () => {
       })
     )
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        Apostrophe&#x27;s and ≤ equal
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(
+      `"Apostrophe&#x27;s and ≤ equal"`
+    )
   })
 })
 
@@ -1308,11 +1296,7 @@ describe('links', () => {
   it('should not link bare URL if disabled via options', () => {
     render(compiler('https://google.com', { disableAutoLink: true }))
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        https://google.com
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"https://google.com"`)
   })
 
   it('should not sanitize markdown when explicitly disabled', () => {
@@ -3478,11 +3462,7 @@ comment -->`)
   it('#180 handles invalid character error with angle brackets', () => {
     render(compiler('1<2 or 2>1'))
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        1&lt;2 or 2&gt;1
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"1&lt;2 or 2&gt;1"`)
   })
 
   it('#181 handling of figure blocks', () => {
@@ -3754,11 +3734,9 @@ comment -->`)
         disableParsingRawHTML: true,
       })
     )
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        Text with &lt;span&gt;html&lt;/span&gt; inside
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(
+      `"Text with &lt;span&gt;html&lt;/span&gt; inside"`
+    )
   })
 
   it('should render html if disableParsingRawHTML is false', () => {
@@ -4626,11 +4604,9 @@ describe('options.namedCodesToUnicode', () => {
 
   it('should replace special HTML characters', () => {
     render(compiler(content, { namedCodesToUnicode }))
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        Æ,Á,Â,À,Å,Ã,Ä,Ç,É,Ê,È,Ë,Í,Î,Ì,Ï,Ñ,Ó,Ô,Ò,Ø,Õ,Ö,Ú,Û,Ù,Ü,Ý,á,â,æ,à,å,ã,ä,ç,©,é,ê,è,ë,≥,í,î,ì,ï,«,≤, ,ñ,ó,ô,ò,ø,õ,ö,§,&quot;,»,ß,ú,û,ù,ü,ý
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(
+      `"Æ,Á,Â,À,Å,Ã,Ä,Ç,É,Ê,È,Ë,Í,Î,Ì,Ï,Ñ,Ó,Ô,Ò,Ø,Õ,Ö,Ú,Û,Ù,Ü,Ý,á,â,æ,à,å,ã,ä,ç,©,é,ê,è,ë,≥,í,î,ì,ï,«,≤, ,ñ,ó,ô,ò,ø,õ,ö,§,&quot;,»,ß,ú,û,ù,ü,ý"`
+    )
   })
 })
 
@@ -4658,23 +4634,15 @@ describe('options.forceInline', () => {
   it('treats given markdown as inline-context, passing through any block-level markdown syntax', () => {
     render(compiler('# You got it babe!', { forceInline: true }))
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        # You got it babe!
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"# You got it babe!"`)
   })
 })
 
 describe('options.wrapper', () => {
   it('is ignored when there is a single child', () => {
     render(compiler('Hello, world!', { wrapper: 'article' }))
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <span>
-        Hello, world!
-      </span>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"Hello, world!"`)
   })
 
   it('overrides the wrapper element when there are multiple children', () => {
@@ -4762,11 +4730,7 @@ describe('options.createElement', () => {
       })
     )
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <custom>
-        Hello
-      </custom>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"Hello"`)
   })
 
   it('should render an empty <div> element', () => {
@@ -4778,10 +4742,7 @@ describe('options.createElement', () => {
       })
     )
 
-    expect(root.innerHTML).toMatchInlineSnapshot(`
-      <div>
-      </div>
-    `)
+    expect(root.innerHTML).toMatchInlineSnapshot(`"Hello"`)
   })
 })
 
@@ -5193,11 +5154,7 @@ it('should remove YAML front matter', () => {
     `)
   )
 
-  expect(root.innerHTML).toMatchInlineSnapshot(`
-    <span>
-      Hello.
-    </span>
-  `)
+  expect(root.innerHTML).toMatchInlineSnapshot(`"Hello."`)
 })
 
 it('correctly parses YAML front matter inside a code block', () => {

src/index.component.spec.tsx

@@ -25,10 +25,7 @@ it('accepts markdown content', () => {
 it('handles a no-children scenario', () => {
   render(<Markdown>{''}</Markdown>)
 
-  expect(root.innerHTML).toMatchInlineSnapshot(`
-    <span>
-    </span>
-  `)
+  expect(root.innerHTML).toMatchInlineSnapshot(`""`)
 })
 
 it('handles a null-children scenario', () => {

src/index.tsx

@@ -297,7 +297,7 @@ function createRenderer(
   return function patchedRender(
     ast: MarkdownToJSX.ASTNode | MarkdownToJSX.ASTNode[],
     state: MarkdownToJSX.State = {}
-  ): React.ReactNode[] | React.ReactNode {
+  ): React.ReactNode {
     // Track render depth to prevent stack overflow from extremely deep nesting
     const currentDepth = (state.renderDepth || 0) + 1
     const MAX_RENDER_DEPTH = 2500
@@ -415,15 +415,15 @@ export function compiler(
   options: MarkdownToJSX.Options & {
     wrapper: null
   }
-): React.ReactNode[]
+): React.ReactNode
 export function compiler(
   markdown: string,
   options?: MarkdownToJSX.Options
 ): React.JSX.Element
 export function compiler(
   markdown: string = '',
   options: MarkdownToJSX.Options = {}
-): React.JSX.Element | React.ReactNode[] | MarkdownToJSX.ASTNode[] {
+): React.ReactNode | MarkdownToJSX.ASTNode[] {
   const isDebug = !!process.env.DEBUG
 
   let parseMetrics: {
@@ -512,9 +512,7 @@ export function compiler(
     )
   }
 
-  function compile(
-    input: string
-  ): React.JSX.Element | React.ReactNode[] | MarkdownToJSX.ASTNode[] {
+  function compile(input: string): React.ReactNode | MarkdownToJSX.ASTNode[] {
     input = input.replace(FRONT_MATTER_R, '')
 
     let inline = false
@@ -585,22 +583,14 @@ export function compiler(
     }
 
     const wrapper = options.wrapper || (inline ? 'span' : 'div')
-    let jsx
+    let jsx: React.ReactNode
 
     if (arr.length > 1 || options.forceWrapper) {
       jsx = arr
     } else if (arr.length === 1) {
-      jsx = arr[0]
-
-      // TODO: remove this for React 16
-      if (typeof jsx === 'string') {
-        return <span key="outer">{jsx}</span>
-      } else {
-        return jsx
-      }
+      return arr[0]
     } else {
-      // TODO: return null for React 16
-      jsx = null
+      return null
     }
 
     return createElement(
@@ -634,7 +624,6 @@ export function compiler(
   const refs: { [key: string]: { target: string; title: string | undefined } } =
     {}
 
-  // Streaming parser function
   function parseMarkdown(
     input: string,
     state: MarkdownToJSX.State,