Deprecate source, escapeHtml options

Closes remarkjsGH-546.

Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>

Author: wooorm

index.d.ts

@@ -48,11 +48,6 @@ declare namespace ReactMarkdown {
     readonly unwrapDisallowed?: boolean
   }
 
-  interface SourceProp {
-    /** @deprecated use children */
-    readonly source: string
-  }
-
   interface ChildrenProp {
     readonly children: string
   }
@@ -69,19 +64,14 @@ declare namespace ReactMarkdown {
     readonly allowDangerousHtml?: boolean
   }
 
-  interface EscapeHtmlProp {
-    /** @deprecated use allowDangerousHtml */
-    readonly escapeHtml?: boolean
-  }
-
   interface SkipHtmlProp {
     readonly skipHtml?: boolean
   }
 
   type ReactMarkdownProps = ReactMarkdownPropsBase &
-    MutuallyExclusive<ChildrenProp, SourceProp> &
+    ChildrenProp &
     MutuallyExclusive<AllowedTypesProp, DisallowedTypesProp> &
-    MutuallyExclusive<EscapeHtmlProp, MutuallyExclusive<SkipHtmlProp, AllowDangerousHtmlProp>>
+    MutuallyExclusive<SkipHtmlProp, AllowDangerousHtmlProp>
 
   const types: NodeType[]
   const renderers: Renderers

react-markdown-types-test.tsx

@@ -3,16 +3,11 @@ import * as ReactDom from 'react-dom'
 import * as ReactMarkdown from 'react-markdown'
 import * as ReactMarkdownWitHtml from 'react-markdown/with-html'
 
-/* must have children or source, but not both and not neither */
+/* must have children */
 let test = <ReactMarkdown># header</ReactMarkdown>
 test = <ReactMarkdown children="# header" />
-test = <ReactMarkdown source="# header"></ReactMarkdown>
 // $ExpectError
 test = <ReactMarkdown />
-// $ExpectError
-test = <ReactMarkdown source="# header"># header</ReactMarkdown>
-// $ExpectError
-test = <ReactMarkdown source="# header" children="# header" />
 
 /* should support allowedTypes or disallowedTypes, but not both */
 test = <ReactMarkdown allowedTypes={['heading']}># header</ReactMarkdown>
@@ -34,13 +29,12 @@ test = (
   </ReactMarkdown>
 )
 
-/* should support skipHtml or escapeHtml, but not both */
-test = <ReactMarkdown escapeHtml># header</ReactMarkdown>
+/* should support skipHtml or allowDangerousHtml, but not both */
 test = <ReactMarkdown skipHtml># header</ReactMarkdown>
 test = <ReactMarkdown allowDangerousHtml># header</ReactMarkdown>
 test = (
   // $ExpectError
-  <ReactMarkdown escapeHtml skipHtml allowDangerousHtml>
+  <ReactMarkdown skipHtml allowDangerousHtml>
     # header
   </ReactMarkdown>
 )

src/ast-to-react.js

