From c5c90e092c2578212248fc1a972d27e4a3eafead Mon Sep 17 00:00:00 2001
From: Antonio Nuno Monteiro <anmonteiro@gmail.com>
Date: Tue, 5 Sep 2023 21:46:22 -0700
Subject: [PATCH] feat: migrate from `bs.*` to `mel.*` attributes (#755)

* feat: migrate from `bs.*` to `mel.*` attributes

* melange2: remove mel.val

* update tests

* ci: update opam to use 5.1.x

* add melange.dom to libraries

* test(ci): fix flakes / OCaml version / add melange.dom

* rm dupe

---------

Co-authored-by: Javier Chavarri <javier.chavarri@gmail.com>
---
 .github/workflows/nix.yml       |    2 +-
 .github/workflows/opam.yml      |    2 +-
 Makefile                        |    5 +-
 flake.lock                      |   39 +-
 flake.nix                       |    2 +-
 ppx/reason_react_ppx.ml         |    2 +-
 ppx/test/issue-429.t/run.t      |  234 +++----
 ppx/test/simple.t/run.t         |   54 +-
 ppx/test/uppercase.t/run.t      |    8 +-
 src/React.re                    |  343 ++++++-----
 src/ReactDOM.re                 | 1028 +++++++++++++++----------------
 src/ReactDOMServer.re           |    4 +-
 src/ReactDOMStyle.re            |    8 +-
 src/ReactEvent.re               |  256 ++++----
 src/ReactEvent.rei              |  720 +++++++++++-----------
 src/ReactTestRenderer.re        |   24 +-
 src/ReactTestUtils.re           |   50 +-
 src/ReactTestUtils.rei          |   30 +-
 src/ReasonReactErrorBoundary.re |   16 +-
 src/ReasonReactRouter.re        |   44 +-
 src/dune                        |    1 +
 src/legacy/ReactDOMRe.re        |    4 +-
 src/legacy/ReasonReact.re       |    2 +-
 test/jest/Expect.re             |   28 +-
 test/jest/Jest.re               |   29 +-
 test/jest/Mock.re               |   19 +-
 26 files changed, 1491 insertions(+), 1463 deletions(-)

diff --git a/.github/workflows/nix.yml b/.github/workflows/nix.yml
index b0c1e4d09..ba516751a 100644
--- a/.github/workflows/nix.yml
+++ b/.github/workflows/nix.yml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        ocamlVersion: [4_14, 5_0]
+        ocamlVersion: [5_1]
     steps:
     - uses: actions/checkout@v2
     - uses: cachix/install-nix-action@v21
diff --git a/.github/workflows/opam.yml b/.github/workflows/opam.yml
index 91c3a2aac..d81c07aa2 100644
--- a/.github/workflows/opam.yml
+++ b/.github/workflows/opam.yml
@@ -24,7 +24,7 @@ jobs:
           # disabling this for now
 
         ocaml-compiler:
-          - 4.14.x
+          - ocaml-variants.5.1.0+trunk
 
     runs-on: ${{ matrix.os }}
 
diff --git a/Makefile b/Makefile
index 6b0b9f06b..b6ac60373 100644
--- a/Makefile
+++ b/Makefile
@@ -53,13 +53,14 @@ format-check: ## Checks if format is correct
 
 .PHONY: install
 install: ## Update the package dependencies when new deps are added to dune-project
-	@opam pin add -y melange --dev-repo
+	@opam pin add -y melange.dev --dev-repo
+	@opam pin add -y reason.dev --dev-repo
 	@opam install . --deps-only --with-test
 	@npm install
 
 .PHONY: init
 create-switch: ## Create a local opam switch
-	@opam switch create . 4.14.1 --no-install
+	@opam switch create . 5.1.0~alpha2 --no-install
 
 .PHONY: init
 init: create-switch install ## Create a local opam switch, install deps
diff --git a/flake.lock b/flake.lock
index 6a2fd2aae..f762133ba 100644
--- a/flake.lock
+++ b/flake.lock
@@ -5,11 +5,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1689068808,
-        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
+        "lastModified": 1692799911,
+        "narHash": "sha256-3eihraek4qL744EvQXsK1Ha6C3CR7nnT8X2qWap4RNk=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
+        "rev": "f9e7cf818399d17d347f847525c5a5a8032e4e44",
         "type": "github"
       },
       "original": {
@@ -32,11 +32,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1689309587,
-        "narHash": "sha256-TmxvOv39hYsFHgdmn09JVVsc/m/Agp1+6+v9VZ6JJX0=",
+        "lastModified": 1693969938,
+        "narHash": "sha256-MT5m7MKixWtFEPtjIiABKSvJBO4NSOs6YmEAQ42f/eU=",
         "owner": "melange-re",
         "repo": "melange",
-        "rev": "d4868a5300c8c6e9f1b387aedb85ded4a705bc0a",
+        "rev": "ea3fafdb15f29ad917bf0420dda6dbf8cf7c1203",
         "type": "github"
       },
       "original": {
@@ -57,27 +57,26 @@
         ]
       },
       "locked": {
-        "lastModified": 1685926663,
-        "narHash": "sha256-P+HhbuBJBWSPVe5cUEZQxkwjYcrCw8g+pOhd2u2YTHM=",
+        "lastModified": 1693622382,
+        "narHash": "sha256-gzYhJzK81iRrQ0h+sbKox7Oe/S7KHpo94TbxO1Ux+Ew=",
         "owner": "melange-re",
         "repo": "melange-compiler-libs",
-        "rev": "38bb9de36cb1f0af85b039943521c3e1244dbcb9",
+        "rev": "c6c152de7a5af991a474211ab11c31a1d94dbabb",
         "type": "github"
       },
       "original": {
         "owner": "melange-re",
         "repo": "melange-compiler-libs",
-        "rev": "38bb9de36cb1f0af85b039943521c3e1244dbcb9",
         "type": "github"
       }
     },
     "nix-filter": {
       "locked": {
-        "lastModified": 1687178632,
-        "narHash": "sha256-HS7YR5erss0JCaUijPeyg2XrisEb959FIct3n2TMGbE=",
+        "lastModified": 1693833173,
+        "narHash": "sha256-hlMABKrGbEiJD5dwUSfnw1CQ3bG7KKwDV+Nx3bEZd7U=",
         "owner": "numtide",
         "repo": "nix-filter",
-        "rev": "d90c75e8319d0dd9be67d933d8eb9d0894ec9174",
+        "rev": "ac030bd9ba98e318e1f4c4328d60766ade8ebe8b",
         "type": "github"
       },
       "original": {
@@ -94,11 +93,11 @@
         "nixpkgs": "nixpkgs_2"
       },
       "locked": {
-        "lastModified": 1689290902,
-        "narHash": "sha256-PIaAOnx3FKhX+8Sd3NXDJWV39xOhA+/PMLxS6MoCIGw=",
+        "lastModified": 1693935394,
+        "narHash": "sha256-lK2exOtxd+CR3DPwzCDD+0zBFHfvs7PgIpsjpP9Kejc=",
         "owner": "nix-ocaml",
         "repo": "nix-overlays",
-        "rev": "9bde209329b262d0e72076b14debf0b414604277",
+        "rev": "ce2cf479325766f195a118e29ed1421a409a77aa",
         "type": "github"
       },
       "original": {
@@ -109,17 +108,17 @@
     },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1689266139,
-        "narHash": "sha256-EhZf5w0eVWG55m++EK6oOqwkou9acK7EwhsSruca8bE=",
+        "lastModified": 1693843476,
+        "narHash": "sha256-0T1iTp/+HNgi/b03bB4JA5LkaUS31CCBKhbti6Jb/RA=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "ee5e438359f45b5344acb0d3dcb1a9291eba63b2",
+        "rev": "278796c737d3fa1e2c516d49720adb451198dc4d",
         "type": "github"
       },
       "original": {
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "ee5e438359f45b5344acb0d3dcb1a9291eba63b2",
+        "rev": "278796c737d3fa1e2c516d49720adb451198dc4d",
         "type": "github"
       }
     },
diff --git a/flake.nix b/flake.nix
index fe8005765..f289ca875 100644
--- a/flake.nix
+++ b/flake.nix
@@ -20,7 +20,7 @@
     flake-utils.lib.eachDefaultSystem (system:
       let
         pkgs = nixpkgs.legacyPackages."${system}".appendOverlays [
-          (self: super: { ocamlPackages = super.ocaml-ng.ocamlPackages_4_14; })
+          (self: super: { ocamlPackages = super.ocaml-ng.ocamlPackages_5_1; })
           melange.overlays.default
         ];
       in
diff --git a/ppx/reason_react_ppx.ml b/ppx/reason_react_ppx.ml
index f3529362b..cdeee1bdd 100644
--- a/ppx/reason_react_ppx.ml
+++ b/ppx/reason_react_ppx.ml
@@ -368,7 +368,7 @@ let makePropsValue fnName loc namedArgListWithKeyAndRef propsType =
     pval_attributes =
       [
         {
-          attr_name = { txt = "bs.obj"; loc };
+          attr_name = { txt = "mel.obj"; loc };
           attr_payload = PStr [];
           attr_loc = loc;
         };
diff --git a/ppx/test/issue-429.t/run.t b/ppx/test/issue-429.t/run.t
index 41eb4c069..fce07f2cb 100644
--- a/ppx/test/issue-429.t/run.t
+++ b/ppx/test/issue-429.t/run.t
@@ -44,7 +44,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -87,7 +87,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -99,7 +99,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -142,7 +142,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -154,7 +154,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -185,7 +185,7 @@ Let's test hovering over parts of the component
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -197,7 +197,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -209,7 +209,7 @@ Let's test hovering over parts of the component
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -240,7 +240,7 @@ Wrapping `div`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -252,7 +252,7 @@ Wrapping `div`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -264,7 +264,7 @@ Wrapping `div`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -276,7 +276,7 @@ Wrapping `div`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -307,7 +307,7 @@ First child `button`
         "line": 30,
         "col": 75
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -319,7 +319,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -331,7 +331,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -343,7 +343,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -367,7 +367,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -379,7 +379,7 @@ First child `button`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -391,7 +391,7 @@ First child `button`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -403,7 +403,7 @@ First child `button`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -434,7 +434,7 @@ First child `onClick` prop
         "line": 30,
         "col": 75
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -446,7 +446,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -458,7 +458,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -470,7 +470,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -494,7 +494,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -506,7 +506,7 @@ First child `onClick` prop
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -518,7 +518,7 @@ First child `onClick` prop
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -530,7 +530,7 @@ First child `onClick` prop
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -585,7 +585,7 @@ First child `onClick` callback argument (event)
         "line": 30,
         "col": 75
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -597,7 +597,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -609,7 +609,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -621,7 +621,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -645,7 +645,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -657,7 +657,7 @@ First child `onClick` callback argument (event)
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -669,7 +669,7 @@ First child `onClick` callback argument (event)
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -681,7 +681,7 @@ First child `onClick` callback argument (event)
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -760,7 +760,7 @@ First child `onClick` prop `dispatch`
         "line": 30,
         "col": 75
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -772,7 +772,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -784,7 +784,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -796,7 +796,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -820,7 +820,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -832,7 +832,7 @@ First child `onClick` prop `dispatch`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -844,7 +844,7 @@ First child `onClick` prop `dispatch`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -856,7 +856,7 @@ First child `onClick` prop `dispatch`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -947,7 +947,7 @@ First child `onClick` prop `Click`
         "line": 30,
         "col": 75
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -959,7 +959,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -971,7 +971,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -983,7 +983,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1007,7 +1007,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1019,7 +1019,7 @@ First child `onClick` prop `Click`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1031,7 +1031,7 @@ First child `onClick` prop `Click`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1043,7 +1043,7 @@ First child `onClick` prop `Click`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -1062,7 +1062,7 @@ First child `string`
         "line": 30,
         "col": 55
       },
-      "type": "string => element",
+      "type": "string => React.element",
       "tail": "no"
     },
     {
@@ -1074,7 +1074,7 @@ First child `string`
         "line": 30,
         "col": 65
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1086,7 +1086,7 @@ First child `string`
         "line": 30,
         "col": 65
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1110,7 +1110,7 @@ First child `string`
         "line": 30,
         "col": 75
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1122,7 +1122,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -1134,7 +1134,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1146,7 +1146,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1170,7 +1170,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1182,7 +1182,7 @@ First child `string`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1194,7 +1194,7 @@ First child `string`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1206,7 +1206,7 @@ First child `string`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -1237,7 +1237,7 @@ First child `message`
         "line": 30,
         "col": 65
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1249,7 +1249,7 @@ First child `message`
         "line": 30,
         "col": 65
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1273,7 +1273,7 @@ First child `message`
         "line": 30,
         "col": 75
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1285,7 +1285,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -1297,7 +1297,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1309,7 +1309,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1333,7 +1333,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1345,7 +1345,7 @@ First child `message`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1357,7 +1357,7 @@ First child `message`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1369,7 +1369,7 @@ First child `message`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -1412,7 +1412,7 @@ Third child `state`
         "line": 34,
         "col": 42
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1424,7 +1424,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -1436,7 +1436,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1448,7 +1448,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1472,7 +1472,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1484,7 +1484,7 @@ Third child `state`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1496,7 +1496,7 @@ Third child `state`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1508,7 +1508,7 @@ Third child `state`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -1551,7 +1551,7 @@ Third child `show` in `state.show`
         "line": 34,
         "col": 42
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1563,7 +1563,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -1575,7 +1575,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1587,7 +1587,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1611,7 +1611,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1623,7 +1623,7 @@ Third child `show` in `state.show`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1635,7 +1635,7 @@ Third child `show` in `state.show`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1647,7 +1647,7 @@ Third child `show` in `state.show`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -1666,7 +1666,7 @@ Third child `string`
         "line": 34,
         "col": 24
       },
-      "type": "string => element",
+      "type": "string => React.element",
       "tail": "no"
     },
     {
@@ -1678,7 +1678,7 @@ Third child `string`
         "line": 34,
         "col": 34
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1690,7 +1690,7 @@ Third child `string`
         "line": 34,
         "col": 42
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1702,7 +1702,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -1714,7 +1714,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1726,7 +1726,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1750,7 +1750,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1762,7 +1762,7 @@ Third child `string`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1774,7 +1774,7 @@ Third child `string`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1786,7 +1786,7 @@ Third child `string`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -1817,7 +1817,7 @@ Third child `greeting`
         "line": 34,
         "col": 34
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1829,7 +1829,7 @@ Third child `greeting`
         "line": 34,
         "col": 42
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1841,7 +1841,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -1853,7 +1853,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1865,7 +1865,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -1889,7 +1889,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1901,7 +1901,7 @@ Third child `greeting`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1913,7 +1913,7 @@ Third child `greeting`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1925,7 +1925,7 @@ Third child `greeting`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
@@ -1944,7 +1944,7 @@ Third child `null`
         "line": 34,
         "col": 41
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1956,7 +1956,7 @@ Third child `null`
         "line": 34,
         "col": 42
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1968,7 +1968,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "array(element)",
+      "type": "array(React.element)",
       "tail": "no"
     },
     {
@@ -1980,7 +1980,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -1992,7 +1992,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "option(element)",
+      "type": "option(React.element)",
       "tail": "no"
     },
     {
@@ -2016,7 +2016,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -2028,7 +2028,7 @@ Third child `null`
         "line": 35,
         "col": 9
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -2040,7 +2040,7 @@ Third child `null`
         "line": 36,
         "col": 1
       },
-      "type": "element",
+      "type": "React.element",
       "tail": "no"
     },
     {
@@ -2052,7 +2052,7 @@ Third child `null`
         "line": 36,
         "col": 1
       },
-      "type": "(~greeting: string) => element",
+      "type": "(~greeting: string) => React.element",
       "tail": "no"
     }
   ]
diff --git a/ppx/test/simple.t/run.t b/ppx/test/simple.t/run.t
index ce19aae29..6e084b6f0 100644
--- a/ppx/test/simple.t/run.t
+++ b/ppx/test/simple.t/run.t
@@ -104,7 +104,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -116,7 +116,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -128,7 +128,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -219,7 +219,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -231,7 +231,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -243,7 +243,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -358,7 +358,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -370,7 +370,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -382,7 +382,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -521,7 +521,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -533,7 +533,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -545,7 +545,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -696,7 +696,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -708,7 +708,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -720,7 +720,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -883,7 +883,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -895,7 +895,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -907,7 +907,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -1034,7 +1034,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -1046,7 +1046,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -1058,7 +1058,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -1185,7 +1185,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -1197,7 +1197,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -1209,7 +1209,7 @@ Let's test hovering over parts of the component
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
@@ -1312,7 +1312,7 @@ Closing `</button>`
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: (~initialValue: int=?, unit) => React.element;\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -1324,7 +1324,7 @@ Closing `</button>`
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -1336,7 +1336,7 @@ Closing `</button>`
         "line": 10,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {. initialValue: option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {. initialValue: option(int)} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~initialValue: 'initialValue=?, ~key: string=?, unit) =>\n    {.. \"initialValue\": option('initialValue)} = \"\"\n    \"����\u0000\u0000\u0000!\u0000\u0000\u0000\u000b\u0000\u0000\u0000!\u0000\u0000\u0000\u001f���A�,initialValue@��A�#key@��@@@\";\n  let make: {.. \"initialValue\": option(int)} => React.element;\n}",
       "tail": "no"
     }
   ]
