Document "IN_BROWSER" flag about react-magic

[Daniel15]

Ah that's a good point. This repository was initially only "react-magic" and had no NPM package. The NPM package was added later, but only really designed for use from Node.js. So at the moment I'm building for two use cases:

• react-magic, ran in browsers, defines IN_BROWSER in the build (https://github.com/reactjs/react-magic/blob/master/gulpfile.js#L39-L41)
• HTMLtoJSX, ran in Node.js, does not define IN_BROWSER

I didn't think about the third use case of installing the NPM package and using that with frontend code, as honestly very few people use NPM for frontend at the moment. Perhaps I should make it do environmental detection instead (eg. typeof window !== 'undefined' or similar) rather than using a variable.

[ssorallen]

I think your Gulpfile is how I originally found how you used IN_BROWSER. It seems reasonable to me to keep it as a flag, but then again I am comfortable using NPM for writing browser code. The nice part of a flag is Webpack can treat it like a #define and remove the code that will never execute during compilation.

[mummybot]

Hey @Daniel15 & @ssorallen,

Your conversation on IN_BROWSER steered me in the right direction for usage with Webpack.

I have written a small library (not open sourcing until I can be sure I'm on the right track) which utilises this library for HTML -> JSX -> HTML interpretation in the browser. A simplified version of the "magic" is the following:

import Htmltojsx from 'htmltojsx';
import reactTools from 'react-tools';

const converter = new Htmltojsx({
  createClass: false
});
function convertToJSX(standardHTMLStr) {
  const ret = reactTools.transform(converter.convert(standardHTMLStr));

  return eval(ret); // evil!!!
}
function insertExistingHTML(query) {
// find existing HTML domNode on a page, 
// convert it to JSX and 
// return it as React virtual dom.
  return convertToJSX(document.querySelector(query).outerHTML);
}

I haven't been able to figure out a way of having React render the JSX created by the htmltojsx library without piping it through reactTools and doing an eval on the resulting JS. Do you know of a way to render the JSX at browser runtime without using eval? I am using babel for JSX conversion in my build, but this is not applicable when dynamically grabbing domNodes.

Sample usage below:

render() {
  return <div>
    {insertExistingHTML('.tpbc-logo')}
    <div className="container">
      {insertExistingHTML(
        'header .container .navigationMain'
      )}
      {insertExistingHTML(
        'header .container form'
      )}
    </div>
    <Hamburger toggle={this.toggle} menu={this.state.menu} />
  </div>;
}

[Daniel15]

I haven't been able to figure out a way of having React render the JSX created by the htmltojsx library without piping it through reactTools and doing an eval on the resulting JS

Adding the ability to compile directly to React.createElement calls would help with that, as you wouldn't need to deal with JSX at all. Issue #19 tracks that.

[mummybot]

That would be amazing! Are you working on this or is it something you need help with?

[ssorallen]

#19 would negate having to document this. This is a rather old issue and not particularly useful, so I am closing it.