@@ -165,7 +165,6 @@ function getNodeProps(node, key, opts, renderer, parent, index) {
       // @todo find a better way than this
       props.isBlock = node.position.start.line !== node.position.end.line
       props.allowDangerousHtml = opts.allowDangerousHtml
-      props.escapeHtml = opts.escapeHtml
       props.skipHtml = opts.skipHtml
       break
     case 'parsedHtml': {
@@ -174,7 +173,6 @@ function getNodeProps(node, key, opts, renderer, parent, index) {
         parsedChildren = node.children.map((child, i) => astToReact(child, opts, {node, props}, i))
       }
       props.allowDangerousHtml = opts.allowDangerousHtml
-      props.escapeHtml = opts.escapeHtml
       props.skipHtml = opts.skipHtml
       props.element = node.element ? mergeNodeChildren(node, parsedChildren) : null
       break

src/plugins/html-parser.js

@@ -34,7 +34,7 @@ function parseHtml(config, tree, props) {
     tree,
     'html',
     (node, index, parent) => {
-      if (!props.allowDangerousHtml && props.escapeHtml !== false) {
+      if (!props.allowDangerousHtml) {
         parent.children.splice(index, 1, {
           type: 'text',
           position: node.position,
@@ -179,7 +179,7 @@ function parsedHtml(fromNode, toNode, parent) {
 }
 
 module.exports = function getHtmlParserPlugin(config, props) {
-  if (props && (typeof config.source !== 'undefined' || typeof config.children !== 'undefined')) {
+  if (props && typeof config.children !== 'undefined') {
     throw new Error(
       'react-markdown: `html-parser` must be called before use - see https://github.com/remarkjs/react-markdown#parsing-html'
     )

src/react-markdown.js

@@ -16,9 +16,23 @@ const symbols = require('./symbols')
 
 const allTypes = Object.keys(defaultRenderers)
 
+let warningIssuesSource
+let warningIssuesEscapeHtml
+
 const ReactMarkdown = function ReactMarkdown(props) {
-  // To do in next major: remove `source`.
-  const src = props.source || props.children || ''
+  if ('source' in props && !warningIssuesSource) {
+    console.warn('[react-markdown] Warning: please use `children` instead of `source`')
+    warningIssuesSource = true
+  }
+
+  if ('escapeHtml' in props && !warningIssuesEscapeHtml) {
+    console.warn(
+      '[react-markdown] Warning: please use `allowDangerousHtml` instead of `escapeHtml`'
+    )
+    warningIssuesEscapeHtml = true
+  }
+
+  const src = props.children || ''
 
   if (props.allowedTypes && props.disallowedTypes) {
     throw new Error('Only one of `allowedTypes` and `disallowedTypes` should be defined')
@@ -61,8 +75,7 @@ function determineAstToReactTransforms(props) {
     transforms.push(disallowNode.ifNotMatch(props.allowNode, removalMethod))
   }
 
-  // To do in next major: remove `escapeHtml`.
-  const renderHtml = (props.allowDangerousHtml || props.escapeHtml === false) && !props.skipHtml
+  const renderHtml = props.allowDangerousHtml && !props.skipHtml
   const hasHtmlParser = (props.astPlugins || []).some(
     (transform) => transform.identity === symbols.HtmlParser
   )
@@ -87,11 +100,9 @@ ReactMarkdown.defaultProps = {
 
 ReactMarkdown.propTypes = {
   className: PropTypes.string,
-  source: PropTypes.string,
   children: PropTypes.string,
   sourcePos: PropTypes.bool,
   rawSourcePos: PropTypes.bool,
-  escapeHtml: PropTypes.bool,
   allowDangerousHtml: PropTypes.bool,
   skipHtml: PropTypes.bool,
   allowNode: PropTypes.func,

src/renderers.js

@@ -104,11 +104,9 @@ function Html(props) {
     return null
   }
 
-  const dangerous = props.allowDangerousHtml || props.escapeHtml === false
-
   const tag = props.isBlock ? 'div' : 'span'
 
-  if (!dangerous) {
+  if (!props.allowDangerousHtml) {
     /* istanbul ignore next - `tag` is a fallback for old React. */
     return createElement(React.Fragment || tag, null, props.value)
   }

test/__snapshots__/react-markdown.test.js.snap

@@ -1449,22 +1449,6 @@ Array [
 ]
 `;
 
-exports[`should escape html blocks if escapeHtml prop is set (default) (with HTML parser plugin) 1`] = `
-Array [
-  <p>
-    This is a regular paragraph.
-  </p>,
-  "<table>
-    <tr>
-        <td>Foo</td>
-    </tr>
-</table>",
-  <p>
-    This is another regular paragraph.
-  </p>,
-]
-`;
-
 exports[`should handle blockquotes 1`] = `
 <blockquote>
   <p>

test/react-markdown.test.js

@@ -22,6 +22,26 @@ test('can render the most basic of documents (single paragraph)', () => {
   expect(component.toJSON()).toMatchSnapshot()
 })
 
+test('should warn when passed `source`', () => {
+  const warn = console.warn
+  console.warn = jest.fn()
+  expect(renderHTML(<Markdown source="a">b</Markdown>)).toEqual('<p>b</p>')
+  expect(console.warn).toHaveBeenCalledWith(
+    '[react-markdown] Warning: please use `children` instead of `source`'
+  )
+  console.warn = warn
+})
+
+test('should warn when passed `escapeHtml`', () => {
+  const warn = console.warn
+  console.warn = jest.fn()
+  expect(renderHTML(<Markdown escapeHtml>b</Markdown>)).toEqual('<p>b</p>')
+  expect(console.warn).toHaveBeenCalledWith(
+    '[react-markdown] Warning: please use `allowDangerousHtml` instead of `escapeHtml`'
+  )
+  console.warn = warn
+})
+
 test('uses passed classname for root component', () => {
   const component = renderer.create(<Markdown className="md">Test</Markdown>)
   expect(component.toJSON()).toMatchSnapshot()
@@ -420,19 +440,6 @@ test('should skip html blocks if skipHtml prop is set (with HTML parser plugin)'
   expect(component.toJSON()).toMatchSnapshot()
 })
 
-test('should escape html blocks if escapeHtml prop is set (default) (with HTML parser plugin)', () => {
-  const input = [
-    'This is a regular paragraph.\n\n<table>\n    <tr>\n        ',
-    '<td>Foo</td>\n    </tr>\n</table>\n\nThis is another',
-    ' regular paragraph.'
-  ].join('')
-
-  const component = renderer.create(
-    <Markdown children={input} escapeHtml astPlugins={[htmlParser()]} />
-  )
-  expect(component.toJSON()).toMatchSnapshot()
-})
-
 test('should escape html blocks by default (with HTML parser plugin)', () => {
   const input = [
     'This is a regular paragraph.\n\n<table>\n    <tr>\n        ',