diff --git a/ppx/test/uppercase.t/run.t b/ppx/test/uppercase.t/run.t
index 088ba355c..9f057e8f2 100644
--- a/ppx/test/uppercase.t/run.t
+++ b/ppx/test/uppercase.t/run.t
@@ -56,7 +56,7 @@ Let's test hovering over parts of the component
         "line": 16,
         "col": 3
       },
-      "type": "{. children: React.element}",
+      "type": "Js.t({.. \"children\": React.element})",
       "tail": "no"
     },
     {
@@ -92,7 +92,7 @@ Let's test hovering over parts of the component
         "line": 17,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~children: 'children, ~key: string=?, unit) => {. children: 'children}\n    = \"\" \"����\u0000\u0000\u0000\u001c\u0000\u0000\u0000\u000b\u0000\u0000\u0000\u001f\u0000\u0000\u0000\u001e���A�(children��A�#key@��@@@\";\n  let make: (~children: React.element) => React.element;\n  let make: {. children: React.element} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~children: 'children, ~key: string=?, unit) =>\n    {.. \"children\": 'children} = \"\"\n    \"����\u0000\u0000\u0000\u001c\u0000\u0000\u0000\u000b\u0000\u0000\u0000\u001f\u0000\u0000\u0000\u001e���A�(children��A�#key@��@@@\";\n  let make: (~children: React.element) => React.element;\n  let make: {.. \"children\": React.element} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -104,7 +104,7 @@ Let's test hovering over parts of the component
         "line": 17,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~children: 'children, ~key: string=?, unit) => {. children: 'children}\n    = \"\" \"����\u0000\u0000\u0000\u001c\u0000\u0000\u0000\u000b\u0000\u0000\u0000\u001f\u0000\u0000\u0000\u001e���A�(children��A�#key@��@@@\";\n  let make: {. children: React.element} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~children: 'children, ~key: string=?, unit) =>\n    {.. \"children\": 'children} = \"\"\n    \"����\u0000\u0000\u0000\u001c\u0000\u0000\u0000\u000b\u0000\u0000\u0000\u001f\u0000\u0000\u0000\u001e���A�(children��A�#key@��@@@\";\n  let make: {.. \"children\": React.element} => React.element;\n}",
       "tail": "no"
     },
     {
@@ -116,7 +116,7 @@ Let's test hovering over parts of the component
         "line": 17,
         "col": 1
       },
-      "type": "{\n  external makeProps:\n    (~children: 'children, ~key: string=?, unit) => {. children: 'children}\n    = \"\" \"����\u0000\u0000\u0000\u001c\u0000\u0000\u0000\u000b\u0000\u0000\u0000\u001f\u0000\u0000\u0000\u001e���A�(children��A�#key@��@@@\";\n  let make: {. children: React.element} => React.element;\n}",
+      "type": "{\n  external makeProps:\n    (~children: 'children, ~key: string=?, unit) =>\n    {.. \"children\": 'children} = \"\"\n    \"����\u0000\u0000\u0000\u001c\u0000\u0000\u0000\u000b\u0000\u0000\u0000\u001f\u0000\u0000\u0000\u001e���A�(children��A�#key@��@@@\";\n  let make: {.. \"children\": React.element} => React.element;\n}",
       "tail": "no"
     }
   ]
diff --git a/src/React.re b/src/React.re
index 5f70d34f9..8d75dfa90 100644
--- a/src/React.re
+++ b/src/React.re
@@ -1,6 +1,6 @@
 type element;
 
-[@bs.val] external null: element = "null";
+external null: element = "null";
 
 external float: float => element = "%identity";
 external int: int => element = "%identity";
