[Feature request] JSX version 4

[whitchapman]

I use this ppx with Rescript, and the error message I get when attempting to use version 4 is:

  The record field children can't be found.

  If it's defined in another module or file, bring it into scope by:
  - Prefixing it with said module name: TheModule.children
  - Or specifying its type:
  let theValue: TheModule.theType = {children: VALUE}

Thanks!

[ashton]

Is there anything we can help with that? I don't have knowledge creating PPX but if there is some guide of manual work that is needed I can help with.

[davesnx]

There are a few doubts from my side, help resolving those might make the feature available very soon (depending on the answers obviously!).

• Would you expect styled-ppx to transform to JSX4 for all files? Would you expect to read bs-config jsx field or a ppx flag styled-ppx/ppx --jsx4?
• What happens when JSX4 isn't enabled? Explode?
• Do we want to support the v3-compatible mode?
• Since we generate React components, do we want to support the mode as well?
• What happens when JSX4 is enabled in .re files? Should automatically use JSX3 for these cases or crash?

[davesnx]

I posted an issue for the ReScript team about some technical issue with the generation of props, If anyone have a good idea, tune in. Let's see how this goes, but meanwhile would love to know some opinions on the above.

The post is https://forum.rescript-lang.org/t/ann-new-nightly-release-of-styled-ppx-working-with-jsx4/4331/2,

[davesnx]

I published a new alpha version that has dynamic components broken, the rest should work as expected.

npm install @davesnx/styled-ppx@0.35.1-f167a44.0

[davesnx]

Pushed a new version with most of the fixes, should be a little stable now.

npm install @davesnx/styled-ppx@nightly

A few things to take into account:

• It reads the bs-config.json and applies the JSX4 transformation to all styled components.
• It doesn't support reading the decorator @@jsxVersion.
• It only does the "classic" method.

[davesnx]

I merged the PR with JSX4 support (v0.35), it's currently in beta and append here any issue you find with it.

[whitchapman]

Thanks for doing this. Unfortunately, I still get the exact same compile error when setting jsx to version 4 using version 0.35 of the ppx. It's possible that I am missing something basic. EDITED: removed superfluous comments

[davesnx]

Ok, miss-typed the version and forgot to publish it. It's 0.36. Can you try updating?

[whitchapman]

Ok, miss-typed the version and forgot to publish it. It's 0.36. Can you try updating?

Yes, that did it. Outstanding!

[ashton]

Hello @davesnx! First let me thank you for being so quick and prestative! I don't know if I'm doing something wrong, but when I do:

module CardBody = %styled.div(`
  display: flex;
  justify-content: space-between;
`)

@react.component
let make = () => {
  <CardBody className="card-body">
     {"... many children here"}
  </CardBody>
}

Using the option at bsconfig.json:

{"jsx": {"version": 4, "mode": "classic"}}

It should render the CardBody component with the generated class name for the style that I provided using the %styled extension, and also concatenate it with the class name that I provide in the className argument right?

That is not what is happening:

I'm using the 0.36.2 version of styled-ppx

[davesnx]

Right, it seems like className isn't appended. Will have a look.

Thanks for trying it <3

[ashton]

Heeey, any news?

[davesnx]

Pushed 0.38.1 fixing the className issue. Thanks for the testing!

[davesnx]

The missing piece on JSX4 is the new JSX transformation.

[davesnx]

Hey @ashton @whitchapman

Do you have any OSS repository with ReScript that is using v11?

[ashton]

Do you have any OSS repository with ReScript that is using v11?

Hey, I don't think v11 is out yet, but as soon as it gets released I'll update my projects with it

[davesnx]

Finishing the v11 support on https://github.com/davesnx/styled-ppx/issues/415

JSX4 should work nice