Jsx4 automatic mode: suspicious `Caml_option.some`

[IwanKaramazow]

Context

Dependencies:

"@rescript/react": "^0.11.0-alpha.1",
"rescript": "^10.1.0-alpha.2",

bsconfig.json

{
  "name": "speedycal",
  "version": "0.0.1",
  "sources": {
    "dir": "src"
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".js",
  "jsx": { "version": 4, "mode": "automatic" },
  "bs-dependencies": ["@rescript/react"]
}

What am I seeing?

// Doctor.res
module User = {
  type t = {firstName: string, lastName: string}

  let format = user => "Dr." ++ user.lastName

  @react.component
  let make = (~doctor) => {
    <h1> {React.string(format(doctor))} </h1>
  }
}

Compiles to:

function Doctor$User(props) {
  return JsxRuntime.jsx("h1", {
              children: Caml_option.some("Dr." + props.doctor.lastName)
            });
}

The Caml_option.some seems suspicious in the output. The type of ~doctor is t, it isn't optional.

If you compare this with what's running in the playground right now: link to working code

// Generated by ReScript, PLEASE EDIT WITH CARE
'use strict';

var React = require("react");

function format(user) {
  return "Dr." + user.lastName;
}

function Playground$User(Props) {
  var doctor = Props.doctor;
  return React.createElement("h1", undefined, "Dr." + doctor.lastName);
}

var User = {
  format: format,
  make: Playground$User
};

exports.User = User;
/* react Not a pure module */

We don't have any Caml_option.some here.

Any pointers on why I might be seeing Caml_option.some in the output? cc @mattdamon108 @cristianoc

Debug info

test file:

type t = {firstName: string, lastName: string}

let format = user => "Dr." ++ user.lastName

@react.component
let make = (~doctor) => {
	<h1> {React.string(format(doctor))} </h1>
}

With dune exec -- rescript -jsx-mode automatic -jsx-version 4 -print res test.res:

type t = {firstName: string, lastName: string}

let format = user => "Dr." ++ user.lastName
type props<'doctor> = {
  doctor: 'doctor,
}

@react.component
let make = ({doctor, _}: props<'doctor>) => {
  ReactDOM.jsx("h1", {children: {React.string(format(doctor))}})
}
let make = {
  let \"Test" = (props: props<_>) => make(props)

  \"Test"
}

With dune exec -- rescript -jsx-version 3 -print res test.res:

type t = {firstName: string, lastName: string}

let format = user => "Dr." ++ user.lastName
@obj external makeProps: (~doctor: 'doctor, ~key: string=?, unit) => {"doctor": 'doctor} = ""

@react.component
let make =
  (@warning("-16") ~doctor) => {
    ReactDOMRe.createDOMElementVariadic("h1", [{React.string(format(doctor))}])
  }
let make = {
  let \"Test" = (\"Props": {"doctor": 'doctor}) => make(~doctor=\"Props"["doctor"])
  \"Test"
}

[cristianoc]

type tt = {children?: React.element}

let make = doctor => {
  {children: {React.string(doctor)}}
}

Simple example: children has an optional abstract type, so the optimisation does not kick in.

[mununki]

If the poc of record type extension would be landed later, we might be able to use two different type which are children field as optional and not. which are having the children field and not having it.

[cristianoc]

Probably easier just to use a cast from element to opt element.

[mununki]

Probably easier just to use a cast from element to opt element.

Can you explain more detail? I don't get it. Do you mean this?

let make = doctor => {
  {children: ?Some(React.string(doctor))}
}

[cristianoc]

This:

external someElement: React.element => option<React.element> = "%identity"

can be used instead of Some

[mununki]

I ran with compiler#rewrite-jsxdom, syntax#jsx-v4-lowercase and rescript-react#master
It compiles and generates the output:

// original
module User = {
  type t = {firstName: string, lastName: string}

  let format = user => "Dr." ++ user.lastName

  @react.component
  let make = (~doctor) => {
    <h1> {React.string(format(doctor))} </h1>
  }
}

// converted to
module User = {
  type t = {firstName: string, lastName: string}

  let format = user => "Dr." ++ user.lastName
  type props<'doctor> = {
    doctor: 'doctor,
  }

  @react.component
  let make = ({doctor, _}: props<'doctor>) => {
    ReactDOM.jsx("h1", {children: {React.string(format(doctor))}})
  }
  let make = {
    let \"OptimizeAutomaticMode$User" = (props: props<_>) => make(props)

    \"OptimizeAutomaticMode$User"
  }
}

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as React from "react";

function format(user) {
  return "Dr." + user.lastName;
}

function OptimizedAutomatic$User(props) {
  return React.createElement("h1", undefined, "Dr." + props.doctor.lastName);
}

var User = {
  format: format,
  make: OptimizedAutomatic$User
};

export {
  User ,
}
/* react Not a pure module */

Caml_option.som seems not using it.

[mununki]

I guess the PR #665 will generated more cleaner output #665 (comment)

[cristianoc]

Is that in jsx mode? What changed?

[mununki]

Is that in jsx mode? What changed?

My mistake. I was confused. I ran the example component in the sample project:

• bsconfig.json

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

@@jsxConfig({version:4, mode: "automatic"})

// sample code...

It compiled okay, so I thought it would be compiled in automatic mode successfully. But, I changed bsconfig.json and ran it again it fails.

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

This record expression is expected to have type JsxDOM.domProps
The field children does not belong to type JsxDOM.domProps

The error message is correct. JsxDOM.domProps doesn't have a children field now. I should add a children field into JsxDOM.domProps or make new function e.g. addChildrenProp like addKeyProp.

At the same time, I'm gonna check why the jsxConfig{{version:4, mode:"automatic"} seems not working under global config of "classic".

[mununki]

This:

external someElement: React.element => option<React.element> = "%identity"

can be used instead of Some

It works! How does this work? What makes it different from ?Some?

[cristianoc]

This:

external someElement: React.element => option<React.element> = "%identity"

can be used instead of Some

It works! How does this work? What makes it different from ?Some?

It prevents the compiler from knowing it's an option, and using a conservative approach.