Add dedicated ReScript mode with improved syntax highlighting

Author: ryyppy

plugins/cm-rescript-mode.js

@@ -0,0 +1,108 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+//
+// Originally derived from the CodeMirror Rust plugin:
+// https://github.com/codemirror/CodeMirror/blob/master/mode/rust/rust.js
+
+import "codemirror/addon/mode/simple";
+import CodeMirror from "codemirror/lib/codemirror";
+
+CodeMirror.defineSimpleMode("rescript", {
+  start: [
+    // string and byte string
+    { regex: /b?"/, token: "string", next: "string" },
+    // raw string and raw byte string
+    //{ regex: /b?r"/, token: "string", next: "string_raw" },
+    //{ regex: /b?r#+"/, token: "string", next: "string_raw_hash" },
+    // string and byte string
+    { regex: /b?"/, token: "string", next: "string" },
+    { regex: /(\:\s*)(.*)(\s*=)\s/, token: [null, "type-annotation", null]},
+    // interpolation string 
+    { regex: /b?`/, token: "string", next: "string_interpolation" },
+    // character
+    {
+      regex: /'(?:[^'\\]|\\(?:[nrt0'"]|x[\da-fA-F]{2}|u\{[\da-fA-F]{6}\}))'/,
+      token: "string-2"
+    },
+    // byte
+    { regex: /b'(?:[^']|\\(?:['\\nrt0]|x[\da-fA-F]{2}))'/, token: "string-2" },
+    {
+      regex: /(?:(?:[0-9][0-9_]*)(?:(?:[Ee][+-]?[0-9_]+)|\.[0-9_]+(?:[Ee][+-]?[0-9_]+)?)(?:f32|f64)?)|(?:0(?:b[01_]+|(?:o[0-7_]+)|(?:x[0-9a-fA-F_]+))|(?:[0-9][0-9_]*))(?:u8|u16|u32|u64|i8|i16|i32|i64|isize|usize)?/,
+      token: "number"
+    },
+    {
+      regex: /(let|type)(\s+rec)?(\s+)([a-zA-Z_][a-zA-Z0-9_]*)/,
+      token: ["keyword", "keyword2", null, "def"]
+    },
+    {
+      regex: /(?:switch|module|as|else|external|for|if|in|mod|ref|type|while|open|open\!)\b/,
+      token: "keyword"
+    },
+    {
+      regex: /(?:rec)\b/,
+      token: "keyword2"
+    },
+    {
+      regex: /\b(?:char|bool|option|int|string)\b/,
+      token: "atom"
+    },
+    { regex: /\b(?:true|false)\b/, token: "builtin" },
+    {
+      regex: /\b(fun)(\s+)([a-zA-Z_\|][a-zA-Z0-9_]*)/,
+      token: ["keyword", null, "def"]
+    },
+    {
+      regex: /\b([A-Z][a-zA-Z0-9_]*)(\.)/,
+      token: ["module", null]
+    },
+    {
+      regex: /\b([A-Z][a-zA-Z0-9_]*)/,
+      token: ["variant-constructor", null, null, null]
+    },
+    //polyvar
+    { regex: /#[a-zA-Z0-9_"]*/, token: "variant-constructor"},
+    { regex: /@.[\w\.\(\)]*/, token: "decorator" },
+    { regex: /#!?\[.*\]/, token: "meta" },
+    { regex: /\/\/.*/, token: "comment" },
+    { regex: /\/\*/, token: "comment", next: "comment" },
+    { regex: /[-+\/*=<>!\|]+/, token: "operator" },
+    { regex: /[a-zA-Z_]\w*!/, token: "variable-3" },
+    { regex: /[a-zA-Z_]\w*/, token: "variable" },
+    { regex: /[\{\[\(]/, indent: true },
+    { regex: /[\}\]\)]/, dedent: true }
+  ],
+  variantConstructor: [
+
+  ],
+  string: [
+    { regex: /"/, token: "string", next: "start" },
+    { regex: /(?:[^\\"]|\\(?:.|$))*/, token: "string" }
+  ],
+  //string_raw: [
+    //{ regex: /"/, token: "string", next: "start" },
+    //{ regex: /[^"]*/, token: "string" }
+  //],
+  //string_raw_hash: [
+    //{ regex: /"#+/, token: "string", next: "start" },
+    //{ regex: /(?:[^"]|"(?!#))*/, token: "string" }
+  //],
+  string_interpolation: [
+    { regex: /`/, token: "string", next: "start" },
+    { regex: /[^`]*/, token: "string" }
+  ],
+  comment: [
+    { regex: /.*?\*\//, token: "comment", next: "start" },
+    { regex: /.*/, token: "comment" }
+  ],
+  meta: {
+    dontIndentStates: ["comment"],
+    electricInput: /^\s*\}$/,
+    blockCommentStart: "/*",
+    blockCommentEnd: "*/",
+    lineComment: "//",
+    fold: "brace"
+  }
+});
+
+CodeMirror.defineMIME("text/x-reasonsrc", "reason");
+CodeMirror.defineMIME("text/reason", "reason");

src/Playground.js

@@ -424,7 +424,7 @@ module ResultPane = {
             "The compiler bundle API returned a result that couldn't be interpreted. Please open an issue on our ",
           )}
           <Markdown.A
-            target="_blank" href="https://github.com/reason-association/rescript-lang.org/issues">
+            target="_blank" href="https://github.com/rescript-association/rescript-lang.org/issues">
             {React.string("issue tracker")}
           </Markdown.A>
           {React.string(".")}
@@ -1397,14 +1397,12 @@ module OutputPanel = {
   }
 }
 
-let initialResContent = j`// Please note:
-// ---
-// The Playground is still a work in progress
-// ReScript / old Reason syntax should parse just
-// fine (go to the "Settings" panel for toggling syntax).
-//
-// Feel free to play around and compile some
-// ReScript code!
+let initialResContent = j`
+
+let world = "world"
+let a = \`
+Hello ${"${world}"}
+\`
 
 module Button = {
   @react.component
@@ -1546,6 +1544,12 @@ let default = () => {
   | _ => []
   }
 
+  let mode = switch compilerState {
+    | Ready({ targetLang: Reason }) => "reason"
+    | Ready({ targetLang: Res }) => "rescript"
+    | _ => "rescript"
+  }
+
   <>
     <Meta title="ReScript Playground" description="Try ReScript in the browser" />
     <Next.Head>
@@ -1572,7 +1576,7 @@ let default = () => {
                   className="w-full py-4"
                   minHeight="calc(100vh - 10rem)"
                   maxHeight="calc(100vh - 10rem)"
-                  mode="reason"
+                  mode
                   errors=cmErrors
                   value={editorCode.current}
                   onChange={value => {

src/Playground.res

@@ -8,21 +8,19 @@
     This file is providing the core functionality and logic of our CodeMirror instances.
  */
 
-%%raw(
-  `
+%%raw(`
 import "codemirror/lib/codemirror.css";
 import "styles/cm.css";
 
 if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
   require("codemirror/mode/javascript/javascript");
   require("codemirror/addon/scroll/simplescrollbars");
+  require("plugins/cm-rescript-mode");
   require("plugins/cm-reason-mode");
 }
-`
-)
+`)
 
-let useWindowWidth: unit => int = %raw(
-  j` () => {
+let useWindowWidth: unit => int = %raw(j` () => {
   const isClient = typeof window === 'object';
 
   function getSize() {
@@ -58,8 +56,7 @@ let useWindowWidth: unit => int = %raw(
   }
   return null;
   }
-  `
-)
+  `)
 
 /* The module for interacting with the imperative CodeMirror API */
 module CM = {
@@ -90,6 +87,9 @@ module CM = {
   @bs.module("codemirror")
   external fromTextArea: (Dom.element, Options.t) => t = "fromTextArea"
 
+  @bs.send
+  external setMode: (t, @bs.as("mode") _, string) => unit = "setOption"
+
   @bs.send
   external getScrollerElement: t => Dom.element = "getScrollerElement"
 
@@ -466,6 +466,12 @@ let make = // props relevant for the react wrapper
     None
   }, [errorsFingerprint])
 
+  React.useEffect1(() => {
+    let cm = Belt.Option.getExn(cmRef.current);
+    cm->CM.setMode(mode)
+    None
+  }, [mode])
+
   /*
       Needed in case the className visually hides / shows
       a codemirror instance, or the window has been resized.