Add autoCloseVoidElements (TroyAlford#163)

* Add autoCloseVoidElements
* Update demo & components typing
* Update build process for patched acorn
* Bump version to 1.28.0

Author: TroyAlford

README.md

@@ -85,17 +85,41 @@ Any `ComponentA`, `ComponentB`, `ComponentC` or `ComponentD` tags in the dynamic
 
 _Note:_ Non-standard tags may throw errors and warnings, but will typically be rendered in a reasonable way.
 
+## Advanced Usage - HTML & Self-Closing Tags
+When rendering HTML, standards-adherent editors will render `img`, `hr`, `br`, and other
+[void elements](https://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#void-elements) with no trailing `/>`. While this is valid HTML, it is _not_ valid JSX. If you wish to opt-in to a more HTML-like parsing style, set the `autoCloseVoidElements` prop to `true`.
+
+### Example:
+```jsx
+// <hr> has no closing tag, which is valid HTML, but not valid JSX
+<JsxParser jsx="<hr><div className='foo'>Foo</div>" />
+// Renders: null
+
+// <hr></hr> is invalid HTML, but valid JSX
+<JsxParser jsx="<hr></hr><div className='foo'>Foo</div>" />
+// Renders: <hr><div class='foo'>Foo</div>
+
+// This is valid HTML, and the `autoCloseVoidElements` prop allows it to render
+<JsxParser autoCloseVoidElements jsx="<hr><div className='foo'>Foo</div>" />
+// Renders: <hr><div class='foo'>Foo</div>
+
+// This would work in a browser, but will no longer parse with `autoCloseVoidElements`
+<JsxParser autoCloseVoidElements jsx="<hr></hr><div className='foo'>Foo</div>" />
+// Renders: null
+```
+
 ## PropTypes / Settings
 ```javascript
 JsxParser.defaultProps = {
-  // if false, unrecognized elements like <foo> are omitted and reported via onError
   allowUnknownElements: true, // by default, allow unrecognized elements
+  // if false, unrecognized elements like <foo> are omitted and reported via onError
+
+  autoCloseVoidElements: false, // by default, unclosed void elements will not parse. See examples
 
   bindings: {}, // by default, do not add any additional bindings
 
-  // by default, just removes `on*` attributes (onClick, onChange, etc.)
-  // values are used as a regex to match property names
-  blacklistedAttrs: [/^on.+/i],
+  blacklistedAttrs: [/^on.+/i], // default: removes `on*` attributes (onClick, onChange, etc.)
+  // any attribute name which matches any of these RegExps will be omitted entirely
 
   blacklistedTags:  ['script'], // by default, removes all <script> tags
 

dist/cjs/react-jsx-parser.min.js

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { Component, FunctionComponent } from 'react';
 export declare type TProps = {
     allowUnknownElements?: boolean;
+    autoCloseVoidElements?: boolean;
     bindings?: {
         [key: string]: unknown;
     };
     blacklistedAttrs?: Array<string | RegExp>;
     blacklistedTags?: string[];
     className?: string;
-    components?: Record<string, React.JSXElementConstructor<unknown>>;
+    components?: Record<string, Component | FunctionComponent>;
     componentsOnly?: boolean;
     disableFragments?: boolean;
     disableKeyGeneration?: boolean;

dist/cjs/react-jsx-parser.min.js.map

@@ -14,7 +14,7 @@
   "types": "dist/index.d.ts",
   "name": "react-jsx-parser",
   "repository": "TroyAlford/react-jsx-parser",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "dependencies": {
     "@types/jsdom": "^16.2.4",
     "acorn": "^8.0.4",
@@ -53,6 +53,7 @@
     "jest-cli": "^26.5.3",
     "jest-environment-jsdom-fourteen": "^1.0.1",
     "mkdirp": "^1.0.4",
+    "patch-package": "^6.2.2",
     "react": "^16",
     "react-dom": "^16",
     "source-map-explorer": "^2.5.0",
@@ -74,17 +75,14 @@
     "merge": "^1.2.1"
   },
   "scripts": {
-    "build": "yarn types && cross-env NODE_ENV=production webpack",
+    "build": "yarn patch-package && yarn types && cross-env NODE_ENV=production webpack",
     "develop": "NODE_ENV=production concurrently -n build,ts,demo -c green,cyan,yellow \"yarn webpack --watch\" \"yarn types --watch\" \"yarn webpack serve --config ./webpack.demo.js\"",
     "types": "tsc -p ./tsconfig.json -d --emitDeclarationOnly",
-    "postversion": "git push origin HEAD && git push origin HEAD --tags",
     "prebuild": "mkdirp ./dist && rm -rf ./dist/*",
-    "preversion": "yarn test",
     "sourcemap": "yarn build && source-map-explorer ./dist/es5/react-jsx-parser.min.js",
-    "test": "yarn jest",
-    "version": "yarn build && git add -A ./dist"
+    "test": "yarn patch-package && yarn jest"
   },
-	"contributors": [
+  "contributors": [
     {
       "name": "akucheruk-vareger",
       "url": "https://github.com/akucheruk-vareger"

dist/components/JsxParser.d.ts

@@ -0,0 +1,28 @@
+diff --git a/node_modules/acorn-jsx/index.js b/node_modules/acorn-jsx/index.js
+index 004e080..aed0558 100644
+--- a/node_modules/acorn-jsx/index.js
++++ b/node_modules/acorn-jsx/index.js
+@@ -75,7 +75,8 @@ module.exports = function(options) {
+   return function(Parser) {
+     return plugin({
+       allowNamespaces: options.allowNamespaces !== false,
+-      allowNamespacedObjects: !!options.allowNamespacedObjects
++      allowNamespacedObjects: !!options.allowNamespacedObjects,
++      autoCloseVoidElements: !!options.autoCloseVoidElements,
+     }, Parser);
+   };
+ };
+@@ -356,6 +357,13 @@ function plugin(options, Parser) {
+         node.attributes.push(this.jsx_parseAttribute());
+       node.selfClosing = this.eat(tt.slash);
+       this.expect(tok.jsxTagEnd);
++      const VOID_ELEMENTS = [
++        'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen',
++        'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr'
++      ]
++      if (options.autoCloseVoidElements && nodeName && VOID_ELEMENTS.includes(nodeName.name)) {
++        node.selfClosing = true;
++      }
+       return this.finishNode(node, nodeName ? 'JSXOpeningElement' : 'JSXOpeningFragment');
+     }
+ 

dist/es5/react-jsx-parser.min.js

@@ -704,31 +704,6 @@ describe('JsxParser Component', () => {
 		})
 	})
 	describe('prop bindings', () => {
-		test('allows void-element named custom components to take children', () => {
-			// eslint-disable-next-line react/prop-types
-			const link = ({ to, children }) => (<a href={to}>{children}</a>)
-			const { rendered } = render(<JsxParser components={{ link }} jsx={'<link to="/url">Text</link>'} />)
-			expect(rendered.childNodes[0].nodeName).toEqual('A')
-			expect(rendered.childNodes[0].textContent).toEqual('Text')
-		})
-		test('does not render children for poorly formed void elements', () => {
-			const { rendered } = render(
-				<JsxParser
-					jsx={
-						'<img src="/foo.png">'
-						+ '<div class="invalidChild"></div>'
-						+ '</img>'
-					}
-				/>,
-			)
-
-			expect(rendered.childNodes).toHaveLength(1)
-			expect(rendered.getElementsByTagName('img')).toHaveLength(1)
-			expect(rendered.childNodes[0].innerHTML).toEqual('')
-			expect(rendered.childNodes[0].childNodes).toHaveLength(0)
-
-			expect(rendered.getElementsByTagName('div')).toHaveLength(0)
-		})
 		test('parses childless elements with children = undefined', () => {
 			const { component } = render(<JsxParser components={{ Custom }} jsx="<Custom />" />)
 
@@ -1128,6 +1103,46 @@ describe('JsxParser Component', () => {
 		)
 		expect(html).toEqual('<div class="foo">foo</div>')
 	})
+	describe('void elements', () => {
+		test('void-element named custom components to take children', () => {
+			// eslint-disable-next-line react/prop-types
+			const link = ({ to, children }) => (<a href={to}>{children}</a>)
+			const { rendered } = render(<JsxParser components={{ link }} jsx={'<link to="/url">Text</link>'} />)
+			expect(rendered.childNodes[0].nodeName).toEqual('A')
+			expect(rendered.childNodes[0].textContent).toEqual('Text')
+		})
+	})
+	describe('self-closing tags', () => {
+		test('by default, renders self-closing tags without their children', () => {
+			const { rendered } = render(
+				<JsxParser showWarnings jsx='<img src="/foo.png"><div class="invalidChild"></div></img>' />,
+			)
+
+			expect(rendered.childNodes).toHaveLength(1)
+			expect(rendered.getElementsByTagName('img')).toHaveLength(1)
+			expect(rendered.childNodes[0].innerHTML).toEqual('')
+			expect(rendered.childNodes[0].childNodes).toHaveLength(0)
+
+			expect(rendered.getElementsByTagName('div')).toHaveLength(0)
+		})
+		test('props.autoCloseVoidElements=true auto-closes self-closing tags', () => {
+			const { rendered } = render(
+				<JsxParser autoCloseVoidElements jsx='<img src="/foo.png"><div>Foo</div>' />,
+			)
+
+			expect(rendered.childNodes).toHaveLength(2)
+			expect(rendered.getElementsByTagName('img')).toHaveLength(1)
+			expect(rendered.childNodes[0].innerHTML).toEqual('')
+			expect(rendered.childNodes[0].childNodes).toHaveLength(0)
+			expect(rendered.getElementsByTagName('div')).toHaveLength(1)
+		})
+		test('props.autoCloseVoidElements=true prevents self-closing tags with closing tags from parsing', () => {
+			const { rendered } = render(
+				<JsxParser autoCloseVoidElements jsx='<img src="/foo.png"></img><div></div>' />,
+			)
+			expect(rendered.childNodes).toHaveLength(0)
+		})
+	})
 	test('throws on non-simple literal and global object instance methods', () => {
 		// Some of these would normally fail silently, set `onError` forces throw for assertion purposes
 		expect(() => render(<JsxParser jsx="{ window.scrollTo() }" onError={e => { throw e }} />)).toThrow()

dist/es5/react-jsx-parser.min.js.map

@@ -1,7 +1,7 @@
 /* global JSX */
 import * as Acorn from 'acorn'
 import * as AcornJSX from 'acorn-jsx'
-import React, { Fragment } from 'react'
+import React, { Component, FunctionComponent, Fragment } from 'react'
 import ATTRIBUTES from '../constants/attributeNames'
 import { canHaveChildren, canHaveWhitespace } from '../constants/specialTags'
 import { randomHash } from '../helpers/hash'
@@ -12,11 +12,12 @@ type ParsedJSX = JSX.Element | boolean | string
 type ParsedTree = ParsedJSX | ParsedJSX[] | null
 export type TProps = {
 	allowUnknownElements?: boolean,
+	autoCloseVoidElements?: boolean,
 	bindings?: { [key: string]: unknown; },
 	blacklistedAttrs?: Array<string | RegExp>,
 	blacklistedTags?: string[],
 	className?: string,
-	components?: Record<string, React.JSXElementConstructor<unknown>>,
+	components?: Record<string, Component | FunctionComponent>,
 	componentsOnly?: boolean,
 	disableFragments?: boolean,
 	disableKeyGeneration?: boolean,
@@ -28,14 +29,12 @@ export type TProps = {
 	renderUnrecognized?: (tagName: string) => JSX.Element | null,
 }
 
-const parser = Acorn.Parser.extend(AcornJSX.default())
-
 /* eslint-disable consistent-return */
 export default class JsxParser extends React.Component<TProps> {
 	static displayName = 'JsxParser'
-
 	static defaultProps: TProps = {
 		allowUnknownElements: true,
+		autoCloseVoidElements: false,
 		bindings: {},
 		blacklistedAttrs: [/^on.+/i],
 		blacklistedTags: ['script'],
@@ -55,6 +54,9 @@ export default class JsxParser extends React.Component<TProps> {
 	private ParsedChildren: ParsedTree = null
 
 	#parseJSX = (jsx: string): JSX.Element | JSX.Element[] | null => {
+		const parser = Acorn.Parser.extend(AcornJSX.default({
+			autoCloseVoidElements: this.props.autoCloseVoidElements,
+		}))
 		const wrappedJsx = `<root>${jsx}</root>`
 		let parsed: AcornJSX.Expression[] = []
 		try {
@@ -68,7 +70,7 @@ export default class JsxParser extends React.Component<TProps> {
 			if (this.props.renderError) {
 				return this.props.renderError({ error: String(error) })
 			}
-			return []
+			return null
 		}
 
 		return parsed.map(this.#parseExpression).filter(Boolean)

dist/umd/react-jsx-parser.min.js

@@ -5,7 +5,13 @@ import JsxParser from '../dist/umd/react-jsx-parser.min'
 
 ReactDOM.render(
 	<JsxParser
-		jsx="<div className='foo'>bar</div>"
+		autoCloseVoidElements
+		jsx={`
+			<img src="http://placekitten.com/300/500">
+			<div className="foo">bar</div>
+		`}
+		onError={console.error}
+		showWarnings
 	/>,
 	document.querySelector('#root'),
 )

dist/umd/react-jsx-parser.min.js.map

@@ -150,6 +150,11 @@ declare module 'acorn-jsx' {
 		ExpressionStatement | Identifier | Literal | LogicalExpression | MemberExpression |
 		ObjectExpression | TemplateElement | TemplateLiteral | UnaryExpression
 
-	export default function(): any
+	interface PluginOptions {
+		allowNamespacedObjects?: boolean,
+		allowNamespaces?: boolean,
+		autoCloseVoidElements?: boolean,
+	}
+	export default function(options?: PluginOptions): any
 }
 /* eslint-enable no-use-before-define */