@@ -16,35 +16,35 @@ type component('props) = componentLike('props, element);
 external component: componentLike('props, element) => component('props) =
   "%identity";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external createElement: (component('props), 'props) => element =
   "createElement";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external cloneElement: (element, 'props) => element = "cloneElement";
 
-[@bs.splice] [@bs.module "react"]
+[@mel.splice] [@mel.module "react"]
 external createElementVariadic:
   (component('props), 'props, array(element)) => element =
   "createElement";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsxKeyed:
   (component('props), 'props, ~key: string=?, unit) => element =
   "jsx";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsx: (component('props), 'props) => element = "jsx";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsxs: (component('props), 'props) => element = "jsxs";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsxsKeyed:
   (component('props), 'props, ~key: string=?, unit) => element =
   "jsxs";
 
-[@bs.module "react/jsx-runtime"] external jsxFragment: 'element = "Fragment";
+[@mel.module "react/jsx-runtime"] external jsxFragment: 'element = "Fragment";
 
 type ref('value) = {mutable current: 'value};
 
@@ -52,41 +52,41 @@ module Ref = {
   [@deprecated "Please use the type React.ref instead"]
   type t('value) = ref('value);
 
-  [@deprecated "Please directly read from ref.current instead"] [@bs.get]
+  [@deprecated "Please directly read from ref.current instead"] [@mel.get]
   external current: ref('value) => 'value = "current";
 
-  [@deprecated "Please directly assign to ref.current instead"] [@bs.set]
+  [@deprecated "Please directly assign to ref.current instead"] [@mel.set]
   external setCurrent: (ref('value), 'value) => unit = "current";
 };
 
-[@bs.module "react"]
+[@mel.module "react"]
 external createRef: unit => ref(Js.nullable('a)) = "createRef";
 
 module Children = {
-  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
+  [@mel.module "react"] [@mel.scope "Children"]
   external map: (element, element => element) => element = "map";
-  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
+  [@mel.module "react"] [@mel.scope "Children"]
   external mapWithIndex:
-    (element, [@bs.uncurry] ((element, int) => element)) => element =
+    (element, [@mel.uncurry] ((element, int) => element)) => element =
     "map";
-  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
+  [@mel.module "react"] [@mel.scope "Children"]
   external forEach: (element, element => unit) => unit = "forEach";
-  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
+  [@mel.module "react"] [@mel.scope "Children"]
   external forEachWithIndex:
-    (element, [@bs.uncurry] ((element, int) => unit)) => unit =
+    (element, [@mel.uncurry] ((element, int) => unit)) => unit =
     "forEach";
-  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
+  [@mel.module "react"] [@mel.scope "Children"]
   external count: element => int = "count";
-  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
+  [@mel.module "react"] [@mel.scope "Children"]
   external only: element => element = "only";
-  [@bs.module "react"] [@bs.scope "Children"] [@bs.val]
+  [@mel.module "react"] [@mel.scope "Children"]
   external toArray: element => array(element) = "toArray";
 };
 
 module Context = {
   type t('props);
 
-  [@bs.obj]
+  [@mel.obj]
   external makeProps:
     (~value: 'props, ~children: element, unit) =>
     {
@@ -95,7 +95,7 @@ module Context = {
       "children": element,
     };
 
-  [@bs.get]
+  [@mel.get]
   external provider:
     t('props) =>
     component({
@@ -106,41 +106,41 @@ module Context = {
     "Provider";
 };
 
-[@bs.module "react"]
+[@mel.module "react"]
 external createContext: 'a => Context.t('a) = "createContext";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external forwardRef:
-  ([@bs.uncurry] (('props, Js.Nullable.t(ref('a))) => element)) =>
+  ([@mel.uncurry] (('props, Js.Nullable.t(ref('a))) => element)) =>
   component('props) =
   "forwardRef";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external memo: component('props) => component('props) = "memo";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external memoCustomCompareProps:
-  (component('props), [@bs.uncurry] (('props, 'props) => bool)) =>
+  (component('props), [@mel.uncurry] (('props, 'props) => bool)) =>
   component('props) =
   "memo";
 
 module Fragment = {
-  [@bs.obj]
+  [@mel.obj]
   external makeProps: (~children: element, unit) => {. "children": element};
 
-  [@bs.module "react"]
+  [@mel.module "react"]
   external make: component({. "children": element}) = "Fragment";
 };
 
 module StrictMode = {
-  [@bs.obj]
+  [@mel.obj]
   external makeProps: (~children: element, unit) => {. "children": element};
-  [@bs.module "react"]
+  [@mel.module "react"]
   external make: component({. "children": element}) = "StrictMode";
 };
 
 module Suspense = {
-  [@bs.obj]
+  [@mel.obj]
   external makeProps:
     (~children: element=?, ~fallback: element=?, unit) =>
     {
@@ -148,7 +148,7 @@ module Suspense = {
       "children": option(element),
       "fallback": option(element),
     };
-  [@bs.module "react"]
+  [@mel.module "react"]
   external make:
     component({
       .
@@ -162,7 +162,7 @@ module Suspense = {
 module SuspenseList = {
   type revealOrder;
   type tail;
-  [@bs.obj]
+  [@mel.obj]
   external makeProps:
     (
       ~children: element=?,
@@ -177,7 +177,7 @@ module SuspenseList = {
       "tail": option(tail),
     };
 
-  [@bs.module "react"]
+  [@mel.module "react"]
   external make:
     component({
       .
@@ -195,349 +195,366 @@ module SuspenseList = {
  * them differently. Lazy initializer + callback which returns state is the
  * only way to safely have any type of state and be able to update it correctly.
  */
-[@bs.module "react"]
+[@mel.module "react"]
 external useState:
-  ([@bs.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) =
+  ([@mel.uncurry] (unit => 'state)) => ('state, ('state => 'state) => unit) =
   "useState";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useReducer:
-  ([@bs.uncurry] (('state, 'action) => 'state), 'state) =>
+  ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
   ('state, 'action => unit) =
   "useReducer";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useReducerWithMapState:
   (
-    [@bs.uncurry] (('state, 'action) => 'state),
+    [@mel.uncurry] (('state, 'action) => 'state),
     'initialState,
-    [@bs.uncurry] ('initialState => 'state)
+    [@mel.uncurry] ('initialState => 'state)
   ) =>
   ('state, 'action => unit) =
   "useReducer";
 
-[@bs.module "react"]
-external useEffect: ([@bs.uncurry] (unit => option(unit => unit))) => unit =
+[@mel.module "react"]
+external useEffect: ([@mel.uncurry] (unit => option(unit => unit))) => unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect0:
-  ([@bs.uncurry] (unit => option(unit => unit)), [@bs.as {json|[]|json}] _) =>
+  (
+    [@mel.uncurry] (unit => option(unit => unit)),
+    [@mel.as {json|[]|json}] _
+  ) =>
   unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect1:
-  ([@bs.uncurry] (unit => option(unit => unit)), array('a)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect2:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect3:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect4:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect5:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
   unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect6:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e, 'f)) =>
+  (
+    [@mel.uncurry] (unit => option(unit => unit)),
+    ('a, 'b, 'c, 'd, 'e, 'f)
+  ) =>
   unit =
   "useEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useEffect7:
   (
-    [@bs.uncurry] (unit => option(unit => unit)),
+    [@mel.uncurry] (unit => option(unit => unit)),
     ('a, 'b, 'c, 'd, 'e, 'f, 'g)
   ) =>
   unit =
   "useEffect";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect:
-  ([@bs.uncurry] (unit => option(unit => unit))) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit))) => unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect0:
-  ([@bs.uncurry] (unit => option(unit => unit)), [@bs.as {json|[]|json}] _) =>
+  (
+    [@mel.uncurry] (unit => option(unit => unit)),
+    [@mel.as {json|[]|json}] _
+  ) =>
   unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect1:
-  ([@bs.uncurry] (unit => option(unit => unit)), array('a)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), array('a)) => unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect2:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b)) => unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect3:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c)) => unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect4:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect5:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
+  ([@mel.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) =>
   unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect6:
-  ([@bs.uncurry] (unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e, 'f)) =>
+  (
+    [@mel.uncurry] (unit => option(unit => unit)),
+    ('a, 'b, 'c, 'd, 'e, 'f)
+  ) =>
   unit =
   "useLayoutEffect";
-[@bs.module "react"]
+[@mel.module "react"]
 external useLayoutEffect7:
   (
-    [@bs.uncurry] (unit => option(unit => unit)),
+    [@mel.uncurry] (unit => option(unit => unit)),
     ('a, 'b, 'c, 'd, 'e, 'f, 'g)
   ) =>
   unit =
   "useLayoutEffect";
 
-[@bs.module "react"]
-external useMemo: ([@bs.uncurry] (unit => 'any)) => 'any = "useMemo";
-[@bs.module "react"]
+[@mel.module "react"]
+external useMemo: ([@mel.uncurry] (unit => 'any)) => 'any = "useMemo";
+[@mel.module "react"]
 external useMemo0:
-  ([@bs.uncurry] (unit => 'any), [@bs.as {json|[]|json}] _) => 'any =
+  ([@mel.uncurry] (unit => 'any), [@mel.as {json|[]|json}] _) => 'any =
   "useMemo";
-[@bs.module "react"]
-external useMemo1: ([@bs.uncurry] (unit => 'any), array('a)) => 'any =
+[@mel.module "react"]
+external useMemo1: ([@mel.uncurry] (unit => 'any), array('a)) => 'any =
   "useMemo";
-[@bs.module "react"]
-external useMemo2: ([@bs.uncurry] (unit => 'any), ('a, 'b)) => 'any =
+[@mel.module "react"]
+external useMemo2: ([@mel.uncurry] (unit => 'any), ('a, 'b)) => 'any =
   "useMemo";
-[@bs.module "react"]
-external useMemo3: ([@bs.uncurry] (unit => 'any), ('a, 'b, 'c)) => 'any =
+[@mel.module "react"]
+external useMemo3: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c)) => 'any =
   "useMemo";
-[@bs.module "react"]
-external useMemo4: ([@bs.uncurry] (unit => 'any), ('a, 'b, 'c, 'd)) => 'any =
+[@mel.module "react"]
+external useMemo4: ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd)) => 'any =
   "useMemo";
-[@bs.module "react"]
+[@mel.module "react"]
 external useMemo5:
-  ([@bs.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any =
+  ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e)) => 'any =
   "useMemo";
-[@bs.module "react"]
+[@mel.module "react"]
 external useMemo6:
-  ([@bs.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any =
+  ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f)) => 'any =
   "useMemo";
-[@bs.module "react"]
+[@mel.module "react"]
 external useMemo7:
-  ([@bs.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any =
+  ([@mel.uncurry] (unit => 'any), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => 'any =
   "useMemo";
 
 /* This is used as return values  */
 type callback('input, 'output) = 'input => 'output;
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback:
-  ([@bs.uncurry] ('input => 'output)) => callback('input, 'output) =
+  ([@mel.uncurry] ('input => 'output)) => callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback0:
-  ([@bs.uncurry] ('input => 'output), [@bs.as {json|[]|json}] _) =>
+  ([@mel.uncurry] ('input => 'output), [@mel.as {json|[]|json}] _) =>
   callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback1:
-  ([@bs.uncurry] ('input => 'output), array('a)) => callback('input, 'output) =
+  ([@mel.uncurry] ('input => 'output), array('a)) =>
+  callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback2:
-  ([@bs.uncurry] ('input => 'output), ('a, 'b)) => callback('input, 'output) =
+  ([@mel.uncurry] ('input => 'output), ('a, 'b)) => callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback3:
-  ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c)) =>
+  ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c)) =>
   callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback4:
-  ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd)) =>
+  ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd)) =>
   callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback5:
-  ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e)) =>
+  ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e)) =>
   callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback6:
-  ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f)) =>
+  ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f)) =>
   callback('input, 'output) =
   "useCallback";
-[@bs.module "react"]
+[@mel.module "react"]
 external useCallback7:
-  ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) =>
+  ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) =>
   callback('input, 'output) =
   "useCallback";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useContext: Context.t('any) => 'any = "useContext";
 
-[@bs.module "react"] external useRef: 'value => ref('value) = "useRef";
+[@mel.module "react"] external useRef: 'value => ref('value) = "useRef";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle0:
   (
     Js.Nullable.t(ref('value)),
-    [@bs.uncurry] (unit => 'value),
-    [@bs.as {json|[]|json}] _
+    [@mel.uncurry] (unit => 'value),
+    [@mel.as {json|[]|json}] _
   ) =>
   unit =
   "useImperativeHandle";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle1:
-  (Js.Nullable.t(ref('value)), [@bs.uncurry] (unit => 'value), array('a)) =>
+  (
+    Js.Nullable.t(ref('value)),
+    [@mel.uncurry] (unit => 'value),
+    array('a)
+  ) =>
   unit =
   "useImperativeHandle";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle2:
-  (Js.Nullable.t(ref('value)), [@bs.uncurry] (unit => 'value), ('a, 'b)) =>
+  (Js.Nullable.t(ref('value)), [@mel.uncurry] (unit => 'value), ('a, 'b)) =>
   unit =
   "useImperativeHandle";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle3:
   (
     Js.Nullable.t(ref('value)),
-    [@bs.uncurry] (unit => 'value),
+    [@mel.uncurry] (unit => 'value),
     ('a, 'b, 'c)
   ) =>
   unit =
   "useImperativeHandle";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle4:
   (
     Js.Nullable.t(ref('value)),
-    [@bs.uncurry] (unit => 'value),
+    [@mel.uncurry] (unit => 'value),
     ('a, 'b, 'c, 'd)
   ) =>
   unit =
   "useImperativeHandle";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle5:
   (
     Js.Nullable.t(ref('value)),
-    [@bs.uncurry] (unit => 'value),
+    [@mel.uncurry] (unit => 'value),
     ('a, 'b, 'c, 'd, 'e)
   ) =>
   unit =
   "useImperativeHandle";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle6:
   (
     Js.Nullable.t(ref('value)),
-    [@bs.uncurry] (unit => 'value),
+    [@mel.uncurry] (unit => 'value),
     ('a, 'b, 'c, 'd, 'e, 'f)
   ) =>
   unit =
   "useImperativeHandle";
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useImperativeHandle7:
   (
     Js.Nullable.t(ref('value)),
-    [@bs.uncurry] (unit => 'value),
+    [@mel.uncurry] (unit => 'value),
     ('a, 'b, 'c, 'd, 'e, 'f, 'g)
   ) =>
   unit =
   "useImperativeHandle";
 
 module Uncurried = {
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useState:
-    ([@bs.uncurry] (unit => 'state)) =>
+    ([@mel.uncurry] (unit => 'state)) =>
     ('state, (. ('state => 'state)) => unit) =
     "useState";
 
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useReducer:
-    ([@bs.uncurry] (('state, 'action) => 'state), 'state) =>
+    ([@mel.uncurry] (('state, 'action) => 'state), 'state) =>
     ('state, (. 'action) => unit) =
     "useReducer";
 
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useReducerWithMapState:
     (
-      [@bs.uncurry] (('state, 'action) => 'state),
+      [@mel.uncurry] (('state, 'action) => 'state),
       'initialState,
-      [@bs.uncurry] ('initialState => 'state)
+      [@mel.uncurry] ('initialState => 'state)
     ) =>
     ('state, (. 'action) => unit) =
     "useReducer";
 
   type callback('input, 'output) = (. 'input) => 'output;
 
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback:
-    ([@bs.uncurry] ('input => 'output)) => callback('input, 'output) =
+    ([@mel.uncurry] ('input => 'output)) => callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback0:
-    ([@bs.uncurry] ('input => 'output), [@bs.as {json|[]|json}] _) =>
+    ([@mel.uncurry] ('input => 'output), [@mel.as {json|[]|json}] _) =>
     callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback1:
-    ([@bs.uncurry] ('input => 'output), array('a)) =>
+    ([@mel.uncurry] ('input => 'output), array('a)) =>
     callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback2:
-    ([@bs.uncurry] ('input => 'output), ('a, 'b)) =>
+    ([@mel.uncurry] ('input => 'output), ('a, 'b)) =>
     callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback3:
-    ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c)) =>
+    ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c)) =>
     callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback4:
-    ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd)) =>
+    ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd)) =>
     callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback5:
-    ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e)) =>
+    ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e)) =>
     callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback6:
-    ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f)) =>
+    ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f)) =>
     callback('input, 'output) =
     "useCallback";
-  [@bs.module "react"]
+  [@mel.module "react"]
   external useCallback7:
-    ([@bs.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) =>
+    ([@mel.uncurry] ('input => 'output), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) =>
     callback('input, 'output) =
     "useCallback";
 };
 
 type transitionConfig = {timeoutMs: int};
 
-[@bs.module "react"]
+[@mel.module "react"]
 external useTransition:
   (~config: transitionConfig=?, unit) =>
   (callback(callback(unit, unit), unit), bool) =
   "useTransition";
 
-[@bs.set]
+[@mel.set]
 external setDisplayName: (component('props), string) => unit = "displayName";
 
-[@bs.get] [@bs.return nullable]
+[@mel.get] [@mel.return nullable]
 external displayName: component('props) => option(string) = "displayName";
diff --git a/src/ReactDOM.re b/src/ReactDOM.re
index e61d125dc..8d7794e08 100644
--- a/src/ReactDOM.re
+++ b/src/ReactDOM.re
@@ -6,33 +6,33 @@
    calls and add the appropriate `require("react-dom")` in the file calling this `render` */
 
 // Helper so that ReactDOM itself doesn't bring any runtime
-[@bs.val] [@bs.return nullable]
+[@mel.return nullable]
 external querySelector: string => option(Dom.element) =
   "document.querySelector";
 
-[@bs.module "react-dom"]
+[@mel.module "react-dom"]
 external render: (React.element, Dom.element) => unit = "render";
 
 module Experimental = {
   type root;
 
-  [@bs.module "react-dom"]
+  [@mel.module "react-dom"]
   external createRoot: Dom.element => root = "createRoot";
 
-  [@bs.module "react-dom"]
+  [@mel.module "react-dom"]
   external createBlockingRoot: Dom.element => root = "createBlockingRoot";
 
-  [@bs.send] external render: (root, React.element) => unit = "render";
+  [@mel.send] external render: (root, React.element) => unit = "render";
 };
 
-[@bs.module "react-dom"]
+[@mel.module "react-dom"]
 external hydrate: (React.element, Dom.element) => unit = "hydrate";
 
-[@bs.module "react-dom"]
+[@mel.module "react-dom"]
 external createPortal: (React.element, Dom.element) => React.element =
   "createPortal";
 
-[@bs.module "react-dom"]
+[@mel.module "react-dom"]
 external unmountComponentAtNode: Dom.element => unit =
   "unmountComponentAtNode";
 
@@ -59,1030 +59,1030 @@ module Props = {
    */
   [@deriving abstract]
   type domProps = {
-    [@bs.optional]
+    [@mel.optional]
     key: option(string),
-    [@bs.optional]
+    [@mel.optional]
     ref: option(domRef),
-    [@bs.optional]
+    [@mel.optional]
     children: option(React.element),
     /* accessibility */
     /* https://www.w3.org/TR/wai-aria-1.1/ */
-    [@bs.optional] [@bs.as "aria-activedescendant"]
+    [@mel.optional] [@mel.as "aria-activedescendant"]
     ariaActivedescendant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendat */
-    [@bs.optional] [@bs.as "aria-atomic"]
+    [@mel.optional] [@mel.as "aria-atomic"]
     ariaAtomic: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic */
-    [@bs.optional] [@bs.as "aria-autocomplete"]
+    [@mel.optional] [@mel.as "aria-autocomplete"]
     ariaAutocomplete: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete */
-    [@bs.optional] [@bs.as "aria-busy"]
+    [@mel.optional] [@mel.as "aria-busy"]
     ariaBusy: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy */
-    [@bs.optional] [@bs.as "aria-checked"]
+    [@mel.optional] [@mel.as "aria-checked"]
     ariaChecked: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked */
-    [@bs.optional] [@bs.as "aria-colcount"]
+    [@mel.optional] [@mel.as "aria-colcount"]
     ariaColcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount */
-    [@bs.optional] [@bs.as "aria-colindex"]
+    [@mel.optional] [@mel.as "aria-colindex"]
     ariaColindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex */
-    [@bs.optional] [@bs.as "aria-colspan"]
+    [@mel.optional] [@mel.as "aria-colspan"]
     ariaColspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan */
-    [@bs.optional] [@bs.as "aria-controls"]
+    [@mel.optional] [@mel.as "aria-controls"]
     ariaControls: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls */
-    [@bs.optional] [@bs.as "aria-current"]
+    [@mel.optional] [@mel.as "aria-current"]
     ariaCurrent: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current */
-    [@bs.optional] [@bs.as "aria-describedby"]
+    [@mel.optional] [@mel.as "aria-describedby"]
     ariaDescribedby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby */
-    [@bs.optional] [@bs.as "aria-details"]
+    [@mel.optional] [@mel.as "aria-details"]
     ariaDetails: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-details */
-    [@bs.optional] [@bs.as "aria-disabled"]
+    [@mel.optional] [@mel.as "aria-disabled"]
     ariaDisabled: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled */
-    [@bs.optional] [@bs.as "aria-errormessage"]
+    [@mel.optional] [@mel.as "aria-errormessage"]
     ariaErrormessage: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage */
-    [@bs.optional] [@bs.as "aria-expanded"]
+    [@mel.optional] [@mel.as "aria-expanded"]
     ariaExpanded: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded */
-    [@bs.optional] [@bs.as "aria-flowto"]
+    [@mel.optional] [@mel.as "aria-flowto"]
     ariaFlowto: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto */
-    [@bs.optional] [@bs.as "aria-grabbed"] /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
+    [@mel.optional] [@mel.as "aria-grabbed"] /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
     ariaGrabbed: option(bool),
-    [@bs.optional] [@bs.as "aria-haspopup"]
+    [@mel.optional] [@mel.as "aria-haspopup"]
     ariaHaspopup: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup */
-    [@bs.optional] [@bs.as "aria-hidden"]
+    [@mel.optional] [@mel.as "aria-hidden"]
     ariaHidden: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden */
-    [@bs.optional] [@bs.as "aria-invalid"]
+    [@mel.optional] [@mel.as "aria-invalid"]
     ariaInvalid: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid */
-    [@bs.optional] [@bs.as "aria-keyshortcuts"]
+    [@mel.optional] [@mel.as "aria-keyshortcuts"]
     ariaKeyshortcuts: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts */
-    [@bs.optional] [@bs.as "aria-label"]
+    [@mel.optional] [@mel.as "aria-label"]
     ariaLabel: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label */
-    [@bs.optional] [@bs.as "aria-labelledby"]
+    [@mel.optional] [@mel.as "aria-labelledby"]
     ariaLabelledby: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby */
-    [@bs.optional] [@bs.as "aria-level"]
+    [@mel.optional] [@mel.as "aria-level"]
     ariaLevel: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level */
-    [@bs.optional] [@bs.as "aria-live"]
+    [@mel.optional] [@mel.as "aria-live"]
     ariaLive: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live */
-    [@bs.optional] [@bs.as "aria-modal"]
+    [@mel.optional] [@mel.as "aria-modal"]
     ariaModal: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal */
-    [@bs.optional] [@bs.as "aria-multiline"]
+    [@mel.optional] [@mel.as "aria-multiline"]
     ariaMultiline: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiline */
-    [@bs.optional] [@bs.as "aria-multiselectable"]
+    [@mel.optional] [@mel.as "aria-multiselectable"]
     ariaMultiselectable: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable */
-    [@bs.optional] [@bs.as "aria-orientation"]
+    [@mel.optional] [@mel.as "aria-orientation"]
     ariaOrientation: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation */
-    [@bs.optional] [@bs.as "aria-owns"]
+    [@mel.optional] [@mel.as "aria-owns"]
     ariaOwns: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-owns */
-    [@bs.optional] [@bs.as "aria-placeholder"]
+    [@mel.optional] [@mel.as "aria-placeholder"]
     ariaPlaceholder: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder */
-    [@bs.optional] [@bs.as "aria-posinset"]
+    [@mel.optional] [@mel.as "aria-posinset"]
     ariaPosinset: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset */
-    [@bs.optional] [@bs.as "aria-pressed"]
+    [@mel.optional] [@mel.as "aria-pressed"]
     ariaPressed: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed */
-    [@bs.optional] [@bs.as "aria-readonly"]
+    [@mel.optional] [@mel.as "aria-readonly"]
     ariaReadonly: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly */
-    [@bs.optional] [@bs.as "aria-relevant"]
+    [@mel.optional] [@mel.as "aria-relevant"]
     ariaRelevant: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant */
-    [@bs.optional] [@bs.as "aria-required"]
+    [@mel.optional] [@mel.as "aria-required"]
     ariaRequired: option(bool), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required */
-    [@bs.optional] [@bs.as "aria-roledescription"]
+    [@mel.optional] [@mel.as "aria-roledescription"]
     ariaRoledescription: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription */
-    [@bs.optional] [@bs.as "aria-rowcount"]
+    [@mel.optional] [@mel.as "aria-rowcount"]
     ariaRowcount: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount */
-    [@bs.optional] [@bs.as "aria-rowindex"]
+    [@mel.optional] [@mel.as "aria-rowindex"]
     ariaRowindex: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex */
-    [@bs.optional] [@bs.as "aria-rowindextext"]
+    [@mel.optional] [@mel.as "aria-rowindextext"]
     ariaRowindextext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext */
-    [@bs.optional] [@bs.as "aria-rowspan"]
+    [@mel.optional] [@mel.as "aria-rowspan"]
     ariaRowspan: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan */
-    [@bs.optional] [@bs.as "aria-selected"]
+    [@mel.optional] [@mel.as "aria-selected"]
     ariaSelected: option(bool), /* string */ /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected */
-    [@bs.optional] [@bs.as "aria-setsize"]
+    [@mel.optional] [@mel.as "aria-setsize"]
     ariaSetsize: option(int), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize */
-    [@bs.optional] [@bs.as "aria-sort"]
+    [@mel.optional] [@mel.as "aria-sort"]
     ariaSort: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort */
-    [@bs.optional] [@bs.as "aria-valuemax"]
+    [@mel.optional] [@mel.as "aria-valuemax"]
     ariaValuemax: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax */
-    [@bs.optional] [@bs.as "aria-valuemin"]
+    [@mel.optional] [@mel.as "aria-valuemin"]
     ariaValuemin: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin */
-    [@bs.optional] [@bs.as "aria-valuenow"]
+    [@mel.optional] [@mel.as "aria-valuenow"]
     ariaValuenow: option(float), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow */
-    [@bs.optional] [@bs.as "aria-valuetext"]
+    [@mel.optional] [@mel.as "aria-valuetext"]
     ariaValuetext: option(string), /* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext */
     /* react textarea/input */
-    [@bs.optional]
+    [@mel.optional]
     defaultChecked: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     defaultValue: option(string),
     /* global html attributes */
-    [@bs.optional]
+    [@mel.optional]
     accessKey: option(string),
-    [@bs.optional]
+    [@mel.optional]
     className: option(string), /* substitute for "class" */
-    [@bs.optional]
+    [@mel.optional]
     contentEditable: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     contextMenu: option(string),
-    [@bs.optional]
+    [@mel.optional]
     dir: option(string), /* "ltr", "rtl" or "auto" */
-    [@bs.optional]
+    [@mel.optional]
     draggable: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     hidden: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     id: option(string),
-    [@bs.optional]
+    [@mel.optional]
     lang: option(string),
-    [@bs.optional]
+    [@mel.optional]
     role: option(string), /* ARIA role */
-    [@bs.optional]
+    [@mel.optional]
     style: option(style),
-    [@bs.optional]
+    [@mel.optional]
     spellCheck: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     tabIndex: option(int),
-    [@bs.optional]
+    [@mel.optional]
     title: option(string),
     /* html5 microdata */
-    [@bs.optional]
+    [@mel.optional]
     itemID: option(string),
-    [@bs.optional]
+    [@mel.optional]
     itemProp: option(string),
-    [@bs.optional]
+    [@mel.optional]
     itemRef: option(string),
-    [@bs.optional]
+    [@mel.optional]
     itemScope: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     itemType: option(string), /* uri */
     /* tag-specific html attributes */
-    [@bs.optional] [@bs.as "as"]
+    [@mel.optional] [@mel.as "as"]
     as_: option(string),
-    [@bs.optional]
+    [@mel.optional]
     accept: option(string),
-    [@bs.optional]
+    [@mel.optional]
     acceptCharset: option(string),
-    [@bs.optional]
+    [@mel.optional]
     action: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     allowFullScreen: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     alt: option(string),
-    [@bs.optional]
+    [@mel.optional]
     async: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     autoComplete: option(string), /* has a fixed, but large-ish, set of possible values */
-    [@bs.optional]
+    [@mel.optional]
     autoCapitalize: option(string), /* Mobile Safari specific */
-    [@bs.optional]
+    [@mel.optional]
     autoFocus: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     autoPlay: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     challenge: option(string),
-    [@bs.optional]
+    [@mel.optional]
     charSet: option(string),
-    [@bs.optional]
+    [@mel.optional]
     checked: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     cite: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     crossOrigin: option(string), /* anonymous, use-credentials */
-    [@bs.optional]
+    [@mel.optional]
     cols: option(int),
-    [@bs.optional]
+    [@mel.optional]
     colSpan: option(int),
-    [@bs.optional]
+    [@mel.optional]
     content: option(string),
-    [@bs.optional]
+    [@mel.optional]
     controls: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     coords: option(string), /* set of values specifying the coordinates of a region */
-    [@bs.optional]
+    [@mel.optional]
     data: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     dateTime: option(string), /* "valid date string with optional time" */
-    [@bs.optional]
+    [@mel.optional]
     default: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     defer: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     disabled: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     download: option(string), /* should really be either a boolean, signifying presence, or a string */
-    [@bs.optional]
+    [@mel.optional]
     encType: option(string), /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */
-    [@bs.optional]
+    [@mel.optional]
     form: option(string),
-    [@bs.optional]
+    [@mel.optional]
     formAction: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     formTarget: option(string), /* "_blank", "_self", etc. */
-    [@bs.optional]
+    [@mel.optional]
     formMethod: option(string), /* "post", "get", "put" */
-    [@bs.optional]
+    [@mel.optional]
     headers: option(string),
-    [@bs.optional]
+    [@mel.optional]
     height: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
-    [@bs.optional]
+    [@mel.optional]
     high: option(int),
-    [@bs.optional]
+    [@mel.optional]
     href: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     hrefLang: option(string),
-    [@bs.optional]
+    [@mel.optional]
     htmlFor: option(string), /* substitute for "for" */
-    [@bs.optional]
+    [@mel.optional]
     httpEquiv: option(string), /* has a fixed set of possible values */
-    [@bs.optional]
+    [@mel.optional]
     icon: option(string), /* uri? */
-    [@bs.optional]
+    [@mel.optional]
     inputMode: option(string), /* "verbatim", "latin", "numeric", etc. */
-    [@bs.optional]
+    [@mel.optional]
     integrity: option(string),
-    [@bs.optional]
+    [@mel.optional]
     keyType: option(string),
-    [@bs.optional]
+    [@mel.optional]
     kind: option(string), /* has a fixed set of possible values */
-    [@bs.optional]
+    [@mel.optional]
     label: option(string),
-    [@bs.optional]
+    [@mel.optional]
     list: option(string),
-    [@bs.optional]
+    [@mel.optional]
     loop: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     low: option(int),
-    [@bs.optional]
+    [@mel.optional]
     manifest: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     max: option(string), /* should be int or Js.Date.t */
-    [@bs.optional]
+    [@mel.optional]
     maxLength: option(int),
-    [@bs.optional]
+    [@mel.optional]
     media: option(string), /* a valid media query */
-    [@bs.optional]
+    [@mel.optional]
     mediaGroup: option(string),
-    [@bs.optional]
+    [@mel.optional]
     method: option(string), /* "post" or "get" */
-    [@bs.optional]
+    [@mel.optional]
     min: option(string),
-    [@bs.optional]
+    [@mel.optional]
     minLength: option(int),
-    [@bs.optional]
+    [@mel.optional]
     multiple: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     muted: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     name: option(string),
-    [@bs.optional]
+    [@mel.optional]
     nonce: option(string),
-    [@bs.optional]
+    [@mel.optional]
     noValidate: option(bool),
-    [@bs.optional] [@bs.as "open"]
+    [@mel.optional] [@mel.as "open"]
     open_: option(bool), /* use this one. Previous one is deprecated */
-    [@bs.optional]
+    [@mel.optional]
     optimum: option(int),
-    [@bs.optional]
+    [@mel.optional]
     pattern: option(string), /* valid Js RegExp */
-    [@bs.optional]
+    [@mel.optional]
     placeholder: option(string),
-    [@bs.optional]
+    [@mel.optional]
     playsInline: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     poster: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     preload: option(string), /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */
-    [@bs.optional]
+    [@mel.optional]
     radioGroup: option(string),
-    [@bs.optional]
+    [@mel.optional]
     readOnly: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     rel: option(string), /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */
-    [@bs.optional]
+    [@mel.optional]
     required: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     reversed: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     rows: option(int),
-    [@bs.optional]
+    [@mel.optional]
     rowSpan: option(int),
-    [@bs.optional]
+    [@mel.optional]
     sandbox: option(string), /* has a fixed set of possible values */
-    [@bs.optional]
+    [@mel.optional]
     scope: option(string), /* has a fixed set of possible values */
-    [@bs.optional]
+    [@mel.optional]
     scoped: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     scrolling: option(string), /* html4 only, "auto", "yes" or "no" */
     /* seamless - supported by React, but removed from the html5 spec */
-    [@bs.optional]
+    [@mel.optional]
     selected: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     shape: option(string),
-    [@bs.optional]
+    [@mel.optional]
     size: option(int),
-    [@bs.optional]
+    [@mel.optional]
     sizes: option(string),
-    [@bs.optional]
+    [@mel.optional]
     span: option(int),
-    [@bs.optional]
+    [@mel.optional]
     src: option(string), /* uri */
-    [@bs.optional]
+    [@mel.optional]
     srcDoc: option(string),
-    [@bs.optional]
+    [@mel.optional]
     srcLang: option(string),
-    [@bs.optional]
+    [@mel.optional]
     srcSet: option(string),
-    [@bs.optional]
+    [@mel.optional]
     start: option(int),
-    [@bs.optional]
+    [@mel.optional]
     step: option(float),
-    [@bs.optional]
+    [@mel.optional]
     summary: option(string), /* deprecated */
-    [@bs.optional]
+    [@mel.optional]
     target: option(string),
-    [@bs.optional] [@bs.as "type"]
+    [@mel.optional] [@mel.as "type"]
     type_: option(string), /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */
-    [@bs.optional]
+    [@mel.optional]
     useMap: option(string),
-    [@bs.optional]
+    [@mel.optional]
     value: option(string),
-    [@bs.optional]
+    [@mel.optional]
     width: option(string), /* in html5 this can only be a number, but in html4 it can ba a percentage as well */
-    [@bs.optional]
+    [@mel.optional]
     wrap: option(string), /* "hard" or "soft" */
     /* Clipboard events */
-    [@bs.optional]
+    [@mel.optional]
     onCopy: option(ReactEvent.Clipboard.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onCut: option(ReactEvent.Clipboard.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPaste: option(ReactEvent.Clipboard.t => unit),
     /* Composition events */
-    [@bs.optional]
+    [@mel.optional]
     onCompositionEnd: option(ReactEvent.Composition.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onCompositionStart: option(ReactEvent.Composition.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onCompositionUpdate: option(ReactEvent.Composition.t => unit),
     /* Keyboard events */
-    [@bs.optional]
+    [@mel.optional]
     onKeyDown: option(ReactEvent.Keyboard.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onKeyPress: option(ReactEvent.Keyboard.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onKeyUp: option(ReactEvent.Keyboard.t => unit),
     /* Focus events */
-    [@bs.optional]
+    [@mel.optional]
     onFocus: option(ReactEvent.Focus.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onBlur: option(ReactEvent.Focus.t => unit),
     /* Form events */
-    [@bs.optional]
+    [@mel.optional]
     onChange: option(ReactEvent.Form.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onInput: option(ReactEvent.Form.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onSubmit: option(ReactEvent.Form.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onInvalid: option(ReactEvent.Form.t => unit),
     /* Mouse events */
-    [@bs.optional]
+    [@mel.optional]
     onClick: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onContextMenu: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDoubleClick: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDrag: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDragEnd: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDragEnter: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDragExit: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDragLeave: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDragOver: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDragStart: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDrop: option(ReactEvent.Drag.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onMouseDown: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onMouseEnter: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onMouseLeave: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onMouseMove: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onMouseOut: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onMouseOver: option(ReactEvent.Mouse.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onMouseUp: option(ReactEvent.Mouse.t => unit),
     /* Selection events */
-    [@bs.optional]
+    [@mel.optional]
     onSelect: option(ReactEvent.Selection.t => unit),
     /* Touch events */
-    [@bs.optional]
+    [@mel.optional]
     onTouchCancel: option(ReactEvent.Touch.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onTouchEnd: option(ReactEvent.Touch.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onTouchMove: option(ReactEvent.Touch.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onTouchStart: option(ReactEvent.Touch.t => unit),
     // Pointer events
-    [@bs.optional]
+    [@mel.optional]
     onPointerOver: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPointerEnter: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPointerDown: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPointerMove: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPointerUp: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPointerCancel: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPointerOut: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPointerLeave: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onGotPointerCapture: option(ReactEvent.Pointer.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onLostPointerCapture: option(ReactEvent.Pointer.t => unit),
     /* UI events */
-    [@bs.optional]
+    [@mel.optional]
     onScroll: option(ReactEvent.UI.t => unit),
     /* Wheel events */
-    [@bs.optional]
+    [@mel.optional]
     onWheel: option(ReactEvent.Wheel.t => unit),
     /* Media events */
-    [@bs.optional]
+    [@mel.optional]
     onAbort: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onCanPlay: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onCanPlayThrough: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onDurationChange: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onEmptied: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onEncrypetd: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onEnded: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onError: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onLoadedData: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onLoadedMetadata: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onLoadStart: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPause: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPlay: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onPlaying: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onProgress: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onRateChange: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onSeeked: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onSeeking: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onStalled: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onSuspend: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onTimeUpdate: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onVolumeChange: option(ReactEvent.Media.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onWaiting: option(ReactEvent.Media.t => unit),
     /* Image events */
-    [@bs.optional]onLoad: option(ReactEvent.Image.t => unit) /* duplicate */, /*~onError: ReactEvent.Image.t => unit=?,*/
+    [@mel.optional]onLoad: option(ReactEvent.Image.t => unit) /* duplicate */, /*~onError: ReactEvent.Image.t => unit=?,*/
     /* Animation events */
-    [@bs.optional]
+    [@mel.optional]
     onAnimationStart: option(ReactEvent.Animation.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onAnimationEnd: option(ReactEvent.Animation.t => unit),
-    [@bs.optional]
+    [@mel.optional]
     onAnimationIteration: option(ReactEvent.Animation.t => unit),
     /* Transition events */
-    [@bs.optional]
+    [@mel.optional]
     onTransitionEnd: option(ReactEvent.Transition.t => unit),
     /* svg */
-    [@bs.optional]
+    [@mel.optional]
     accentHeight: option(string),
-    [@bs.optional]
+    [@mel.optional]
     accumulate: option(string),
-    [@bs.optional]
+    [@mel.optional]
     additive: option(string),
-    [@bs.optional]
+    [@mel.optional]
     alignmentBaseline: option(string),
-    [@bs.optional]
+    [@mel.optional]
     allowReorder: option(string),
-    [@bs.optional]
+    [@mel.optional]
     alphabetic: option(string),
-    [@bs.optional]
+    [@mel.optional]
     amplitude: option(string),
-    [@bs.optional]
+    [@mel.optional]
     arabicForm: option(string),
-    [@bs.optional]
+    [@mel.optional]
     ascent: option(string),
-    [@bs.optional]
+    [@mel.optional]
     attributeName: option(string),
-    [@bs.optional]
+    [@mel.optional]
     attributeType: option(string),
-    [@bs.optional]
+    [@mel.optional]
     autoReverse: option(string),
-    [@bs.optional]
+    [@mel.optional]
     azimuth: option(string),
-    [@bs.optional]
+    [@mel.optional]
     baseFrequency: option(string),
-    [@bs.optional]
+    [@mel.optional]
     baseProfile: option(string),
-    [@bs.optional]
+    [@mel.optional]
     baselineShift: option(string),
-    [@bs.optional]
+    [@mel.optional]
     bbox: option(string),
-    [@bs.optional] [@bs.as "begin"]
+    [@mel.optional] [@mel.as "begin"]
     begin_: option(string), /* use this one. Previous one is deprecated */
-    [@bs.optional]
+    [@mel.optional]
     bias: option(string),
-    [@bs.optional]
+    [@mel.optional]
     by: option(string),
-    [@bs.optional]
+    [@mel.optional]
     calcMode: option(string),
-    [@bs.optional]
+    [@mel.optional]
     capHeight: option(string),
-    [@bs.optional]
+    [@mel.optional]
     clip: option(string),
-    [@bs.optional]
+    [@mel.optional]
     clipPath: option(string),
-    [@bs.optional]
+    [@mel.optional]
     clipPathUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     clipRule: option(string),
-    [@bs.optional]
+    [@mel.optional]
     colorInterpolation: option(string),
-    [@bs.optional]
+    [@mel.optional]
     colorInterpolationFilters: option(string),
-    [@bs.optional]
+    [@mel.optional]
     colorProfile: option(string),
-    [@bs.optional]
+    [@mel.optional]
     colorRendering: option(string),
-    [@bs.optional]
+    [@mel.optional]
     contentScriptType: option(string),
-    [@bs.optional]
+    [@mel.optional]
     contentStyleType: option(string),
-    [@bs.optional]
+    [@mel.optional]
     cursor: option(string),
-    [@bs.optional]
+    [@mel.optional]
     cx: option(string),
-    [@bs.optional]
+    [@mel.optional]
     cy: option(string),
-    [@bs.optional]
+    [@mel.optional]
     d: option(string),
-    [@bs.optional]
+    [@mel.optional]
     decelerate: option(string),
-    [@bs.optional]
+    [@mel.optional]
     descent: option(string),
-    [@bs.optional]
+    [@mel.optional]
     diffuseConstant: option(string),
-    [@bs.optional]
+    [@mel.optional]
     direction: option(string),
-    [@bs.optional]
+    [@mel.optional]
     display: option(string),
-    [@bs.optional]
+    [@mel.optional]
     divisor: option(string),
-    [@bs.optional]
+    [@mel.optional]
     dominantBaseline: option(string),
-    [@bs.optional]
+    [@mel.optional]
     dur: option(string),
-    [@bs.optional]
+    [@mel.optional]
     dx: option(string),
-    [@bs.optional]
+    [@mel.optional]
     dy: option(string),
-    [@bs.optional]
+    [@mel.optional]
     edgeMode: option(string),
-    [@bs.optional]
+    [@mel.optional]
     elevation: option(string),
-    [@bs.optional]
+    [@mel.optional]
     enableBackground: option(string),
-    [@bs.optional] [@bs.as "end"]
+    [@mel.optional] [@mel.as "end"]
     end_: option(string), /* use this one. Previous one is deprecated */
-    [@bs.optional]
+    [@mel.optional]
     exponent: option(string),
-    [@bs.optional]
+    [@mel.optional]
     externalResourcesRequired: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fill: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fillOpacity: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fillRule: option(string),
-    [@bs.optional]
+    [@mel.optional]
     filter: option(string),
-    [@bs.optional]
+    [@mel.optional]
     filterRes: option(string),
-    [@bs.optional]
+    [@mel.optional]
     filterUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     floodColor: option(string),
-    [@bs.optional]
+    [@mel.optional]
     floodOpacity: option(string),
-    [@bs.optional]
+    [@mel.optional]
     focusable: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fontFamily: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fontSize: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fontSizeAdjust: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fontStretch: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fontStyle: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fontVariant: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fontWeight: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fomat: option(string),
-    [@bs.optional]
+    [@mel.optional]
     from: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fx: option(string),
-    [@bs.optional]
+    [@mel.optional]
     fy: option(string),
-    [@bs.optional]
+    [@mel.optional]
     g1: option(string),
-    [@bs.optional]
+    [@mel.optional]
     g2: option(string),
-    [@bs.optional]
+    [@mel.optional]
     glyphName: option(string),
-    [@bs.optional]
+    [@mel.optional]
     glyphOrientationHorizontal: option(string),
-    [@bs.optional]
+    [@mel.optional]
     glyphOrientationVertical: option(string),
-    [@bs.optional]
+    [@mel.optional]
     glyphRef: option(string),
-    [@bs.optional]
+    [@mel.optional]
     gradientTransform: option(string),
-    [@bs.optional]
+    [@mel.optional]
     gradientUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     hanging: option(string),
-    [@bs.optional]
+    [@mel.optional]
     horizAdvX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     horizOriginX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     ideographic: option(string),
-    [@bs.optional]
+    [@mel.optional]
     imageRendering: option(string),
-    [@bs.optional] [@bs.as "in"]
+    [@mel.optional] [@mel.as "in"]
     in_: option(string), /* use this one. Previous one is deprecated */
-    [@bs.optional]
+    [@mel.optional]
     in2: option(string),
-    [@bs.optional]
+    [@mel.optional]
     intercept: option(string),
-    [@bs.optional]
+    [@mel.optional]
     k: option(string),
-    [@bs.optional]
+    [@mel.optional]
     k1: option(string),
-    [@bs.optional]
+    [@mel.optional]
     k2: option(string),
-    [@bs.optional]
+    [@mel.optional]
     k3: option(string),
-    [@bs.optional]
+    [@mel.optional]
     k4: option(string),
-    [@bs.optional]
+    [@mel.optional]
     kernelMatrix: option(string),
-    [@bs.optional]
+    [@mel.optional]
     kernelUnitLength: option(string),
-    [@bs.optional]
+    [@mel.optional]
     kerning: option(string),
-    [@bs.optional]
+    [@mel.optional]
     keyPoints: option(string),
-    [@bs.optional]
+    [@mel.optional]
     keySplines: option(string),
-    [@bs.optional]
+    [@mel.optional]
     keyTimes: option(string),
-    [@bs.optional]
+    [@mel.optional]
     lengthAdjust: option(string),
-    [@bs.optional]
+    [@mel.optional]
     letterSpacing: option(string),
-    [@bs.optional]
+    [@mel.optional]
     lightingColor: option(string),
-    [@bs.optional]
+    [@mel.optional]
     limitingConeAngle: option(string),
-    [@bs.optional]
+    [@mel.optional]
     local: option(string),
-    [@bs.optional]
+    [@mel.optional]
     markerEnd: option(string),
-    [@bs.optional]
+    [@mel.optional]
     markerHeight: option(string),
-    [@bs.optional]
+    [@mel.optional]
     markerMid: option(string),
-    [@bs.optional]
+    [@mel.optional]
     markerStart: option(string),
-    [@bs.optional]
+    [@mel.optional]
     markerUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     markerWidth: option(string),
-    [@bs.optional]
+    [@mel.optional]
     mask: option(string),
-    [@bs.optional]
+    [@mel.optional]
     maskContentUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     maskUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     mathematical: option(string),
-    [@bs.optional]
+    [@mel.optional]
     mode: option(string),
-    [@bs.optional]
+    [@mel.optional]
     numOctaves: option(string),
-    [@bs.optional]
+    [@mel.optional]
     offset: option(string),
-    [@bs.optional]
+    [@mel.optional]
     opacity: option(string),
-    [@bs.optional]
+    [@mel.optional]
     operator: option(string),
-    [@bs.optional]
+    [@mel.optional]
     order: option(string),
-    [@bs.optional]
+    [@mel.optional]
     orient: option(string),
-    [@bs.optional]
+    [@mel.optional]
     orientation: option(string),
-    [@bs.optional]
+    [@mel.optional]
     origin: option(string),
-    [@bs.optional]
+    [@mel.optional]
     overflow: option(string),
-    [@bs.optional]
+    [@mel.optional]
     overflowX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     overflowY: option(string),
-    [@bs.optional]
+    [@mel.optional]
     overlinePosition: option(string),
-    [@bs.optional]
+    [@mel.optional]
     overlineThickness: option(string),
-    [@bs.optional]
+    [@mel.optional]
     paintOrder: option(string),
-    [@bs.optional]
+    [@mel.optional]
     panose1: option(string),
-    [@bs.optional]
+    [@mel.optional]
     pathLength: option(string),
-    [@bs.optional]
+    [@mel.optional]
     patternContentUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     patternTransform: option(string),
-    [@bs.optional]
+    [@mel.optional]
     patternUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     pointerEvents: option(string),
-    [@bs.optional]
+    [@mel.optional]
     points: option(string),
-    [@bs.optional]
+    [@mel.optional]
     pointsAtX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     pointsAtY: option(string),
-    [@bs.optional]
+    [@mel.optional]
     pointsAtZ: option(string),
-    [@bs.optional]
+    [@mel.optional]
     preserveAlpha: option(string),
-    [@bs.optional]
+    [@mel.optional]
     preserveAspectRatio: option(string),
-    [@bs.optional]
+    [@mel.optional]
     primitiveUnits: option(string),
-    [@bs.optional]
+    [@mel.optional]
     r: option(string),
-    [@bs.optional]
+    [@mel.optional]
     radius: option(string),
-    [@bs.optional]
+    [@mel.optional]
     refX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     refY: option(string),
-    [@bs.optional]
+    [@mel.optional]
     renderingIntent: option(string),
-    [@bs.optional]
+    [@mel.optional]
     repeatCount: option(string),
-    [@bs.optional]
+    [@mel.optional]
     repeatDur: option(string),
-    [@bs.optional]
+    [@mel.optional]
     requiredExtensions: option(string),
-    [@bs.optional]
+    [@mel.optional]
     requiredFeatures: option(string),
-    [@bs.optional]
+    [@mel.optional]
     restart: option(string),
-    [@bs.optional]
+    [@mel.optional]
     result: option(string),
-    [@bs.optional]
+    [@mel.optional]
     rotate: option(string),
-    [@bs.optional]
+    [@mel.optional]
     rx: option(string),
-    [@bs.optional]
+    [@mel.optional]
     ry: option(string),
-    [@bs.optional]
+    [@mel.optional]
     scale: option(string),
-    [@bs.optional]
+    [@mel.optional]
     seed: option(string),
-    [@bs.optional]
+    [@mel.optional]
     shapeRendering: option(string),
-    [@bs.optional]
+    [@mel.optional]
     slope: option(string),
-    [@bs.optional]
+    [@mel.optional]
     spacing: option(string),
-    [@bs.optional]
+    [@mel.optional]
     specularConstant: option(string),
-    [@bs.optional]
+    [@mel.optional]
     specularExponent: option(string),
-    [@bs.optional]
+    [@mel.optional]
     speed: option(string),
-    [@bs.optional]
+    [@mel.optional]
     spreadMethod: option(string),
-    [@bs.optional]
+    [@mel.optional]
     startOffset: option(string),
-    [@bs.optional]
+    [@mel.optional]
     stdDeviation: option(string),
-    [@bs.optional]
+    [@mel.optional]
     stemh: option(string),
-    [@bs.optional]
+    [@mel.optional]
     stemv: option(string),
-    [@bs.optional]
+    [@mel.optional]
     stitchTiles: option(string),
-    [@bs.optional]
+    [@mel.optional]
     stopColor: option(string),
-    [@bs.optional]
+    [@mel.optional]
     stopOpacity: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strikethroughPosition: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strikethroughThickness: option(string),
-    [@bs.optional]
+    [@mel.optional]
     string: option(string),
-    [@bs.optional]
+    [@mel.optional]
     stroke: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strokeDasharray: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strokeDashoffset: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strokeLinecap: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strokeLinejoin: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strokeMiterlimit: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strokeOpacity: option(string),
-    [@bs.optional]
+    [@mel.optional]
     strokeWidth: option(string),
-    [@bs.optional]
+    [@mel.optional]
     surfaceScale: option(string),
-    [@bs.optional]
+    [@mel.optional]
     systemLanguage: option(string),
-    [@bs.optional]
+    [@mel.optional]
     tableValues: option(string),
-    [@bs.optional]
+    [@mel.optional]
     targetX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     targetY: option(string),
-    [@bs.optional]
+    [@mel.optional]
     textAnchor: option(string),
-    [@bs.optional]
+    [@mel.optional]
     textDecoration: option(string),
-    [@bs.optional]
+    [@mel.optional]
     textLength: option(string),
-    [@bs.optional]
+    [@mel.optional]
     textRendering: option(string),
-    [@bs.optional] [@bs.as "to"]
+    [@mel.optional] [@mel.as "to"]
     to_: option(string), /* use this one. Previous one is deprecated */
-    [@bs.optional]
+    [@mel.optional]
     transform: option(string),
-    [@bs.optional]
+    [@mel.optional]
     u1: option(string),
-    [@bs.optional]
+    [@mel.optional]
     u2: option(string),
-    [@bs.optional]
+    [@mel.optional]
     underlinePosition: option(string),
-    [@bs.optional]
+    [@mel.optional]
     underlineThickness: option(string),
-    [@bs.optional]
+    [@mel.optional]
     unicode: option(string),
-    [@bs.optional]
+    [@mel.optional]
     unicodeBidi: option(string),
-    [@bs.optional]
+    [@mel.optional]
     unicodeRange: option(string),
-    [@bs.optional]
+    [@mel.optional]
     unitsPerEm: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vAlphabetic: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vHanging: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vIdeographic: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vMathematical: option(string),
-    [@bs.optional]
+    [@mel.optional]
     values: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vectorEffect: option(string),
-    [@bs.optional]
+    [@mel.optional]
     version: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vertAdvX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vertAdvY: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vertOriginX: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vertOriginY: option(string),
-    [@bs.optional]
+    [@mel.optional]
     viewBox: option(string),
-    [@bs.optional]
+    [@mel.optional]
     viewTarget: option(string),
-    [@bs.optional]
+    [@mel.optional]
     visibility: option(string),
     /*width::string? =>*/
-    [@bs.optional]
+    [@mel.optional]
     widths: option(string),
-    [@bs.optional]
+    [@mel.optional]
     wordSpacing: option(string),
-    [@bs.optional]
+    [@mel.optional]
     writingMode: option(string),
-    [@bs.optional]
+    [@mel.optional]
     x: option(string),
-    [@bs.optional]
+    [@mel.optional]
     x1: option(string),
-    [@bs.optional]
+    [@mel.optional]
     x2: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xChannelSelector: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xHeight: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xlinkActuate: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xlinkArcrole: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xlinkHref: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xlinkRole: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xlinkShow: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xlinkTitle: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xlinkType: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xmlns: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xmlnsXlink: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xmlBase: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xmlLang: option(string),
-    [@bs.optional]
+    [@mel.optional]
     xmlSpace: option(string),
-    [@bs.optional]
+    [@mel.optional]
     y: option(string),
-    [@bs.optional]
+    [@mel.optional]
     y1: option(string),
-    [@bs.optional]
+    [@mel.optional]
     y2: option(string),
-    [@bs.optional]
+    [@mel.optional]
     yChannelSelector: option(string),
-    [@bs.optional]
+    [@mel.optional]
     z: option(string),
-    [@bs.optional]
+    [@mel.optional]
     zoomAndPan: option(string),
     /* RDFa */
-    [@bs.optional]
+    [@mel.optional]
     about: option(string),
-    [@bs.optional]
+    [@mel.optional]
     datatype: option(string),
-    [@bs.optional]
+    [@mel.optional]
     inlist: option(string),
-    [@bs.optional]
+    [@mel.optional]
     prefix: option(string),
-    [@bs.optional]
+    [@mel.optional]
     property: option(string),
-    [@bs.optional]
+    [@mel.optional]
     resource: option(string),
-    [@bs.optional]
+    [@mel.optional]
     typeof: option(string),
-    [@bs.optional]
+    [@mel.optional]
     vocab: option(string),
     /* react-specific */
-    [@bs.optional]
+    [@mel.optional]
     dangerouslySetInnerHTML: option({. "__html": string}),
-    [@bs.optional]
+    [@mel.optional]
     suppressContentEditableWarning: option(bool),
-    [@bs.optional]
+    [@mel.optional]
     suppressHydrationWarning: option(bool),
   };
 };
@@ -1095,26 +1095,26 @@ external stringToComponent: string => React.component(domProps) = "%identity";
 
 module Style = ReactDOMStyle;
 
-[@bs.variadic] [@bs.module "react"]
+[@mel.variadic] [@mel.module "react"]
 external createElement:
   (string, ~props: domProps=?, array(React.element)) => React.element =
   "createElement";
 
-[@bs.variadic] [@bs.module "react"]
+[@mel.variadic] [@mel.module "react"]
 external createDOMElementVariadic:
   (string, ~props: domProps=?, array(React.element)) => React.element =
   "createElement";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsxKeyed: (string, domProps, ~key: string=?, unit) => React.element =
   "jsx";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsx: (string, domProps) => React.element = "jsx";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsxs: (string, domProps) => React.element = "jsxs";
 
-[@bs.module "react/jsx-runtime"]
+[@mel.module "react/jsx-runtime"]
 external jsxsKeyed: (string, domProps, ~key: string=?, unit) => React.element =
   "jsxs";
diff --git a/src/ReactDOMServer.re b/src/ReactDOMServer.re
index 135e99c22..95a1cd02d 100644
--- a/src/ReactDOMServer.re
+++ b/src/ReactDOMServer.re
@@ -1,6 +1,6 @@
-[@bs.module "react-dom/server"]
+[@mel.module "react-dom/server"]
 external renderToString: React.element => string = "renderToString";
 
-[@bs.module "react-dom/server"]
+[@mel.module "react-dom/server"]
 external renderToStaticMarkup: React.element => string =
   "renderToStaticMarkup";
diff --git a/src/ReactDOMStyle.re b/src/ReactDOMStyle.re
index e8999538e..d95e0397c 100644
--- a/src/ReactDOMStyle.re
+++ b/src/ReactDOMStyle.re
@@ -1,6 +1,6 @@
 type t;
 
-[@bs.obj]
+[@mel.obj]
 external make:
   (
     ~azimuth: string=?,
@@ -422,8 +422,7 @@ external make:
   t;
 
 /* CSS2Properties: https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties */
-[@bs.val]
-external combine: ([@bs.as {json|{}|json}] _, t, t) => t = "Object.assign";
+external combine: ([@mel.as {json|{}|json}] _, t, t) => t = "Object.assign";
 
 external _dictToStyle: Js.Dict.t(string) => t = "%identity";
 
@@ -433,6 +432,5 @@ let unsafeAddProp = (style, key, value) => {
   combine(style, _dictToStyle(dict));
 };
 
-[@bs.val]
-external unsafeAddStyle: ([@bs.as {json|{}|json}] _, t, Js.t({..})) => t =
+external unsafeAddStyle: ([@mel.as {json|{}|json}] _, t, Js.t({..})) => t =
   "Object.assign";
diff --git a/src/ReactEvent.re b/src/ReactEvent.re
index c29894553..b41c82e99 100644
--- a/src/ReactEvent.re
+++ b/src/ReactEvent.re
@@ -1,51 +1,53 @@
 type synthetic('a);
 
-module MakeEventWithType = (Type: {type t;}) => {
-  [@bs.get] external bubbles: Type.t => bool = "bubbles";
-  [@bs.get] external cancelable: Type.t => bool = "cancelable";
-  [@bs.get] external currentTarget: Type.t => Js.t({..}) = "currentTarget"; /* Should return Dom.eventTarget */
-  [@bs.get] external defaultPrevented: Type.t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: Type.t => int = "eventPhase";
-  [@bs.get] external isTrusted: Type.t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: Type.t => Js.t({..}) = "nativeEvent"; /* Should return Dom.event */
-  [@bs.send] external preventDefault: Type.t => unit = "preventDefault";
-  [@bs.send]
+module MakeEventWithType = (Type: {
+                              type t;
+                            }) => {
+  [@mel.get] external bubbles: Type.t => bool = "bubbles";
+  [@mel.get] external cancelable: Type.t => bool = "cancelable";
+  [@mel.get] external currentTarget: Type.t => Js.t({..}) = "currentTarget"; /* Should return Dom.eventTarget */
+  [@mel.get] external defaultPrevented: Type.t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: Type.t => int = "eventPhase";
+  [@mel.get] external isTrusted: Type.t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: Type.t => Js.t({..}) = "nativeEvent"; /* Should return Dom.event */
+  [@mel.send] external preventDefault: Type.t => unit = "preventDefault";
+  [@mel.send]
   external isDefaultPrevented: Type.t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: Type.t => unit = "stopPropagation";
-  [@bs.send]
+  [@mel.send] external stopPropagation: Type.t => unit = "stopPropagation";
+  [@mel.send]
   external isPropagationStopped: Type.t => bool = "isPropagationStopped";
-  [@bs.get] external target: Type.t => Js.t({..}) = "target"; /* Should return Dom.eventTarget */
-  [@bs.get] external timeStamp: Type.t => float = "timeStamp";
-  [@bs.get] external type_: Type.t => string = "type";
-  [@bs.send] external persist: Type.t => unit = "persist";
+  [@mel.get] external target: Type.t => Js.t({..}) = "target"; /* Should return Dom.eventTarget */
+  [@mel.get] external timeStamp: Type.t => float = "timeStamp";
+  [@mel.get] external type_: Type.t => string = "type";
+  [@mel.send] external persist: Type.t => unit = "persist";
 };
 
 module Synthetic = {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: synthetic('a) => bool = "bubbles";
-  [@bs.get] external cancelable: synthetic('a) => bool = "cancelable";
-  [@bs.get]
+  [@mel.get] external bubbles: synthetic('a) => bool = "bubbles";
+  [@mel.get] external cancelable: synthetic('a) => bool = "cancelable";
+  [@mel.get]
   external currentTarget: synthetic('a) => Js.t({..}) = "currentTarget"; /* Should return Dom.eventTarget */
-  [@bs.get]
+  [@mel.get]
   external defaultPrevented: synthetic('a) => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: synthetic('a) => int = "eventPhase";
-  [@bs.get] external isTrusted: synthetic('a) => bool = "isTrusted";
-  [@bs.get]
+  [@mel.get] external eventPhase: synthetic('a) => int = "eventPhase";
+  [@mel.get] external isTrusted: synthetic('a) => bool = "isTrusted";
+  [@mel.get]
   external nativeEvent: synthetic('a) => Js.t({..}) = "nativeEvent"; /* Should return Dom.event */
-  [@bs.send]
+  [@mel.send]
   external preventDefault: synthetic('a) => unit = "preventDefault";
-  [@bs.send]
+  [@mel.send]
   external isDefaultPrevented: synthetic('a) => bool = "isDefaultPrevented";
-  [@bs.send]
+  [@mel.send]
   external stopPropagation: synthetic('a) => unit = "stopPropagation";
-  [@bs.send]
+  [@mel.send]
   external isPropagationStopped: synthetic('a) => bool =
     "isPropagationStopped";
-  [@bs.get] external target: synthetic('a) => Js.t({..}) = "target"; /* Should return Dom.eventTarget */
-  [@bs.get] external timeStamp: synthetic('a) => float = "timeStamp";
-  [@bs.get] external type_: synthetic('a) => string = "type";
-  [@bs.send] external persist: synthetic('a) => unit = "persist";
+  [@mel.get] external target: synthetic('a) => Js.t({..}) = "target"; /* Should return Dom.eventTarget */
+  [@mel.get] external timeStamp: synthetic('a) => float = "timeStamp";
+  [@mel.get] external type_: synthetic('a) => string = "type";
+  [@mel.send] external persist: synthetic('a) => unit = "persist";
 };
 
 /* Cast any event type to the general synthetic type. This is safe, since synthetic is more general */
@@ -57,7 +59,7 @@ module Clipboard = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external clipboardData: t => Js.t({..}) = "clipboardData"; /* Should return Dom.dataTransfer */
+  [@mel.get] external clipboardData: t => Js.t({..}) = "clipboardData"; /* Should return Dom.dataTransfer */
 };
 
 module Composition = {
@@ -66,7 +68,7 @@ module Composition = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external data: t => string = "data";
+  [@mel.get] external data: t => string = "data";
 };
 
 module Keyboard = {
@@ -75,19 +77,19 @@ module Keyboard = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external charCode: t => int = "charCode";
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external charCode: t => int = "charCode";
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external key: t => string = "key";
-  [@bs.get] external keyCode: t => int = "keyCode";
-  [@bs.get] external locale: t => string = "locale";
-  [@bs.get] external location: t => int = "location";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external repeat: t => bool = "repeat";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
-  [@bs.get] external which: t => int = "which";
+  [@mel.get] external key: t => string = "key";
+  [@mel.get] external keyCode: t => int = "keyCode";
+  [@mel.get] external locale: t => string = "locale";
+  [@mel.get] external location: t => int = "location";
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external repeat: t => bool = "repeat";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external which: t => int = "which";
 };
 
 module Focus = {
@@ -96,7 +98,7 @@ module Focus = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
 };
 
@@ -114,24 +116,24 @@ module Mouse = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external button: t => int = "button";
-  [@bs.get] external buttons: t => int = "buttons";
-  [@bs.get] external clientX: t => int = "clientX";
-  [@bs.get] external clientY: t => int = "clientY";
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external button: t => int = "button";
+  [@mel.get] external buttons: t => int = "buttons";
+  [@mel.get] external clientX: t => int = "clientX";
+  [@mel.get] external clientY: t => int = "clientY";
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external movementX: t => int = "movementX";
-  [@bs.get] external movementY: t => int = "movementY";
-  [@bs.get] external pageX: t => int = "pageX";
-  [@bs.get] external pageY: t => int = "pageY";
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external movementX: t => int = "movementX";
+  [@mel.get] external movementY: t => int = "movementY";
+  [@mel.get] external pageX: t => int = "pageX";
+  [@mel.get] external pageY: t => int = "pageY";
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
-  [@bs.get] external screenX: t => int = "screenX";
-  [@bs.get] external screenY: t => int = "screenY";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external screenX: t => int = "screenX";
+  [@mel.get] external screenY: t => int = "screenY";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
 };
 
 module Drag = {
@@ -142,26 +144,26 @@ module Drag = {
   });
 
   // MouseEvent
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external button: t => int = "button";
-  [@bs.get] external buttons: t => int = "buttons";
-  [@bs.get] external clientX: t => int = "clientX";
-  [@bs.get] external clientY: t => int = "clientY";
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external button: t => int = "button";
+  [@mel.get] external buttons: t => int = "buttons";
+  [@mel.get] external clientX: t => int = "clientX";
+  [@mel.get] external clientY: t => int = "clientY";
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external movementX: t => int = "movementX";
-  [@bs.get] external movementY: t => int = "movementY";
-  [@bs.get] external pageX: t => int = "pageX";
-  [@bs.get] external pageY: t => int = "pageY";
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external movementX: t => int = "movementX";
+  [@mel.get] external movementY: t => int = "movementY";
+  [@mel.get] external pageX: t => int = "pageX";
+  [@mel.get] external pageY: t => int = "pageY";
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
-  [@bs.get] external screenX: t => int = "screenX";
-  [@bs.get] external screenY: t => int = "screenY";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external screenX: t => int = "screenX";
+  [@mel.get] external screenY: t => int = "screenY";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
 
-  [@bs.get] external dataTransfer: t => Js.t({..}) = "dataTransfer"; /* Should return Dom.dataTransfer */
+  [@mel.get] external dataTransfer: t => Js.t({..}) = "dataTransfer"; /* Should return Dom.dataTransfer */
 };
 
 module Pointer = {
@@ -172,43 +174,43 @@ module Pointer = {
   });
 
   // UIEvent
-  [@bs.get] external detail: t => int = "detail";
-  [@bs.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
+  [@mel.get] external detail: t => int = "detail";
+  [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
 
   // MouseEvent
-  [@bs.get] external screenX: t => int = "screenX";
-  [@bs.get] external screenY: t => int = "screenY";
-  [@bs.get] external clientX: t => int = "clientX";
-  [@bs.get] external clientY: t => int = "clientY";
-  [@bs.get] external pageX: t => int = "pageX";
-  [@bs.get] external pageY: t => int = "pageY";
-  [@bs.get] external movementX: t => int = "movementX";
-  [@bs.get] external movementY: t => int = "movementY";
+  [@mel.get] external screenX: t => int = "screenX";
+  [@mel.get] external screenY: t => int = "screenY";
+  [@mel.get] external clientX: t => int = "clientX";
+  [@mel.get] external clientY: t => int = "clientY";
+  [@mel.get] external pageX: t => int = "pageX";
+  [@mel.get] external pageY: t => int = "pageY";
+  [@mel.get] external movementX: t => int = "movementX";
+  [@mel.get] external movementY: t => int = "movementY";
 
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.send]
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
 
-  [@bs.get] external button: t => int = "button";
-  [@bs.get] external buttons: t => int = "buttons";
+  [@mel.get] external button: t => int = "button";
+  [@mel.get] external buttons: t => int = "buttons";
 
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
 
   // PointerEvent
-  [@bs.get] external pointerId: t => Dom.eventPointerId = "pointerId";
-  [@bs.get] external width: t => float = "width";
-  [@bs.get] external height: t => float = "height";
-  [@bs.get] external pressure: t => float = "pressure";
-  [@bs.get] external tangentialPressure: t => float = "tangentialPressure";
-  [@bs.get] external tiltX: t => int = "tiltX";
-  [@bs.get] external tiltY: t => int = "tiltY";
-  [@bs.get] external twist: t => int = "twist";
-  [@bs.get] external pointerType: t => string = "pointerType";
-  [@bs.get] external isPrimary: t => bool = "isPrimary";
+  [@mel.get] external pointerId: t => Dom.eventPointerId = "pointerId";
+  [@mel.get] external width: t => float = "width";
+  [@mel.get] external height: t => float = "height";
+  [@mel.get] external pressure: t => float = "pressure";
+  [@mel.get] external tangentialPressure: t => float = "tangentialPressure";
+  [@mel.get] external tiltX: t => int = "tiltX";
+  [@mel.get] external tiltY: t => int = "tiltY";
+  [@mel.get] external twist: t => int = "twist";
+  [@mel.get] external pointerType: t => string = "pointerType";
+  [@mel.get] external isPrimary: t => bool = "isPrimary";
 };
 
 module Selection = {
@@ -225,15 +227,15 @@ module Touch = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external changedTouches: t => Js.t({..}) = "changedTouches"; /* Should return Dom.touchList */
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external changedTouches: t => Js.t({..}) = "changedTouches"; /* Should return Dom.touchList */
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
-  [@bs.get] external targetTouches: t => Js.t({..}) = "targetTouches"; /* Should return Dom.touchList */
-  [@bs.get] external touches: t => Js.t({..}) = "touches"; /* Should return Dom.touchList */
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external targetTouches: t => Js.t({..}) = "targetTouches"; /* Should return Dom.touchList */
+  [@mel.get] external touches: t => Js.t({..}) = "touches"; /* Should return Dom.touchList */
 };
 
 module UI = {
@@ -242,8 +244,8 @@ module UI = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external detail: t => int = "detail";
-  [@bs.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
+  [@mel.get] external detail: t => int = "detail";
+  [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
 };
 
 module Wheel = {
@@ -252,10 +254,10 @@ module Wheel = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external deltaMode: t => int = "deltaMode";
-  [@bs.get] external deltaX: t => float = "deltaX";
-  [@bs.get] external deltaY: t => float = "deltaY";
-  [@bs.get] external deltaZ: t => float = "deltaZ";
+  [@mel.get] external deltaMode: t => int = "deltaMode";
+  [@mel.get] external deltaX: t => float = "deltaX";
+  [@mel.get] external deltaY: t => float = "deltaY";
+  [@mel.get] external deltaZ: t => float = "deltaZ";
 };
 
 module Media = {
@@ -280,9 +282,9 @@ module Animation = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external animationName: t => string = "animationName";
-  [@bs.get] external pseudoElement: t => string = "pseudoElement";
-  [@bs.get] external elapsedTime: t => float = "elapsedTime";
+  [@mel.get] external animationName: t => string = "animationName";
+  [@mel.get] external pseudoElement: t => string = "pseudoElement";
+  [@mel.get] external elapsedTime: t => float = "elapsedTime";
 };
 
 module Transition = {
@@ -291,7 +293,7 @@ module Transition = {
   include MakeEventWithType({
     type nonrec t = t;
   });
-  [@bs.get] external propertyName: t => string = "propertyName";
-  [@bs.get] external pseudoElement: t => string = "pseudoElement";
-  [@bs.get] external elapsedTime: t => float = "elapsedTime";
+  [@mel.get] external propertyName: t => string = "propertyName";
+  [@mel.get] external pseudoElement: t => string = "pseudoElement";
+  [@mel.get] external elapsedTime: t => float = "elapsedTime";
 };
diff --git a/src/ReactEvent.rei b/src/ReactEvent.rei
index 887f103dc..b93afec44 100644
--- a/src/ReactEvent.rei
+++ b/src/ReactEvent.rei
@@ -41,29 +41,29 @@ type synthetic('a);
 module Synthetic: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: synthetic('a) => bool = "bubbles";
-  [@bs.get] external cancelable: synthetic('a) => bool = "cancelable";
-  [@bs.get]
+  [@mel.get] external bubbles: synthetic('a) => bool = "bubbles";
+  [@mel.get] external cancelable: synthetic('a) => bool = "cancelable";
+  [@mel.get]
   external currentTarget: synthetic('a) => Js.t({..}) = "currentTarget";
-  [@bs.get]
+  [@mel.get]
   external defaultPrevented: synthetic('a) => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: synthetic('a) => int = "eventPhase";
-  [@bs.get] external isTrusted: synthetic('a) => bool = "isTrusted";
-  [@bs.get]
+  [@mel.get] external eventPhase: synthetic('a) => int = "eventPhase";
+  [@mel.get] external isTrusted: synthetic('a) => bool = "isTrusted";
+  [@mel.get]
   external nativeEvent: synthetic('a) => Js.t({..}) = "nativeEvent";
-  [@bs.send]
+  [@mel.send]
   external preventDefault: synthetic('a) => unit = "preventDefault";
-  [@bs.send]
+  [@mel.send]
   external isDefaultPrevented: synthetic('a) => bool = "isDefaultPrevented";
-  [@bs.send]
+  [@mel.send]
   external stopPropagation: synthetic('a) => unit = "stopPropagation";
-  [@bs.send]
+  [@mel.send]
   external isPropagationStopped: synthetic('a) => bool =
     "isPropagationStopped";
-  [@bs.get] external target: synthetic('a) => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: synthetic('a) => float = "timeStamp";
-  [@bs.get] external type_: synthetic('a) => string = "type";
-  [@bs.send] external persist: synthetic('a) => unit = "persist";
+  [@mel.get] external target: synthetic('a) => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: synthetic('a) => float = "timeStamp";
+  [@mel.get] external type_: synthetic('a) => string = "type";
+  [@mel.send] external persist: synthetic('a) => unit = "persist";
 };
 
 /* Cast any event type to the general synthetic type. This is safe, since synthetic is more general */
@@ -72,43 +72,45 @@ external toSyntheticEvent: synthetic('a) => Synthetic.t = "%identity";
 module Clipboard: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external clipboardData: t => Js.t({..}) = "clipboardData"; /* Should return Dom.dataTransfer */
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external clipboardData: t => Js.t({..}) = "clipboardData"; /* Should return Dom.dataTransfer */
 };
 
 module Composition: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external data: t => string = "data";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external data: t => string = "data";
 };
 
 module Drag: {
@@ -116,156 +118,161 @@ module Drag: {
   type t = synthetic(tag);
 
   // SyntheticEvent
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
 
   // MouseEvent
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external button: t => int = "button";
-  [@bs.get] external buttons: t => int = "buttons";
-  [@bs.get] external clientX: t => int = "clientX";
-  [@bs.get] external clientY: t => int = "clientY";
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external button: t => int = "button";
+  [@mel.get] external buttons: t => int = "buttons";
+  [@mel.get] external clientX: t => int = "clientX";
+  [@mel.get] external clientY: t => int = "clientY";
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external movementX: t => int = "movementX";
-  [@bs.get] external movementY: t => int = "movementY";
-  [@bs.get] external pageX: t => int = "pageX";
-  [@bs.get] external pageY: t => int = "pageY";
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external movementX: t => int = "movementX";
+  [@mel.get] external movementY: t => int = "movementY";
+  [@mel.get] external pageX: t => int = "pageX";
+  [@mel.get] external pageY: t => int = "pageY";
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
-  [@bs.get] external screenX: t => int = "screenX";
-  [@bs.get] external screenY: t => int = "screenY";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external screenX: t => int = "screenX";
+  [@mel.get] external screenY: t => int = "screenY";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
 
-  [@bs.get] external dataTransfer: t => Js.t({..}) = "dataTransfer"; /* Should return Dom.dataTransfer */
+  [@mel.get] external dataTransfer: t => Js.t({..}) = "dataTransfer"; /* Should return Dom.dataTransfer */
 };
 
 module Keyboard: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external charCode: t => int = "charCode";
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external charCode: t => int = "charCode";
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external key: t => string = "key";
-  [@bs.get] external keyCode: t => int = "keyCode";
-  [@bs.get] external locale: t => string = "locale";
-  [@bs.get] external location: t => int = "location";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external repeat: t => bool = "repeat";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
-  [@bs.get] external which: t => int = "which";
+  [@mel.get] external key: t => string = "key";
+  [@mel.get] external keyCode: t => int = "keyCode";
+  [@mel.get] external locale: t => string = "locale";
+  [@mel.get] external location: t => int = "location";
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external repeat: t => bool = "repeat";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external which: t => int = "which";
 };
 
 module Focus: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
 };
 
 module Form: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
 };
 
 module Mouse: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external button: t => int = "button";
-  [@bs.get] external buttons: t => int = "buttons";
-  [@bs.get] external clientX: t => int = "clientX";
-  [@bs.get] external clientY: t => int = "clientY";
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external button: t => int = "button";
+  [@mel.get] external buttons: t => int = "buttons";
+  [@mel.get] external clientX: t => int = "clientX";
+  [@mel.get] external clientY: t => int = "clientY";
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external movementX: t => int = "movementX";
-  [@bs.get] external movementY: t => int = "movementY";
-  [@bs.get] external pageX: t => int = "pageX";
-  [@bs.get] external pageY: t => int = "pageY";
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external movementX: t => int = "movementX";
+  [@mel.get] external movementY: t => int = "movementY";
+  [@mel.get] external pageX: t => int = "pageX";
+  [@mel.get] external pageY: t => int = "pageY";
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
-  [@bs.get] external screenX: t => int = "screenX";
-  [@bs.get] external screenY: t => int = "screenY";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external screenX: t => int = "screenX";
+  [@mel.get] external screenY: t => int = "screenY";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
 };
 
 module Pointer: {
@@ -273,244 +280,253 @@ module Pointer: {
   type t = synthetic(tag);
 
   // Event
-  [@bs.get] external type_: t => string = "type";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
 
-  [@bs.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
 
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation"; // aka cancelBubble
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation"; // aka cancelBubble
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
 
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
 
   // SyntheticEvent
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.send] external persist: t => unit = "persist";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.send] external persist: t => unit = "persist";
 
   // UIEvent
-  [@bs.get] external detail: t => int = "detail";
-  [@bs.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
+  [@mel.get] external detail: t => int = "detail";
+  [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
 
   // MouseEvent
-  [@bs.get] external screenX: t => int = "screenX";
-  [@bs.get] external screenY: t => int = "screenY";
-  [@bs.get] external clientX: t => int = "clientX";
-  [@bs.get] external clientY: t => int = "clientY";
-  [@bs.get] external pageX: t => int = "pageX";
-  [@bs.get] external pageY: t => int = "pageY";
-  [@bs.get] external movementX: t => int = "movementX";
-  [@bs.get] external movementY: t => int = "movementY";
-
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.send]
+  [@mel.get] external screenX: t => int = "screenX";
+  [@mel.get] external screenY: t => int = "screenY";
+  [@mel.get] external clientX: t => int = "clientX";
+  [@mel.get] external clientY: t => int = "clientY";
+  [@mel.get] external pageX: t => int = "pageX";
+  [@mel.get] external pageY: t => int = "pageY";
+  [@mel.get] external movementX: t => int = "movementX";
+  [@mel.get] external movementY: t => int = "movementY";
+
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
 
-  [@bs.get] external button: t => int = "button";
-  [@bs.get] external buttons: t => int = "buttons";
+  [@mel.get] external button: t => int = "button";
+  [@mel.get] external buttons: t => int = "buttons";
 
-  [@bs.get] [@bs.return nullable]
+  [@mel.get] [@mel.return nullable]
   external relatedTarget: t => option(Js.t({..})) = "relatedTarget"; /* Should return Dom.eventTarget */
 
   // PointerEvent
-  [@bs.get] external pointerId: t => Dom.eventPointerId = "pointerId";
-  [@bs.get] external width: t => float = "width";
-  [@bs.get] external height: t => float = "height";
-  [@bs.get] external pressure: t => float = "pressure";
-  [@bs.get] external tangentialPressure: t => float = "tangentialPressure";
-  [@bs.get] external tiltX: t => int = "tiltX";
-  [@bs.get] external tiltY: t => int = "tiltY";
-  [@bs.get] external twist: t => int = "twist";
-  [@bs.get] external pointerType: t => string = "pointerType";
-  [@bs.get] external isPrimary: t => bool = "isPrimary";
+  [@mel.get] external pointerId: t => Dom.eventPointerId = "pointerId";
+  [@mel.get] external width: t => float = "width";
+  [@mel.get] external height: t => float = "height";
+  [@mel.get] external pressure: t => float = "pressure";
+  [@mel.get] external tangentialPressure: t => float = "tangentialPressure";
+  [@mel.get] external tiltX: t => int = "tiltX";
+  [@mel.get] external tiltY: t => int = "tiltY";
+  [@mel.get] external twist: t => int = "twist";
+  [@mel.get] external pointerType: t => string = "pointerType";
+  [@mel.get] external isPrimary: t => bool = "isPrimary";
 };
 
 module Selection: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
 };
 
 module Touch: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external altKey: t => bool = "altKey";
-  [@bs.get] external changedTouches: t => Js.t({..}) = "changedTouches"; /* Should return Dom.touchList */
-  [@bs.get] external ctrlKey: t => bool = "ctrlKey";
-  [@bs.send]
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external altKey: t => bool = "altKey";
+  [@mel.get] external changedTouches: t => Js.t({..}) = "changedTouches"; /* Should return Dom.touchList */
+  [@mel.get] external ctrlKey: t => bool = "ctrlKey";
+  [@mel.send]
   external getModifierState: (t, string) => bool = "getModifierState";
-  [@bs.get] external metaKey: t => bool = "metaKey";
-  [@bs.get] external shiftKey: t => bool = "shiftKey";
-  [@bs.get] external targetTouches: t => Js.t({..}) = "targetTouches"; /* Should return Dom.touchList */
-  [@bs.get] external touches: t => Js.t({..}) = "touches"; /* Should return Dom.touchList */
+  [@mel.get] external metaKey: t => bool = "metaKey";
+  [@mel.get] external shiftKey: t => bool = "shiftKey";
+  [@mel.get] external targetTouches: t => Js.t({..}) = "targetTouches"; /* Should return Dom.touchList */
+  [@mel.get] external touches: t => Js.t({..}) = "touches"; /* Should return Dom.touchList */
 };
 
 module UI: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external detail: t => int = "detail";
-  [@bs.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external detail: t => int = "detail";
+  [@mel.get] external view: t => Dom.window = "view"; /* Should return DOMAbstractView/WindowProxy */
 };
 
 module Wheel: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external deltaMode: t => int = "deltaMode";
-  [@bs.get] external deltaX: t => float = "deltaX";
-  [@bs.get] external deltaY: t => float = "deltaY";
-  [@bs.get] external deltaZ: t => float = "deltaZ";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external deltaMode: t => int = "deltaMode";
+  [@mel.get] external deltaX: t => float = "deltaX";
+  [@mel.get] external deltaY: t => float = "deltaY";
+  [@mel.get] external deltaZ: t => float = "deltaZ";
 };
 
 module Media: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
 };
 
 module Image: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
 };
 
 module Animation: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external animationName: t => string = "animationName";
-  [@bs.get] external pseudoElement: t => string = "pseudoElement";
-  [@bs.get] external elapsedTime: t => float = "elapsedTime";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external animationName: t => string = "animationName";
+  [@mel.get] external pseudoElement: t => string = "pseudoElement";
+  [@mel.get] external elapsedTime: t => float = "elapsedTime";
 };
 
 module Transition: {
   type tag;
   type t = synthetic(tag);
-  [@bs.get] external bubbles: t => bool = "bubbles";
-  [@bs.get] external cancelable: t => bool = "cancelable";
-  [@bs.get] external currentTarget: t => Js.t({..}) = "currentTarget";
-  [@bs.get] external defaultPrevented: t => bool = "defaultPrevented";
-  [@bs.get] external eventPhase: t => int = "eventPhase";
-  [@bs.get] external isTrusted: t => bool = "isTrusted";
-  [@bs.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
-  [@bs.send] external preventDefault: t => unit = "preventDefault";
-  [@bs.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
-  [@bs.send] external stopPropagation: t => unit = "stopPropagation";
-  [@bs.send] external isPropagationStopped: t => bool = "isPropagationStopped";
-  [@bs.get] external target: t => Js.t({..}) = "target";
-  [@bs.get] external timeStamp: t => float = "timeStamp";
-  [@bs.get] external type_: t => string = "type";
-  [@bs.send] external persist: t => unit = "persist";
-  [@bs.get] external propertyName: t => string = "propertyName";
-  [@bs.get] external pseudoElement: t => string = "pseudoElement";
-  [@bs.get] external elapsedTime: t => float = "elapsedTime";
+  [@mel.get] external bubbles: t => bool = "bubbles";
+  [@mel.get] external cancelable: t => bool = "cancelable";
+  [@mel.get] external currentTarget: t => Js.t({..}) = "currentTarget";
+  [@mel.get] external defaultPrevented: t => bool = "defaultPrevented";
+  [@mel.get] external eventPhase: t => int = "eventPhase";
+  [@mel.get] external isTrusted: t => bool = "isTrusted";
+  [@mel.get] external nativeEvent: t => Js.t({..}) = "nativeEvent";
+  [@mel.send] external preventDefault: t => unit = "preventDefault";
+  [@mel.send] external isDefaultPrevented: t => bool = "isDefaultPrevented";
+  [@mel.send] external stopPropagation: t => unit = "stopPropagation";
+  [@mel.send]
+  external isPropagationStopped: t => bool = "isPropagationStopped";
+  [@mel.get] external target: t => Js.t({..}) = "target";
+  [@mel.get] external timeStamp: t => float = "timeStamp";
+  [@mel.get] external type_: t => string = "type";
+  [@mel.send] external persist: t => unit = "persist";
+  [@mel.get] external propertyName: t => string = "propertyName";
+  [@mel.get] external pseudoElement: t => string = "pseudoElement";
+  [@mel.get] external elapsedTime: t => float = "elapsedTime";
 };
diff --git a/src/ReactTestRenderer.re b/src/ReactTestRenderer.re
index a39d99882..e5b4588bf 100644
--- a/src/ReactTestRenderer.re
+++ b/src/ReactTestRenderer.re
@@ -1,25 +1,23 @@
 type t;
 
-[@bs.module "react-test-renderer"] [@bs.val] external create :
-  React.element => t = "create";
+[@mel.module "react-test-renderer"]
+external create: React.element => t = "create";
 
-[@bs.send] external toJSON :
-  t => Js.Json.t = "toJSON";
+[@mel.send] external toJSON: t => Js.Json.t = "toJSON";
 
 module Shallow = {
   type t;
 
-  [@bs.module "react-test-renderer/shallow"] [@bs.val] external createRenderer :
-    unit => t = "createRenderer";
+  [@mel.module "react-test-renderer/shallow"]
+  external createRenderer: unit => t = "createRenderer";
 
-  [@bs.send] external render :
-    t => React.element => option(React.element) = "render";
+  [@mel.send]
+  external render: (t, React.element) => option(React.element) = "render";
 
-  [@bs.send] external getRenderOutput :
-    t => option(React.element) = "getRenderOutput";
+  [@mel.send]
+  external getRenderOutput: t => option(React.element) = "getRenderOutput";
 
-  [@bs.send] external unmount :
-    t => unit = "unmount";
+  [@mel.send] external unmount: t => unit = "unmount";
 
   let renderWithRenderer = render(createRenderer());
-}
+};
diff --git a/src/ReactTestUtils.re b/src/ReactTestUtils.re
index 5a7272045..42c8c98c6 100644
--- a/src/ReactTestUtils.re
+++ b/src/ReactTestUtils.re
@@ -2,7 +2,7 @@ type undefined = Js.undefined(unit);
 
 let undefined: undefined = Js.Undefined.empty;
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external reactAct: ((. unit) => undefined) => unit = "act";
 
 let act: (unit => unit) => unit =
@@ -15,7 +15,7 @@ let act: (unit => unit) => unit =
     reactAct(reactFunc);
   };
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external reactActAsync: ((. unit) => Js.Promise.t('a)) => Js.Promise.t(unit) =
   "act";
 
@@ -27,34 +27,34 @@ let actAsync = func => {
   reactActAsync(reactFunc);
 };
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isElement: 'element => bool = "isElement";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isElementOfType: ('element, React.component('props)) => bool =
   "isElementOfType";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isDOMComponent: 'element => bool = "isDOMComponent";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isCompositeComponent: 'element => bool = "isCompositeComponent";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isCompositeComponentWithType:
   ('element, React.component('props)) => bool =
   "isCompositeComponentWithType";
 
 module Simulate = {
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external click: Dom.element => unit = "click";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external clickWithEvent: (Dom.element, 'event) => unit = "click";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external change: Dom.element => unit = "change";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external blur: Dom.element => unit = "blur";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external changeWithEvent: (Dom.element, 'event) => unit = "change";
   let changeWithValue = (element, value) => {
     let event = {
@@ -72,34 +72,34 @@ module Simulate = {
     };
     changeWithEvent(element, event);
   };
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external canPlay: Dom.element => unit = "canPlay";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external timeUpdate: Dom.element => unit = "timeUpdate";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external ended: Dom.element => unit = "ended";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external focus: Dom.element => unit = "focus";
 };
 
-[@bs.val] external document: Dom.document = "document";
+external document: Dom.document = "document";
 
-[@bs.send]
+[@mel.send]
 external querySelector: (Dom.element, string) => option(Dom.element) =
   "querySelector";
 
-[@bs.send]
+[@mel.send]
 external querySelectorAll:
   (Dom.element, string) => Js.Array.array_like(Dom.element) =
   "querySelectorAll";
 
-[@bs.get] external textContent: Dom.element => string = "textContent";
-[@bs.get] external body: Dom.document => option(Dom.element) = "body";
-[@bs.send]
+[@mel.get] external textContent: Dom.element => string = "textContent";
+[@mel.get] external body: Dom.document => option(Dom.element) = "body";
+[@mel.send]
 external createElement: (Dom.document, string) => Dom.element =
   "createElement";
-[@bs.send] external remove: Dom.element => unit = "remove";
-[@bs.send]
+[@mel.send] external remove: Dom.element => unit = "remove";
+[@mel.send]
 external appendChild: (Dom.element, Dom.element) => Dom.element =
   "appendChild";
 
@@ -110,7 +110,7 @@ let querySelectorAll = (element, string) => {
 module DOM = {
   open Belt;
 
-  [@bs.return nullable] [@bs.get]
+  [@mel.return nullable] [@mel.get]
   external value: Dom.element => option(string) = "value";
 
   let findBySelector = (element, selector) =>
diff --git a/src/ReactTestUtils.rei b/src/ReactTestUtils.rei
index 3ae004d81..22bdbb627 100644
--- a/src/ReactTestUtils.rei
+++ b/src/ReactTestUtils.rei
@@ -2,49 +2,49 @@ let act: (unit => unit) => unit;
 
 let actAsync: (unit => Js.Promise.t('a)) => Js.Promise.t(unit);
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isElement: 'element => bool = "isElement";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isElementOfType: ('element, React.component('props)) => bool =
   "isElementOfType";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isDOMComponent: 'element => bool = "isDOMComponent";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isCompositeComponent: 'element => bool = "isCompositeComponent";
 
-[@bs.module "react-dom/test-utils"]
+[@mel.module "react-dom/test-utils"]
 external isCompositeComponentWithType:
   ('element, React.component('props)) => bool =
   "isCompositeComponentWithType";
 
 module Simulate: {
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external click: Dom.element => unit = "click";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external clickWithEvent: (Dom.element, 'event) => unit = "click";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external change: Dom.element => unit = "change";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external blur: Dom.element => unit = "blur";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external changeWithEvent: (Dom.element, 'event) => unit = "change";
   let changeWithValue: (Dom.element, string) => unit;
   let changeWithChecked: (Dom.element, bool) => unit;
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external canPlay: Dom.element => unit = "canPlay";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external timeUpdate: Dom.element => unit = "timeUpdate";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external ended: Dom.element => unit = "ended";
-  [@bs.module "react-dom/test-utils"] [@bs.scope "Simulate"]
+  [@mel.module "react-dom/test-utils"] [@mel.scope "Simulate"]
   external focus: Dom.element => unit = "focus";
 };
 
 module DOM: {
-  [@bs.return nullable] [@bs.get]
+  [@mel.return nullable] [@mel.get]
   external value: Dom.element => option(string) = "value";
 
   let findBySelector: (Dom.element, string) => option(Dom.element);
diff --git a/src/ReasonReactErrorBoundary.re b/src/ReasonReactErrorBoundary.re
index b56e48889..a5ec746a2 100644
--- a/src/ReasonReactErrorBoundary.re
+++ b/src/ReasonReactErrorBoundary.re
@@ -11,7 +11,8 @@ type params('error) = {
   info,
 };
 
-[%%bs.raw {|
+[%%mel.raw
+  {|
   var React = require("react");
   var ErrorBoundary = (function (Component) {
     function ErrorBoundary(props) {
@@ -29,10 +30,11 @@ type params('error) = {
     };
     return ErrorBoundary;
   })(React.Component);
-|}];
+|}
+];
 
-[@react.component] [@bs.val]
-external make: (
-  ~children: React.element,
-  ~fallback: params('error) => React.element,
-) => React.element = "ErrorBoundary"
+[@react.component]
+external make:
+  (~children: React.element, ~fallback: params('error) => React.element) =>
+  React.element =
+  "ErrorBoundary";
diff --git a/src/ReasonReactRouter.re b/src/ReasonReactRouter.re
index e96e12aa5..91fc98510 100644
--- a/src/ReasonReactRouter.re
+++ b/src/ReasonReactRouter.re
@@ -1,43 +1,43 @@
-[@bs.get] external location: Dom.window => Dom.location = "location";
+[@mel.get] external location: Dom.window => Dom.location = "location";
 
-[@bs.send]
+[@mel.send]
 /* actually the cb is Dom.event => unit, but let's restrict the access for now */
 external addEventListener: (Dom.window, string, unit => unit) => unit =
   "addEventListener";
 
-[@bs.send]
+[@mel.send]
 external removeEventListener: (Dom.window, string, unit => unit) => unit =
   "removeEventListener";
 
-[@bs.send]
+[@mel.send]
 external dispatchEvent: (Dom.window, Dom.event) => unit = "dispatchEvent";
 
-[@bs.get] external pathname: Dom.location => string = "pathname";
+[@mel.get] external pathname: Dom.location => string = "pathname";
 
-[@bs.get] external hash: Dom.location => string = "hash";
+[@mel.get] external hash: Dom.location => string = "hash";
 
-[@bs.get] external search: Dom.location => string = "search";
+[@mel.get] external search: Dom.location => string = "search";
 
-[@bs.send]
+[@mel.send]
 external pushState:
-  (Dom.history, [@bs.as {json|null|json}] _, [@bs.as ""] _, ~href: string) =>
+  (Dom.history, [@mel.as {json|null|json}] _, [@mel.as ""] _, ~href: string) =>
   unit =
   "pushState";
 
-[@bs.send]
+[@mel.send]
 external replaceState:
-  (Dom.history, [@bs.as {json|null|json}] _, [@bs.as ""] _, ~href: string) =>
+  (Dom.history, [@mel.as {json|null|json}] _, [@mel.as ""] _, ~href: string) =>
   unit =
   "replaceState";
 
-[@bs.val] external event: 'a = "Event";
+external event: 'a = "Event";
 
-[@bs.new] external makeEventIE11Compatible: string => Dom.event = "Event";
+[@mel.new] external makeEventIE11Compatible: string => Dom.event = "Event";
 
-[@bs.val] [@bs.scope "document"]
+[@mel.scope "document"]
 external createEventNonIEBrowsers: string => Dom.event = "createEvent";
 
-[@bs.send]
+[@mel.send]
 external initEventNonIEBrowsers: (Dom.event, string, bool, bool) => unit =
   "initEvent";
 
@@ -96,13 +96,13 @@ let path = (~serverUrlString=?, ()) =>
   switch (serverUrlString, [%external window]) {
   | (None, None) => []
   | (Some(serverUrlString), _) => pathParse(serverUrlString)
-  | (_, Some((window: Dom.window))) =>
+  | (_, Some(window: Dom.window)) =>
     pathParse(window |> location |> pathname)
   };
 let hash = () =>
   switch ([%external window]) {
   | None => ""
-  | Some((window: Dom.window)) =>
+  | Some(window: Dom.window) =>
     switch (window |> location |> hash) {
     | ""
     | "#" => ""
@@ -126,14 +126,14 @@ let search = (~serverUrlString=?, ()) =>
   switch (serverUrlString, [%external window]) {
   | (None, None) => ""
   | (Some(serverUrlString), _) => searchParse(serverUrlString)
-  | (_, Some((window: Dom.window))) =>
+  | (_, Some(window: Dom.window)) =>
     searchParse(window |> location |> search)
   };
 let push = path =>
   switch ([%external history], [%external window]) {
   | (None, _)
   | (_, None) => ()
-  | (Some((history: Dom.history)), Some((window: Dom.window))) =>
+  | (Some(history: Dom.history), Some(window: Dom.window)) =>
     pushState(history, ~href=path);
     dispatchEvent(window, safeMakeEvent("popstate"));
   };
@@ -141,7 +141,7 @@ let replace = path =>
   switch ([%external history], [%external window]) {
   | (None, _)
   | (_, None) => ()
-  | (Some((history: Dom.history)), Some((window: Dom.window))) =>
+  | (Some(history: Dom.history), Some(window: Dom.window)) =>
     replaceState(history, ~href=path);
     dispatchEvent(window, safeMakeEvent("popstate"));
   };
@@ -176,7 +176,7 @@ let dangerouslyGetInitialUrl = url;
 let watchUrl = callback =>
   switch ([%external window]) {
   | None => (() => ())
-  | Some((window: Dom.window)) =>
+  | Some(window: Dom.window) =>
     let watcherID = () => callback(url());
     addEventListener(window, "popstate", watcherID);
     watcherID;
@@ -184,7 +184,7 @@ let watchUrl = callback =>
 let unwatchUrl = watcherID =>
   switch ([%external window]) {
   | None => ()
-  | Some((window: Dom.window)) =>
+  | Some(window: Dom.window) =>
     removeEventListener(window, "popstate", watcherID)
   };
 let useUrl = (~serverUrl=?, ()) => {
diff --git a/src/dune b/src/dune
index 95a366e08..ca4e2790a 100644
--- a/src/dune
+++ b/src/dune
@@ -6,4 +6,5 @@
  (preprocess
   (pps melange.ppx reason-react-ppx))
  (wrapped false)
+ (libraries melange.dom)
  (modes melange))
diff --git a/src/legacy/ReactDOMRe.re b/src/legacy/ReactDOMRe.re
index 018ae3362..da0122a2a 100644
--- a/src/legacy/ReactDOMRe.re
+++ b/src/legacy/ReactDOMRe.re
@@ -1,11 +1,11 @@
 include ReactDOM.Props;
 
-[@bs.splice] [@bs.module "react"]
+[@mel.splice] [@mel.module "react"]
 external createDOMElementVariadic:
   (string, ~props: domProps=?, array(React.element)) => React.element =
   "createElement";
 
-[@bs.splice] [@bs.val] [@bs.module "react"]
+[@mel.splice] [@mel.module "react"]
 external createElement:
   (string, ~props: domProps=?, array(React.element)) => React.element =
   "createElement";
diff --git a/src/legacy/ReasonReact.re b/src/legacy/ReasonReact.re
index 525226166..d8ea8bea1 100644
--- a/src/legacy/ReasonReact.re
+++ b/src/legacy/ReasonReact.re
@@ -1 +1 @@
-[@bs.module "react"] external fragment: 'a = "Fragment";
+[@mel.module "react"] external fragment: 'a = "Fragment";
diff --git a/test/jest/Expect.re b/test/jest/Expect.re
index ef7412a81..fe02c61e4 100644
--- a/test/jest/Expect.re
+++ b/test/jest/Expect.re
@@ -1,34 +1,34 @@
 type t('a);
 
-[@bs.val] external expect: 'a => t('a) = "expect";
+external expect: 'a => t('a) = "expect";
 
-[@bs.send] external toEqual: (t('a), 'a) => unit = "toEqual";
-[@bs.send] external toBe: (t('a), 'a) => unit = "toBe";
-[@bs.get] external not: t('a) => t('a) = "not";
-[@bs.send]
+[@mel.send] external toEqual: (t('a), 'a) => unit = "toEqual";
+[@mel.send] external toBe: (t('a), 'a) => unit = "toBe";
+[@mel.get] external not: t('a) => t('a) = "not";
+[@mel.send]
 external toMatchSnapshot: (t('a), unit) => unit = "toMatchSnapshot";
 
-[@bs.send] external toThrowSomething: t('a => 'b) => unit = "toThrow";
+[@mel.send] external toThrowSomething: t('a => 'b) => unit = "toThrow";
 
-[@bs.send] external toBeGreaterThan: (t('a), 'a) => unit = "toBeGreaterThan";
-[@bs.send] external toBeLessThan: (t('a), 'a) => unit = "toBeLessThan";
-[@bs.send]
+[@mel.send] external toBeGreaterThan: (t('a), 'a) => unit = "toBeGreaterThan";
+[@mel.send] external toBeLessThan: (t('a), 'a) => unit = "toBeLessThan";
+[@mel.send]
 external toBeGreaterThanOrEqual: (t('a), 'a) => unit =
   "toBeGreaterThanOrEqual";
-[@bs.send]
+[@mel.send]
 external toBeLessThanOrEqual: (t('a), 'a) => unit = "toBeLessThanOrEqual";
 
-[@bs.get]
+[@mel.get]
 external rejects: t(Js.Promise.t('a)) => t(unit => 'a) = "rejects";
 
-[@bs.send] external toContain: (t(array('a)), 'a) => unit = "toContain";
+[@mel.send] external toContain: (t(array('a)), 'a) => unit = "toContain";
 
 // This isn't a real string, but it can be used to construct a predicate on a string
 // expect("hello world")->toEqual(stringContaining("hello"));
-[@bs.val] [@bs.scope "expect"]
+[@mel.scope "expect"]
 external stringContaining: string => string = "stringContaining";
 
 // This isn't a real array, but it can be used to construct a predicate on an array
 // expect([|"x", "y", "z"|])->toEqual(arrayContaining([|"x", "z"|]))
-[@bs.val] [@bs.scope "expect"]
+[@mel.scope "expect"]
 external arrayContaining: array('a) => array('a) = "arrayContaining";
diff --git a/test/jest/Jest.re b/test/jest/Jest.re
index ee798e83c..f4621470a 100644
--- a/test/jest/Jest.re
+++ b/test/jest/Jest.re
@@ -3,19 +3,18 @@ module Mock = Mock;
 
 // Jest requires a function of *no arguments* to be passed into `describe`,
 // hence the uncurried function.
-[@bs.val] external describeU: (string, (. unit) => unit) => unit = "describe";
+external describeU: (string, (. unit) => unit) => unit = "describe";
 
 let describe: (string, unit => unit) => unit =
   (name, f) => describeU(name, (.) => f());
 
 // Tests have an optional timeout (third argument)
-[@bs.val]
+
 external testU: (string, (. unit) => unit, option(int)) => unit = "test";
 
 let test: (~timeout: int=?, string, unit => unit) => unit =
   (~timeout=?, name, f) => testU(name, (.) => f(), timeout);
 
-[@bs.val]
 external testAsyncU:
   (string, (. unit) => Js.Promise.t(unit), option(int)) => unit =
   "test";
@@ -24,19 +23,19 @@ let testAsync: (~timeout: int=?, string, unit => Js.Promise.t(unit)) => unit =
   (~timeout=?, name, f) => testAsyncU(name, (.) => f(), timeout);
 
 module Only = {
-  [@bs.val] [@bs.scope "describe"]
+  [@mel.scope "describe"]
   external describeU: (string, (. unit) => unit) => unit = "only";
 
   let describe: (string, unit => unit) => unit =
     (name, f) => describeU(name, (.) => f());
 
-  [@bs.val] [@bs.scope "test"]
+  [@mel.scope "test"]
   external testU: (string, (. unit) => unit, option(int)) => unit = "only";
 
   let test: (~timeout: int=?, string, unit => unit) => unit =
     (~timeout=?, name, f) => testU(name, (.) => f(), timeout);
 
-  [@bs.val] [@bs.scope "test"]
+  [@mel.scope "test"]
   external testAsyncU:
     (string, (. unit) => Js.Promise.t(unit), option(int)) => unit =
     "only";
@@ -46,19 +45,19 @@ module Only = {
 };
 
 module Skip = {
-  [@bs.val] [@bs.scope "describe"]
+  [@mel.scope "describe"]
   external describeU: (string, (. unit) => unit) => unit = "skip";
 
   let describe: (string, unit => unit) => unit =
     (name, f) => describeU(name, (.) => f());
 
-  [@bs.val] [@bs.scope "test"]
+  [@mel.scope "test"]
   external testU: (string, (. unit) => unit, option(int)) => unit = "skip";
 
   let test: (~timeout: int=?, string, unit => unit) => unit =
     (~timeout=?, name, f) => testU(name, (.) => f(), timeout);
 
-  [@bs.val] [@bs.scope "test"]
+  [@mel.scope "test"]
   external testAsyncU:
     (string, (. unit) => Js.Promise.t(unit), option(int)) => unit =
     "skip";
@@ -67,41 +66,37 @@ module Skip = {
     (~timeout=?, name, f) => testAsyncU(name, (.) => f(), timeout);
 };
 
-[@bs.val] external beforeAllU: ((. unit) => unit) => unit = "beforeAll";
+external beforeAllU: ((. unit) => unit) => unit = "beforeAll";
 
 let beforeAll: (unit => unit) => unit = f => beforeAllU((.) => f());
 
-[@bs.val] external beforeEachU: ((. unit) => unit) => unit = "beforeEach";
+external beforeEachU: ((. unit) => unit) => unit = "beforeEach";
 
 let beforeEach: (unit => unit) => unit = f => beforeEachU((.) => f());
 
-[@bs.val] external afterAllU: ((. unit) => unit) => unit = "afterAll";
+external afterAllU: ((. unit) => unit) => unit = "afterAll";
 
 let afterAll: (unit => unit) => unit = f => afterAllU((.) => f());
 
-[@bs.val] external afterEachU: ((. unit) => unit) => unit = "afterEach";
+external afterEachU: ((. unit) => unit) => unit = "afterEach";
 
 let afterEach: (unit => unit) => unit = f => afterEachU((.) => f());
 
-[@bs.val]
 external beforeAllAsyncU: ((. unit) => Js.Promise.t(unit)) => unit =
   "beforeAll";
 let beforeAllAsync: (unit => Js.Promise.t(unit)) => unit =
   f => beforeAllAsyncU((.) => f());
 
-[@bs.val]
 external beforeEachAsyncU: ((. unit) => Js.Promise.t(unit)) => unit =
   "beforeEach";
 let beforeEachAsync: (unit => Js.Promise.t(unit)) => unit =
   f => beforeEachAsyncU((.) => f());
 
-[@bs.val]
 external afterAllAsyncU: ((. unit) => Js.Promise.t(unit)) => unit =
   "afterAll";
 let afterAllAsync: (unit => Js.Promise.t(unit)) => unit =
   f => afterAllAsyncU((.) => f());
 
-[@bs.val]
 external afterEachAsyncU: ((. unit) => Js.Promise.t(unit)) => unit =
   "afterEach";
 let afterEachAsync: (unit => Js.Promise.t(unit)) => unit =
diff --git a/test/jest/Mock.re b/test/jest/Mock.re
index 9ae9aa736..9cd485c72 100644
--- a/test/jest/Mock.re
+++ b/test/jest/Mock.re
@@ -5,24 +5,23 @@ let undefined: undefined = Js.Undefined.empty;
 type mock('a);
 
 type t('a) = mock('a);
-[@bs.scope "jest"] [@bs.val] external fn: unit => 'a = "fn";
-[@bs.scope "jest"] [@bs.val] external fnWithImplementation: 'a => 'a = "fn";
-[@bs.scope "jest"] [@bs.val] external mockModule: string => unit = "mock";
+[@mel.scope "jest"] external fn: unit => 'a = "fn";
+[@mel.scope "jest"] external fnWithImplementation: 'a => 'a = "fn";
+[@mel.scope "jest"] external mockModule: string => unit = "mock";
 external getMock: 'a => t('a) = "%identity";
-[@bs.send]
+[@mel.send]
 external mockReturnValue: (t('a), 'b) => undefined = "mockReturnValue";
 let mockReturnValue = (mock, value) => {
   let _ = mockReturnValue(mock, value);
   ();
 };
-[@bs.send]
-external mockImplementation: (t('a), 'a) => undefined =
-  "mockImplementation";
+[@mel.send]
+external mockImplementation: (t('a), 'a) => undefined = "mockImplementation";
 let mockImplementation = (mock, value) => {
   let _ = mockImplementation(mock, value);
   ();
 };
-[@bs.get] [@bs.scope "mock"]
+[@mel.get] [@mel.scope "mock"]
 external calls: t('a) => array(array('b)) = "calls";
-[@bs.set] [@bs.scope "mock"]
-external clearCalls: (t('a), [@bs.as {json|[]|json}] _) => unit = "calls";
+[@mel.set] [@mel.scope "mock"]
+external clearCalls: (t('a), [@mel.as {json|[]|json}] _) => unit = "calls";