Create frontend API for embedding in other applications

[jgosmann]

While working on integrating Nengo GUI with JupyterLab (nengo/jupyterlab-nengo), I realized that it would be good to have a proper API for the frontend that makes such integration easier, more consistent, and less fragile with regard to future changes. In this issue I'll mainly note what such an API should provide for jupyterlab-nengo. With the frontend refactoring still being WIP (#805, #806), it does not seem fruitful to implement such an API yet. But with the refactoring, the GUI might already be much closer to having such an API? (I hope.)

Most importantly, the API should provide a unified interface for events. In jupyterlab-nengo, I care about three specific events:

• The editor content gets changed.
• The file gets saved.
• The file gets renamed.

Currently, each of these events is listened for in a completely different way. For changes in editor component, a callback is registered directly on the ACE editor which provides an input event (ace.editor.on('input', (e) => { ... });). This isn't too bad, but it would be nice to have this abstracted from the actual editor implementation (maybe we swap it out in the future or provide multiple editors).

The save event is obtained by adding an additional listener to the save button (getElementById('Save_file').addEventListener('click', () => { ... });) which is a quite different style, but also requires that the ID of the save button does not change and no other save buttons or autosave are added. Writing this I realize that it probably does not even work for the Ctrl+S shortcut.

Finally, the renaming of file gets detected by observing changes to the field in the toolbar displaying the filename. This again depends on the ID of that element and seems pretty fragile with respect to potential future changes. Also the API to do this is cumbersome and completely different from the first two cases:

let mutationObserver = new MutationObserver((mutations: Array<MutationRecord>) => {
    for (let mutation of mutations) {
        if (mutation.type == 'childList') {
            // new filename accessible as mutation.addedNodes[0].textContent
        }
    }
});
mutationObserver.observe(document.getElementById('filename'), { childList: true });

Furthermore, a few other random things that would be useful:

• Function call to set model code/editor content (independent of exact editor implementation).
• API to retrieve and set dirty state (e.g. whether the editor contains unsaved changes). This should enable and disable the save button accordingly.
• Function to notify the frontend that the file has been renamed? (not sure about this one, because it is sufficient to just reload the URL with an updated ?filename=...)

[jgosmann]

I suppose it could also be helpful if the loaded code would be handled by a model with a specified interface that the editor and and other components interact with. That would allow to replace the model instance wtih a custom implementation in Jupyter Lab that keeps itself in sync with the model used by Jupyter Lab (or might even just be a proxy).