feat: Adding prompt syntax highlighting, better theming, experiments …

…as query params (#86)
dgkf · Feb 26, 2024 · 039cd12 · 039cd12
1 parent 89c77a9
commit 039cd12
Show file tree

Hide file tree

Showing 23 changed files with 879 additions and 476 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -46,7 +46,7 @@ reedline = { version = "0.22.0", optional = true }
 nu-ansi-term = { version = "0.49.0", optional = true }
 
 # wasm
-wasm-bindgen = { version = "=0.2.87", optional = true }
+wasm-bindgen = { version = "0.2.91", optional = true }
 js-sys = "0.3.64"
 serde = { version = "1.0.197", features = ["derive"] }
 gloo-utils = { version = "0.2.0", features = ["serde"] }
@@ -57,14 +57,11 @@ strum = { version = "0.26.1", features = ["derive"] }
 
 [features]
 default = ["repl"]
-tail-call-optimization = []
-rest-args = []
 repl = [
   "dep:crossterm", 
   "dep:reedline", 
   "dep:nu-ansi-term"
 ]
-
 wasm = [
   "dep:wasm-bindgen", 
   "getrandom/js"  # rand requires getrandom be built with js feature for wasm

diff --git a/README.md b/README.md
@@ -67,15 +67,15 @@ free to join the conversation.
 All experiments are feature-gated and enabled by running (or building) with 
 
 ```sh
-cargo run --features "<feature>"
+cargo run -- --experiments "<experiment>"
 ```
 
 Please try them out and share your thoughts in the corresponding issues!
 
 #### Ellipsis packing and unpacking
 
 > [!NOTE]  
-> **feature:** `rest-args` (discussed in [#48](https://github.com/dgkf/R/issues/48), [#49](https://github.com/dgkf/R/issues/49))
+> `--experiments rest-args` (discussed in [#48](https://github.com/dgkf/R/issues/48), [#49](https://github.com/dgkf/R/issues/49))
 
 Current work is focused on `..args` named ellipsis arguments and `..args`
 unpacking in function calls. However, due to the experimental nature of this
@@ -107,7 +107,7 @@ f(..args, ..more_args)  # duplicate names okay, last instance takes priority
 #### Tail Recursion
 
 > [!NOTE]  
-> **feature:** `tail-call-optimization` (discussed in [#60](https://github.com/dgkf/R/issues/60))
+> `--experiments tail-calls` (discussed in [#60](https://github.com/dgkf/R/issues/60)) 
 
 Tail recursion allows for arbitrarily recursive call stacks - or, more 
 accurately, it discards frames from the call stack in this special case

diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
@@ -4,29 +4,28 @@
 
     :root {
       --font-scale: 1;
-
-      --dark-bg: rgb(0, 0, 0);
-      --dark-fg: rgb(224, 224, 224);
-
-      --light-bg: rgb(224, 224, 224);
-      --light-fg: rgb(0, 0, 0);
-
-      --bg: var(--dark-bg);
-      --fg: var(--dark-fg);
     }
 
-    @media (prefers-color-scheme: light) {
-      :root {
-        --bg: var(--light-bg);
-        --fg: var(--light-fg);
-      }      
+    .light {
+      --bg: rgb(232, 232, 232);
+      --fg: rgb(12, 12, 12); 
+      --gray0: #D0D0D0;
+      --gray1: #FFFFFF;
+      --gray2: #E0E0E0;
+      --gray3: #F0F0F0;
+      --gray4: #CCC;
+      --gray7: #888;
     }
 
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --bg: var(--dark-bg);
-        --fg: var(--dark-fg);
-      }      
+    .dark {
+      --bg: rgb(0, 0, 0);
+      --fg: rgb(224, 224, 224);
+      --gray0: #000;
+      --gray1: #121212;
+      --gray2: #202020;  
+      --gray3: #282828;
+      --gray4: #363636;
+      --gray7: #666;
     }
 
     * {
@@ -41,7 +40,7 @@
       font-family: sans-serif, sans;
       padding: 0;
       margin: 0;
-      background: color-mix(in lch, var(--bg) 90%, var(--fg));
+      background: var(--bg);
       color: var(--fg);
     }
 
@@ -66,7 +65,7 @@
       justify-content: space-between;
     }
 
-    body, #prompt {
+    body, .prompt * {
       font-size: calc(1rem * var(--font-scale));
     }
 
@@ -111,20 +110,20 @@
     }
 
     .input:hover {
-      background: color-mix(in lch, var(--bg) 75%, var(--fg));
+      background: var(--gray3);
     }
 
     .input:active {
-      background: color-mix(in lch, var(--bg) 65%, var(--fg));
+      background: var(--gray2);
     }
 
     .input, .output {
-      background: color-mix(in lch, var(--bg) 85%, var(--fg));
+      background: var(--gray2);
     }
 
-    .output {
-      background: color-mix(in lch, var(--bg) 80%, var(--fg));
-      color: color-mix(in lch, var(--bg) 20%, var(--fg));
+    .input .output {
+      background: var(--gray0);
+      color: var(--fg);
     }
 
     .error {
@@ -139,8 +138,8 @@
     .btn {
       display: inline;
       border-radius: 0.5em;
+      color: var(--gray7);
 
-      color: color-mix(in lch, var(--fg) 75%, var(--bg));
       font-size: 1.2em;
       font-weight: bold;
 
@@ -164,21 +163,22 @@
     .dropup-content {
       display: none;
       position: absolute;
-      background-color: color-mix(in lch, var(--fg) 50%, var(--bg));
+      background-color: var(--gray2);
       bottom: 0;
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
       padding: 0em 1em;
-      z-index: 1;
+      z-index: 1000;
     }
 
     .dropup-content a {
-      color: color-mix(in lch, var(--fg) 75%, var(--bg));
+      color: var(--fg);
+      opacity: 50%;
       font-weight: bold;
       text-decoration: none;
     }
 
     .dropup-content a:hover {
-      color: var(--fg);
+      opacity: 100%;
     }
 
     .dropup:hover .dropup-content {
@@ -215,7 +215,17 @@
       -webkit-mask-position: 50% 50%;
       mask-position: 50% 50%;
 
-      background-color: color-mix(in lch, var(--fg) 75%, var(--bg));
+      background-color: var(--gray7);
+    }
+
+    .dark .i-mode {
+      -webkit-mask-image: url("../img/sun.svg");
+      mask-image: url("../img/sun.svg"); 
+    }
+
+    .light .i-mode {
+      -webkit-mask-image: url("../img/moon.svg");
+      mask-image: url("../img/moon.svg");
     }
 
     .i-moon {
@@ -248,26 +258,55 @@
       mask-image: url("../img/translate.svg");
     }
 
-    #prompt {
+    .prompt-input-container {
+      position: relative;  
+    }
+
+    .prompt-input, .prompt-highlight {
       box-sizing: border-box;
       font-family: monospace, mono;
       line-height: 1.4em;
       width: 100%;
       resize: vertical;
 
-      background: var(--bg);
+      background: var(--gray1);
       color: var(--fg);
 
       border-radius: 1em;
-      border: 0.2em solid color-mix(in lch, var(--bg) 85%, var(--fg));
+      border-width: 0.2em;
+      border-style: solid;
+      border-color: var(--gray2);
       padding: 1em;
     }
 
-    #prompt:focus {
-      outline: 0;
-      border-color: color-mix(in lch, var(--bg) 70%, var(--fg));
+    .prompt {
+      margin-top: auto;
+    }
+
+    .prompt-highlight {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      padding-top: 0.7em;
+      z-index: -1000;
     }
 
-    #prompt::-webkit-scrollbar {
+    .prompt-input {
+      position: relative; 
+      color: transparent !important;
+      caret-color: var(--fg) !important;
+      background: transparent !important;
+      border-color: transparent !important;
+    }
+
+    .prompt-input::-webkit-scrollbar {
       display: none;
     }
+
+    .prompt-input:focus {
+      outline: 0;
+    }
+
+    .prompt-input:focus + .prompt-highlight {
+      border-color: var(--gray4);
+    }