Paste as React JSX as ReScript JSX

Author: nojaf

client/src/commands.ts

@@ -11,6 +11,7 @@ export { switchImplIntf } from "./commands/switch_impl_intf";
 export { dumpDebug, dumpDebugRetrigger } from "./commands/dump_debug";
 export { dumpServerState } from "./commands/dump_server_state";
 export { pasteAsRescriptJson } from "./commands/paste_as_rescript_json";
+export { pasteAsRescriptJsx } from "./commands/paste_as_rescript_jsx";
 
 export const codeAnalysisWithReanalyze = (
   targetDir: string | null,

client/src/commands/paste_as_rescript_jsx.ts

@@ -0,0 +1,87 @@
+import { env, window, Position, Selection } from "vscode";
+
+import { buildInsertionText } from "./paste_as_rescript_json";
+import { transformJsx } from "./transform-jsx";
+
+export type JsxConversionResult =
+  | { kind: "success"; formatted: string }
+  | { kind: "empty" }
+  | { kind: "error"; errorMessage: string };
+
+export const convertPlainTextToRescriptJsx = (
+  text: string,
+): JsxConversionResult => {
+  if (text.trim().length === 0) {
+    return { kind: "empty" };
+  }
+
+  try {
+    const formatted = transformJsx(text);
+    return { kind: "success", formatted };
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown conversion error.";
+    return {
+      kind: "error",
+      errorMessage,
+    };
+  }
+};
+
+const computeEndPosition = (
+  insertionStart: Position,
+  indentedText: string,
+): Position => {
+  const lines = indentedText.split("\n");
+  if (lines.length === 1) {
+    return insertionStart.translate(0, lines[0].length);
+  }
+  return new Position(
+    insertionStart.line + lines.length - 1,
+    lines[lines.length - 1].length,
+  );
+};
+
+export const pasteAsRescriptJsx = async () => {
+  const editor = window.activeTextEditor;
+  if (!editor) {
+    window.showInformationMessage(
+      "No active editor to paste the ReScript JSX into.",
+    );
+    return;
+  }
+
+  const clipboardText = await env.clipboard.readText();
+  const conversion = convertPlainTextToRescriptJsx(clipboardText);
+
+  if (conversion.kind === "empty") {
+    window.showInformationMessage(
+      "Clipboard does not appear to contain any JSX content.",
+    );
+    return;
+  }
+
+  if (conversion.kind === "error") {
+    window.showErrorMessage(
+      `Clipboard JSX could not be transformed: ${conversion.errorMessage}`,
+    );
+    return;
+  }
+
+  const formatted = conversion.formatted;
+  const selection = editor.selection;
+  const indentedText = buildInsertionText(
+    editor.document,
+    selection.start,
+    formatted,
+  );
+  const insertionStart = selection.start;
+  const didEdit = await editor.edit((editBuilder) => {
+    editBuilder.replace(selection, indentedText);
+  });
+
+  if (didEdit) {
+    const endPosition = computeEndPosition(insertionStart, indentedText);
+    editor.selection = new Selection(endPosition, endPosition);
+  }
+};

client/src/commands/transform-jsx.ts

@@ -0,0 +1,71 @@
+import { parseSync, type Node } from "oxc-parser";
+import { walk } from "oxc-walker";
+import MagicString from "magic-string";
+
+const integerRegex = /^-?\d+$/;
+const floatRegex = /^-?\d+(\.\d+)?$/;
+
+const rescriptKeywords = new Set(["type", "open", "as", "in"]);
+
+export function transformJsx(input: string): string {
+  const magicString = new MagicString(input);
+  const parseResult = parseSync("clipboard-input.tsx", input, {
+    astType: "ts",
+    lang: "tsx",
+  });
+
+  walk(parseResult.program, {
+    enter: (node: Node) => {
+      if (node.type === "JSXAttribute") {
+        if (node.value?.type === "Literal" && node.value.raw?.startsWith("'")) {
+          magicString.update(
+            node.value.start,
+            node.value.end,
+            `"${node.value.raw.slice(1, -1)}"`,
+          );
+        }
+
+        if (
+          typeof node.name.name === "string" &&
+          rescriptKeywords.has(node.name.name)
+        ) {
+          magicString.appendRight(node.name.end, "_");
+        }
+
+        if (
+          typeof node.name.name === "string" &&
+          node.name.name.startsWith("aria-")
+        ) {
+          magicString.update(
+            node.name.start + 4,
+            node.name.start + 6,
+            node.name.name[5]?.toUpperCase() || "",
+          );
+        }
+
+        if (node.name.name === "data-testid") {
+          magicString.update(node.name.start, node.name.end, "dataTestId");
+        }
+
+        if (node.value === null) {
+          magicString.appendRight(node.end, "=true");
+        }
+      } else if (node.type === "JSXText") {
+        if (node.raw && integerRegex.test(node.raw.trim())) {
+          magicString.prependLeft(node.start, "{React.int(");
+          magicString.appendRight(node.end, ")}");
+        } else if (node.raw && floatRegex.test(node.raw.trim())) {
+          magicString.prependLeft(node.start, "{React.float(");
+          magicString.appendRight(node.end, ")}");
+        } else if (node.value.trim()) {
+          magicString.prependLeft(node.start, '{React.string("');
+          magicString.appendRight(node.end, '")}');
+        }
+      }
+    },
+  });
+
+  return magicString.toString();
+}
+
+export default transformJsx;

client/src/extension.ts

@@ -35,6 +35,7 @@ import {
   convertPlainTextToJsonT,
   buildInsertionText,
 } from "./commands/paste_as_rescript_json";
+import { convertPlainTextToRescriptJsx } from "./commands/paste_as_rescript_jsx";
 
 let client: LanguageClient;
 
@@ -393,10 +394,14 @@ export function activate(context: ExtensionContext) {
     customCommands.dumpDebugRetrigger();
   });
 
