Configuration viewer development continues full steam, powered by my weekly caffeine hit.
The config viewer now persists data through both refreshes and application shutdowns. This ended up being fairly easy to implement thanks to an electron specific library: electron-store.
npm installing and requiring the library, it was as simple as setting key/values using
set and retrieving them later on using
Currently the only thing persisted is the configuration file itself. I could persist whether certain parts of the view are shown or not, but for now I’m satisfied with not having to drag a file in each time I refresh the application to see development changes.
Field Info View
I’ve added a pop-out view for users to get some filtered information about the field they clicked on. For now, it has two very simple pieces of information about where a field is stored, as well as how it’s used when a client sends a request to create a new record.
To display the pop-out I’m directly manipulating the classes on particular elements in order to show or hide the info view.
To get the information itself I decided to use the event system to communicate between the
main process and the
renderer process for the currently displayed page. Basically when a user clicks a field the
renderer process sends an event over to the
main process requesting that it sends certain information about the fields. The
main process then asynchronously replies with another event, which the
renderer uses to trigger the information to be displayed.
user_click -> renderer -> main -> renderer -> DOM
Raw Field View
Displaying raw JSON ended up being a bigger time sink than I expected, as I forgot something vital: HTML doesn’t care about white space in a string.
Early on I figured out I could easily use
JSON.stringify to pretty-print some JSON, but I was unable to get the JSON to display as anything but a single line of awful, unreadable information. All of my googling suggested that I was doing it correctly.
After realising my error, I started using more appropriate search terms
HTML pretty print JSON
which led me to the solution I implemented. It turns out if you have a
code tag inside a
pre tag, white space around pretty-printed JSON will be maintained when rendered.
// This is gross p.appendChild(text); newEle.appendChild(p); newEle.setAttribute("data-field", fieldJSON.schema.id); document.getElementById("field-view").appendChild(newEle);
So before I go any further I want to look into putting some kind of
component/template library into place, to handle the display of various bits of the application’s markup.
This should result in some better separation of application logic and display markup.
I know you can put
react into an
electron app, but I’m not sure if I want to do that, so I’ll be looking into alternatives first.