Skip to content

Commit a9a2d96

Browse files
davesnxtatchi
davesnx
and
tatchi
authored
Prepare for 0.16.0 (#893)
* Add unreleased PRs into CHANGES.md * Update @testing-library/react to latest with React 19 * Remove version and metadata on package.json * Fix melange dep in dune-project, from 5cd0660 * Rename ReasonReact to reason-react * Review most React 19's API (#894) * Rename ReasonReact to reason-react * Add initialValue into useDeferredValue * Add useTransitionAsync * Add Experimental.promise * Add initialValue into useDeferredValue in React.rei * Explain new (2020) jsx transformation (#896) * Add 5.1.0 as lower bound * Update opam-check-npm-deps react, react-dom to 19.1.0 * Add ?dev in demo, and add example for fragments * Update CHANGES.md Co-authored-by: Corentin Leruth <[email protected]> * Add without forward ref in demo * Add deprecation to unmountComponentAtNode * make demo only build on dev --------- Co-authored-by: Corentin Leruth <[email protected]>
1 parent 654fa3d commit a9a2d96

File tree

14 files changed

+167
-79
lines changed

14 files changed

+167
-79
lines changed

‎CHANGES.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Unreleased
22

3+
* FEATURE: add color to domProps (@tatchi in https://github.com/reasonml/reason-react/pull/871)
4+
* BREAKING: Support for React 19 (@davesnx in #846)
5+
* DOCS: Documentation updates for 0.16 (@davesnx in https://github.com/reasonml/reason-react/pull/864)
6+
* INFRA: Update deps (@johnhaley81 in https://github.com/reasonml/reason-react/pull/876)
7+
* INFRA: update setup-ocaml to v3 (@anmonteiro in https://github.com/reasonml/reason-react/pull/878)
8+
* FIX: Remove raise annotations and fix locations on errors (@davesnx https://github.com/reasonml/reason-react/pull/863)
9+
* FIX: type of pipeable stream to allow objects with keys (@anmonteiro in https://github.com/reasonml/reason-react/pull/854)
10+
* FEATURE: Add `preconnect`, `prefetchDNS`, `preinit`, `preinitModule`, `preload` and `preloadModule` in ReactDOM.Experimental (@r17x in https://github.com/reasonml/reason-react/pull/849)
11+
* BREAKING: Make lowerbound be Melange 5.1 (due to Js.FormData.t usage)
12+
313
# 0.15.0
414

515
* Add `isValidElement` (@r17x in

‎demo/dune‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
(melange.emit
22
(target demo)
33
(alias melange-app)
4+
(enabled_if
5+
(= %{profile} dev))
46
(module_systems
57
(es6 mjs))
68
(libraries reason-react melange.belt melange.dom)

‎demo/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@
2525
"melange.belt/": "./demo/node_modules/melange.belt/",
2626
"melange.js/": "./demo/node_modules/melange.js/",
2727
"reason-react/": "./demo/node_modules/reason-react/",
28-
"react/jsx-runtime": "https://esm.sh/react@19.0.0-rc.1/jsx-runtime",
29-
"react": "https://esm.sh/react@19.0.0-rc.1",
30-
"react-dom": "https://esm.sh/react-dom@19.0.0-rc.1",
31-
"react-dom/client": "https://esm.sh/react-dom@19.0.0-rc.1/client"
28+
"react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime?dev",
29+
"react": "https://esm.sh/react@19.1.0?dev",
30+
"react-dom": "https://esm.sh/react-dom@19.1.0?dev",
31+
"react-dom/client": "https://esm.sh/react-dom@19.1.0/client?dev"
3232
}
3333
}
3434
</script>

‎demo/main.re‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,66 @@ module UseReducerNoProblemo = {
161161
};
162162
};
163163

164+
module FragmentsEverywhere = {
165+
[@react.component]
166+
let make = () => {
167+
let items = ["Apple", "Banana", "Cherry", "Date"];
168+
let numbers = [1, 2, 3, 4, 5];
169+
170+
<section>
171+
<h3> {React.string("Fragments Everywhere")} </h3>
172+
<React.Fragment>
173+
<p> {React.string("This is inside a fragment")} </p>
174+
<span> {React.string("Multiple elements together")} </span>
175+
<small> {React.string("Without a wrapper div")} </small>
176+
</React.Fragment>
177+
<div>
178+
<h4> {React.string("List of items with fragments:")} </h4>
179+
{items
180+
|> List.mapi((index, item) =>
181+
<React.Fragment key={string_of_int(index)}>
182+
<strong> {React.string(item)} </strong>
183+
<span>
184+
{React.string(" - Item #" ++ string_of_int(index + 1))}
185+
</span>
186+
<br />
187+
</React.Fragment>
188+
)
189+
|> Array.of_list
190+
|> React.array}
191+
</div>
192+
<>
193+
<hr />
194+
<p> {React.string("Another fragment section")} </p>
195+
<button> {React.string("Click me")} </button>
196+
<em> {React.string("Emphasized text")} </em>
197+
</>
198+
<div>
199+
<h4> {React.string("Numbers with fragments:")} </h4>
200+
{numbers
201+
|> List.map(num =>
202+
<React.Fragment key={string_of_int(num)}>
203+
<div> {React.string("Number: " ++ string_of_int(num))} </div>
204+
<small>
205+
{React.string("Square: " ++ string_of_int(num * num))}
206+
</small>
207+
<br />
208+
</React.Fragment>
209+
)
210+
|> Array.of_list
211+
|> React.array}
212+
</div>
213+
</section>;
214+
};
215+
};
216+
217+
module WithoutForward = {
218+
[@react.component]
219+
let make = (~ref=?) => {
220+
<button ?ref className="FancyButton"> "Click me"->React.string </button>;
221+
};
222+
};
223+
164224
module App = {
165225
[@react.component]
166226
let make = (~initialValue) => {
@@ -174,7 +234,9 @@ module App = {
174234
<RerenderOnEachClick key="rerender-on-each-click" value=0 callback />
175235
<WithLayoutEffect key="layout-effect" value callback />
176236
<WithRefAndEffect key="ref-and-effect" callback />
177-
<UseReducerNoProblemo />
237+
<UseReducerNoProblemo key="use-reducer-no-problemo" />
238+
<FragmentsEverywhere key="fragments-everywhere" />
239+
<WithoutForward key="without-forward" />
178240
</main>;
179241
};
180242
};

‎docs/jsx.md‎

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,19 @@
22
title: JSX
33
---
44

5-
Reason comes with the [JSX](https://reasonml.github.io/docs/en/jsx.html) syntax! ReasonReact works very similar to how [the ReactJS JSX transform](https://reactjs.org/docs/introducing-jsx.html) does.
5+
Reason comes with [JSX](https://reasonml.github.io/docs/en/jsx.html) syntax. Enables representation of HTML-like expressions within the language.
6+
7+
reason-react enables [the ReactJS JSX transform](https://reactjs.org/docs/introducing-jsx.html) in Reason.
8+
9+
Since `reason-react.0.12.0`, the JSX transformation currently supports the [New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). JSX functions are imported from `react/jsx-runtime`. Previous versions of reason-react used the legacy API `React.createElement`.
10+
11+
# Install
612

713
To use it, you would need to install [`reason-react-ppx`](https://opam.ocaml.org/packages/reason-react-ppx/) and add `(preprocess (pps reason-react-ppx))` in [`melange.emit or library`](https://dune.readthedocs.io/en/stable/melange.html) stanzas in your `dune` file.
814

9-
Here's a list of transformations made by the [ppx](https://ocaml.org/docs/metaprogramming):
15+
# What the ppx does
16+
17+
Here's a list of transformations made by the [ppx](https://ocaml.org/docs/metaprogramming).
1018

1119
## Uncapitalized
1220

@@ -17,27 +25,26 @@ Here's a list of transformations made by the [ppx](https://ocaml.org/docs/metapr
1725
transforms into
1826

1927
```reason
20-
ReactDOM.createDOMElementVariadic(
28+
ReactDOM.jsxs(
2129
"div",
22-
~props=ReactDOM.domProps(~foo=bar, ()),
23-
[|child1, child2|]
24-
);
30+
ReactDOM.domProps(
31+
~children=React.array([|child1, child2|]),
32+
~foo=bar,
33+
(),
34+
)
35+
)
2536
```
2637

2738
which compiles to the JavaScript code:
2839

2940
```js
30-
React.createElement('div', {foo: bar}, child1, child2)
41+
React.jsx('div', {foo: bar, children: [ child1, child2 ] })
3142
```
3243

3344
Prop-less `<div />` transforms into
3445

3546
```reason
36-
ReactDOM.createDOMElementVariadic(
37-
"div",
38-
~props=ReactDOM.domProps(),
39-
[||]
40-
);
47+
ReactDOM.jsx("div", ReactDOM.domProps());
4148
```
4249

4350
Which compiles to
@@ -49,80 +56,85 @@ React.createElement('div', {})
4956
## Capitalized
5057

5158
```reason
52-
<MyReasonComponent key={a} ref={b} foo={bar} baz={qux}> {child1} {child2} </MyReasonComponent>
59+
<MyReasonComponent ref={b} foo={bar} baz={qux}> {child1} {child2} </MyReasonComponent>
5360
```
5461

5562
transforms into
5663

5764
```reason
58-
React.createElementVariadic(
65+
React.jsxs(
5966
MyReasonComponent.make,
6067
MyReasonComponent.makeProps(
61-
~key=a,
6268
~ref=b,
6369
~foo=bar,
6470
~baz=qux,
65-
~children=React.null,
71+
~children=[|child1, child2|],
6672
()
6773
),
68-
[|child1, child2|]
6974
);
7075
```
7176

7277
which compiles to
7378

7479
```js
75-
React.createElement(
80+
React.jsxs(
7681
MyReasonComponent.make,
7782
{
78-
key: a,
7983
ref: b,
8084
foo: bar,
8185
baz: qux,
82-
children: null,
86+
children: [ child1, child2 ],
8387
},
84-
child1,
85-
child2,
8688
);
8789
```
8890

8991
Prop-less `<MyReasonComponent />` transforms into
9092

9193
```reason
92-
React.createElement(MyReasonComponent.make, MyReasonComponent.makeProps());
94+
React.jsx(
95+
MyReasonComponent.make,
96+
MyReasonComponent.makeProps(),
97+
);
9398
```
9499

95100
which compiles to
96101

97102
```js
98-
React.createElement(MyReasonComponent.make, {});
103+
React.jsx(MyReasonComponent.make, {});
99104
```
100105

101106
The `make` above is exactly the same `make` function you've seen in the previous section.
102107

103-
`ref` and `key` are reserved in ReasonReact, just like in ReactJS. **Don't** use them as props in your component!
108+
`ref` and `key` are reserved in reason-react, just like in ReactJS. **Don't** use them as props in your component!
104109

105110
## Fragment
106111

112+
Fragment lets you group elements without a wrapper node, and return a single element without any effect on the DOM. More details about this in the [react documentation: Fragments](https://react.dev/reference/react/Fragment).
113+
114+
The empty JSX tag `<></>` is shorthand for `<React.Fragment></React.Fragment>`
115+
107116
```reason
108117
<> child1 child2 </>;
109118
```
110119

111120
transforms into
112121

113122
```reason
114-
ReactDOMRe.createElement(ReasonReact.fragment, [|child1, child2|]);
123+
React.jsx(
124+
React.jsxFragment,
125+
ReactDOM.domProps(~children=React.array([|child1, child2|]), ()),
126+
);
115127
```
116128

117129
Which compiles to
118130

119131
```js
120-
React.createElement(React.Fragment, undefined, child1, child2);
132+
React.jsx(React.Fragment, { children: [child1, child2] });
121133
```
122134

123135
## Children
124136

125-
ReasonReact children are **fully typed**, and you can pass any data structure to it (as long as the receiver component permits it). When you write:
137+
reason-react children are **fully typed**, and you can pass any data structure to it (as long as the receiver component permits it). When you write:
126138

127139
```reason
128140
<MyReasonComponent> <div /> <div /> </MyReasonComponent>

‎dune-project‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,10 @@
3131
(name reason-react)
3232
(synopsis "Reason bindings for React.js")
3333
(description
34-
"ReasonReact helps you use Reason to build React components with deeply integrated, strong, static type safety.\n\nIt is designed and built by people using Reason and React in large, mission critical production React codebases.")
34+
"reason-react helps you use Reason to build React components with deeply integrated, strong, static type safety.\n\nIt is designed and built by people using Reason and React in large, mission critical production React codebases.")
3535
(depends
3636
ocaml
37-
(melange
38-
(or
39-
(>= 3.0.0)
40-
(and
41-
(<= 5.1.0-53)
42-
:with-test)))
37+
(melange (<= 5.1.0))
4338
(reason-react-ppx
4439
(= :version))
4540
(reason
@@ -57,7 +52,7 @@
5752
(package
5853
(name reason-react-ppx)
5954
(synopsis "React.js JSX PPX")
60-
(description "ReasonReact JSX PPX")
55+
(description "reason-react JSX PPX")
6156
(depends
6257
(ocaml
6358
(>= 4.14))

‎package-lock.json‎

Lines changed: 10 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
11
{
22
"name": "reason-react",
3-
"version": "0.11.0",
4-
"description": "React bindings for Reason",
5-
"files": [
6-
"dune",
7-
"dune-project",
8-
"README.md",
9-
"HISTORY.md",
10-
"LICENSE",
11-
"src",
12-
"ppx/src",
13-
"reason-react-ppx.opam",
14-
"reason-react.opam"
15-
],
16-
"keywords": [
17-
"reasonml",
18-
"react"
19-
],
3+
"version": "0.0.0",
4+
"description": "This package.json is used to install node development dependencies",
205
"author": "",
216
"license": "MIT",
227
"repository": {
@@ -26,7 +11,7 @@
2611
"homepage": "https://reasonml.github.io/reason-react/",
2712
"devDependencies": {
2813
"@testing-library/dom": "^10.4.0",
29-
"@testing-library/react": "^16.0.1",
14+
"@testing-library/react": "^16.3.0",
3015
"http-server": "^14.1.1",
3116
"jest": "^26.0.1",
3217
"react": "^19.1.0",

‎reason-react-ppx.opam‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# This file is generated by dune, edit dune-project instead
22
opam-version: "2.0"
33
synopsis: "React.js JSX PPX"
4-
description: "ReasonReact JSX PPX"
4+
description: "reason-react JSX PPX"
55
maintainer: [
66
"David Sancho <[email protected]>"
77
"Antonio Monteiro <[email protected]>"

0 commit comments

Comments
 (0)