Merge pull request #122 from melange-re/playground/type-hints

Playground/type hints
melange-re · Oct 5, 2023 · 4be989a · 4be989a
2 parents bcea58e + fa07c29
commit 4be989a
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 3 deletions.
diff --git a/documentation-site.opam b/documentation-site.opam
@@ -29,8 +29,8 @@ dev-repo: "git+https://github.com/melange-re/melange-re.github.io.git"
 pin-depends: [
   [ "reason-react.dev" "git+https://github.com/reasonml/reason-react.git#0ccff71796b60d6c32ab6cf01e31beccca4698b9" ]
   [ "reason-react-ppx.dev" "git+https://github.com/reasonml/reason-react.git#0ccff71796b60d6c32ab6cf01e31beccca4698b9" ]
-  [ "melange.dev" "git+https://github.com/melange-re/melange.git#465101328e0e1ec90e246b0a2e8622e6cbdc0584" ]
-  [ "melange-playground.dev" "git+https://github.com/melange-re/melange.git#465101328e0e1ec90e246b0a2e8622e6cbdc0584" ]
+  [ "melange.dev" "git+https://github.com/melange-re/melange.git#3a5aec1548067122e99eeaf6a08fc555415421dc" ]
+  [ "melange-playground.dev" "git+https://github.com/melange-re/melange.git#3a5aec1548067122e99eeaf6a08fc555415421dc" ]
   [ "cmarkit.dev" "git+https://github.com/dbuenzli/cmarkit.git#f37c8ea86fd0be8dba7a8babcee3682e0e047d91" ]
 ]
 build: [

diff --git a/playground/src/App.css b/playground/src/App.css
@@ -101,7 +101,6 @@ button:hover {
 }
 
 .Editor {
-  overflow: auto;
   height: 100%;
 }
 

diff --git a/playground/src/app.jsx b/playground/src/app.jsx
@@ -420,15 +420,36 @@ const compile = (language, code) => {
     }
     if (problems) {
       return {
+        typeHints: [],
         problems: problems,
       }
     } else {
       return {
+        typeHints: compilation.type_hints.sort((a, b) => {
+          let aLineGap = a.end.line - a.start.line;
+          let bLineGap = b.end.line - b.start.line;
+          if (aLineGap < bLineGap) {
+            return -1;
+          } else if (aLineGap > bLineGap) {
+            return 1;
+          } else {
+            let aColGap = a.end.col - a.start.col;
+            let bColGap = b.end.col - b.start.col;
+            if (aColGap < bColGap) {
+              return -1;
+            } else if (aColGap > bColGap) {
+              return 1;
+            } else {
+              return 0;
+            }
+          }
+        }),
         javascriptCode: compilation.js_code,
       }
     }
   } else {
     return {
+      typeHints: [],
       problems: [
         {
           js_error_msg: "No result was returned from compilation",
@@ -488,6 +509,74 @@ function App() {
     }
   }, [monaco]);
 
+  React.useEffect(() => {
+    let hoverProvider = undefined;
+    if (monaco) {
+      hoverProvider = monaco.languages.registerHoverProvider(language, {
+        provideHover: function (model, position) {
+          const { lineNumber, column } = position;
+          if (!compilation?.typeHints) {
+            return null;
+          } else {
+            function hintInLoc(item) {
+              var end = item.end;
+              var start = item.start;
+              const result =
+                lineNumber >= start.line &&
+                lineNumber <= end.line &&
+                column >= start.col + 1 &&
+                column <= end.col + 1;
+              return result;
+            };
+            const result = compilation?.typeHints.find(hintInLoc);
+            if (result) {
+              const range = new monaco.Range(
+                result.start.line,
+                result.start.col + 1,
+                result.end.line,
+                result.end.col + 1
+              );
+              let hint = result.hint;
+              if (language == languageMap.Reason) {
+                try {
+                  if (hint.substring(0,5) === "type ") {
+                    // No need to mess with the hint as it should be valid AST
+                    hint = ocaml.printRE(ocaml.parseML(hint));
+                  } else {
+                    const prefix = "type t = ";
+                    // Must be something else than a type
+                    hint =
+                      ocaml
+                      /* add prefix so it is valid code */
+                      .printRE(ocaml.parseML(prefix + hint))
+                      /* remove prefix */
+                      .slice(prefix.length)
+                      /* remove last `;` */
+                      .slice(0, -2);
+                  }
+
+                } catch (e) {
+                  console.error("Error formatting type hint: ", hint);
+                }
+              }
+              return {
+                range,
+                contents: [{ value: `\`\`\`${language}\n${hint}\n\`\`\`` }],
+              };  
+            } else {
+              return null;
+            }
+          }
+        },
+      });
+    }
+    return () => {
+      if (hoverProvider) {
+        hoverProvider.dispose();
+      }
+    }
+  }, [monaco, compilation?.typeHints]);
+
   React.useEffect(() => {
     // or make sure that it exists by other ways
     if (monaco && editorRef.current) {