From b09c61493e6d69e07a47d2f353507b6b3638c8fb Mon Sep 17 00:00:00 2001
From: Ziad Saab <ziad.saab@gmail.com>
Date: Fri, 2 Aug 2024 09:48:41 -0500
Subject: [PATCH] Add JSX upgrade instructions (#1474)

* Add JSX upgrade instructions

* edits for syntax and style

* Update snaps/features/custom-ui/with-jsx.md

Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>

---------

Co-authored-by: Alexandra Tran <alexandratran@protonmail.com>
Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
---
 snaps/features/custom-ui/with-jsx.md | 48 ++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/snaps/features/custom-ui/with-jsx.md b/snaps/features/custom-ui/with-jsx.md
index efc28a828e6..4631eea0609 100644
--- a/snaps/features/custom-ui/with-jsx.md
+++ b/snaps/features/custom-ui/with-jsx.md
@@ -50,6 +50,54 @@ await snap.request({
 Note that JSX can only be used in `.jsx` or `.tsx` files.
 :::
 
+## Upgrade an existing Snap to use JSX
+
+Follow these steps to upgrade an existing Snap to use JSX:
+
+1. Upgrade dependencies in `packages/snap/package.json`:
+
+    - Upgrade `@metamask/snaps-sdk` to `^6.1.1` or later.
+    - Upgrade `@metamask/snaps-cli` to `^6.2.1` or later.
+    - Upgrade `@metamask/snaps-jest` to `^8.2.0` or later.
+   
+   Run `yarn install` to install the new versions.
+
+2. Update `packages/snap/.eslintrc.js`:
+
+    - Add a new section in `overrides` with the following configuration:
+      ```json
+      {
+        "files": ["**/*.ts", "**/*.tsx"],
+        "extends": ["@metamask/eslint-config-typescript"],
+        "rules": {
+          // This allows importing the `Text` JSX component.
+          "@typescript-eslint/no-shadow": [
+            "error",
+            {
+              "allow": ["Text"],
+            },
+          ],
+        },
+      }
+      ```
+    - Replace `["*.test.ts"]` with `["*.test.ts", "*.test.tsx"]`.
+
+3. Update `packages/snap/src/index.ts`, if it will have JSX:
+
+    - Rename the file to `index.tsx`.
+    - Modify the `input` field in `packages/snap/snap.config.ts` to `src/index.tsx`.
+
+4. Update `packages/snap/tsconfig.json`:
+
+    - Under `compilerOptions`, add:
+      ```json
+      "jsx": "react-jsx",
+      "jsxImportSource": "@metamask/snaps-sdk"
+      ```
+    - Change the `include` property from `["**/*.ts"]` to `["**/*.ts", "**/*.tsx"]`.
+
+5. Replace all Custom UI in your code with JSX components, renaming the target files with the `.tsx` extension.
+
 ## Components
 
 The following custom UI JSX components are available: