Function component returning null creates an empty text node in the DOM

[pauldijou]

Issue Template

Observed Behaviour

Inferno is creating an empty text node when a functional component returns null.

function Nothing() {
  return null;
}

class App extends Component {
  render() {
    return <div><Nothing /></div>
  }
}

Here, the div will have one children, an empty text node.

Expected Current Behaviour

Inferno should not create anything. null, as from my understanding, means to put nothing in the DOM at all. Replacing the functional component with directly {null} in the JSX actually does that (no text node at all).

It's important because an empty text node can actually display some empty spacing if line-height is defined in the CSS on some browsers. I would not expect a component returning null to have any impact.

Reproducing:
https://codesandbox.io/s/vigorous-browser-sw31e

Here is React rendering the same JSX code without any text node in both case:
https://codesandbox.io/s/admiring-water-o3exp

Inferno Metadata

macOS Chrome.

[Havunen]

Empty text node is used to track position of Component with null children.

Ideally we dont want to do this, but it fixes some issues. We could try remove that logic and see which test cases will fail

[pauldijou]

Could using an HTML comment be a valid alternative?

[Havunen]

Yes, comment nodes could be used but they pollute DOM :(

I need to check if same routines what we use for Fragments could be used to add support for not rendering anything.