Generate Javascript targeting component div #371

kerrycobb · 2024-11-05T22:32:26Z

kerrycobb
Nov 5, 2024

I'm hoping I could get some guidance on accomplishing something like this:

import happyx
import jsffi

type
  Map* = ref object of JsObject
  MapOptions* = ref object of JsObject
proc newMapOptions*(): MapOptions {.importcpp: "Object.create(null)".}
proc `container=`*(opts: MapOptions, container: cstring) {.importcpp: "#.container = #".}
proc `style=`*(opts: MapOptions, style: cstring) {.importcpp: "#.style = #".}
proc newMap*(options: MapOptions): Map {.importcpp: "new maplibregl.Map(@)".}

component Maplibre:
  html:
    tDiv(class = "w-full", id="map")
    @created:
      buildJs:
        let opts = newMapOptions()
        opts.container = "map" 
        opts.style = "https://demotiles.maplibre.org/style.json"
        var map = newMap(opts)

What I expect to happen is for maplibre to place a map within the div associated with the Maplibre component. How can I create an empty div and then build some Javascript code that modifies the div?

Answered by Ethosa

Nov 7, 2024

div id in the rendered html is map{self.uniqCompId}

yea ... please, try

tDiv(id=nu"map")

View full answer

Ethosa · 2024-11-06T02:42:38Z

Ethosa
Nov 6, 2024
Maintainer

@kerrycobb since latest commit use it please:

import happyx
import jsffi

type
  Map* = ref object of JsObject
  MapOptions* = ref object of JsObject
proc newMapOptions*(): MapOptions {.importcpp: "Object.create(null)".}
proc `container=`*(opts: MapOptions, container: cstring) {.importcpp: "#.container = #".}
proc `style=`*(opts: MapOptions, style: cstring) {.importcpp: "#.style = #".}
proc newMap*(options: MapOptions): Map {.importcpp: "new maplibregl.Map(@)".}

component Maplibre:
  html:
    tDiv(class = "w-full", id="map")
  @created:
    buildJs:
      let opts = newMapOptions()
      opts.container = "map" 
      opts.style = "https://demotiles.maplibre.org/style.json"
      var map = newMap(opts)
      var mapElement = document.querySelector("#map")

or this:

import happyx
import jsffi

type
  Map* = ref object of JsObject
  MapOptions* = ref object of JsObject
proc newMapOptions*(): MapOptions {.importcpp: "Object.create(null)".}
proc `container=`*(opts: MapOptions, container: cstring) {.importcpp: "#.container = #".}
proc `style=`*(opts: MapOptions, style: cstring) {.importcpp: "#.style = #".}
proc newMap*(options: MapOptions): Map {.importcpp: "new maplibregl.Map(@)".}

component Maplibre:
  html:
    tDiv(class = "w-full", id="map")
  @created:
    {.emit: """//js
    let opts = newMapOptions()
    opts.container = "map" 
    opts.style = "https://demotiles.maplibre.org/style.json"
    var map = newMap(opts)
    """.}
    let mapElement = document.querySelector("#map")

@created event called once after component rendered into HTML

0 replies

kerrycobb · 2024-11-07T05:55:05Z

kerrycobb
Nov 7, 2024
Author

Thanks for the help! Unfortunately I was not able to make it work using commit 8d583fd.

I started with a fresh project using the create command and changed only index.html and hello_world.nim .

# index.html

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style> 
  </head>
  <body>
    <div id="app">
      <div id="map"></div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

# hello_world.nim

import jsffi
import happyx

proc newMapOptions*(): JsObject {.importcpp: "Object.create(null)".}
proc `container=`*(opts: JsObject, container: cstring) {.importcpp: "#.container = #".}
proc `style=`*(opts: JsObject, style: cstring) {.importcpp: "#.style = #".}
proc newMap*(options: JsObject): JsObject {.importcpp: "new maplibregl.Map(@)".}

component HelloWorld:
  html:
    tDiv(id="map")
  @created:
    buildJs:
      let opts = newMapOptions()
      opts.container = "map"
      opts.style = "https://demotiles.maplibre.org/style.json"
      var map = newMap(opts)

That doesn't produce the map. But if I compile that code with nim js and put that into main.js it works. I also noticed that the div id in the rendered html is map{self.uniqCompId} which I don't believe is a valid id.

1 reply

Ethosa Nov 7, 2024
Maintainer

div id in the rendered html is map{self.uniqCompId}

yea ... please, try

tDiv(id=nu"map")

Answer selected by kerrycobb

kerrycobb · 2024-11-07T15:33:13Z

kerrycobb
Nov 7, 2024
Author

Thanks! I also needed to remove the buildJs call. I was misunderstanding the function of that.

Working example for anyone finding this:

import jsffi
import happyx

proc newMapOptions*(): JsObject {.importcpp: "Object.create(null)".}
proc `container=`*(opts: JsObject, container: cstring) {.importcpp: "#.container = #".}
proc `style=`*(opts: JsObject, style: cstring) {.importcpp: "#.style = #".}
proc newMap*(options: JsObject): JsObject {.importcpp: "new maplibregl.Map(@)".}

component HelloWorld:
  html:
    tDiv(id=nu"map")
  @created:
    let opts = newMapOptions()
    opts.container = "map"
    opts.style = "https://demotiles.maplibre.org/style.json"
    var map = newMap(opts)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Generate Javascript targeting component div #371

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Generate Javascript targeting component div #371

kerrycobb Nov 5, 2024

Replies: 3 comments · 1 reply

Ethosa Nov 6, 2024 Maintainer

kerrycobb Nov 7, 2024 Author

Ethosa Nov 7, 2024 Maintainer

kerrycobb Nov 7, 2024 Author

kerrycobb
Nov 5, 2024

Replies: 3 comments 1 reply

Ethosa
Nov 6, 2024
Maintainer

kerrycobb
Nov 7, 2024
Author

Ethosa Nov 7, 2024
Maintainer

kerrycobb
Nov 7, 2024
Author