React DOM: Restrict content props on void HTML elements

Author: motiz88

lib/react-dom.js

@@ -274,24 +274,24 @@ declare type $JSXIntrinsics = {
   a: {instance: HTMLAnchorElement, props: ReactDOM$HTMLElementProps},
   abbr: ReactDOM$HTMLElementJSXIntrinsic,
   address: ReactDOM$HTMLElementJSXIntrinsic,
-  area: ReactDOM$HTMLElementJSXIntrinsic,
+  area: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   article: ReactDOM$HTMLElementJSXIntrinsic,
   aside: ReactDOM$HTMLElementJSXIntrinsic,
   audio: {instance: HTMLAudioElement, props: ReactDOM$HTMLElementProps},
   b: ReactDOM$HTMLElementJSXIntrinsic,
-  base: ReactDOM$HTMLElementJSXIntrinsic,
+  base: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   bdi: ReactDOM$HTMLElementJSXIntrinsic,
   bdo: ReactDOM$HTMLElementJSXIntrinsic,
   big: ReactDOM$HTMLElementJSXIntrinsic,
   blockquote: ReactDOM$HTMLElementJSXIntrinsic,
   body: ReactDOM$HTMLElementJSXIntrinsic,
-  br: {instance: HTMLBRElement, props: ReactDOM$HTMLElementProps},
+  br: {instance: HTMLBRElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   button: {instance: HTMLButtonElement, props: ReactDOM$HTMLElementProps},
   canvas: {instance: HTMLCanvasElement, props: ReactDOM$HTMLElementProps},
   caption: {instance: HTMLTableCaptionElement, props: ReactDOM$HTMLElementProps},
   cite: ReactDOM$HTMLElementJSXIntrinsic,
   code: ReactDOM$HTMLElementJSXIntrinsic,
-  col: ReactDOM$HTMLElementJSXIntrinsic,
+  col: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   colgroup: ReactDOM$HTMLElementJSXIntrinsic,
   data: ReactDOM$HTMLElementJSXIntrinsic,
   datalist: ReactDOM$HTMLElementJSXIntrinsic,
@@ -304,7 +304,7 @@ declare type $JSXIntrinsics = {
   dl: {instance: HTMLDListElement, props: ReactDOM$HTMLElementProps},
   dt: ReactDOM$HTMLElementJSXIntrinsic,
   em: ReactDOM$HTMLElementJSXIntrinsic,
-  embed: ReactDOM$HTMLElementJSXIntrinsic,
+  embed: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   fieldset: {instance: HTMLFieldSetElement, props: ReactDOM$HTMLElementProps},
   figcaption: ReactDOM$HTMLElementJSXIntrinsic,
   figure: ReactDOM$HTMLElementJSXIntrinsic,
@@ -319,24 +319,24 @@ declare type $JSXIntrinsics = {
   head: ReactDOM$HTMLElementJSXIntrinsic,
   header: ReactDOM$HTMLElementJSXIntrinsic,
   hgroup: ReactDOM$HTMLElementJSXIntrinsic,
-  hr: {instance: HTMLHRElement, props: ReactDOM$HTMLElementProps},
+  hr: {instance: HTMLHRElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   html: ReactDOM$HTMLElementJSXIntrinsic,
   i: ReactDOM$HTMLElementJSXIntrinsic,
   iframe: {instance: HTMLIFrameElement, props: ReactDOM$HTMLElementProps},
-  img: {instance: HTMLImageElement, props: ReactDOM$HTMLElementProps},
+  img: {instance: HTMLImageElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   ins: ReactDOM$HTMLElementJSXIntrinsic,
   kbd: ReactDOM$HTMLElementJSXIntrinsic,
-  keygen: ReactDOM$HTMLElementJSXIntrinsic,
+  keygen: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   label: {instance: HTMLLabelElement, props: ReactDOM$HTMLElementProps},
   legend: {instance: HTMLLegendElement, props: ReactDOM$HTMLElementProps},
   li: {instance: HTMLLIElement, props: ReactDOM$HTMLElementProps},
-  link: {instance: HTMLLinkElement, props: ReactDOM$HTMLElementProps},
+  link: {instance: HTMLLinkElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   main: ReactDOM$HTMLElementJSXIntrinsic,
   map: ReactDOM$HTMLElementJSXIntrinsic,
   mark: ReactDOM$HTMLElementJSXIntrinsic,
   menu: ReactDOM$HTMLElementJSXIntrinsic,
-  menuitem: ReactDOM$HTMLElementJSXIntrinsic,
-  meta: {instance: HTMLMetaElement, props: ReactDOM$HTMLElementProps},
+  menuitem: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
+  meta: {instance: HTMLMetaElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   meter: ReactDOM$HTMLElementJSXIntrinsic,
   nav: ReactDOM$HTMLElementJSXIntrinsic,
   noscript: ReactDOM$HTMLElementJSXIntrinsic,
@@ -346,7 +346,7 @@ declare type $JSXIntrinsics = {
   option: {instance: HTMLOptionElement, props: ReactDOM$HTMLElementProps},
   output: ReactDOM$HTMLElementJSXIntrinsic,
   p: {instance: HTMLParagraphElement, props: ReactDOM$HTMLElementProps},
-  param: ReactDOM$HTMLElementJSXIntrinsic,
+  param: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   picture: ReactDOM$HTMLElementJSXIntrinsic,
   pre: {instance: HTMLPreElement, props: ReactDOM$HTMLElementProps},
   progress: ReactDOM$HTMLElementJSXIntrinsic,
@@ -359,7 +359,7 @@ declare type $JSXIntrinsics = {
   script: {instance: HTMLScriptElement, props: ReactDOM$HTMLElementProps},
   section: ReactDOM$HTMLElementJSXIntrinsic,
   small: ReactDOM$HTMLElementJSXIntrinsic,
-  source: {instance: HTMLSourceElement, props: ReactDOM$HTMLElementProps},
+  source: {instance: HTMLSourceElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   span: {instance: HTMLSpanElement, props: ReactDOM$HTMLElementProps},
   strong: ReactDOM$HTMLElementJSXIntrinsic,
   style: {instance: HTMLStyleElement, props: ReactDOM$HTMLElementProps},
@@ -375,12 +375,12 @@ declare type $JSXIntrinsics = {
   time: ReactDOM$HTMLElementJSXIntrinsic,
   title: ReactDOM$HTMLElementJSXIntrinsic,
   tr: {instance: HTMLTableRowElement, props: ReactDOM$HTMLElementProps},
-  track: ReactDOM$HTMLElementJSXIntrinsic,
+  track: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   u: ReactDOM$HTMLElementJSXIntrinsic,
   ul: {instance: HTMLUListElement, props: ReactDOM$HTMLElementProps},
   'var': ReactDOM$HTMLElementJSXIntrinsic,
   video: {instance: HTMLVideoElement, props: ReactDOM$HTMLElementProps},
-  wbr: ReactDOM$HTMLElementJSXIntrinsic,
+  wbr: {instance: HTMLElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   // SVG
   svg: ReactDOM$SVGElementJSXIntrinsic,
   animate: ReactDOM$SVGElementJSXIntrinsic,
@@ -404,7 +404,7 @@ declare type $JSXIntrinsics = {
   tspan: ReactDOM$SVGElementJSXIntrinsic,
   use: ReactDOM$SVGElementJSXIntrinsic,
   // Elements React adds extra props for.
-  input: {instance: HTMLInputElement, props: ReactDOM$HTMLElementProps},
+  input: {instance: HTMLInputElement, props: ReactDOM$VoidElementProps<ReactDOM$HTMLElementProps>},
   textarea: {instance: HTMLTextAreaElement, props: ReactDOM$HTMLElementProps},
   select: {instance: HTMLSelectElement, props: ReactDOM$HTMLElementProps},
   // Catch-all for custom elements.
@@ -505,4 +505,19 @@ type ReactDOM$Style = Object; // TODO
 
 // NOTE: In principle this can be `number | string`, but constraining values to
 // numbers might be a useful design choice.
-type ReactDOM$Number = number;
+type ReactDOM$Number = number;
+
+// Changes children and dangerouslySetInnerHTML in a given props type to be
+// optional (if they're not already) and limits them to empty values.
+// This helps model the React dev mode warning emitted when setting either of
+// these props on an empty HTML element.
+type ReactDOM$VoidElementProps<Props> = $Diff<
+  Props,
+  {
+    children: any,
+    dangerouslySetInnerHTML: any
+  }
+> & {
+  children?: ?void, // Empty elements cannot have children
+  dangerouslySetInnerHTML?: ?void // innerHTML cannot be set on empty elements
+};

tests/react_dom/react_dom.exp

@@ -414,5 +414,40 @@ References:
                                            ^^^^^^^ [2]
 
 
+Error ----------------------------------------------------------------------------------------- void_element_tags.js:7:1
 
-Found 20 errors
+Cannot create `menuitem` element because object literal [1] is incompatible with undefined [2] in property
+`dangerouslySetInnerHTML`.
+
+   void_element_tags.js:7:1
+     7| <menuitem dangerouslySetInnerHTML={{ __html: "Content" }} />; // Error
+        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+References:
+   void_element_tags.js:7:36
+     7| <menuitem dangerouslySetInnerHTML={{ __html: "Content" }} />; // Error
+                                           ^^^^^^^^^^^^^^^^^^^^^ [1]
+   <BUILTINS>/react-dom.js:499:30
+   499|   dangerouslySetInnerHTML?: ?void // innerHTML cannot be set on empty elements
+                                     ^^^^ [2]
+
+
+Error ----------------------------------------------------------------------------------------- void_element_tags.js:8:1
+
+Cannot create `br` element because JSX text [1] is incompatible with undefined [2] in property `children`.
+
+   void_element_tags.js:8:1
+     8| <br>Content</br>; // Error
+        ^^^^^^^^^^^^^^^^
+
+References:
+   void_element_tags.js:8:5
+     8| <br>Content</br>; // Error
+            ^^^^^^^ [1]
+   <BUILTINS>/react-dom.js:498:15
+   498|   children?: ?void, // Empty elements cannot have children
+                      ^^^^ [2]
+
+
+
+Found 22 errors

tests/react_dom/void_element_tags.js

@@ -0,0 +1,10 @@
+// @flow
+
+import React from "react";
+
+<menuitem />; // OK
+<br />; // OK
+<menuitem dangerouslySetInnerHTML={{ __html: "Content" }} />; // Error
+<br>Content</br>; // Error
+<menuitem dangerouslySetInnerHTML={null} />; // OK
+<br>{null}</br>; // OK