Update new jsx transform apis, bind to Jsx in compiler, for JSX V4. #49

mununki · 2022-06-30T17:18:02Z

This PR introduces the new Jsx module in the compiler. This is an initial proposal stage that has objectives and constraints as below.

Adding The new jsx transform APIs which the JSX PPX V4 can call
No opaque type to keep the backward compatibility with the existing React modules
```
type element = Jsx.element
```
Peer dependency of React@17 or higher
~~The new domProps and props types which are declared with @optional attribute~~ Added in the compiler Wire to JSX PPX V4 and introduce Jsx* modules rescript#5484
~~The new JsxDOMStyle module~~ Added in the compiler Wire to JSX PPX V4 and introduce Jsx* modules rescript#5484

I don't have a clear picture of Jsx in the future. It could define the primitive types, functions, and modules that are vendors for JSX family, such as React, SolidJs, Remix in future. But I focus to keep the backward compatibility and support for the new jsx mode of React runtime in this stage for now.

cristianoc · 2022-06-30T18:57:06Z

src/JsxDOM.res

@@ -0,0 +1,2078 @@
+type element = React.element


Is this a verbatim copy of another file in the repo?
That could be a problem when someone wants to edit something.

Better to have only once. And in the copy do a one-liner include M instead.

Your comment reminds me of what React and ReactDOM stands for, and the same should go for Jsx and JsxDOM. I remove type element declaration from JsxDOM and relocate some to distinguish what they are.
d3eabbe e93242b

cristianoc · 2022-06-30T18:57:59Z

This looks good so far. Let's keep it open until the whole V4 ppx is finalised.

mununki · 2022-07-01T00:17:00Z

Side comment: I verified that V4 & Jsx don't break my test project having dependencies of V3 modules. So, I tried to run the battle-test of V10 & V4 & Jsx on my company projects. I encountered some errors before verifying that V4 & classic, V4 & Jsx will not break the backward compatibility. I'll leave the issue in the compiler.

cristianoc · 2022-07-01T01:33:11Z

Side comment: I verified that V4 & Jsx don't break my test project having dependencies of V3 modules. So, I tried to run the battle-test of V10 & V4 & Jsx on my company projects. I encountered some errors before verifying that V4 & classic, V4 & Jsx will not break the backward compatibility. I'll leave the issue in the compiler.

Can you expand a bit on this?
Did you find some problem, and will document that in a new issue?
Or were no problems found?

mununki · 2022-07-01T01:46:59Z

Side comment: I verified that V4 & Jsx don't break my test project having dependencies of V3 modules. So, I tried to run the battle-test of V10 & V4 & Jsx on my company projects. I encountered some errors before verifying that V4 & classic, V4 & Jsx will not break the backward compatibility. I'll leave the issue in the compiler.

Can you expand a bit on this? Did you find some problem, and will document that in a new issue? Or were no problems found?

I ran V10 & V4 & Jsx on my test project which is a small RescriptReact app. It has dependencies of the RescriptReact module I made with V3 bsconfig. I've tested the scenarios (V3, V4 & classic, V4 & Jsx), and they worked fine.

But I ran V10 compiler in V3 mode on large applications(company projects), it throws several errors. I guess it is not related to V4 or Jsx. So I left the issue in the compiler rescript-lang/rescript#5493

Let me know if anything I can help on that.

mununki · 2022-07-02T07:21:46Z

I totally agree on the comment from @ryyppy rescript-lang/rescript#5484 (comment) Here is my thought for the future plan. What do you think?

Remove Jsx from rescript-react.
If the namespace Jsx is occupied here in rescript-react, there will be a problem(in future graceful migrations) when we add Jsx in the compiler. Jsx should be containing the primitive types, functions, modules which are vendors for the 3rd party modules, such as rescript-react, or rescript-solidjs, etc.
Add the new jsx APIs in React.res and ReactDOM.res
If the upgrade plan is that V4 & the new jsx transform will be shipped with upgrading rescript-react, then we don't need to add a new module here. It is enough to add the new jsx transform React APIs into React.res and ReactDOM.res Those APIs are just for the React anyway.
Add Jsx in the compiler and bind the types to rescript-react
The initial version of Jsx can be added to the compiler for the experimental feature. Then we can bind the rescript-react to Jsx. For example,

