Incorporate a javascript library into a Genie.jl app

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

What I have so far:

module App
using GenieFramework

# asset from:
const assets_config = Genie.Assets.AssetsConfig(package="App.jl")
Genie.Router.route(Genie.Assets.asset_route(assets_config, :js, file="x6.min")) do
        Genie.Assets.embedded(Genie.Assets.asset_file(cwd=normpath(joinpath(@__DIR__, ".")), type="js", file="x6.min")),
        :javascript) |> Genie.Renderer.respond
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")


// 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.


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

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

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.