Use "React.Fragment" to render flushed components without "span"

[kettanaito]

Changelog

• createApiWithCss now returns Js, Styles and Css React components using React.Fragment to render their children without a wrapping <span>
• createApiWithCss snapshot changed according to the changes in the source file

Benefits

• No redundant span which shouldn't wrap <link> or <script> elements
• Doesn't affect the rest of the code, shouldn't break anything on the end-usage point as well
• Ready for React v16+

Consequences

• Needs to be published under major version due to the dependency from React v16+

Side notes

I've thought about this change and introduced a small pull request to cover it. I am not very familiar with Jest and its snapshots system, so you better check if I changed the snapshots correctly.

By the way, not a very good idea to include whitespaces as a part of a snapshot. Some IDE remove trailing whitespaces automatically, which causes snapshots to fail. You may want to consider removing whitespaces.

[faceyspacey]

Thanks for this. I'm hesitant to merge it just yet. Are you using it successfully? It may make more sense along side a larger release in the future.

Regarding the white space, I'm pretty sure that's Jest's doing, as I never edit the files directly. Perhaps prettier or eslint formatting.

[kettanaito]

@faceyspacey Thanks for the reply.
Reasonable worrying. I will give this change a try in my project and post here how it went, any possible obstacles this change brings. Sounds fair?

[faceyspacey]

cool!

[serhii-ohorodnyk]

Hi @faceyspacey , is there a plan to merge this PR? I'm very much interested in this change.
I'm using react component instead of string/string-literal in my SSR solution and having style links wrapped into 'span' breaking my html (span is not allowed as child tag of header).
My Html component for SSR is very similar to this one https://github.com/leebenson/reactql/blob/master/src/views/ssr.tsx#L27, if you are interested in example.

For now I forked your repo and made "span -> React.Fragment" myself (published repo is here https://www.npmjs.com/package/webpack-flush-chunks-with-fragment). So far it works for me!