// React.res
type element = Jsx.element

// ReactDOM.res
@module("react/jsx-runtime")
external jsxKeyed: (string, JsxDOM.domProps, string) => Jsx.element = "jsx" // Jsx in the compiler

Does it make sense to you?

mununki · 2022-09-02T13:28:45Z

The breaking change is introduced by merging RescriptReact.res into React.res.

Side comment: I realized why some of react component binding was not written with @react.component. Simply it is not possible, because the ppx will transform @react.componet using React.res itself. 🥲 Therefore, I write the binding without @react.component, but it is compatible with ppx V4.

package.json

README.md

package.json

cristianoc · 2022-09-05T03:13:45Z

yarn.lock

@@ -0,0 +1,3501 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.


Why this file?

oops, my mistake. I'll drop it.

cristianoc · 2022-09-05T03:23:13Z

How does one test this?
Perhaps one way is to create a separate sample project, which installs the compiler from master, and the rescript-react from this PR, and tests the various things that have changed?

mununki · 2022-09-05T07:57:30Z

How does one test this? Perhaps one way is to create a separate sample project, which installs the compiler from master, and the rescript-react from this PR, and tests the various things that have changed?

Yes exactly. That is how I develop and test in my local env.

cristianoc · 2022-09-05T08:01:47Z

How does one test this? Perhaps one way is to create a separate sample project, which installs the compiler from master, and the rescript-react from this PR, and tests the various things that have changed?

Yes exactly. That is how I develop and test in my local env.

Great! Would you create such a project?
That would also be the base example to ask people for feedback.
As it will take a while before both are published in a way that people can try.

mununki · 2022-09-05T08:12:56Z

How does one test this? Perhaps one way is to create a separate sample project, which installs the compiler from master, and the rescript-react from this PR, and tests the various things that have changed?

Yes exactly. That is how I develop and test in my local env.

Great! Would you create such a project? That would also be the base example to ask people for feedback. As it will take a while before both are published in a way that people can try.

Sure! I'll work on it.

cristianoc · 2022-09-21T15:31:48Z

Wow! it works! 👍

compiler v10.1

rescript-react v0.11

jsx: {version: 3, v3-dependencies: [rescript-relay]}

bs-flags: ["-open ReactV3"]

Still a bit confusing.
It's mainly intended to work when the main project is built with v4.
If the main project is built with v3, it's kind of expected that normal dependencies work out of the box. And they would, if one did not install latest rescript-react.
Thinking...
Perhaps if the main project is build with v3, then there's simply no reason to install latest rescript-react.

mununki · 2022-09-21T15:36:18Z

At least we don't need to separate the rescript-react version per compiler and jsx version.

(Before)

rescript-react>=0.11.0 for compiler v10.1 + JSX v4
rescript-react<0.11.0 for compiler v10.1 + JSX v3

(After)

rescript-react>=0.11.0 for compiler v10.1 + JSX v4 or JSX v3

mununki · 2022-09-21T15:40:01Z

It's mainly intended to work when the main project is built with v4.

If the main project is with v4, then dependencies are impossible with v3 by all means.

mununki · 2022-09-21T15:45:40Z

~~The option of propagating and v3-dependecies are for the cases, I think~~
~~1. dependency is written without @react.component or v3 based. e.g. object props~~
~~2. user want to upgrade the compiler v10.1, but have to keep using v3. e.g. async/await~~
No reason to install the latest rescript-react

cristianoc · 2022-09-21T16:22:54Z

It's mainly intended to work when the main project is built with v4.

If the main project is with v4, then dependencies are impossible with v3 by all means.

Not beautiful, but it's possible to switch to V3 inside a V4 project, and use a V3 dependency.
I think there are enough escape hatches to cover corner cases, just in case.
Next up, document the upgrade process better. But to do that it would be nice to have some real upgrade experience, so one can direct the docs to issues that do arise in practice.

Perhaps the way to go is to cover the functionality in the upgrade docs, then do another round of feedback.
Based on responses, one could make updates to the mechanism, or to the docs describing it.

