+
{children}
)
@@ -549,11 +550,15 @@ You can also change the things that come from markdown:
```jsx
+ em(props) {
+ const {node, ...rest} = props
+ return
+ }
}}
/>
```
diff --git a/test/fixtures/runthrough.html b/test/fixtures/runthrough.html
deleted file mode 100644
index 824af77d..00000000
--- a/test/fixtures/runthrough.html
+++ /dev/null
@@ -1,161 +0,0 @@
-h1 Heading
-h2 Heading
-h3 Heading
-h4 Heading
-h5 Heading
-h6 Heading
-Horizontal Rules
-
-
-
-Emphasis
-This is bold text
-This is bold text
-This is italic text
-This is italic text
-Strikethrough
-Blockquotes
-
-Blockquotes can also be nested...
-
-...by using additional greater-than signs right next to each other...
-
-...or with spaces between arrows.
-
-
-
-Lists
-Unordered
-
-- Create a list by starting a line with
+, -, or *
-- Sub-lists are made by indenting 2 spaces:
-
-- Marker character change forces new list start:
-
-- Ac tristique libero volutpat at
-
-
-- Facilisis in pretium nisl aliquet
-
-
-- Nulla volutpat aliquam velit
-
-
-
-
-- Very easy!
-
-Ordered
-
-- Lorem ipsum dolor sit amet
-- Consectetur adipiscing elit
-- Integer molestie lorem at massa
-
-Or:
-
-- You can use sequential numbers...
-- ...or keep all the numbers as
1.
-
-Start numbering with offset:
-
-- foo
-- bar
-
-Loose lists?
-
--
-
foo
-
--
-
bar
-
-
-Code
-Inline code
-Indented code
-// Some comments
-line 1 of code
-line 2 of code
-line 3 of code
-
-Block code "fences"
-Sample text here...
-
-Syntax highlighting
-var foo = function (bar) {
- return bar++;
-};
-
-console.log(foo(5));
-
-Tables
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Tag Use p Paragraph table Table em Emphasis
-Left/right aligned columns
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Project Stars React 80 759 Vue.js 73 322 sse-channel 50
-Links
-
-
-Autoconverted link https://github.com/remarkjs/react-markdown
-
-Images
-
-
-Like links, Images also have a footnote style syntax
-
-With a reference later in the document defining the URL location:
-Hard breaks
-Yeah, hard breaks
-can be useful too.
-HTML entities
-Some characters, like æ, & and similar should be handled properly.
-HTML
-Does anyone actually like the fact that you can embed HTML in markdown?
-
-We used to have a known bug where inline HTML wasn't handled well. You can do basic tags like
-code, as long as it doesn't contain any attributes. If you
-have weird ordering on your tags, it won't work either. It does support nested
-tags, however. And with the rehype-raw plugin, it can now properly handle HTML! Which is pretty sweet.
-
-Cool, eh?
\ No newline at end of file
diff --git a/test/fixtures/runthrough.md b/test/fixtures/runthrough.md
deleted file mode 100644
index 7fec387f..00000000
--- a/test/fixtures/runthrough.md
+++ /dev/null
@@ -1,171 +0,0 @@
-# h1 Heading
-## h2 Heading
-### h3 Heading
-#### h4 Heading
-##### h5 Heading
-###### h6 Heading
-
-
-## Horizontal Rules
-
-___
-
----
-
-***
-
-
-## Emphasis
-
-**This is bold text**
-
-__This is bold text__
-
-*This is italic text*
-
-_This is italic text_
-
-~~Strikethrough~~
-
-
-## Blockquotes
-
-
-> Blockquotes can also be nested...
->> ...by using additional greater-than signs right next to each other...
-> > > ...or with spaces between arrows.
-
-
-## Lists
-
-Unordered
-
-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
- - Marker character change forces new list start:
- * Ac tristique libero volutpat at
- + Facilisis in pretium nisl aliquet
- - Nulla volutpat aliquam velit
-+ Very easy!
-
-Ordered
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-
-Or:
-
-1. You can use sequential numbers...
-1. ...or keep all the numbers as `1.`
-
-Start numbering with offset:
-
-57. foo
-1. bar
-
-Loose lists?
-
-- foo
-
-- bar
-
-
-## Code
-
-Inline `code`
-
-Indented code
-
- // Some comments
- line 1 of code
- line 2 of code
- line 3 of code
-
-
-Block code "fences"
-
-```
-Sample text here...
-```
-
-Syntax highlighting
-
-``` js
-var foo = function (bar) {
- return bar++;
-};
-
-console.log(foo(5));
-```
-
-## Tables
-
-| Tag | Use |
-| ------ | ----------- |
-| p | Paragraph |
-| table | Table |
-| em | Emphasis |
-
-Left/right aligned columns
-
-| Project | Stars |
-| :------ | -----------:|
-| React | 80 759 |
-| Vue.js | 73 322 |
-| sse-channel | 50 |
-
-
-## Links
-
-[Espen.Codes](https://espen.codes/)
-
-[Sanity](https://www.sanity.io/ "Sanity, the headless CMS and PaaS")
-
-Autoconverted link https://github.com/remarkjs/react-markdown
-
-[Link references][React]
-
-[React]: https://reactjs.org "React, A JavaScript library for building user interfaces"
-
-
-## Images
-
-
-
-
-Like links, Images also have a footnote style syntax
-
-![Alt text][someref]
-
-With a reference later in the document defining the URL location:
-
-[someref]: https://public.sanity.io/modell_@2x.png "Headless CMS"
-
-## Hard breaks
-
-Yeah, hard breaks\
-can be useful too.
-
-## HTML entities
-
-Some characters, like æ, & and similar should be handled properly.
-
-## HTML
-
-Does anyone actually like the fact that you can embed HTML in markdown?
-
-
-
-We used to have a known bug where inline HTML wasn't handled well. You can do basic tags like
-code, as long as it doesn't contain any attributes. If you
-have weird ordering on your tags, it won't work either. It does support nested
-tags, however. And with the rehype-raw plugin, it can now properly handle HTML! Which is pretty sweet.
-
-
-
-Cool, eh?
diff --git a/test/loader.js b/test/loader.js
index 28915afc..d78a33c7 100644
--- a/test/loader.js
+++ b/test/loader.js
@@ -1,10 +1,10 @@
import fs from 'node:fs/promises'
import {fileURLToPath} from 'node:url'
-import {transform, transformSync} from 'esbuild'
+import {transform} from 'esbuild'
-const {load, getFormat, transformSource} = createLoader()
+const {getFormat, load, transformSource} = createLoader()
-export {load, getFormat, transformSource}
+export {getFormat, load, transformSource}
/**
* A tiny JSX loader.
@@ -26,21 +26,21 @@ export function createLoader() {
}
const {code, warnings} = await transform(String(await fs.readFile(url)), {
+ format: 'esm',
+ loader: 'jsx',
sourcefile: fileURLToPath(url),
sourcemap: 'both',
- loader: 'jsx',
- target: 'esnext',
- format: 'esm'
+ target: 'esnext'
})
- if (warnings && warnings.length > 0) {
+ if (warnings) {
for (const warning of warnings) {
console.log(warning.location)
console.log(warning.text)
}
}
- return {format: 'module', source: code, shortCircuit: true}
+ return {format: 'module', shortCircuit: true, source: code}
}
// Pre version 17.
@@ -69,15 +69,15 @@ export function createLoader() {
return defaultTransformSource(value, context, defaultTransformSource)
}
- const {code, warnings} = transformSync(String(value), {
+ const {code, warnings} = await transform(String(value), {
+ format: context.format === 'module' ? 'esm' : 'cjs',
+ loader: 'jsx',
sourcefile: fileURLToPath(url),
sourcemap: 'both',
- loader: 'jsx',
- target: 'esnext',
- format: context.format === 'module' ? 'esm' : 'cjs'
+ target: 'esnext'
})
- if (warnings && warnings.length > 0) {
+ if (warnings) {
for (const warning of warnings) {
console.log(warning.location)
console.log(warning.text)
diff --git a/test/test.jsx b/test/test.jsx
index b21bfb7a..fbc38f6c 100644
--- a/test/test.jsx
+++ b/test/test.jsx
@@ -1,1431 +1,1216 @@
+/* @jsxRuntime automatic @jsxImportSource react */
/**
* @typedef {import('hast').Root} Root
- * @typedef {import('hast').Element} Element
- * @typedef {import('react').ReactNode} ReactNode
+ * @typedef {import('../lib/ast-to-react.js').HeadingProps} HeadingProps
*/
import assert from 'node:assert/strict'
-import fs from 'node:fs/promises'
import test from 'node:test'
-import React from 'react'
-import ReactDom from 'react-dom/server'
+import {renderToStaticMarkup} from 'react-dom/server'
import rehypeRaw from 'rehype-raw'
import remarkGfm from 'remark-gfm'
import remarkToc from 'remark-toc'
import {visit} from 'unist-util-visit'
import Markdown from '../index.js'
-const own = {}.hasOwnProperty
-
-/**
- * @param {ReturnType} input
- * @returns {string}
- */
-function asHtml(input) {
- return ReactDom.renderToStaticMarkup(input)
-}
-
-test('ReactMarkdown', async () => {
- assert.deepEqual(
- Object.keys(await import('../index.js')).sort(),
- ['default', 'uriTransformer'],
- 'should expose the public api'
- )
-})
-
-test('can render the most basic of documents (single paragraph)', () => {
- assert.equal(asHtml(Test ), 'Test
')
-})
-
-test('should warn when passed `source`', () => {
- const warn = console.warn
- /** @type {unknown} */
- let message
-
- console.warn = (/** @type {unknown} */ d) => {
- message = d
- }
-
- // @ts-expect-error runtime
- assert.equal(asHtml(b ), 'b
')
- assert.equal(
- message,
- '[react-markdown] Warning: please use `children` instead of `source` (see for more info)'
- )
-
- console.warn = warn
-})
-
-test('should warn when passed non-string children (number)', () => {
- const {error, warn} = console
- /** @type {unknown} */
- let message
-
- console.error = () => {}
- console.warn = (/** @type {unknown} */ d) => {
- message = d
- }
-
- // @ts-expect-error runtime
- assert.equal(asHtml(a ), 'a
')
+ })
+
+ await t.test('should warn w/ `source`', function () {
+ const warn = console.warn
+ /** @type {unknown} */
+ let message
+
+ console.warn = capture
+
+ // @ts-expect-error: check how the runtime handles untyped `source`.
+ assert.equal(asHtml(b ), 'b
')
+ assert.equal(
+ message,
+ '[react-markdown] Warning: please use `children` instead of `source` (see for more info)'
+ )
-test('should warn when passed non-string children (boolean)', () => {
- const {error, warn} = console
- /** @type {unknown} */
- let message
-
- console.error = () => {}
- console.warn = (/** @type {unknown} */ d) => {
- message = d
- }
-
- // @ts-expect-error runtime
- assert.equal(asHtml(a ), 'a
')
- assert.equal(
- message,
- '[react-markdown] Warning: please remove `allowDangerousHtml` (see for more info)'
- )
+ /**
+ * @param {unknown} d
+ * @returns {undefined}
+ */
+ function capture(d) {
+ message = d
+ }
+ })
- console.warn = warn
-})
+ await t.test('should warn w/ non-string children (boolean)', function () {
+ const {error, warn} = console
+ /** @type {unknown} */
+ let message
-test('uses passed classname for root component', () => {
- assert.equal(
- asHtml(Test ),
- 'Test
'
- )
-})
+ console.error = function () {}
+ console.warn = capture
-test('should handle multiple paragraphs properly', () => {
- const input = 'React is awesome\nAnd so is markdown\n\nCombining = epic'
- assert.equal(
- asHtml(React is awesome\nAnd so is markdown
\nCombining = epic
'
- )
-})
+ // @ts-expect-error: check how the runtime handles invalid `children`.
+ assert.equal(asHtml(React is awesome\nAnd so is markdown
\nCombining = epic
'
- )
-})
+ console.error = error
+ console.warn = warn
-test('should handle emphasis', () => {
- const input = 'React is _totally_ *awesome*'
- const actual = asHtml(React is totally awesome
')
-})
+ /**
+ * @param {unknown} d
+ * @returns {undefined}
+ */
+ function capture(d) {
+ message = d
+ }
+ })
-test('should handle bold/strong text', () => {
- const input = 'React is __totally__ **awesome**'
- const actual = asHtml(React is totally awesome
'
- )
-})
+ await t.test('should support `null` as children', function () {
+ assert.equal(asHtml(This is a link to Espen.Codes.
'
- )
-})
+ await t.test('should support `undefined` as children', function () {
+ assert.equal(asHtml(This is a link to Espen.Codes.
'
- )
-})
+ await t.test('should warn w/ `allowDangerousHtml`', function () {
+ const warn = console.warn
+ /** @type {unknown} */
+ let message
-test('should handle links with uppercase protocol', () => {
- const input = 'This is [a link](HTTPS://ESPEN.CODES/) to Espen.Codes.'
- const actual = asHtml(This is a link to Espen.Codes.
'
- )
-})
+ console.warn = capture
-test('should handle links with custom uri transformer', () => {
- const input = 'This is [a link](https://espen.codes/) to Espen.Codes.'
- const actual = asHtml(
- uri.replace(/^https?:/, '')}
- />
- )
- assert.equal(
- actual,
- 'This is a link to Espen.Codes.
'
- )
-})
+ // @ts-expect-error: check how the runtime handles deprecated `allowDangerousHtml`.
+ assert.equal(asHtml(a ), 'a
')
+ assert.equal(
+ message,
+ '[react-markdown] Warning: please remove `allowDangerousHtml` (see for more info)'
+ )
-test('should handle empty links with custom uri transformer', () => {
- const input = 'Empty: []()'
-
- const actual = asHtml(
- {
- assert.equal(uri, '', '`uri` should be an empty string')
- assert.equal(title, null, '`title` should be null')
- return ''
- }}
- />
- )
+ console.warn = warn
- assert.equal(actual, '')
-})
+ /**
+ * @param {unknown} d
+ * @returns {undefined}
+ */
+ function capture(d) {
+ message = d
+ }
+ })
-test('should handle titles of links', () => {
- const input = 'Empty: [](# "x")'
- const actual = asHtml(a ),
+ 'a
'
+ )
+ })
-test('should support images without alt, url, or title', () => {
- const input = '![]()'
- const actual = asHtml(![]()
'
- assert.equal(actual, expected)
-})
+ await t.test('should support a block quote', function () {
+ assert.equal(
+ asHtml(\na
\n
'
+ )
+ })
-test('should handle images without title attribute', () => {
- const input = 'This is .'
- const actual = asHtml(This is 
.
')
-})
+ await t.test('should support a break', function () {
+ assert.equal(asHtml(a
\nb
')
+ })
-test('should handle images with title attribute', () => {
- const input = 'This is .'
- const actual = asHtml(This is .
'
- )
-})
+ await t.test('should support a code (block, flow; indented)', function () {
+ assert.equal(
+ asHtml(a\n
'
+ )
+ })
-test('should handle images with custom uri transformer', () => {
- const input = 'This is .'
- const actual = asHtml(
- uri.replace(/\.png$/, '.jpg')}
- />
- )
- assert.equal(actual, 'This is 
.
')
-})
+ await t.test('should support a code (block, flow; fenced)', function () {
+ assert.equal(
+ asHtml(a\n
'
+ )
+ })
-test('should handle images with custom uri transformer', () => {
- const input = 'Empty: ![]()'
- const actual = asHtml(
- {
- assert.equal(uri, '', '`uri` should be an empty string')
- assert.equal(alt, '', '`alt` should be an empty string')
- assert.equal(title, null, '`title` should be null')
- return ''
- }}
- />
- )
- assert.equal(actual, 'Empty: ![]()
')
-})
+ await t.test('should support a delete (GFM)', function () {
+ assert.equal(
+ asHtml(a
'
+ )
+ })
+
+ await t.test('should support an emphasis', function () {
+ assert.equal(asHtml(a
')
+ })
+
+ await t.test('should support a footnote (GFM)', function () {
+ assert.equal(
+ asHtml(
+ a1
\nFootnotes
\n\n- \n
y ↩
\n \n
\n {
- assert.equal(title, 'b', '`title` should be passed')
- return src
- }}
- />
- )
- assert.equal(actual, 'Empty: 
')
-})
+ await t.test('should support a heading', function () {
+ assert.equal(asHtml(a
')
+ })
-test('should handle image references with custom uri transformer', () => {
- const input =
- 'This is ![The Waffle Ninja][ninja].\n\n[ninja]: https://some.host/img.png'
- const actual = asHtml(
- uri.replace(/\.png$/, '.jpg')}
- />
- )
- assert.equal(
- actual,
- 'This is 
.
'
- )
-})
+ await t.test('should support an html (default)', function () {
+ assert.equal(
+ asHtml(<i>a</i>
'
+ )
+ })
-test('should support images references without alt, url, or title', () => {
- const input = '![][a]\n\n[a]: <>'
- const actual = asHtml(![]()
'
- assert.equal(actual, expected)
-})
+ await t.test('should support an html (w/ `rehype-raw`)', function () {
+ assert.equal(
+ asHtml(a
'
+ )
+ })
-test('should handle images with special characters in alternative text', () => {
- const input = "This is ."
- const actual = asHtml(This is .
'
- )
-})
+ await t.test('should support an image', function () {
+ assert.equal(
+ asHtml(
'
+ )
+ })
-test('should be able to render headers', () => {
- assert.equal(asHtml(Awesome
')
- assert.equal(asHtml(Awesome
')
- assert.equal(asHtml(Awesome
')
- assert.equal(asHtml(Awesome
')
- assert.equal(
- asHtml(Awesome
'
- )
-})
+ await t.test('should support an image w/ a title', function () {
+ assert.equal(
+ asHtml(
'
+ )
+ })
-test('should be able to render inline code', () => {
- const input = 'Just call `renderToStaticMarkup()`, already'
- const actual = asHtml(Just call renderToStaticMarkup(), already
'
- )
-})
+ await t.test('should support an image reference / definition', function () {
+ assert.equal(
+ asHtml(
'
+ )
+ })
-test('should handle code tags without any language specification', () => {
- const input = "```\nvar foo = require('bar');\nfoo();\n```"
- const actual = asHtml(var foo = require('bar');\nfoo();\n
'
- )
-})
+ await t.test('should support code (text, inline)', function () {
+ assert.equal(asHtml(a
')
+ })
-test('should handle code tags with language specification', () => {
- const input = "```js\nvar foo = require('bar');\nfoo();\n```"
- const actual = asHtml(var foo = require('bar');\nfoo();\n
'
- )
-})
+ await t.test('should support a link', function () {
+ assert.equal(
+ asHtml(var foo = require('bar');\nfoo();\n
'
- )
-})
+ await t.test('should support a link w/ a title', function () {
+ assert.equal(
+ asHtml( woop\n
'
- )
-})
+ await t.test('should support a link reference / definition', function () {
+ assert.equal(
+ asHtml(<footer class="footer">\n © 2014 Foo Bar\n</footer>\n
'
- )
-})
+ await t.test('should support duplicate definitions', function () {
+ assert.equal(
+ asHtml(\nMoo\nTools\nFTW
\n
')
-})
+ await t.test('should support a list (unordered) / list item', function () {
+ assert.equal(asHtml(\n- a
\n
')
+ })
-test('should handle nested blockquotes', () => {
- const input = [
- '> > Lots of ex-Mootoolers on the React team\n>\n',
- "> Totally didn't know that.\n>\n",
- "> > There's a reason why it turned out so awesome\n>\n",
- "> Haha I guess you're right!"
- ].join('')
-
- const actual = asHtml(\n\nLots of ex-Mootoolers on the React team
\n
\nTotally didn't know that.
\n\nThere's a reason why it turned out so awesome
\n
\nHaha I guess you're right!
\n
'
- )
-})
+ await t.test('should support a list (ordered) / list item', function () {
+ assert.equal(
+ asHtml(\n- a
\n
'
+ )
+ })
-test('should handle tight, unordered lists', () => {
- const input = '* Unordered\n* Lists\n* Are cool\n'
- const actual = asHtml(\n- Unordered
\n- Lists
\n- Are cool
\n
'
- )
-})
+ await t.test('should support a paragraph', function () {
+ assert.equal(asHtml(a
')
+ })
-test('should handle loose, unordered lists', () => {
- const input = '- foo\n\n- bar'
- const actual = asHtml(\n- \n
foo
\n \n- \n
bar
\n \n
'
- )
-})
+ await t.test('should support a strong', function () {
+ assert.equal(
+ asHtml(a
'
+ )
+ })
+
+ await t.test('should support a table (GFM)', function () {
+ assert.equal(
+ asHtml(
+ a b
'
+ )
+ })
+
+ await t.test('should support a table (GFM; w/ align)', function () {
+ assert.equal(
+ asHtml(
+ a b c d
'
+ )
+ })
-test('should handle tight, unordered lists with sublists', () => {
- const input = '* Unordered\n * Lists\n * Are cool\n'
- const actual = asHtml(\n- Unordered\n
\n- Lists\n
\n- Are cool
\n
\n \n
\n \n
'
- )
-})
+ await t.test('should support a thematic break', function () {
+ assert.equal(asHtml(
')
+ })
-test('should handle loose, unordered lists with sublists', () => {
- const input = '- foo\n\n - bar'
- const actual = asHtml(\n- \n
foo
\n\n- bar
\n
\n \n
'
- )
-})
+ await t.test('should support ab absolute path', function () {
+ assert.equal(
+ asHtml(\n- Ordered
\n- Lists
\n- Are cool
\n
'
- )
-})
+ await t.test('should support an absolute URL', function () {
+ assert.equal(
+ asHtml(\n- Ordered
\n- Lists
\n- Are cool
\n
'
- )
-})
+ await t.test('should support a URL w/ uppercase protocol', function () {
+ assert.equal(
+ asHtml(= 0, true)
- return React.createElement('li', props)
- },
- ol({node, ordered, depth, ...props}) {
- assert.equal(ordered, true)
- assert.equal(depth >= 0, true)
- return React.createElement('ol', props)
- },
- ul({node, ordered, depth, ...props}) {
- assert.equal(ordered, false)
- assert.equal(depth >= 0, true)
- return React.createElement('ul', props)
- }
- }}
- />
- )
+ await t.test('should allow an empty URL', function () {
+ assert.equal(asHtml(\n- \n
foo
\n\n- bar
\n- baz
\n
\n \n- \n
root
\n \n
'
- )
-})
+ await t.test('should support search (`?`) in a URL', function () {
+ assert.equal(
+ asHtml(a\n
\nb\n
\nc
'
- assert.equal(actual, expected)
-})
+ await t.test('should support hash (`#`) in a URL', function () {
+ assert.equal(
+ asHtml(a b c
'
- assert.equal(actual, expected)
-})
-test('should pass `isHeader: true` to `th`s, `isHeader: false` to `td`s', () => {
- const input = '| a |\n| - |\n| b |\n| c |'
- const actual = asHtml(
- a b c
'
- assert.equal(actual, expected)
-})
+ await t.test('should support `transformImageUri`', function () {
+ assert.equal(
+ asHtml(
+ ![a]( "c")
'
+ )
+ })
+
+ await t.test('should support `transformImageUri` w/ empty URLs', function () {
+ assert.equal(
+ asHtml(
+ ![]()
'
+ )
+ })
-test('should pass `index: number`, `ordered: boolean`, `checked: boolean | null` to `li`s', () => {
- const input = '* [x] a\n* [ ] b\n* c'
- let count = 0
- const actual = asHtml(
- )
'
+ )
+ }
)
- const expected =
- '\n- a
\n- b
\n- c
\n
'
- assert.equal(actual, expected)
-})
-test('should pass `level: number` to `h1`, `h2`, ...', () => {
- const input = '#\n##\n###'
-
- /**
- * @param {object} props
- * @param {Element} props.node
- * @param {number} props.level
- */
- function heading({node, level, ...props}) {
- return React.createElement(`h${level}`, props)
- }
-
- const actual = asHtml(
- abc
')
+ })
-test('should skip inline html with skipHtml option enabled', () => {
- const input = 'I am having so much fun'
- const actual = asHtml(I am having so much fun
')
-})
+ await t.test('should support `sourcePos`', function () {
+ assert.equal(
+ asHtml(a
'
+ )
+ })
-test('should escape html blocks by default', () => {
- const input = [
- 'This is a regular paragraph.\n\n\n \n ',
- 'Foo \n \n
\n\nThis is another',
- ' regular paragraph.'
- ].join('')
-
- const actual = asHtml(This is a regular paragraph.
\n<table>\n <tr>\n <td>Foo</td>\n </tr>\n</table>\nThis is another regular paragraph.
'
+ await t.test(
+ 'should support `allowedElements` (drop unlisted nodes)',
+ function () {
+ assert.equal(
+ asHtml(
+ \n- b
\n
'
+ )
+ }
)
-})
-test('should skip html blocks if skipHtml prop is set', () => {
- const input = [
- 'This is a regular paragraph.\n\n\n \n ',
- 'Foo \n \n
\n\nThis is another',
- ' regular paragraph.'
- ].join('')
-
- const actual = asHtml(This is a regular paragraph.
\n\nThis is another regular paragraph.
'
- )
-})
+ await t.test('should support `allowedElements` as a function', function () {
+ assert.equal(
+ asHtml(
+ b
'
+ )
+ })
+ await t.test('should support `disallowedElements`', function () {
+ assert.equal(
+ asHtml(\n- b
\n
'
+ )
+ })
-test('should escape html blocks by default (with HTML parser plugin)', () => {
- const input = [
- 'This is a regular paragraph.\n\n\n \n ',
- 'Foo \n \n
\n\nThis is another',
- ' regular paragraph.'
- ].join('')
-
- const actual = asHtml(This is a regular paragraph.
\n<table>\n <tr>\n <td>Foo</td>\n </tr>\n</table>\nThis is another regular paragraph.
'
+ await t.test(
+ 'should fail for both `allowedElements` and `disallowedElements`',
+ function () {
+ assert.throws(function () {
+ asHtml(
+ Foo
\n
\nBar
')
-})
-test('should set source position attributes if sourcePos option is enabled', () => {
- const input = 'Foo\n\n------------\n\nBar'
- const actual = asHtml(Foo
\n
\nBar
'
+ await t.test(
+ 'should support `unwrapDisallowed` w/ `allowedElements`',
+ function () {
+ assert.equal(
+ asHtml(
+ a
'
+ )
+ }
)
-})
-test('should pass on raw source position to non-tag components if rawSourcePos option is enabled', () => {
- const input = '*Foo*\n\n------------\n\n__Bar__'
- const actual = asHtml(
- a
'
+ )
+ }
)
- assert.equal(
- actual,
- 'Foo
\n
\nBar
'
- )
-})
+ await t.test('should support `remarkRehypeOptions`', function () {
+ assert.equal(
+ asHtml(
+ Footnotes
\n\n- \n
a ↩
\n \n
\na
'
+ )
+ })
+
+ await t.test('should support `components` as functions', function () {
+ assert.equal(
+ asHtml(
+ a
\nb
'
+ )
-test('should skip nodes that are not defined as allowed', () => {
- const input =
- '# Header\n\nParagraph\n## New header\n1. List item\n2. List item 2'
- const actual = asHtml(
- Paragraph
\n\n\n- List item
\n- List item 2
\n
'
- )
-})
+ assert.equal(calls, 2)
-test('should skip nodes that are defined as disallowed', () => {
- const input =
- '# Header\n\nParagraph\n## New header\n1. List item\n2. List item 2\n\nFoo'
- const actual = asHtml(
- Header
\nParagraph
\nNew header
\n\n\n\n
\nFoo
'
- )
-})
+ /**
+ * @param {HeadingProps} props
+ */
+ function heading(props) {
+ const {level, node, ...rest} = props
+ assert.equal(typeof level, 'number')
+ calls++
+ const H = `h${level}`
+ return a\n
\nb\n
\nc
'
+ )
-test('should unwrap child nodes from disallowed nodes, if unwrapDisallowed option is enabled', () => {
- const input =
- 'Espen *~~initiated~~ had the initial commit*, but has had several **contributors**'
- const actual = asHtml(
- Espen initiated had the initial commit, but has had several contributors
'
- )
-})
+ assert.equal(calls, 3)
+ })
-test('should render tables', () => {
- const input = [
- 'Languages are fun, right?',
- '',
- '| ID | English | Norwegian | Italian |',
- '| :-- | :-----: | --------: | ------- |',
- '| 1 | one | en | uno |',
- '| 2 | two | to | due |',
- '| 3 | three | tre | tre |',
- ''
- ].join('\n')
-
- assert.equal(
- asHtml(Languages are fun, right?
\nID English Norwegian Italian 1 one en uno 2 two to due 3 three tre tre
'
- )
-})
+ await t.test(
+ 'should support `components` (li; `checked`, `index`, `ordered`)',
+ function () {
+ let calls = 0
-test('should render partial tables', () => {
- const input = 'User is writing a table by hand\n\n| Test | Test |\n|-|-|'
+ assert.equal(
+ asHtml(
+ = 0, true)
+ calls++
+ return
+ }
+ }}
+ remarkPlugins={[remarkGfm]}
+ />
+ ),
+ '\n- a
\n
\n\n- b
\n
'
+ )
- assert.equal(
- asHtml(User is writing a table by hand
\nTest Test
'
+ assert.equal(calls, 2)
+ }
)
-})
-test('should render link references', () => {
- const input = [
- 'Stuff were changed in [1.1.4]. Check out the changelog for reference.',
- '',
- '[1.1.4]: https://github.com/remarkjs/react-markdown/compare/v1.1.3...v1.1.4'
- ].join('\n')
-
- assert.equal(
- asHtml(Stuff were changed in 1.1.4. Check out the changelog for reference.
'
- )
-})
+ await t.test(
+ 'should support `components` (ol; `depth`, `ordered`)',
+ function () {
+ let calls = 0
-test('should render empty link references', () => {
- const input =
- 'Stuff were changed in [][]. Check out the changelog for reference.'
+ assert.equal(
+ asHtml(
+ \n- a
\n
'
+ )
- assert.equal(
- asHtml(Stuff were changed in [][]. Check out the changelog for reference.
'
+ assert.equal(calls, 1)
+ }
)
-})
-test('should render image references', () => {
- const input = [
- 'Checkout out this ninja: ![The Waffle Ninja][ninja]. Pretty neat, eh?',
- '',
- '[ninja]: /assets/ninja.png'
- ].join('\n')
+ await t.test(
+ 'should support `components` (ul; `depth`, `ordered`)',
+ function () {
+ let calls = 0
- assert.equal(
- asHtml(Checkout out this ninja: 
. Pretty neat, eh?
'
- )
-})
+ assert.equal(
+ asHtml(
+ \n- a
\n
'
+ )
-test('should render footnote with custom options', () => {
- const input = [
- 'This is a statement[^1] with a citation.',
- '',
- '[^1]: This is a footnote for the citation.'
- ].join('\n')
-
- assert.equal(
- asHtml(
- This is a statement1 with a citation.
\nFootnotes
\n\n- \n
This is a footnote for the citation. ↩
\n \n
\na b
'
+ )
-test('should skip nodes that are defined as disallowed', () => {
- /** @type {Record} */
- const samples = {
- p: {input: 'Paragraphs are cool', shouldNotContain: 'Paragraphs are cool'},
- h1: {input: '# Headers are neat', shouldNotContain: 'Headers are neat'},
- br: {input: 'Text \nHardbreak', shouldNotContain: '
'},
- a: {
- input: "[Espen's blog](http://espen.codes/) yeh?",
- shouldNotContain: ''
- },
- blockquote: {
- input: '> Moo\n> Tools\n> FTW\n',
- shouldNotContain: '} */
- const inputs = []
- /** @type {keyof samples} */
- let key
-
- for (key in samples) {
- if (own.call(samples, key)) {
- inputs.push(samples[key].input)
- }
- }
+ assert.equal(calls, 2)
+ })
+
+ await t.test('should support `components` (td, th; `isHeader`)', function () {
+ let tdCalls = 0
+ let thCalls = 0
+
+ assert.equal(
+ asHtml(
+ a b
'
+ )
- const fullInput = inputs.join('\n')
+ assert.equal(tdCalls, 1)
+ assert.equal(thCalls, 1)
+ })
+
+ await t.test('should pass `node` to components', function () {
+ let calls = 0
+ assert.equal(
+ asHtml(
+ a
'
+ )
- for (key in samples) {
- if (own.call(samples, key)) {
- const sample = samples[key]
+ assert.equal(calls, 1)
+ })
- // Just to make sure, let ensure that the opposite is true
+ await t.test(
+ 'should support `rawSourcePos` (pass `sourcePosition` to components)',
+ function () {
+ let calls = 0
assert.equal(
- asHtml(a
'
)
+ assert.equal(calls, 1)
+ }
+ )
+
+ await t.test(
+ 'should support `includeElementIndex` (pass `index` to components)',
+ function () {
+ let calls = 0
assert.equal(
asHtml(
- {rest.children}
+ }
+ }}
+ />
+ ),
+ 'a
'
)
+ assert.equal(calls, 1)
}
- }
-})
-
-test('should throw if both allowed and disallowed types is specified', () => {
- assert.throws(() => {
- asHtml(
-
- element.tagName !== 'a' ||
- (element.properties &&
- typeof element.properties.href === 'string' &&
- element.properties.href.indexOf('https://github.com/') === 0)
- }
- />
- ),
- [
- 'Header
',
- 'react-markdown is a nice helper
',
- 'Also check out
'
- ].join('\n')
)
-})
-test('should be able to override components', () => {
- const input =
- '# Header\n\nParagraph\n## New header\n1. List item\n2. List item 2\n\nFoo'
- /**
- * @param {number} level
- */
- const heading = (level) => {
- /**
- * @param {object} props
- * @param {Array} props.children
- */
- const component = (props) => (
- {props.children}
+ await t.test('should support plugins (`remark-gfm`)', function () {
+ assert.equal(
+ asHtml(a b c
'
)
- return component
- }
-
- const actual = asHtml(
- Paragraph
\nNew header\n\n- List item
\n- List item 2
\n
\nFoo
'
- )
-})
-
-test('should throw on invalid component', () => {
- const input =
- '# Header\n\nParagraph\n## New header\n1. List item\n2. List item 2\n\nFoo'
- const components = {h1: 123}
- assert.throws(
- () =>
- // @ts-expect-error runtime
- asHtml(Much fun
\nCan be had with XSS links
\n\n\n
\nEntities can be tricky, too
\n\n\nShould allow mailto and tel links tho
\nAlso, protocol-agnostic should be allowed
\n\nallow weird query strings and hashes
'
- )
-
- console.error = error
-})
-
-test('allows specifying a custom URI-transformer', () => {
- const input =
- 'Received a great [pull request](https://github.com/remarkjs/react-markdown/pull/15) today'
- const actual = asHtml(
- uri.replace(/^https?:\/\/github\.com\//i, '/')}
- />
- )
- assert.equal(
- actual,
- 'Received a great pull request today
'
- )
-})
-
-test('should support turning off the default URI transform', () => {
- const input = '[a](data:text/html,)'
- const actual = asHtml(a
+Contents
+
+b
+c
+d
`
+ )
+ })
-test('can use parser plugins', () => {
- const input = 'a ~b~ c'
- const actual = asHtml(
- a b c
')
-})
+ await t.test('should support aria properties', function () {
+ assert.equal(
+ asHtml(c
'
+ )
-test('supports checkbox lists', () => {
- const input = '- [ ] Foo\n- [x] Bar\n\n---\n\n- Foo\n- Bar'
- const actual = asHtml(
- \n- Foo
\n- Bar
\n
\n
\n\n- Foo
\n- Bar
\n
'
- )
-})
+ function plugin() {
+ /**
+ * @param {Root} tree
+ * @returns {undefined}
+ */
+ return function (tree) {
+ tree.children.unshift({
+ type: 'element',
+ tagName: 'input',
+ properties: {id: 'a', ariaDescribedBy: 'b', required: true},
+ children: []
+ })
+ }
+ }
+ })
-test('should pass index of a node under its parent to components if `includeElementIndex` option is enabled', () => {
- const input = 'Foo\n\nBar\n\nBaz'
- const actual = asHtml(
- {otherProps.children}
- }
- }}
- />
- )
- assert.equal(actual, 'Foo
\nBar
\nBaz
')
-})
+ await t.test('should support data properties', function () {
+ assert.equal(
+ asHtml(b
'
+ )
-test('should be able to render components with forwardRef in HOC', () => {
- /**
- * @typedef {import('react').Ref} Ref
- * @typedef {JSX.IntrinsicElements['a'] & import('../lib/ast-to-react.js').ReactMarkdownProps} Props
- */
-
- /**
- * @param {(params: Props) => JSX.Element} Component
- */
- const wrapper = (Component) =>
- React.forwardRef(
+ function plugin() {
/**
- * @param {Props} props
- * @param {Ref} ref
+ * @param {Root} tree
+ * @returns {undefined}
*/
- (props, ref) => c
'
)
- /**
- * @param {Props} props
- */
- // eslint-disable-next-line react/jsx-no-target-blank
- const wrapped = (props) =>
+ function plugin() {
+ /**
+ * @param {Root} tree
+ * @returns {undefined}
+ */
+ return function (tree) {
+ tree.children.unshift({
+ type: 'element',
+ tagName: 'i',
+ properties: {accept: ['a', 'b']},
+ children: []
+ })
+ }
+ }
+ })
- const actual = asHtml(
-
- [Link](https://example.com/)
-
- )
- assert.equal(
- actual,
- ''
- )
-})
+ await t.test('should support `style` properties', function () {
+ assert.equal(
+ asHtml(a
'
+ )
-test('should render table of contents plugin', () => {
- const input = [
- '# Header',
- '## Table of Contents',
- '## First Section',
- '## Second Section',
- '### Subsection',
- '## Third Section'
- ].join('\n')
-
- const actual = asHtml(
- Header
\nTable of Contents
\n\n- First Section
\n- Second Section\n
\n- Subsection
\n
\n \n- Third Section
\n
\nFirst Section
\nSecond Section
\nSubsection
\nThird Section
'
- )
-})
+ await t.test(
+ 'should support `style` properties w/ vendor prefixes',
+ function () {
+ assert.equal(
+ asHtml(a
'
+ )
-test('should pass `node` as prop to all non-tag/non-fragment components', () => {
- const input = "# So, *headers... they're _cool_*\n\n"
- const actual = asHtml(
- {
- text += child.value
+ function plugin() {
+ /**
+ * @param {Root} tree
+ * @returns {undefined}
+ */
+ return function (tree) {
+ tree.children.unshift({
+ type: 'element',
+ tagName: 'i',
+ properties: {style: '-ms-b: 1; -webkit-c: 2'},
+ children: []
})
- return text
}
- }}
- />
- )
- assert.equal(actual, 'So, headers... they're cool')
-})
-
-test('should support formatting at the start of a GFM tasklist (GH-494)', () => {
- const input = '- [ ] *a*'
- const actual = asHtml(
- \n- a
\n
'
- assert.equal(actual, expected)
-})
-
-test('should support aria properties', () => {
- const input = 'c'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({
- type: 'element',
- tagName: 'input',
- properties: {id: 'a', ariaDescribedBy: 'b', required: true},
- children: []
- })
- }
-
- const actual = asHtml(c
'
- assert.equal(actual, expected)
-})
-
-test('should support data properties', () => {
- const input = 'b'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({
- type: 'element',
- tagName: 'i',
- properties: {dataWhatever: 'a', dataIgnoreThis: undefined},
- children: []
- })
- }
-
- const actual = asHtml(b
'
- assert.equal(actual, expected)
-})
-
-test('should support comma separated properties', () => {
- const input = 'c'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({
- type: 'element',
- tagName: 'i',
- properties: {accept: ['a', 'b']},
- children: []
- })
- }
-
- const actual = asHtml(c
'
- assert.equal(actual, expected)
-})
-test('should support `style` properties', () => {
- const input = 'a'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({
- type: 'element',
- tagName: 'i',
- properties: {style: 'color: red; font-weight: bold'},
- children: []
- })
- }
-
- const actual = asHtml(a
'
- assert.equal(actual, expected)
-})
-
-test('should support `style` properties w/ vendor prefixes', () => {
- const input = 'a'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({
- type: 'element',
- tagName: 'i',
- properties: {style: '-ms-b: 1; -webkit-c: 2'},
- children: []
- })
- }
-
- const actual = asHtml(a
'
- assert.equal(actual, expected)
-})
-
-test('should support broken `style` properties', () => {
- const input = 'a'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({
- type: 'element',
- tagName: 'i',
- properties: {style: 'broken'},
- children: []
- })
- }
-
- const actual = asHtml(a
'
- assert.equal(actual, expected)
-})
+ await t.test('should support broken `style` properties', function () {
+ assert.equal(
+ asHtml(a
'
+ )
-test('should support SVG elements', () => {
- const input = 'a'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({
- type: 'element',
- tagName: 'svg',
- properties: {xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 500 500'},
- children: [
- {
- type: 'element',
- tagName: 'title',
- properties: {},
- children: [{type: 'text', value: 'SVG `` element'}]
- },
- {
- type: 'element',
- tagName: 'circle',
- properties: {cx: 120, cy: 120, r: 100},
- children: []
- },
- // `strokeMiterLimit` in hast, `strokeMiterlimit` in React.
- {
+ function plugin() {
+ /**
+ * @param {Root} tree
+ * @returns {undefined}
+ */
+ return function (tree) {
+ tree.children.unshift({
type: 'element',
- tagName: 'path',
- properties: {strokeMiterLimit: -1},
+ tagName: 'i',
+ properties: {style: 'broken'},
children: []
- }
- ]
- })
- }
-
- const actual = asHtml(a
'
- assert.equal(actual, expected)
-})
-
-test('should support (ignore) comments', () => {
- const input = 'a'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- root.children.unshift({type: 'comment', value: 'things!'})
- }
-
- const actual = asHtml(a
'
- assert.equal(actual, expected)
-})
-
-test('should support table cells w/ style', () => {
- const input = '| a |\n| :- |'
-
- /** @type {import('unified').Plugin, Root>} */
- const plugin = () => (root) => {
- visit(root, {type: 'element', tagName: 'th'}, (node) => {
- node.properties = {...node.properties, style: 'color: red'}
- })
- }
-
- const actual = asHtml(
- a
'
+ })
+ }
+ }
+ })
- assert.equal(actual, expected)
-})
+ await t.test('should support SVG elements', function () {
+ assert.equal(
+ asHtml(a
'
+ )
-test('should crash on a plugin replacing `root`', () => {
- const input = 'a'
- /** @type {import('unified').Plugin, Root>} */
- // @ts-expect-error: runtime.
- const plugin = () => () => ({type: 'comment', value: 'things!'})
- assert.throws(() => {
- asHtml(` element'}]
+ },
+ {
+ type: 'element',
+ tagName: 'circle',
+ properties: {cx: 120, cy: 120, r: 100},
+ children: []
+ },
+ // `strokeMiterLimit` in hast, `strokeMiterlimit` in React.
+ {
+ type: 'element',
+ tagName: 'path',
+ properties: {strokeMiterLimit: -1},
+ children: []
+ }
+ ]
+ })
+ }
+ }
+ })
-test('should support remark plugins with array parameter', async () => {
- const error = console.error
- /** @type {string} */
- let message = ''
+ await t.test('should support comments (ignore them)', function () {
+ const input = 'a'
+ const actual = asHtml(
+ a
'
+ assert.equal(actual, expected)
- console.error = (/** @type {string} */ d) => {
- message = d
- }
+ function plugin() {
+ /**
+ * @param {Root} tree
+ * @returns {undefined}
+ */
+ return function (tree) {
+ tree.children.unshift({type: 'comment', value: 'things!'})
+ }
+ }
+ })
+
+ await t.test('should support table cells w/ style', function () {
+ assert.equal(
+ asHtml(
+ a
'
+ )
- const input = 'a'
- /** @type {import('unified').Plugin>, Root>} */
- const plugin = () => () => {}
+ function plugin() {
+ /**
+ * @param {Root} tree
+ * @returns {undefined}
+ */
+ return function (tree) {
+ visit(tree, 'element', function (node) {
+ if (node.tagName === 'th') {
+ node.properties = {...node.properties, style: 'color: red'}
+ }
+ })
+ }
+ }
+ })
- const actual = asHtml(
- a
'
- assert.equal(actual, expected)
+ await t.test('should fail on a plugin replacing `root`', function () {
+ assert.throws(function () {
+ asHtml(>, Root>} */
- const plugin = () => () => {}
-
- const actual = asHtml(
- a
'
- assert.equal(actual, expected)
+/**
+ * @param {ReturnType} input
+ * @returns {string}
+ */
+function asHtml(input) {
+ return renderToStaticMarkup(input)
+}
- assert.doesNotMatch(message, /Warning: Failed/, 'Prop types should be valid')
- console.error = error
-})
+/**
+ * @returns {undefined}
+ */
+function noop() {}
diff --git a/tsconfig.json b/tsconfig.json
index 31c68dc0..7baf4f67 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,11 +6,9 @@
"emitDeclarationOnly": true,
"exactOptionalPropertyTypes": true,
"jsx": "preserve",
- "lib": ["dom", "es2020"],
+ "lib": ["dom", "es2022"],
"module": "node16",
"strict": true,
- // To do: remove after update.
- "skipLibCheck": true,
"target": "es2020"
},
"exclude": ["coverage/", "node_modules/", "**/*.min.js"],