Make Jsx.element a private empty record to avoid unnecessary Primitive_option.some (#7450)

* Update react bindings in tests

* Rename jsx preserve test to group jsx tests together

* Add test for optional props

* Make Jsx.element a private empty record to avoid unnecessary Primitive_option.some

* Analysis test output change

* Naming in test

* CHANGELOG

Author: cknitt

CHANGELOG.md

@@ -39,6 +39,10 @@
 
 - AST: Add bar location to `case`. https://github.com/rescript-lang/rescript/pull/7407
 
+#### :nail_care: Polish
+
+- Make `Jsx.element` a private empty record to avoid unnecessary `Primitive_option.some`. https://github.com/rescript-lang/rescript/pull/7450
+
 # 12.0.0-alpha.12
 
 #### :bug: Bug fix

runtime/Jsx.res

@@ -22,7 +22,10 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */
 
-type element
+// Define this as a private empty record so that the compiler does not
+// unnecessarily add `Primitive_option.some` calls for optional props.
+type element = private {}
+
 type ref
 
 @val external null: element = "null"

scripts/test.js

@@ -92,7 +92,7 @@ if (mochaTest) {
       // I can't run because Mocha doesn't support jsx.
       // We also want to keep the output as is.
       "--ignore",
-      "tests/tests/src/preserve_jsx_test.mjs",
+      "tests/tests/src/jsx_preserve_test.mjs",
     ],
     {
       cwd: projectDir,

tests/analysis_tests/tests/src/expected/Completion.res.txt

@@ -0,0 +1,23 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+
+function Jsx_optional_props_test$ComponentWithOptionalProps(props) {
+  return null;
+}
+
+let ComponentWithOptionalProps = {
+  make: Jsx_optional_props_test$ComponentWithOptionalProps
+};
+
+let _element = JsxRuntime.jsx(Jsx_optional_props_test$ComponentWithOptionalProps, {
+  i: 1,
+  s: "test",
+  element: JsxRuntime.jsx("div", {})
+});
+
+export {
+  ComponentWithOptionalProps,
+  _element,
+}
+/* _element Not a pure module */

tests/tests/src/jsx_optional_props_test.mjs

@@ -0,0 +1,12 @@
+@@config({flags: ["-bs-jsx", "4"]})
+
+module ComponentWithOptionalProps = {
+  @react.component
+  let make = (
+    ~i as _: option<int>=?,
+    ~s as _: option<string>=?,
+    ~element as _: option<React.element>=?,
+  ) => React.null
+}
+
+let _element = <ComponentWithOptionalProps i=1 s="test" element={<div />} />

tests/tests/src/jsx_optional_props_test.res

@@ -1,18 +1,13 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Primitive_option from "rescript/lib/es6/Primitive_option.js";
 import * as JsxRuntime from "react/jsx-runtime";
 
-let React = {};
-
-let ReactDOM = {};
-
-function Preserve_jsx_test$Icon(props) {
+function Jsx_preserve_test$Icon(props) {
   return <strong />;
 }
 
 let Icon = {
-  make: Preserve_jsx_test$Icon
+  make: Jsx_preserve_test$Icon
 };
 
 let _single_element_child = <div>
@@ -25,11 +20,11 @@ let _multiple_element_children = <div>
   <h1>
     {"Hello, world!"}
   </h1>
-  <Preserve_jsx_test$Icon />
+  <Jsx_preserve_test$Icon />
 </div>;
 
 let _single_element_fragment = <>
-  {Primitive_option.some(<input />)}
+  {<input />}
 </>;
 
 let _multiple_element_fragment = <>
@@ -134,33 +129,33 @@ function QueryClientProvider(props) { return props.children }
 
 let A = {};
 
-function Preserve_jsx_test$B(props) {
+function Jsx_preserve_test$B(props) {
   return <p>
     {"Hello, world!"}
   </p>;
 }
 
 let B = {
-  make: Preserve_jsx_test$B
+  make: Jsx_preserve_test$B
 };
 
 let _external_component_with_children = <QueryClientProvider>
   <strong />
-  <Preserve_jsx_test$B />
+  <Jsx_preserve_test$B />
 </QueryClientProvider>;
 
-function Preserve_jsx_test$MyWeirdComponent(props) {
+function Jsx_preserve_test$MyWeirdComponent(props) {
   return <p>
     {"foo"}
     {props["\\\"MyWeirdProp\""]}
   </p>;
 }
 
 let MyWeirdComponent = {
-  make: Preserve_jsx_test$MyWeirdComponent
+  make: Jsx_preserve_test$MyWeirdComponent
 };
 
-let _escaped_jsx_prop = <Preserve_jsx_test$MyWeirdComponent
+let _escaped_jsx_prop = <Jsx_preserve_test$MyWeirdComponent
   MyWeirdProp="bar"
 />;
 
@@ -194,9 +189,21 @@ let _large_component = <div
   </p>
 </div>;
 
+function Jsx_preserve_test$ComponentWithOptionalProps(props) {
+  return null;
+}
+
+let ComponentWithOptionalProps = {
+  make: Jsx_preserve_test$ComponentWithOptionalProps
+};
+
+let _optional_props = <Jsx_preserve_test$ComponentWithOptionalProps
+  i={1}
+  s="test"
+  element={<div />}
+/>;
+
 export {
-  React,
-  ReactDOM,
   Icon,
   _single_element_child,
   _multiple_element_children,
@@ -219,5 +226,7 @@ export {
   MyWeirdComponent,
   _escaped_jsx_prop,
   _large_component,
+  ComponentWithOptionalProps,
+  _optional_props,
 }
 /* _single_element_child Not a pure module */

tests/tests/src/preserve_jsx_test.mjs renamed to tests/tests/src/jsx_preserve_test.mjs

@@ -2,70 +2,6 @@
   flags: ["-bs-jsx", "4", "-bs-jsx-preserve"],
 })
 
-module React = {
-  type element = Jsx.element
-
-  @val external null: element = "null"
-
-  external float: float => element = "%identity"
-  external int: int => element = "%identity"
-  external string: string => element = "%identity"
-
-  external array: array<element> => element = "%identity"
-
-  type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return>
-
-  type component<'props> = Jsx.component<'props>
-
-  external component: componentLike<'props, element> => component<'props> = "%identity"
-
-  @module("react")
-  external createElement: (component<'props>, 'props) => element = "createElement"
-
-  @module("react")
-  external cloneElement: (element, 'props) => element = "cloneElement"
-
-  @module("react")
-  external isValidElement: 'a => bool = "isValidElement"
-
-  @variadic @module("react")
-  external createElementVariadic: (component<'props>, 'props, array<element>) => element =
-    "createElement"
-
-  @module("react/jsx-runtime")
-  external jsx: (component<'props>, 'props) => element = "jsx"
-
-  @module("react/jsx-runtime")
-  external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
-
-  @module("react/jsx-runtime")
-  external jsxs: (component<'props>, 'props) => element = "jsxs"
-
-  @module("react/jsx-runtime")
-  external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
-
-  type fragmentProps = {children?: element}
-
-  @module("react/jsx-runtime") external jsxFragment: component<fragmentProps> = "Fragment"
-}
-
-module ReactDOM = {
-  external someElement: React.element => option<React.element> = "%identity"
-
-  @module("react/jsx-runtime")
-  external jsx: (string, JsxDOM.domProps) => Jsx.element = "jsx"
-
-  @module("react/jsx-runtime")
-  external jsxKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element = "jsx"
-
-  @module("react/jsx-runtime")
-  external jsxs: (string, JsxDOM.domProps) => Jsx.element = "jsxs"
-
-  @module("react/jsx-runtime")
-  external jsxsKeyed: (string, JsxDOM.domProps, ~key: string=?, @ignore unit) => Jsx.element =
-    "jsxs"
-}
-
 module Icon = {
   @react.component
   let make = () => {
@@ -179,3 +115,14 @@ let _large_component =
     </strong>
     <p> {React.int(5)} </p>
   </div>
+
+module ComponentWithOptionalProps = {
+  @react.component
+  let make = (
+    ~i as _: option<int>=?,
+    ~s as _: option<string>=?,
+    ~element as _: option<React.element>=?,
+  ) => React.null
+}
+
+let _optional_props = <ComponentWithOptionalProps i=1 s="test" element={<div />} />

tests/tests/src/preserve_jsx_test.res renamed to tests/tests/src/jsx_preserve_test.res

@@ -1,21 +1,32 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-
-let Ref = {};
+import * as React from "react";
 
 let Children = {};
 
 let Context = {};
 
 let Fragment = {};
 
+let StrictMode = {};
+
 let Suspense = {};
 
+function lazy_(load) {
+  return React.lazy(async () => ({
+    default: await load()
+  }));
+}
+
+let Uncurried = {};
+
 export {
-  Ref,
   Children,
   Context,
   Fragment,
+  StrictMode,
   Suspense,
+  lazy_,
+  Uncurried,
 }
-/* No side effect */
+/* react Not a pure module */