Merge pull request #252 from rescript-association/layout-improvements

Layout & other improvements

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");

public/static/[email protected]

@@ -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,16 +1397,7 @@ 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!
-
-module Button = {
+let initialResContent = `module Button = {
   @react.component
   let make = (~count: int) => {
     let times = switch count {
@@ -1546,6 +1537,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 +1569,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.js

@@ -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.

src/Playground.res

@@ -418,13 +418,14 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
     ref={ReactDOM.Ref.domRef(outerRef)}
     id="header"
     style={ReactDOMStyle.make(~minWidth, ())}
-    className={fixedNav ++ " flex xs:justify-center w-full h-18 bg-gray-95 shadow text-white-80 text-base"}>
+    className={fixedNav ++ " flex xs:justify-center w-full h-16 bg-gray-95 shadow text-white-80 text-base"}>
     <div className="flex justify-between mx-4 md:mx-8 items-center h-full w-full max-w-1280">
-      <div className="h-8 w-8">
+      <div className="h-8 w-8 lg:h-10 lg:w-32">
         <a
           href="/"
           className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold">
-          <img src="/static/[email protected]" />
+          <img src="/static/[email protected]" className="lg:hidden" />
+          <img src="/static/[email protected]" className="hidden lg:block" />
         </a>
       </div>
       /* Desktop horizontal navigation */
@@ -468,7 +469,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
             </a>
           </Link>
         </div>
-        <div className="hidden sm:flex items-center">
+        <div className="hidden md:flex items-center">
           <a
             href=githubHref
             rel="noopener noreferrer"
@@ -509,7 +510,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
     </button>
     /* Mobile overlay */
     <div
-      style={ReactDOMStyle.make(~minWidth, ~top="4.5rem", ())}
+      style={ReactDOMStyle.make(~minWidth, ~top="4rem", ())}
       className={(
         isOverlayOpen ? "flex" : "hidden"
       ) ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-30 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>

src/components/CodeMirror.js

@@ -27,7 +27,7 @@ let make = (~components=Markdown.default, ~children) => {
     <div className="mt-4 xs:mt-16">
       <div className="text-gray-80 text-lg">
         <Navigation overlayState />
-        <div className="absolute top-18 w-full">
+        <div className="absolute top-16 w-full">
           <div
             className="flex justify-center overflow-hidden"
             style={ReactDOM.Style.make(~backgroundColor="#0E1529", ())}>