Git Product home page Git Product logo

Comments (5)

 avatar commented on June 27, 2024

Could you describe what the the [@JSX] rewriting does? Just so that I understand whether it is something that would make sense to support in ppxlib. I think I see what it does, however if my understanding is correct then there might be performance implications.

from ppxlib.

steinuil avatar steinuil commented on June 27, 2024

For example ppx-tea-jsx rewrites this:

([@JSX] div ~class_:"a b" ~children:[
  ([@JSX] span ~style:[("text-weight", "bold")] ~children:["foo"] ());
  ([@JSX] br ~children:[] ());
] ())

Into this:

div [class "a b"] [
  span [style "text-weight" "bold"] [text "foo"];
  br [];
]

My ppx rewrites this:

([@JSX] div ~class_:["a"; "b"] ~children:[
  ([@JSX] span ~style:"text-weight: bold" ~children:["foo"] ())
] ())

Into this:

div ~a:[a_class ["a"; "b"]] [
  span ~a:[a_style "text-weight: bold"] [txt "foo"]
]

from ppxlib.

steinuil avatar steinuil commented on June 27, 2024

...Now that I think about it, it's not like this would net me a huge reduction in code size, since setting that up with Ast_traverse is pretty easy. If you think there would be performance implications then maybe it doesn't make a lot of sense to support this.

from ppxlib.

 avatar commented on June 27, 2024

The performance implication could be manageable actually. However, this code is a bit tedious and adding this feature wouldn't be super fun :/

Looking at the rewriting, it seems to me that a more idiomatic one would be to rewrite expressions of the form:

[%JSX div ~class_:"a b" ~children:[
  span ~style:[("text-weight", "bold")] ~children:["foo"];
  br ~children:[];
]

Indeed, while you are free to rewrite the input how you wish with a ppx rewriter, the generally accepted convention is that extension points are the right choice for interpreting DSLs.

Such rewritings are well supported by ppxlib.

from ppxlib.

steinuil avatar steinuil commented on June 27, 2024

I agree that using extension points would be better and more idiomatic; I don't really have a choice since the Reason parser only emits the attributes.

The original Reason code actually looks like this:

<div class="a b">
  <span style=[("text-weight", "bold")]> "foo" </span>
  <br />
</div>

Which is arguably nicer to read (if you're used to JSX from ReactJS) and plays nicer with Reason's formatter and all the tooling.

Yeah, now that I think about this isn't a great idea. Reason already does it but it's probably better to encourage people to use extension points for DSLs instead of this.

As for Reason in particular it would be easier to fix it upstream or make a wrapper library for JSX rewriters to remove all the boilerplate.

from ppxlib.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.