IndexDefect on array

[andrealicheri]

I have the following code:

include karax / prelude
include karax/vstyles
include karax/kdom

var lines: seq[kstring] = @[]

proc addToArray() =
  var element = getElementById("input")
  var item = element.value
  lines.add($item)
proc main(): VNode =
  result = buildHtml(tdiv):
    tdiv(style = "display: flex; padding = 10%".toCss):
      input(type = "input", style = "margin: 1%; border-radius: 25px; border-style: solid; border-color: aquamarine; width: 60%".toCss)
      button(onclick = addToArray, style = "margin: 1%; border-radius: 50px; background-color: red; border-style: solid; border-color: black; width: 40%; color: white".toCss):
        text("Add")
    for x in lines:
      tdiv:
        label:
          text($x)
          input(type = "checkbox")

setRenderer(main)

I do not get any error at compile time, however on Firefox 111 I get the following error:

Uncaught Error: Error: unhandled exception: index 1 not in 0 .. 0 [IndexDefect]
Traceback (most recent call last)
C:\Users\alich\.nimble\pkgs\karax-1.2.3\karax\karax.nim(712) at init.:anonymous
C:\Users\alich\.nimble\pkgs\karax-1.2.3\karax\karax.nim(660) at karax.dodraw
C:\Users\alich\.nimble\pkgs\karax-1.2.3\karax\karax.nim(740) at setRenderer.wrapRenderer
C:\Users\alich\coding\personal\nim\app.nim(13) at app.main
C:\Users\alich\.nimble\pkgs\karax-1.2.3\karax\vstyles.nim(315) at app.toCss
    unhandledException file:///C:/Users/alich/coding/personal/nim/app.js:5452
    raiseException file:///C:/Users/alich/coding/personal/nim/app.js:1267
    raiseIndexError file:///C:/Users/alich/coding/personal/nim/app.js:5263
    chckIndx file:///C:/Users/alich/coding/personal/nim/app.js:1188
    toCss_452985289 file:///C:/Users/alich/coding/personal/nim/app.js:7678
    main_452985436 file:///C:/Users/alich/coding/personal/nim/app.js:7820
    wrapRenderer_620758125 file:///C:/Users/alich/coding/personal/nim/app.js:7305
    dodraw_620757930 file:///C:/Users/alich/coding/personal/nim/app.js:7161
    HEX3Aanonymous_620757995 file:///C:/Users/alich/coding/personal/nim/app.js:7221
    init_620757993 file:///C:/Users/alich/coding/personal/nim/app.js:7230
    setRenderer_620758006 file:///C:/Users/alich/coding/personal/nim/app.js:7288
    setRenderer_620758118 file:///C:/Users/alich/coding/personal/nim/app.js:7330
    <anonymous> file:///C:/Users/alich/coding/personal/nim/app.js:7888

[geotre]

The problem is in this code:

"display: flex; padding = 10%".toCss

You have written = instead of : in the second rule. I have just PR'd a change that will give a better error message for this case in the future.

It isn't caught at compile time because toCss is a runtime procedure

[geotre]

related, ideally toCss would be done at compile time

[andrealicheri]

Ok, thanks for the help