Re: Introducing the Karax framework

[alexsad]

@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_