Incorporate a javascript library into a Genie.jl app

Specific Domains Web Stack
,
1

How would I add the JavaScript library X6 into a Stipple app? There are no vue components for this library, just pure JavaScript.

Do I have to put that into the js-methods macros e.g. @methods?

Is there a way to include a js-file, so that I at least have propper syntax highlighting?
Or is the correct way to make a module that extends Stipple.jl?

1 Like
2

What I have so far:
app.jl

module App
using GenieFramework
@genietools

# asset from: https://unpkg.com/@antv/x6/dist/index.js
const assets_config = Genie.Assets.AssetsConfig(package="App.jl")
Genie.Router.route(Genie.Assets.asset_route(assets_config, :js, file="x6.min")) do
    Genie.Renderer.WebRenderable(
        Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, ".")), type="js", file="x6.min")),
        :javascript) |> Genie.Renderer.respond
end
x6_deps() = [
    Genie.Renderer.Html.script(src="$(Genie.Assets.asset_path(assets_config, :js, file="x6.min"))")
]
Stipple.deps!(@__MODULE__, x6_deps)

@created(read("main.js", String)) 

@page("/", "app.jl.html")

main.js

// Create an instance of Graph.
const graph = new X6.Graph({
    container: document.getElementById('graph_container'),
    grid: true
})

// Render source node.
const source = graph.addNode({
    x: 300,
    y: 40,
    width: 80,
    height: 40,
    label: 'Hello',
})

// Render target node.
const target = graph.addNode({
    x: 420,
    y: 180,
    width: 80,
    height: 40,
    label: 'World',
})

// Render edge from source to target.
graph.addEdge({
    source,
    target,
})

app.jl.html

<div>
    <div class="graph" id="graph_container" style="width: 600px; height: 400px;"></div>
</div>

However it does not work.
Somehow the graph_container div has zero width and zero height and only the placeholder is in it:
image

Running the contents of main.js in the console and setting the width and height of the div correctly results in a working example, though.

image