Dynamic diagram

Dependencies

Third-party components

Dynamic diagram uses

• cytoscape,
• and socket.io

but in order to work offline, preinstall script downloads it inside this folder

- public
  - diagram
    - lib

So, if you do a npm install or npm i this process will occur automatically. For further explanation or if you need to upgrade the current version of these libraries, please see download-libs.sh.

Fonts

We use Inter font inside the dynamic diagram page, but instead of using a CDN we have manually downloaded a WOFF which is a light version of the font. This font file is located in a special font folder:

This file is < 17 kb size, so it's not .gitignored, but we want to keep a minimum amount of typefaces (a.k.a. fonts) used. For now, just one is enough.

If you plan to change the typeface, keep in mind these resources:

• 5 steps to faster web fonts
• Google Font helper, allows you to convert a google font into a woff file (collecting only required fonts of a specific typeface, remember that bold/italic/regular is a font and Inter/Verdana/Noto/Ubuntu is the typeface name)

Running everything locally

This strategy allows us to have all dependencies in local files inside the server: you don't need Internet connection at all in order to run wollok-ts-cli and open a dynamic diagram.

All files in public are accessible via localhost:3000 web server.

Interaction between REPL and Dynamic Diagram

Every time we start the REPL, we have

• a client process (the REPL)
• and a server process (Node web server, hosting index.html with dynamic pages)

The communication from client to server is achieved via socket.io, emitting these events:

• initDiagram: dynamic diagram started for first time. The server will set the dark/light mode, and eventually any other configuration.
• updateDiagram: any time there is a change in Wollok VM. We call updateDiagram 1. on start, 2. on any REPL command executed.