Cannot combine @react.component and @directive

[nojaf]

Is it expected behavior that @react.component and @directive don't work together?

@react.component
let make = @directive("'use memo'")
(~count, ~username=?) => {
  let times = switch count {
  | 1 => "once"
  | 2 => "twice"
  | n => Belt.Int.toString(n) ++ " times"
  }

  let name = switch username {
  | Some("") => "Anonymous"
  | Some(name) => name
  | None => "Anonymous"
  }

  <div> {React.string(`Hello ${name}, you clicked me ` ++ times)} </div>
}

Repro

[fhammerschmidt]

No this is definitely a bug.

But there is at least a workaround:

@react.component
let make = (~count, ~username=?) => {
  let times = switch count {
  | 1 => "once"
  | 2 => "twice"
  | n => Belt.Int.toString(n) ++ " times"
  }

  let name = switch username {
  | Some("") => "Anonymous"
  | Some(name) => name
  | None => "Anonymous"
  }

  <div> {React.string(`Hello ${name}, you clicked me ` ++ times)} </div>
}

let make = @directive("'use memo'") props => make(props)

[zth]

Might be that the JSX PPX does not bring along existing directives.

[cristianoc]

Indeed looks like the ppx does not preserve attributes on the function. That said, the function it generates is quite different.

[nojaf]

So, something in compiler/syntax/src/jsx_v4.ml?

[nojaf]

Okay, strangely enough this seems to work for me locally:

// A.res
@react.component
let make = @directive("'use memo'") (~count, ~username=?) => {
  let name = switch username {
  | Some("") => "Anonymous"
  | Some(name) => name
  | None => "Anonymous"
  }

  Console.log2(count, name)

  Jsx.string(`Hello you clicked me`)
}

./cli/bsc A.res

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


function make(count, username) {
  'use memo';
  let name = username !== undefined && username !== "" ? username : "Anonymous";
  console.log(count, name);
  return "Hello you clicked me";
}

exports.make = make;
/* No side effect */

Am I missing something in that example?

[zth]

I don't follow, how is this different to your original example? I'm getting old, can't spot the difference 😄

[nojaf]

Yeah, I don't get that part either.

[fhammerschmidt]

Does it just not work on the playground?

[cristianoc]

By default the ppx jsx is not run from the command line. One needs:

./cli/bsc -bs-jsx 4  tst.res

[nojaf]

Okay, I think the attribute is lost in

rescript/compiler/syntax/src/jsx_v4.ml

Lines 819 to 835 in be5d0ec

	let rec spelunk_for_fun_expression expression =
	match expression with
	(* let make = (~prop) => ... with no final unit *)
	| {
	pexp_desc =
	Pexp_fun
	({
	arg_label = Labelled _ | Optional _;
	rhs = {pexp_desc = Pexp_fun _} as internal_expression;
	} as f);
	} ->
	let wrap, has_forward_ref, exp =
	spelunk_for_fun_expression internal_expression
	in
	( wrap,
	has_forward_ref,
	{expression with pexp_desc = Pexp_fun {f with rhs = exp}} )

Would anyone know when exactly that is processed in let make = @directive("'use memo'") props => make(props)? Would that be before or after the jsx_v4.ml code?

[cristianoc]

Okay, I think the attribute is lost in

rescript/compiler/syntax/src/jsx_v4.ml

Lines 819 to 835 in be5d0ec

let rec spelunk_for_fun_expression expression =
match expression with
(* let make = (~prop) => ... with no final unit *)
| {
pexp_desc =
Pexp_fun
({
arg_label = Labelled _ | Optional _;
rhs = {pexp_desc = Pexp_fun _} as internal_expression;
} as f);
} ->
let wrap, has_forward_ref, exp =
spelunk_for_fun_expression internal_expression
in
( wrap,
has_forward_ref,
{expression with pexp_desc = Pexp_fun {f with rhs = exp}} )
Would anyone know when exactly that is processed in let make = @directive("'use memo'") props => make(props)? Would that be before or after the jsx_v4.ml code?

I think it's extract_directive_for_fn after type checking, so after the jsx transform.