Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve bundle size by using arrays instead of objects for uppercase element props #91

Open
jchavarri opened this issue Dec 28, 2021 · 1 comment
Labels
Milestone

Comments

@jchavarri
Copy link
Collaborator

jchavarri commented Dec 28, 2021

Right now, we use a JavaScript object to convert from labelled arguments to a single value, so that the component implementation can receive them from ReactJS:

jsoo-react/ppx/ppx.ml

Lines 563 to 569 in d7290d3

[%expr
obj
[%e
Exp.array ~loc
(List.map
(fun (label, _, _, _) -> label_to_tuple label)
named_arg_list_with_key_and_ref )]]

However, this approach leads to generated code like:

function make$2(className, onClick, disabled, children, key, param) {
  var
  _a_ = caml_call2(Stdlib_Option[7], caml_jsstring_of_string, key),
  _b_ =
  {
    "key": caml_call1(Js_of_ocaml_Js[6][9], _a_),
    "children": children,
    "disabled": disabled,
    "onClick": onClick,
    "className": className
  };
  return caml_call2(React[12], make$1, _b_)
}

This leads to larger bundle size as minifiers are not able to remove the string constants in the props object.

There might be a work around that involves passing an array instead of an object. The only constraint is that this array has to be written and read in a consistent order, but because ppx has full knowledge about this, it should be feasible.

@jchavarri jchavarri added the ppx label Dec 28, 2021
@jchavarri jchavarri added this to the v1 milestone Dec 30, 2021
@jchavarri
Copy link
Collaborator Author

One downside of the suggested improvement is that React Dev Tools won't be showing the props as an object as it does now. Maybe this could be an option that activates or not depending on the "developer" or "release" profile modes 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant