Re: Exporting json objects to Javascript, how can I make this code more terse?

[hiteshjasani]

Some more research turned up a macro in jsffi that works the way I want. Here's 
the improved code.


import jsffi

type
  Person = ref object of JsObject
name: cstring
val: int
lang: cstring
  
  Rec = ref object of JsObject
name: cstring
val: int

let obj1 {.exportc: "obj1".} = Rec{
  friends: [
Person{
  val: 19,
  name: "wendy",
  lang: "nim"
}
  ],
  name: "sam",
  val: 21
}

var myobj1 {.exportc: "myobj1".} = obj1


Run

Exporting json objects to Javascript, how can I make this code more terse?

[hiteshjasani]

I'm trying to create a json object that is exported and available to other 
Javascript libraries. Here's a trivial example below. The code below works, I 
can generate the js file, access the exported vars in the browser js console 
and it works with my other library.

But I wish it weren't so verbose. My real json objects will be much larger, 
more deeply nested and have many more variations in format. I really like the 
%* macro in the json module, but the js it generates is not in a format that 
other libraries can use.

How can this be improved?


import jsffi

# {
#   "friends": [
# {
#   "val": 19,
#   "name": "wendy",
#   "lang": "nim"
# }
#   ],
#   "name": "sam",
#   "val": 21
# }

proc makeObj1(): JsObject =
  result = newJsObject()
  result.val = 19
  result.name = cstring"wendy"
  result.lang = cstring"nim"

proc makeObj2(): JsObject =
  result = newJsObject()
  result.friends = [
makeObj1()
  ]
  result.name = cstring"sam"
  result.val = 21

var myobj2 {.exportc: "myobj2".} = makeObj2()


Run

Re: Initializing a page with data from backend in Karax

[hiteshjasani]

Top level function calls run once, whereas each function called from the 
renderer will be called multiple times. So I put any single calls at the end. 
The redrawSync ensures that the DOM elements have been created so the data that 
comes back has a place to be rendered.


setRenderer createDom

redrawSync()
kajax.ajaxGet( ... )


Run

Re: New GUI Framework

[hiteshjasani]

Looks cool. Thanks for sharing.

I couldn't tell from the docs, does it package the GTK deps in with the 
executable? Do we get a self-contained package at the end? 

Re: Karax: Change element value

[hiteshjasani]

Here's a better example. It's modified from some code I'm working on but should 
work. The H1 will update automatically as you type characters into the text 
field. The text field itself actually won't update without us explicitly 
changing its value using setInputText(). Not sure if that's intended behavior 
or a bug.


from strutils import toUpper
include karax / prelude

var myText = ""

proc createDom(): VNode =
result = buildHtml(tdiv):
h1: text myText
input(value = myText):
proc onkeyup(ev: Event, n: VNode) =
myText = toUpper($n.value())
n.setInputText(myText)

setRenderer createDom


Run

Re: Karax: Change element value

[hiteshjasani]

Don't know if this is the proper way to do it, but you can get/set the 
innerHTML.


let n = getVNodeById("changeName")
echo n.innerHTML
n.innerHTML = kstring("my new string")


Run

Re: Nim based Github Actions

[hiteshjasani]

Great idea. Just added it.

Re: how to integrate existing react components in karax?

[hiteshjasani]

Rewriting React components in Karax is less than optimal given how small the 
Nim community is and how quick the Web changes. We need to figure out how to 
leverage the large frontend codebases already out there.

Re: db_mysql: how to get column name?

[hiteshjasani]

Your question was unclear.

I would take a look at the code for [instantRows 
iterator](https://github.com/nim-lang/Nim/blob/master/lib/impure/db_mysql.nim#L187)
 and do something similar with the addition of calling 
[fetch_fields](https://nim-lang.org/docs/mysql.html#fetch_fields%2CPRES) to get 
field information from the result set and returning a data structure that 
includes field names and row results. 

Re: db_mysql: how to get column name?

[hiteshjasani]

If you know the table name being used in the stored procedure, then you can 
query the information_schema to get column names.


SELECT *
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_SCHEMA = 'foo' AND TABLE_NAME ='bar';


Run

Re: Anyone using D3.js?

[hiteshjasani]

Thanks for the links -- they were very helpful!

It's in the early stages, but I've got some things working with D3 now. Check 
out 
[https://github.com/hiteshjasani/nim-d3](https://github.com/hiteshjasani/nim-d3)
 for the code and examples.

As an aside, I really want to thank @araq and others who were involved in 
making generics. They really helped with binding statically typed nim with 
dynamically typed javascript. I didn't have to write a bunch of redundant 
boilerplate code matching types -- so thank you!

Confused with async compile error

[hiteshjasani]

The following code generates a compile error and I'm confused as to why. Why 
doesn't the await keyword give me a string to work with in this case?


import asyncdispatch

proc fa(i: int): Future[string] =
  var fut = newFuture[string]("fa")
  fut.complete("fa: " & $i)
  result = fut

proc fb(s: string): Future[string] =
  var fut = newFuture[string]("fb")
  fut.complete("fb: " & s)
  result = fut

proc fc(i: int): Future[string] {.async.} =
  let a = await fa(i)
  result = fb(a)# <-- compile error

when isMainModule:
  echo(waitFor fa(3))
  echo(waitFor fb("main"))
  echo(waitFor fc(3))


Run


b1.nim(13, 35) template/generic instantiation of `async` from here
b1.nim(15, 14) Error: type mismatch: got  but 
expected 'string'


Run

Re: Why does sorting the data mess up this Karax app?

[hiteshjasani]

Yes, that works!

I'm a little familiar with React's "key" prop and was thinking there should be 
something similar in Karax. Not so crazy about using the "id" prop though since 
it has other implications and should be unique for that page. I noticed in the 
code that there is a "key" prop on VComponent that does similar, but I don't 
understand VComponents yet. 

Why does sorting the data mess up this Karax app?

[hiteshjasani]

The following bit of code will work fine as is when the list is unsorted. You 
can add and remove persons as expected.

The problem crops up when we want the list to be sorted. Just adding in sorting 
commands seems to change something that causes the wrong name to be associated 
with the remove action. Any ideas how to fix this problem?

To see the bug, do the following:

  1. Uncomment the call to `sorted` in line **A**
  2. Uncomment the `sort` calls in lines **B** and **C**
  3. Run the app
  4. Add a person named otto
  5. Click the `(x)` next to otto to delete him



Expected:

  * otto is deleted and the list renders the other names in order



Actual:

  * otto is not deleted
  * The person alphabetically after otto is deleted
  * This process is repeated each time you try to delete otto




include karax/prelude
import algorithm, sequtils

var
  people: seq[string] = @["wendy", "sam", "nancy"] #.sorted # line A
  newPersonName = ""

proc mkRemoveAction(person: string): proc() =
  result = proc() =
echo "trying to remove " & person
people = filter(people,
proc(pA: string): bool =
  pA != person)
# sort(people)# line B
echo "people = " & $people

proc createDom(): VNode =
  result = buildHtml(tdiv):
h1: text "Example Bug"
tdiv:
  input(`type` = "input"):
proc onchange(ev: Event, n: VNode) =
  echo "value = " & n.value
  newPersonName = $n.value
  button(`type` = "button"):
text "Add Person"
proc onclick(ev: Event, n: VNode) =
  echo "trying to add person: " & newPersonName
  people.add(newPersonName)
  # sort(people)  # line C
  echo "People = " & $people
ul:
  for x in people:
li:
  text x
  span:
button(`type` = "button", onclick = mkRemoveAction(x)):
  text "(X)"

setRenderer createDom


Run