infernojs / babel-plugin-inferno

Transforms JSX to InfernoJS vNodes
MIT License
79 stars 26 forks source link

Unable to parse component that's the property of another object #19

Closed montlebalm closed 8 years ago

montlebalm commented 8 years ago

It doesn't seem possible for a component to be referenced as a property of another object. For example, parsing <obj.component /> throws the error "Cannot read property 'charAt' of undefined while parsing file". You can work around it, but the flexibility would be appreciated.

montlebalm commented 8 years ago

I have a stateless component lives on another object. Something similar to:

App.components = {
  foo: function(props) { return <h1>Hi</h1>; },
}

The parser blows up when I write <App.components.foo />. It works fine if I pull it off into its own variable.

On May 3, 2016, at 12:13 AM, Sampo Kivistö notifications@github.com wrote:

You can use ref="child" to make reference to child component, then its available in parent components this.refs.child. What exactly are you trying to do?

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/trueadm/babel-plugin-inferno/issues/19#issuecomment-216455890

Havunen commented 8 years ago

Sounds like bug, needs investigation

trueadm commented 8 years ago

@montlebalm So I've looked into this, JSX spec does not allow for dot-notation for JSXElement names. And there are no plans for them to implement it right now. We could implement a change to allow this, but this would mean this plugin breaks away from default JSX behaviour, which I'm somewhat unsure about. Given this isn't an issue in the React world of JSX usage, how big of an issue is it for you?

montlebalm commented 8 years ago

It's allowed in the "transform-react-jsx" Babel plugin, which is what tipped me off to the discrepancy in this lib. It's not really a problem for me, but you might consider supporting it if some of the popular alternatives do as well.

trueadm commented 8 years ago

@montlebalm I can't seem to get it working with transform-react-jsx on here: https://babeljs.io/repl/#?evaluate=true&lineWrap=false&presets=es2015%2Ces2015-loose%2Cstage-2&experimental=false&loose=false&spec=true&code=%0A%3Cfoo.bar%20%2F%3E%0A

rtsao commented 8 years ago

Seems to be working here: https://babeljs.io/repl/#?evaluate=false&lineWrap=false&presets=react&experimental=false&loose=false&spec=true&playground=false&code=%3Cfoo.bar%2F%3E

trueadm commented 8 years ago

@rtsao Iit looks like this has changed since. I'll re-visit this today and get it working on the plugin :)

trueadm commented 8 years ago

@rtsao this has now been fixed in the latest release – please let me know if you have anymore issues :)