Learning Web 05: Javascript bundling

Last time I messed about with some divs and did some clicking and highlighting. After I was finished I decided to go looking at what was out there that already did what I want. I found something that’s just it and not based on a framework, but after trying to get it to work I learned that there was a bunch of obstacles I didn’t know about.

I couldn’t just make it open some javascript and have it work. This is a typescript module and apparently does cross-site scripting so needed to be served. Then after I got that going it couldn’t find the import. Well, that’s because I needed to bundle the built output (my simple tests worked because they didn’t use dependencies). So I needed to learn about that and I found some stuff to try.

esbuild

After some other stuff didn’t work out I decided to try this article and see how it goes.

Looks like live-server uses a lot of old and broken stuff. Could be my node version? 11.9.0 – if that’s not the latest then it’s possible the deprecations and security issues reported when you install live-server are because people don’t work on the version I have.

However, I met with great success here. I’m not going to go into a whole lot of detail here, because there’s not a lot beyond the linked to article. However, after getting that setup to work I then switched over to getting the Getting Started for maxGraph. This was pretty easy but I needed to learn that an element in a document doesn’t exist to javascript if it doesn’t exist before that javascript in the document.

I shifted the script tag in the original html down to the bottom of the body and added a div in the document with the graph-container id that is used in the “Getting Started” tutorial code.

What I’m now interested in is how I might test drive this.

… and I’m not really seeing a good way to. The example test that uses jest doesn’t really do anything and the tests in the code itself also seem like they may be of questionable utility. I analyzed the resulting pages in the demos with the browser’s inspector and nothing really has any way to id it so I can’t tell selenium, or whatever, how to find any of the individual items in the diagram.

But I’m glad I learned how to do this because now I have some idea of how frontend projects get built and deployed now. I can work with this as a base to move forward.

Playing with svg

How hard is it to replicate my canvas stuff with svg instead and can I use it to do stuff like put an svg node in a certain css class and take it out, causing change in display?

Yep, and it’s kinda easy. I can also address the svg elements by id and change them:

<style type="text/css" media="screen">

.selected {
  stroke-width: 2px;
}

.node {
  stroke: red;
}

</style>

<svg id="derpvas" width="100%" height="500px" style="border: 1px solid #ffffff" >
  <rect id="derp" x="10" y="10" width="100" height="50" class="node" />
  <path d="M 50 50 L 200 200" stroke="green" class="connection" />
  <text id="msg" x="50" y="200" stroke="white">Hello</text>
</svg>

<script>

txt = document.getElementById("msg");

function on_click(event) {

    classes = event.target.classList;
    if (classes.contains("node") || classes.contains("connection"))
    {
        classes.add("selected");
        txt.textContent = "DERP";
    }
    else
        txt.textContent = "HERP";
}

svg = document.getElementById("derpvas");
derpvas.addEventListener("click", on_click);


</script>