Replace renderers w/ components, remove HTML parser from core

index.d.ts

@@ -1,9 +1,9 @@
 // TypeScript Version: 3.4
 
-import {ElementType, ReactNode, ReactElement} from 'react'
+import {ElementType, ReactElement} from 'react'
 import {PluggableList} from 'unified'
 import * as unist from 'unist'
-import * as mdast from 'mdast'
+import * as hast from 'hast'
 
 type Not<T> = {
   [key in keyof T]?: never
@@ -16,65 +16,60 @@ declare namespace ReactMarkdown {
 
   type Position = unist.Position
 
-  type NodeType = mdast.Content['type']
+  type LinkTargetResolver = (
+    href: string,
+    children: Array<hast.Element | hast.Comment | hast.Text>,
+    title?: string
+  ) => string
 
-  type AlignType = mdast.AlignType
-
-  type ReferenceType = mdast.ReferenceType
-
-  type LinkTargetResolver = (uri: string, text: string, title?: string) => string
-
-  type Renderer<T> = (props: T) => ElementType<T>
-  interface Renderers {
-    [key: string]: string | Renderer<any>
+  type Component<T> = (props: T) => ElementType<T>
+  interface Components {
+    [key: string]: string | Component<any>
   }
 
   interface ReactMarkdownPropsBase {
     readonly className?: string
+    readonly skipHtml?: boolean
     readonly sourcePos?: boolean
-    readonly includeNodeIndex?: boolean
+    readonly includeElementIndex?: boolean
     readonly rawSourcePos?: boolean
-    readonly allowNode?: (node: mdast.Content, index: number, parent: NodeType) => boolean
+    readonly allowElement?: (
+      node: hast.Element,
+      index: number,
+      parent: hast.Element | hast.Root
+    ) => boolean
     readonly linkTarget?: string | LinkTargetResolver
     readonly transformLinkUri?:
-      | ((uri: string, children?: ReactNode, title?: string) => string)
-      | null
-    readonly transformImageUri?:
-      | ((uri: string, children?: ReactNode, title?: string, alt?: string) => string)
+      | ((
+          href: string,
+          children: Array<hast.Element | hast.Comment | hast.Text>,
+          title?: string
+        ) => string)
       | null
-    readonly renderers?: {[nodeType: string]: ElementType}
-    readonly plugins?: PluggableList
+    readonly transformImageUri?: ((src: string, alt: string, title?: string) => string) | null
+    readonly components?: {[tagName: string]: ElementType}
+    readonly remarkPlugins?: PluggableList
+    readonly rehypePlugins?: PluggableList
     readonly unwrapDisallowed?: boolean
   }
 
   interface ChildrenProp {
     readonly children: string
   }
 
-  interface AllowedTypesProp {
-    readonly allowedTypes?: NodeType[]
+  interface AllowedElementsProp {
+    readonly allowedElements?: string[]
   }
 
-  interface DisallowedTypesProp {
-    readonly disallowedTypes: NodeType[]
-  }
-
-  interface AllowDangerousHtmlProp {
-    readonly allowDangerousHtml?: boolean
-  }
-
-  interface SkipHtmlProp {
-    readonly skipHtml?: boolean
+  interface DisallowedElementsProp {
+    readonly disallowedElements: string[]
   }
 
   type ReactMarkdownProps = ReactMarkdownPropsBase &
     ChildrenProp &
-    MutuallyExclusive<AllowedTypesProp, DisallowedTypesProp> &
-    MutuallyExclusive<SkipHtmlProp, AllowDangerousHtmlProp>
+    MutuallyExclusive<AllowedElementsProp, DisallowedElementsProp>
 
-  const types: NodeType[]
-  const renderers: Renderers
-  function uriTransformer(uri: string): string
+  function uriTransformer(url: string): string
 }
 
 declare function ReactMarkdown(props: ReactMarkdown.ReactMarkdownProps): ReactElement

package.json

@@ -74,19 +74,21 @@
     "lib/",
     "plugins/",
     "index.d.ts",
-    "react-markdown.min.js",
-    "with-html.d.ts",
-    "with-html.js"
+    "react-markdown.min.js"
   ],
   "dependencies": {
-    "@types/mdast": "^3.0.3",
+    "@types/hast": "^2.3.0",
     "@types/unist": "^2.0.3",
-    "html-to-react": "^1.4.5",
-    "mdast-add-list-metadata": "1.0.1",
+    "comma-separated-tokens": "^1.0.0",
     "prop-types": "^15.7.2",
+    "property-information": "^5.0.0",
     "react-is": "^17.0.0",
     "remark-parse": "^9.0.0",
+    "remark-rehype": "^8.0.0",
+    "space-separated-tokens": "^1.1.0",
+    "style-to-object": "^0.3.0",
     "unified": "^9.0.0",
+    "unist-util-is": "^4.1.0",
     "unist-util-visit": "^2.0.0"
   },
   "peerDependencies": {
@@ -121,6 +123,7 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-test-renderer": "^17.0.0",
+    "rehype-raw": "^5.0.0",
     "remark-cli": "^9.0.0",
     "remark-gfm": "^1.0.0",
     "remark-math": "^4.0.0",
@@ -199,19 +202,24 @@
     "overrides": [
       {
         "files": [
-          "src/**/*.js",
-          "with-html.js"
+          "src/**/*.js"
         ],
         "extends": [
           "plugin:es/restrict-to-es2015"
         ]
       },
       {
+        "env": {
+          "jest": true
+        },
         "files": [
           "test/**/*.js"
         ],
         "rules": {
-          "react/no-children-prop": 0
+          "react/no-children-prop": 0,
+          "react/display-name": 0,
+          "no-nested-ternary": 0,
+          "react/prop-types": 0
         }
       }
     ]

react-markdown-types-test.tsx

@@ -1,43 +1,33 @@
 import * as React from 'react'
 import * as ReactDom from 'react-dom'
 import * as ReactMarkdown from 'react-markdown'
-import * as ReactMarkdownWitHtml from 'react-markdown/with-html'
 
 /* must have children */
 let test = <ReactMarkdown># header</ReactMarkdown>
 test = <ReactMarkdown children="# header" />
 // $ExpectError
 test = <ReactMarkdown />
 
-/* should support allowedTypes or disallowedTypes, but not both */
-test = <ReactMarkdown allowedTypes={['heading']}># header</ReactMarkdown>
-test = <ReactMarkdown disallowedTypes={['heading']}># header</ReactMarkdown>
+/* should support allowedElements or disallowedElements, but not both */
+test = <ReactMarkdown allowedElements={['h1']}># header</ReactMarkdown>
+test = <ReactMarkdown disallowedElements={['h1']}># header</ReactMarkdown>
 test = (
-  <ReactMarkdown disallowedTypes={['heading']} unwrapDisallowed>
+  <ReactMarkdown disallowedElements={['h1']} unwrapDisallowed>
     # header
   </ReactMarkdown>
 )
 test = (
-  <ReactMarkdown allowedTypes={['heading']} unwrapDisallowed>
+  <ReactMarkdown allowedElements={['h1']} unwrapDisallowed>
     # header
   </ReactMarkdown>
 )
 test = (
   // $ExpectError
-  <ReactMarkdown allowedTypes={['heading']} disallowedTypes={['heading']}>
+  <ReactMarkdown allowedElements={['h1']} disallowedElements={['h1']}>
     # header
   </ReactMarkdown>
 )
 
-/* should support skipHtml or allowDangerousHtml, but not both */
 test = <ReactMarkdown skipHtml># header</ReactMarkdown>
-test = <ReactMarkdown allowDangerousHtml># header</ReactMarkdown>
-test = (
-  // $ExpectError
-  <ReactMarkdown skipHtml allowDangerousHtml>
-    # header
-  </ReactMarkdown>
-)
 
 ReactDom.render(<ReactMarkdown># header</ReactMarkdown>, document.body)
-ReactDom.render(<ReactMarkdownWitHtml># header</ReactMarkdownWitHtml>, document.body)