-  const pasteEditKind = DocumentDropOrPasteEditKind.Text.append(
+  const pasteJsonEditKind = DocumentDropOrPasteEditKind.Text.append(
     "rescript",
     "json",
   );
+  const pasteJsxEditKind = DocumentDropOrPasteEditKind.Text.append(
+    "rescript",
+    "jsx",
+  );
 
   context.subscriptions.push(
     languages.registerDocumentPasteEditProvider(
@@ -421,32 +426,54 @@ export function activate(context: ExtensionContext) {
           }
 
           const text = await candidateItem.asString();
-          const conversion = convertPlainTextToJsonT(text);
-          if (conversion.kind !== "success") {
-            return;
-          }
-
           const targetRange = ranges[0];
           if (!targetRange) {
             return;
           }
 
-          const insertText = buildInsertionText(
-            document,
-            targetRange.start,
-            conversion.formatted,
-          );
-          const edit = new DocumentPasteEdit(
-            insertText,
-            "Paste as ReScript JSON.t",
-            pasteEditKind,
-          );
+          const edits: DocumentPasteEdit[] = [];
+
+          const jsonConversion = convertPlainTextToJsonT(text);
+          if (jsonConversion.kind === "success") {
+            const insertText = buildInsertionText(
+              document,
+              targetRange.start,
+              jsonConversion.formatted,
+            );
+            edits.push(
+              new DocumentPasteEdit(
+                insertText,
+                "Paste as ReScript JSON.t",
+                pasteJsonEditKind,
+              ),
+            );
+          }
+
+          const jsxConversion = convertPlainTextToRescriptJsx(text);
+          if (jsxConversion.kind === "success") {
+            const insertText = buildInsertionText(
+              document,
+              targetRange.start,
+              jsxConversion.formatted,
+            );
+            edits.push(
+              new DocumentPasteEdit(
+                insertText,
+                "Paste as ReScript JSX",
+                pasteJsxEditKind,
+              ),
+            );
+          }
+
+          if (edits.length === 0) {
+            return;
+          }
 
-          return [edit];
+          return edits;
         },
       },
       {
-        providedPasteEditKinds: [pasteEditKind],
+        providedPasteEditKinds: [pasteJsonEditKind, pasteJsxEditKind],
         pasteMimeTypes: ["text/plain", "application/json"],
       },
     ),