mununki · 2022-09-21T17:09:39Z

Not perfect, but the v3 and v4 apps can use the same latest rescript-react with options you've made. I think this backward compatibility of rescript-react would be a benefit for many users.

cristianoc · 2022-09-22T10:57:42Z

Anything to clean up here?
Functionality-wise it seems complete now.

mununki · 2022-09-23T17:00:18Z

It's like done now.
As I added bf2f897, legacy directory could be removed once most users are not using v3 anymore.

cristianoc · 2022-09-24T06:53:44Z

@mattdamon108 any more feedback, anything to change in this PR before merging?
Next up, publish to npm as @rescript/react@next.

mununki · 2022-09-24T06:54:44Z

@mattdamon108 any more feedback, anything to change in this PR before merging? Next up, publish to npm as @rescript/react@next.

No, it's done.

cristianoc

Left a few comments.
I think we should check in generated js files.
It's not 100% zero generated code anymore for technical reasons, so whatever this produces should be checked in. So we see if it's all needed.

Changes.md

package.json

README.md

src/v3/React_V3.res

cristianoc · 2022-09-24T08:58:43Z

@mattdamon108 would you take a look at the checked in .bs.js files? Is everything in them necessary?

src/React.bs.js

src/ReactDOMStyle.bs.js

src/RescriptReactErrorBoundary.bs.js

cristianoc reviewed Jun 30, 2022

View reviewed changes

mununki mentioned this pull request Jul 1, 2022

JSX PPX V4 part2 rescript-lang/syntax#586

Closed

13 tasks

mununki mentioned this pull request Jul 2, 2022

Wire to JSX PPX V4 and introduce Jsx* modules rescript-lang/rescript#5484

Merged

6 tasks

mununki force-pushed the jsx branch from e93242b to 13c28a2 Compare July 3, 2022 07:23

mununki changed the title ~~Add Jsx module~~ Add new jsx transform apis and bind to Jsx in compiler Jul 3, 2022

mununki changed the title ~~Add new jsx transform apis and bind to Jsx in compiler~~ Update new jsx transform apis, bind to Jsx in compiler Jul 3, 2022

cristianoc mentioned this pull request Jul 4, 2022

JSX V4: investigate leftovers after release. rescript-lang/rescript#5505

Closed

11 tasks

cristianoc reviewed Sep 2, 2022

View reviewed changes

package.json Show resolved Hide resolved

cristianoc reviewed Sep 5, 2022

View reviewed changes

mununki added 11 commits September 5, 2022 18:06

update new jsx transform apis with Jsx module

2f9884a

restore external binding for primitives

7d6b9d5

fix jsxFragment type

2aa4d91

add RescriptReact for ppx v4

9e0da07

fix typo

9c99211

bind type to JsxEvent

7859a5d

add ErrorBoundary comp for ppx v4

dc7737c

bind ReactDOMStyle.t to JsxDOMStyle.t

aeed8dc

merge RescriptReact into React for V4 support

057e565

upgrade package.json

b977ee8

update changes and readme

22dfd80

mununki added 2 commits September 24, 2022 00:27

add React.fragment and ReactDOM.createElement

bf2f897

update changelog

5eacba1

cristianoc reviewed Sep 24, 2022

View reviewed changes

Changes.md Outdated Show resolved Hide resolved

Changes.md Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

README.md Show resolved Hide resolved

README.md Outdated Show resolved Hide resolved

src/v3/React_V3.res Show resolved Hide resolved

mununki and others added 8 commits September 24, 2022 16:43

udpate doc and version

adb9fc4

add comment to React_V3

1ae5b75

Update Changes.md

8ef74a4

Update package-lock.json

b3bfa61

Check in generated files.

8d5fc11

Remove reason-test-framework

f4f3064

Use compiler 10.1.0-alpha.2

2bbe05d

Remove jest.

8d946e7

cristianoc reviewed Sep 24, 2022

View reviewed changes

src/React.bs.js Show resolved Hide resolved

cristianoc reviewed Sep 24, 2022

View reviewed changes

src/ReactDOMStyle.bs.js Show resolved Hide resolved

cristianoc reviewed Sep 24, 2022

