Looks very interesting!! Would be really nice to see the video streaming demo of it.
A side question: you are actively using in examples a syntax that was introduced recently:
result = buildHtml(tdiv):
Interesting to know what : in the end does exactly and how to take advantage of it in your own code base.
@Araq This is awesome library to develop single page applications.
I need to develop some page together with a js api library for maps (e.g: here maps, google maps or open street map) and one div element works as a map container into it map library generates map tiles, map objects and so on. Is it possible to define for some div element an option like "no-diffing" because the process "virtual DOM diffing" regulary compares vdom and html dom and find some errors for this container.
Or can you please recommend me other way to resolve this issue... Thanks.
@Araq thank you for help. I tried to wrap my map container into component. Unfortunately I make something wrong:
include karax / prelude
import karax / vstyles
import dom
import jsffi except `&`
var
errmsg = kstring""
console* {. importc, nodecl .}: JsObject
H* {. importc, nodecl .}: JsObject
type Credential* = ref object of JsObject
app_id*, app_code*: cstring
type MapComponent* = ref object of VComponent
app_id: cstring
app_code: cstring
proc renderMap(x: VComponent): VNode =
echo "start renderMap"
let self = MapComponent(x)
let style = style(
(StyleAttr.height, cstring"600px"),
(StyleAttr.width, cstring"800px"))
result = buildHtml(tdiv(class="mapContainer", style=style)):
discard
proc newMap*(): MapComponent =
result = newComponent(MapComponent, renderMap)
proc createDom(): VNode =
result = buildHtml(tdiv):
button:
proc onclick(ev: karax.Event; n: VNode) =
errmsg = ""
text "Click me to reproduce error. See in developer tool of browser"
tdiv:
newMap()
text errmsg
proc preRender() =
let headEl = document.getElementsByTagName("head")[0]
let mapCoreJs = document.createElement("script")
let mapSrvJs = document.createElement("script")
let mapEvtJs = document.createElement("script")
mapCoreJs.setAttribute("src", "http://js.cit.api.here.com/v3/3.0/mapsjs-core.js")
mapSrvJs.setAttribute("src", "http://js.cit.api.here.com/v3/3.0/mapsjs-service.js")
mapEvtJs.setAttribute("src", "http://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js")
headEl.appendChild(mapCoreJs)
discard window.setTimeout(proc () =
headEl.appendChild(mapSrvJs)
headEl.appendChild(mapEvtJs)
, 500)
proc postRender() =
proc initMap() =
var platform = jsnew H.service.Platform(Credential{ app_id: "LCaupECE0hjCyyaVoSBt", app_code: "laFQjWV5ZXkULYYFcXieJw" })
var defaultLayers = platform.createDefaultLayers()
let map = jsnew H.Map(
document.querySelector(".mapContainer"),
defaultLayers.normal.map)
var behavior = jsnew H.mapevents.Behavior(jsnew H.mapevents.MapEvents(map))
map.setZoom(2)
discard window.setTimeout(initMap, 1000)
preRender()
setRenderer(createDom, clientPostRenderCallback = postRender)
compiled with tool/karun