editor.nim

when defined js:
  import 
    asyncjs, jsconsole, jsffi, 
    karax / [karax, kdom, karaxdsl, vdom, compact]

  const id = "editor"

  type
    Editor = ref object of VComponent
      initialized: bool

    MinimapOption = ref object of JsObject
      enabled: bool

    EditorOptions = ref object of JsObject
      fontWeight: cstring
      language: cstring
      minimap: MinimapOption
      renderLineHighlight: cstring
      scrollbar: JsObject
      theme: cstring
      value: cstring

  let monaco = require("monaco-editor")

  proc registerLanguages*() =
    monaco.editor.defineTheme(cstring"fiddle-theme", JsObject{
      base: cstring"vs-dark",
      inherit: true,
      rules: [
        JsObject{ token: cstring"custom-info", foreground:cstring"d4d4d4" },
        JsObject{ token: cstring"custom-warn", foreground: cstring"ff9900" },
        JsObject{ token: cstring"custom-error", background:cstring"00ff00", foreground: cstring"ff0000", fontStyle: cstring"bold" }
      ]
    })

    # var response = await importFromPath(cstring"../../lib/lib.es6.d.ts")
    # monaco.languages.typescript.typescriptDefaults.addExtraLib(await response.text());

    # response = await importFromPath(cstring"../../lib/fiddle.d.ts")
    # monaco.languages.typescript.typescriptDefaults.addExtraLib(await response.text());

    # monaco.languages.typescript.typescriptDefaults.setCompilerOptions(JsObject{ noLib: true, allowNonTsExtensions: true });
    # monaco.languages.typescript.javascriptDefaults.setCompilerOptions(JsObject{ noLib: true, allowNonTsExtensions: true });
  
  proc initialize(e: VComponent) =
    let ele = kdom.getElementById(id)

    monaco.editor.create(
      ele, 
      EditorOptions(
        fontWeight: cstring"bold",
        minimap: MinimapOption{enabled: false},
        renderLineHighlight: cstring"none",
        theme: cstring"fiddle-theme",
        scrollbar: JsObject{
          vertical: false
        },
        value: cstring"""
        function x() {
          console.log("Hello world!");
        }
        """,
        language: "javascript"
      )
    )
    
    (e.Editor).initialized = true

  proc render*(e: VComponent): VNode =
    result = buildHtml(tdiv):
      tdiv(id = "editor")
  
  proc editor*(): Editor =
    result = newComponent(Editor, render, initialize)
      

header.nim

when defined js:
  import karax / [karax, karaxdsl, vdom]

  type
    Header = ref object of VComponent

  proc render*(h: VComponent): VNode =
    result = buildHtml(tdiv):
      nav(class = "flex items-center justify-between flex-wrap bg-nim-purp p-6"):
        tdiv(class = "flex items-center flex-no-shrink text-white mr-6"):
          span(class = "logo font-semibold text-xl text-nim-yellow tracking-tight"):
            text("Nim Playground")
        tdiv(class = "w-full block flex-grow lg:flex lg:items-center lg:w-auto"):
          tdiv(class = "text-sm lg:flex-grow"):
            span(class = "fas fa-code-branch mr-2 text-white")
            a(href = "#responsive-header", class = "block no-underline hover:underline mt-4 lg:inline-block lg:mt-0 text-nim-gray hover:text-white mr-4"):
              text("Fork")
            span(class = "fab fa-github mr-2 text-white")
            a(href = "#responsive-header", class = "block no-underline hover:underline mt-4 lg:inline-block lg:mt-0 text-nim-gray hover:text-white mr-4"):
              text("Create Gist")
            span(class = "fas fa-download mr-2 text-white")
            a(href = "#responsive-header", class = "block no-underline hover:underline mt-4 lg:inline-block lg:mt-0 text-nim-gray hover:text-white mr-4"):
              text("Download")
            span(class = "fas fa-share-alt mr-2 text-white")
            a(href = "#responsive-header", class = "block no-underline hover:underline mt-4 lg:inline-block lg:mt-0 text-nim-gray hover:text-white mr-4"):
              text("Share")
            span(class = "fas fa-coffee mr-2 text-white")
            a(href = "#responsive-header", class = "block no-underline hover:underline mt-4 lg:inline-block lg:mt-0 text-nim-gray hover:text-white mr-4"):
              text("Compile")
            span(class = "fas fa-angle-double-right mr-2 text-white")
            a(href = "#responsive-header", class = "block no-underline hover:underline mt-4 lg:inline-block lg:mt-0 text-nim-gray hover:text-white mr-4"):
              text("Run")
            span(class = "fas fa-coffee text-white mr-1")
            span(class = "fas fa-plus fa-xs text-white mr-1")
            span(class = "fas fa-angle-double-right mr-2 text-white")
            a(href = "#responsive-header", class = "block no-underline hover:underline mt-4 lg:inline-block lg:mt-0 text-nim-gray hover:text-white"):
              text("Compile & Run")
  
  proc header*(): Header =
    newComponent(Header, render)

playground.nim

when defined js:
  import 
      karax / [karax, karaxdsl, vdom, kdom],
      playgroundpkg/components/[header, editor]

  proc render(): VNode =
    result = buildHtml(tdiv):
      header()
      editor()

  setRenderer render, "playground"