nimforum mirror - Karax problem using getVNodeById

wiltzutm (orginal) [2020-05-29T14:06:18+02:00] view original

Nim and static type noob here. So the problem is when I compile my code and run it in browser, fill the name and description fields and click add thing button, my browser console gives following cryptic runtime errors:


  TypeError: c_225079 is null quicktest.js:579:16
    cstrToNimstr quicktest.js:579
    HEX24_10841036 quicktest.js:2878
    HEX3Aanonymous_10850242 quicktest.js:3172
    wrapper_10750162 quicktest.js:3049
    HEX3Aanonymous_10190109 quicktest.js:1234

I cannot interpret the error given, it seems that the error has something to do with the cstring -> string transformation. I've isolated the problem somewhat to the handler proc actionAddThing and the getVNodeById karax procedure. When I substitute the name and desc values into something more static eg. "foo" and "bar" the script works. (well of course I cannot capture user inputs but anyways...)

Here is the rather verbose code (sorry it's already pretty stripped version of the original code) with some commenting of my intents:

include karax/prelude

# These are used in the html text input field's id:
const
    IdInputThingName: kstring = "inputThingName"
    IdInputThingDesc: kstring = "inputThingDesc"


type
    Thing = ref object
        uid: kstring
        name: kstring
        desc: kstring


proc `$`(t: Thing): string =
    return "Thing(uid=" & $t.uid & ", name=" & $t.name & ", desc=" & $t.desc & ")"

# Some getters for thing, after creating the thing, it's attributes shouldn't
# be edited.
proc getName*(thing: Thing): kstring =
    return thing.name


proc getUid*(thing: Thing): kstring =
    return thing.uid


proc getDesc*(thing: Thing): kstring =
    return thing.desc


proc newThing(uid, name, desc: kstring): Thing =
    result = Thing(uid: uid, name: name, desc: desc)


# proc which returns the thing factory with the id initialised to zero.
# the returned closure factory will increment the id everytime the thing
# is created and passes the uid to Thing constructor.
proc thingBuilder(): proc(name, desc: kstring): Thing =
    var nextId = 0
    return proc (name, desc: kstring): Thing =
        nextId.inc()
        result = newThing("uid-" & $nextId, name, desc)

# Creating the global factory:
let thingFactory = thingBuilder()


# App state and related procs/methods
type
    AppState = ref object
        things: seq[Thing]


proc newAppState(): AppState =
    # Default init is empty things list:
    result = AppState(things: @[])


# Should modify the existing app state and it's
# things list by adding the given thing into the list.
proc addThing*(self: var AppState, t: Thing) =
    self.things.add(t)


# Getter for the things list in app state.
# Not sure if it's making copies or not?
proc getAllThings*(self: AppState): seq[Thing] =
    result = @[]
    for t in self.things:
        result.add(t)


# Handler for clicking the button. Should read the
# text input field's (created in the makeControls proc) texts and create
# the thing using the thingFactory. After this it should add the created
# thing into the app state's thing list.
proc actionAddThing(state: var AppState): proc() =
    return proc() =
        # These doesn't work, why?!
        let name = getVNodeById(IdInputThingName).value()
        let desc = getVNodeById(IdInputThingDesc).value()
        # If I substitute name and desc with "foo" and "bar"
        # this works. WTF!? Why I cannot get the values in those nodes?
        # let name = kstring("foo")
        # let desc = kstring("bar")
        
        # Create the thing based on the given name and desc:
        let thing = thingFactory(name, desc)
        
        echo("Thing created: ", $thing)
        # Add the created thing into app state's thing list:
        state.addThing(thing)
        echo $state.getAllThings()


# Supposed to return odd string if the given number is
# odd and even if even...duh. String is used when making
# things and added into their class attribute.
proc evenOdd(idx: int): kstring =
    if idx %% 2 != 0:
        return "even"
    return "odd"


# Make/render the thing list based on the given sequence:
proc makeThingList(tlist: seq[Thing]): VNode =
    result = buildHtml(tdiv(class="thing-list")):
        for idx, th in tlist:
            tdiv(id=th.uid, class="thing " & evenOdd(idx)):
                text kstring($th)


# Make/render the controls button and the text inputs
# necessary to create new thingies:
proc makeControls(state: var AppState): VNode =
    result = buildHtml(tdiv(class="controls")):
        label(`for`=IdInputThingName):
                text "Thing Name: "
        input(`type`="text", id=IdInputThingName, placeholder=kstring("Input the thing name here..."))
        label(`for`=IdInputThingDesc):
            text "Thing Description: "
        input(`type`="text", id=IdInputThingDesc, placeholder=kstring("Input the thing desc here..."))
        button(onclick=actionAddThing(state)):
            text "Add Thing"


# Make/render the whole dom (return closure for karax):
proc createDom(state: var AppState): proc(): VNode =
    return proc(): VNode =
        result = buildHtml(tdiv(id="things-are-dope")):
            makeThingList(state.getAllThings())
            makeControls(state)



when isMainModule:
    # Initialize app state as variable because I want to change it's insides later
    # (this is probably a bad idea...)
    var state = newAppState()
    
    # Add few things into the app state's list of things:
    state.addThing(thingFactory("Thing A", "Desc about Thing A"))
    state.addThing(thingFactory("Thing B", "Desc about Thing B"))
    state.addThing(thingFactory("Thing C", "Desc about Thing C"))
    
    # Now we are ready to create the DOM:
    setRenderer createDom(state)

I'm hopeful that this isn't again in the series of stupid questions... :)

Mirror of forum.nim-lang.org

6389 :: Karax problem using getVNodeById