How can I get Babel with transform-react-jsx to properly transform a component without module.exports(for ACE editor use)?

Question

First some background: I am trying to set up a interactive "Try It" for React-Clone I made a week ago for a coding challenge. For example here is one of the samples I am working on Create Component

Anyways, when I use Babel and Webpack or browserify the React-clone I made works just fine, as in below:

const Trends = EX.component({
 componentName: 'trends',
 componentRender: (props) => {
  return (
    <div class="col-xs-12">
      <h2>{props.ex_thing.stuff}</h2> 
    </div>
  )
 }
});
module.exports = Trends;

Parent component:

 const Trends   = require("./trends.js");

 <Trends ex_thing={anObject} />

 //compiles to: 

 Trends({ex_thing: anObject})

But! if I define the component without commonJS it compiles into EX.node("Trends", {ex_thing: anObject}) . FYI: EX.node is what I use for the React-Clone I made.

Here on Google drive I have two HTML files one that works called works.html and another that's broken broken.html , it requires zero set up, just click and open in Chrome Two HTML files

The only difference is that for works.html I don't write the component NameTag in JSX since it compiles it like a element rather than a function. The compiled code is logged in the console.

How can I get Babel to compile NameTag to NameTag({ex_person:itm}) and not EX.node('NameTag',{ex_person:itm} ) ?

Thank you

Answer 1

Opps: Sorry everyone I am an idiot. I recently noticed that React transpiles components just like mine was.

For example a component like Trends in react compiles like this:

  React.createElement(Trends, { ex_thing: anObject });

So what I did was I changed the function that creates the vDom to check if the Tagname is actually a function here:

NodeMap.prototype.node = (type, props = {}, ...nested) => {
  if (typeof type === "function") {
    return type(props);
  }
 nested = nested ? smoothNested(nested) : [];
 return {
   type,
   props,
   nested
 };
}

Now the broken.html works!