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

Pete Pete · Accepted Answer · 2016-10-05T05:24:07

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!

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

1 Answers