JSX equivalent?

[drewda]

Any plans for including a markup DSL like JSX?

To give this a Ruby flavor, maybe let users embed Haml or Slim markup?

[mbajur]

Oh yes, using custom markup engine would take render method to the next level! I actually think that if such thing would be available, it would be much more comfortable to use react as react.rb than a vanilla / coffee equivalent (cause i really hate the way my render method looks right now).

+10000

[zetachang]

Hi, thank you guys for your interest on this project. Currently we support an element building DSL as a replacement of JSX (see below)

def render
  div do
    h1 { "Title" }
    h2 { "subtitle"}
    div { span { "some text #{interpolation}"} }
    present FancyElement
  end
end

Is this something you guys want?

[zetachang]

Since the reason why JSX exist is that Javascript is not expressive enough to make building DOM hierarchy easily (all the React.createElement noises)

But in Ruby this would not be a problem. That's why a element building DSL could be easily designed. And if your goal is to separate render method into another file, this will against the React.js philosophy to encapsulate UI into component rather than view.

Hope this will clarify 😄

[Bertg]

Hi would it be possible to do something like this?

def render
  present <<-HTML
    <div>
      <h1>#{title}</h1>
    </div>
  HTML
end

def render
  present <<-HTML
    <div>
      <h1>%{title}</h1>
    </div>
  HTML
end

I don't know enough about the react/opal internals to know if this is doable. However I do think this could be more "readable" for a developer.

[vais]

This is a matter of taste (and maybe my background), but this:

def render
  div do
    h1 { "Title" }
  end
end

looks more readable to me than this:

def render
  present <<-HTML
    <div>
      <h1>%{title}</h1>
    </div>
  HTML
end

@zetachang for what's it worth, I think you are on the right track with the Ruby DSL vs HTML. 👍

[Bertg]

@vais I guess it depends on ones background.

I'm actually more interested if it would be possible to do it like that.

I see that the JSX translates the "HTML" part to individual node creation calls, I guess that the overhead of parsing the HTML at runtime would be deadly to performance.

So the only way would be for OPAL to understand that the <<-HTML section should be transpired to react specific code, which I don't see happening.

Maybe something like this would be possible instead:

def render
  present <<-HTML.react_jsx
    <div>
      <h1>%{title}</h1>
    </div>
  HTML
end

But that starts to become less clean.

[zetachang]

Just came up with some approach to avoid modifying the compiler:

def render
  %x{
    <div>
      <h1>#{title}</h1>
    </div>
  }
end

This would get compiled to JS, by feeding this to a JSX transpiler, we would get valid JS as result. But still some issues needed to be addressed.

• Does Opal support chaining preprocessing with file extension like .js.es6.opal ?
• React.create_element need to be modified to make JSX work (component class should be exposed in the render method, etc)

Above is the easy way, the hard way may be rolling out our own transpiler which compile HTML markup inside your code to valid Ruby code (just as JSX did). Which will allow you to write,

def render
    <div>
      <h1>#{title}</h1>
    </div>
end

[elia]

It should work chaining with the react compiler, not sure about es6.

Also i suggest to use .rb instead of .opal.

[zetachang]

@elia ,thanks, it's great that Opal plays well with Sprockets,which makes life easier to support another transformer.

#11 is proposed to have basic support of JSX in Opal's x-interpolation. An example is also added to demonstrate more details.

[zetachang]

It's released in latest 0.1.0. Feel free to reopen it if you got any other concerns or suggestion. 😉

[sollycatprint]

This issue was moved to ruby-hyperloop/hyper-react#8