feat(js): browser (karax) repl

Author: litlighilit

Python/cpython.nim

@@ -12,7 +12,7 @@ import ../Parser/[lexer, parser]
 import ../Objects/bundle
 import ../Utils/[utils, compat, getplatform]
 
-proc getVersionString(verbose=false): string =
+proc getVersionString*(verbose=false): string =
   result = "NPython "
   if not verbose:
     result.add Version

Python/karaxpython.nim

@@ -1,11 +1,6 @@
 {.used.}
 
 import std/strutils
-proc subsNonbreakingSpace(s: var string) =
-  ## The leading space, if with following spaces, in on contenteditable element
-  ## will become `U+00A0` (whose utf-8 encoding is c2a0)
-  s = s.replace("\xc2\xa0", " ")
-
 import ./cpython
 
 import ../Utils/compat
@@ -14,6 +9,11 @@ import ./lifecycle
 import ../Objects/frameobject
 import ../Parser/[lexer, parser]
 pyInit(@[])
+proc subsNonbreakingSpace(s: var string) =
+  ## The leading space, if with following spaces, in on contenteditable element
+  ## will become `U+00A0` (whose utf-8 encoding is c2a0)
+  s = s.replace("\xc2\xa0", " ")
+
 
 var finished = true
 var rootCst: ParseNode
@@ -26,35 +26,76 @@ proc interactivePython(input: string): bool {. exportc, discardable .} =
     lexerInst.clearIndent
   return parseCompileEval(input, lexerInst, rootCst, prevF, finished)
 
-const prompt = ">>> "
+let info = getVersionString(verbose=true)
 
 include karax/prelude
 import karax/kdom
+import karax/vstyles
+
+var prompt: kstring
+
+let
+  suitHeight = (StyleAttr.height, kstring"wrap-content") # XXX: still too height
+  preserveSpaces = (whiteSpace, kstring"pre") # ensure spaces remained
+  monospace = (StyleAttr.font_family, kstring"monospace")
+template oneReplLineNode(editable: static[bool]; promptExpr, editExpr): VNode{.dirty.} =
+  buildHtml:
+    tdiv(class="line", style=style(
+        (display, kstring"flex"),   # make children within one line
+        suitHeight,
+    )):
+      p(class="prompt" , style=style(
+          suitHeight, monospace, preserveSpaces,
+      )):
+        promptExpr
+
+      p(class="edit", contenteditable=editable, style=style(
+        (flex, kstring"1"),  # without this, it becomes uneditable
+        (border, kstring"none"),
+        (outline, kstring"none"),
+        suitHeight, monospace, preserveSpaces,
+      )):
+        editExpr
+# TODO: arrow-up / arrow-down for history
+const historyContainerId = "history-container"
+proc pushHistory(prompt: kstring, exp: string) =
+  stream.add (prompt, kstring exp)
+
+  # auto scroll down when the inputing line is to go down the view
+  let historyNode = document.getElementById(historyContainerId)
+  let last = historyNode.lastChild
+  if last.isNil: return
+  last.scrollIntoView(ScrollIntoViewOptions(
+    `block`: "start", inline: "start", behavior: "instant"))
 
 proc createDom(): VNode =
   result = buildHtml(tdiv):
-    tdiv(class="stream"):
-      echo stream.len
+    tdiv(class="header"):
+      p(class="info"):
+        text info
+    tdiv(class="stream", id=historyContainerId):
       for line in stream:
         let (prompt, content) = line
-        tdiv(class="line"):
-          p(class="prompt"):
-            if prompt.len == 0:
-              text kstring" "
-            else:
-              text prompt
-          p:
-            text content
-    tdiv(class="line editline"):
-      p(class="prompt"):
-        text prompt
-      p(class="edit", contenteditable="true"):
-        proc onKeydown(ev: Event, n: VNode) =
-          if KeyboardEvent(ev).keyCode == 13:
-            var input = $n.dom.textContent
-            input.subsNonbreakingSpace
-            interactivePython(input)
-            n.dom.innerHTML = kstring""
-            ev.preventDefault
+        tdiv(class="history"):
+          oneReplLineNode(false,
+            text prompt, text content
+          )
+    oneReplLineNode(true, block:
+      prompt = if finished:
+        kstring">>> "
+      else:
+        kstring"... "
+      text prompt
+    ,
+    block:
+      proc onKeydown(ev: Event, n: VNode) =
+        if KeyboardEvent(ev).keyCode == 13:
+          var input = $n.dom.textContent
+          input.subsNonbreakingSpace
+          pushHistory(prompt, input)
+          interactivePython(input)
+          n.dom.innerHTML = kstring""
+          ev.preventDefault
+    )
 
 setRenderer createDom

Utils/compat.nim

@@ -8,8 +8,7 @@ when defined(js):
   when dKarax:
     include karax/prelude
     var stream*: seq[(kstring, kstring)]
-    proc log*(prompt, info: cstring) {. importc .}
-    
+
   import std/jsffi
 
   when defined(nodejs):