View reviewed changes

src/RescriptReactErrorBoundary.bs.js Show resolved Hide resolved

cristianoc merged commit 86a27d1 into rescript-lang:master Sep 24, 2022

cristianoc changed the title ~~Update new jsx transform apis, bind to Jsx in compiler~~ Update new jsx transform apis, bind to Jsx in compiler, for JSX V4. Sep 24, 2022

mununki deleted the jsx branch September 24, 2022 09:23

cknitt mentioned this pull request Sep 30, 2022

RFC: Revamp TestUtils & tests #14

Open

mununki mentioned this pull request Nov 6, 2022

Fix JSX v4 spec about configuration rescript-lang/syntax#719

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update new jsx transform apis, bind to Jsx in compiler, for JSX V4. #49

Update new jsx transform apis, bind to Jsx in compiler, for JSX V4. #49

mununki commented Jun 30, 2022 •

edited

Loading

cristianoc Jun 30, 2022

mununki Jul 1, 2022 •

edited

Loading

cristianoc commented Jun 30, 2022

mununki commented Jul 1, 2022

cristianoc commented Jul 1, 2022

mununki commented Jul 1, 2022 •

edited

Loading

mununki commented Jul 2, 2022 •

edited

Loading

mununki commented Sep 2, 2022

cristianoc Sep 5, 2022

mununki Sep 5, 2022

cristianoc commented Sep 5, 2022

mununki commented Sep 5, 2022

cristianoc commented Sep 5, 2022 •

edited

Loading

mununki commented Sep 5, 2022

cristianoc commented Sep 21, 2022

mununki commented Sep 21, 2022 •

edited

Loading

mununki commented Sep 21, 2022 •

edited

Loading

mununki commented Sep 21, 2022 •

edited

Loading

cristianoc commented Sep 21, 2022

mununki commented Sep 21, 2022

cristianoc commented Sep 22, 2022

mununki commented Sep 23, 2022

cristianoc commented Sep 24, 2022

mununki commented Sep 24, 2022

cristianoc left a comment

cristianoc commented Sep 24, 2022

		@@ -0,0 +1,3501 @@
		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.

Update new jsx transform apis, bind to Jsx in compiler, for JSX V4. #49

Update new jsx transform apis, bind to Jsx in compiler, for JSX V4. #49

Conversation

mununki commented Jun 30, 2022 • edited Loading

cristianoc Jun 30, 2022

Choose a reason for hiding this comment

mununki Jul 1, 2022 • edited Loading

Choose a reason for hiding this comment

cristianoc commented Jun 30, 2022

mununki commented Jul 1, 2022

cristianoc commented Jul 1, 2022

mununki commented Jul 1, 2022 • edited Loading

mununki commented Jul 2, 2022 • edited Loading

mununki commented Sep 2, 2022

cristianoc Sep 5, 2022

Choose a reason for hiding this comment

mununki Sep 5, 2022

Choose a reason for hiding this comment

cristianoc commented Sep 5, 2022

mununki commented Sep 5, 2022

cristianoc commented Sep 5, 2022 • edited Loading

mununki commented Sep 5, 2022

cristianoc commented Sep 21, 2022

mununki commented Sep 21, 2022 • edited Loading

mununki commented Sep 21, 2022 • edited Loading

mununki commented Sep 21, 2022 • edited Loading

cristianoc commented Sep 21, 2022

mununki commented Sep 21, 2022

cristianoc commented Sep 22, 2022

mununki commented Sep 23, 2022

cristianoc commented Sep 24, 2022

mununki commented Sep 24, 2022

cristianoc left a comment

Choose a reason for hiding this comment

cristianoc commented Sep 24, 2022

mununki commented Jun 30, 2022 •

edited

Loading

mununki Jul 1, 2022 •

edited

Loading

mununki commented Jul 1, 2022 •

edited

Loading

mununki commented Jul 2, 2022 •

edited

Loading

cristianoc commented Sep 5, 2022 •

edited

Loading

mununki commented Sep 21, 2022 •

edited

Loading

mununki commented Sep 21, 2022 •

edited

Loading

mununki commented Sep 21, 2022 •

edited

Loading