Feel free to try out the different JSX modes there as well.
Updates on the playground:
Starting from 10.1.2, it will automatically ship with rescript/react@0.11. Older versions will fall back to 0.10.
The playground will now load with a new template to allow easy JSX version manipulation
When sharing snippets, the playground will add the compiler version to the share url as well
This release will be a huge step towards a more convenient and productive language. We want to thank all our contributors and community members for building and testing the newest changes. Special thanks to @moondaddi for contributing the new JSX v4 transform!
According the requirements it states that rescript 10.1 require react 18. So we cannot use it rescript , rescript-react for react 17 apps. If so our production apps cannot be migrated to rescript 10.1. Any suggestions are appreciated
I think the react 18 requirement only applies to JSX V4. If you change nothing in your project configuration (so keep on using JSX V3), you should be able to keep on using react 17. @moondaddi is that correct?
@sriky27 You can keep using JSX V3 with the latest compiler and rescript-react v0.11. Please refer to the v3 compatible mode Migrate from JSX v3 | React
This isn’t entirely true. At least not without doing some adaptations if you’re using React.Context, since the new API isn’t entirely compatible with JSX v3. At the very least, context provider implementations need a makeProps function:
module Provider = {
let makeProps = (~value, ~children, ()): React.Context.props<_> => {value, children}
let make = React.Context.provider(context)
}
And in interface files, @react.component can’t be used, since the makeProps function it generates uses a JS object type, not a record type, so something like following needs to be used instead:
type context // placeholder for actual context type
module Provider: {
let makeProps: (
~value: context,
~children: React.element,
unit,
) => React.Context.props<context>
let make: React.Context.props<context> => React.element
}
ETA:
One way to make this migration easier might be to use a functor or function returning a first-class module. Instead of writing:
module Provider = {
let make = React.Context.provider(context)
}
One could write:
module Provider = React.Context.Provider({ let context = context })
More generally, the migration guide seems to have skipped interfaces entirely. It’s not entirely obvious what the signature for a context provider should be, for example.
One might think that this should work, since this is supposedly how you specify a props type that’s defined somewhere else:
@react.component(: React.Context.props<context>)
let make: (~value: context, ~children: React.element) => React.element
but maybe it just works for externals?
I’ve found that this works:
let make: React.Context.props<context> => React.element
but it’s a bit unfortunate that it obscures the actual props. Ideally I’d like the first example to work.
If you want to migrate the project from v3 to v4, then you need to rewrite some of implementations such as React.Context.
But it is not required in case you are going to keep using v3 with latest compiler and react binding.
