From 8a4a53222f35acf2153405db4a757cc69e484b3c Mon Sep 17 00:00:00 2001
From: Woonki Moon <woonki.moon@gmail.com>
Date: Fri, 6 Jan 2023 13:01:22 +0900
Subject: [PATCH] add mangling prop name in JSX v4

---
 pages/docs/react/latest/migrate-react.mdx | 29 +++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/pages/docs/react/latest/migrate-react.mdx b/pages/docs/react/latest/migrate-react.mdx
index 799caeee2..df25f2fa5 100644
--- a/pages/docs/react/latest/migrate-react.mdx
+++ b/pages/docs/react/latest/migrate-react.mdx
@@ -211,3 +211,32 @@ let make = () => {
   </div>
 }
 ```
+
+### Mangling the prop name
+
+The prop name was mangled automatically in v3, such as `_open` becomes `open` in the generated js code. This is no longer the case in v4 because the internal representation is changed to the record instead object. If you need to mangle the prop name, you can use the `@as` annotation.
+
+Rewrite this:
+
+```res
+module Comp = {
+  @react.component
+  let make = (~_open, ~_type) =>
+    <Modal _open _type>
+      <Description />
+    </Modal>
+}
+```
+
+To this:
+
+```res
+module Comp = {
+  @react.component
+  let make =
+    (@as("open") ~_open, @as("type") ~_type) =>
+      <Modal _open _type>
+        <Description />
+      </Modal>
+}
+```